I have to debug some problems on website I recently created that occur only in native android browser on some tablets. I don't have access to physical device so I decided to to install Android Studio and created tablet AVD(android virtual device). Process run smoothly and now I can open native browser in virtual device and check my website.
I can see the same errors as those reported on tablets(that's great) but I cannot figure out how to run any kind of devtools in native browser. Even access to console output would be enough.
I'm running android studio on Ubuntu 18.x LTS, but I guess my question is not platform specific.
I would prefer any solution that can be run on virtual device(like some additional app that acts as debugger), even if it would give me only console output, over more sophisticated ones that require more complicated configuration.
But, honestly, I would really appreciate any kind of help.
you have to use the Chrome debug bridge; accessible through chrome://inspect on the desktop browser... connected devices will show up there, as long as USB debugging is enabled; that should work with an emulator, as well.
Related
I am creating a purely browser based app - HTML and JavaScript.
I do not have an Android IDE installed (nor one for iOS) - and would prefer not to have to install one and perform remote debugging.
Developing on my PC, I use the Chrome browser and the developer tools to view the JavaScript console in order to debug.
How can I do that on an Android tablet (or, later, iOS)? I prefer a purely browser based solution, but could accept an Android/iOS based app.
Try https://github.com/liriliri/eruda
All you need to do is add this snippet on top of the page:
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
And you get an interactive set of developer tools similar to those in Chrome and Firefox. Here's a screenshot:
Just released for iOS, Chrome 73 now supports the option to see console.log.
If you’re a website developer, you can now view JavaScript console
messages. Navigate to chrome://inspect to enable, then perform desired
actions in another tab. Switch back to the same chrome://inspect tab
to view any printed JavaScript console logs.
see here in "What's New" section or in "version history" 73.x version.
For Android you can use remote debugging through chrome as described here
I'll summarize/rewrite the steps (for browser based debugging) here in case the link ever goes down.
Requirements:
For browser tabs: Android 4.0+ and Chrome for Android
A USB cable to plug in your Android device
Chrome 32 or later installed on your development machine
Set up:
Enable USB debugging on your device.
Navigate to chrome://inspect/#devices on your desktop Chrome browser. (Alternatively, to get to the same screen, you can select Chrome menu > Tools > Inspect Devices)
After connecting, you may see an alert on the device requesting permission for USB debugging from your computer. Tap OK
Chrome should now display the connected device
Open up chrome on your Android device and navigate to the page you want to debug/inspect. The page should show up on your desktop browser and you should be able to inspect it.
If for some reason you have an older version of chrome and cannot upgrade. There is a plugin that you can install to accomplish the same thing.
I was searching for a while for something like this. Firebug Lite used to be an option but has been abandoned. Before discovering eruda (as mentioned elsewhere in this thread), I developed my own open source console. It's pretty light on features, but it does the main things - capture JS errors, and allow you to run commands to inspect variables and object on your page.
Here's a demo:
It's activated by just placing this script tag on your page:
<script src="https://cdn.jsdelivr.net/gh/SimonEast/MiniConsoleJS#main/console.js"></script>
Open source, GPL licence. Available at: https://github.com/SimonEast/MiniConsoleJS/
we are shipping a Cordova WebApp for tablets with minified source using uglify2-compressor via grunt-contrib-requirejs. We generate source-maps for debugging which work flawlessly using the chrome desktop browser via remote Debugging on a KitKat Android Tablet.
Now we like to send error reports from our customers to our server. The Android WebView does not seem to care about our source maps. Therefore we get error message like "line 1, char 1231231" - not very helpful...
The Question is: Is it possible to use source-maps with the Android (and iOS) Webview maybe using a Cordova plugin or do we have to wait for an update (Chrome and Firefox Desktop are able to parse the maps...) and ship un-minifies code so that we are able to get the line number of the occurred error?
From Chromium discuss topic
DevTools downloads source maps using the front-end browser, not the one that runs the inspected page. So file://android... is never going to be accessible. You need to point to the files on your development box instead.
I have seen several posts that talk about remote debugging of javascript code on Android, but they all miss the point of what I am trying to do.
I have a Nexus 7 and I want to use it as a remote development environment when I am away from my desktop. I have created a chrooted debian distribution to run apache and php and git (via ssh). This chrooted environment mounts a subdirectory of the /sdcard directory from outside the chroot environement. Apache document root of a virtual host is pointing at a directory within this. Before leaving the desktop I can git push the latest release to the tablet. When I return git pull can get what I have done back again.
I then (when away from home and NOT connected to any network) can edit the code using an Android editor (using the 920 text editor), but then run the browser to look at what I have developed using localhost the apache virtual host picks this up and displays it.
The application I am developing IS NOT FOR ANDROID - it is ultimately for the desktop. But I want to be able to debug it like I was on the desktop. Breakpoints and single stepping are the prime thing, but also I tend to use the html section in firebug to adjust my CSS before editing it.
Is there a way to get either the chrome developer tools or firebug add on for firefox to load into a browser that will run in android?
I use Firebug lite bookmarklet for iPhone and iPad, never tried on Android, check this out http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone it must be similar on Android.
To activate it use this steps:
Create a new bookmark or bookmark a page
Rename the bookmark to “Firebug”
Copy the textarea link:
javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?Fi+'NS':Fi;Er;Er;Er;(Fe[0]||Fe[0]).appendChild(E);E=new%20Image;Er;})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');
Edit the Firebug bookmarklet, remove the URL and paste the
bookmarklet
Choose “Done” (on the virtual keyboard) and you’re all set
Hitting that bookmarklet should give you a fully functioning Firebug at the bottom of your mobile device.
At least not for Firefox Mobile, because all the devtools are still partially based on XUL, where the Firefox Mobile is using Native UI.
I don't think there is any plan in the close future to change this situation; it's not a common scenario.
However, you should be able to do something using the Debugger API, creating an add-on for Firefox Mobile. But I don't know if it's worthy.
I'm trying to debug a problem that only occurs when I access a mobile website from a mobile browser. I strongly suspect that the root cause of the problem is due to caching that occurs when you access the same page several times.
I can reproduce the problem consistently when I access the page from my Android phone, but if I use a desktop browser the problem never occurs.
Because I can't use any developer tools on my Android phone, I really need to reproduce the problem from a desktop browser, so that I've some way of debugging into it. I've already tried using both Firefox and Chrome with an appropriate setting of the User-Agent header (so that the mobile version of the site is displayed), but that doesn't work.
Is there a better way to emulate the behaviour of a mobile browser from the desktop, in a manner that allows the client-side code can be debugged? FWIW, I'm fairly confident that I could also reproduce the problem on an iPhone, but don't have one available.
You can use a debugger on your phone, using chrome debugger.
Nowadays, you can just navigate to chrome://inspect/#devices after plugging your device in.
If that doesn't work, you can use the old method:
Connect your mobile device to the host using a USB cable
On the mobile device, launch Chrome. Open Settings > Advanced > Developer tools and check the Enable USB Web debugging option
Issue the following command in the console on your host machine to enable port forwarding:
adb forward tcp:9222 localabstract:chrome_devtools_remote
Open desktop Chrome and navigate to localhost:9222
Choose the page you need to debug
You can now start debugging and profiling mobile content in the Developer Tools on your desktop
I'm developing a JavaScript application that needs to run on the Google Android Phone OS. Is there a way to enable the JavaScript Error/Debug console within Safari on either the Android Emulator or an actual device? If so any instructions on how to do so would be appreciated.
It looks like, with the Android 2.0.1 SDK you'll need to filter on "browser" instead of "WebCore"
A quick Google turns up this blog post (posted after you asked your question), that should at least let you see any Javascript errors via the Android Debug Bridge using the command:
adb logcat WebCore:V *:S
Not quite the same as a full debug console though.
On Android write about:debug on the address line when the current page is the page you want to debug. you will get access to the console.
I know your question is about Safari, but you might want to look into using Chrome instead. You can now use Chrome's desktop developer tools to debug and profile apps on your Android device.
Here's how:
On Android Chrome, go to settings -> Developer tools and check "Enable USB Web debugging"
On the desktop, run adb forward tcp:9222 localabstract:chrome_devtools_remote
Now on Desktop Chrome, navigate to localhost:9222.
You should see a list of the pages you have open on your phone. Click the one you want to debug/profile.
Detailed instructions are here
I have discovered that you can get this debugging information on the phone itself, without needingn to use adb or plug it into a computer, just download a log viewer.
Check the link for more info.
You can view the log and much more with weinre
From the Weinre docs
weinre is a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it's designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.