How can I debug javascript on Android

Question

I m working on a project that involves Raphaeljs  Turns out  it doesn t work on Android  It does on the iPhone   How the heck to I go about debugging something on the Android browser  It s WebKit  so if I know the version  will debugging it on that full version of WebKit produce the same results

User · Answer

You could try https   github com fullpipe screen-log  Tried to make it clean and simple

User · Answer

Raphael is not supported on pre 3 0 Android browsers  that s what your problem is  They have no support for SVG graphics  It does have support for canvas though  If you don t need to animate it  you could render the graphics with canvg    http   code google com p canvg   That s how we got around this issue for rendering SVG icons in the default Android browser

User · Answer

Take a look at jsHybugger  It will allow you to remotely debug your js code for    Android hybrid apps  webview  phonegap  worklight  Web pages which runs in the default android browser  not Chrome  it supports the ADB extension without this tool    How this works  more details and alternatives on the projects site  this was what I found to be the best way      Install the jsHybugger APK on your device Enable USB debugging on you device  Plug the Android device into your desktop computer via USB Run the app on the Android device   jsHybugger   Enter the target URL and page in the app  Press Start Service and finally Open Browser  You ll be presented with a list of installed browsers  choose one  The browser launches   Back on your desktop computer open Chrome to chrome   inspect  An inspectors window will appear with the chrome debugging tools linked to the page on the Android device  debug away    Again  with Chrome on Android use the ADB extension without jsHybugger  I think this already described in the accepted answer to this question

User · Answer

If you are looking for non remote options   On earlier and non rooted Jellybean releases a logcat viewer can be used if android permission READL LOGS is granted via adb once   On firefox  there is a console addon that reads and shows all app logs and there is also firebug lite

User · Answer

You can try YConsole a js embedded console  It is lightweight and simple to use    Catch logs and errors  Object editor    How to use     lt script type  text javascript  src  js YConsole-compiled js  gt  lt  script gt   lt script type  text javascript   gt YConsole show    lt  script gt

User · Answer

Update  Remote Debugging  Previously  console logging was the best option for debugging JavaScript on Android  These days with Chrome for Android remote debugging  we are able to make use of all the goodness of the Chrome for Desktop Developer Tools on Android  Check out https   developers google com chrome-developer-tools docs remote-debugging for more information     Update  JavaScript Console  You can also navigate to about debug in the URL bar to activate the debug menu and the JavaScript error console with recent Android devices  You should see SHOW JAVASCRIPT CONSOLE at the top of the Browser    Currently in Android 4 0 3  Ice Cream Sandwich   the logcat outputs to the browser channel  So you can filter using adb logcat browser     S     Original Answer  You can use the built in console JavaScript object to print log messages that you can review with adb logcat   console error  1    console info  2    console log  3    console warn  4     Produces this output   D WebCore    165   Console  1 line  0 source  http       D WebCore    165   Console  2 line  0 source  http       D WebCore    165   Console  3 line  0 source  http       D WebCore    165   Console  4 line  0 source  http         Determining the version of WebKit  If you type javascript alert navigator userAgent  in the location bar you   ll see the WebKit version listed e g   In Chrome  Mozilla 5 0  Windows  U  Windows NT 5 1  en-US  AppleWebKit 532 2  KHTML  like Gecko  Chrome 4 0 221 6 Safari 532 2  On Android Emulator Mozilla 5 0  Linux  U  Android 1 6  en-us  sdk Build DRC76  AppleWebKit 528 5   KHTML  like Gecko  Version 3 1 2 Mobile Safari 525 20 1  N B   Versions of WebKit that are not part of a Safari release have a   after the version number  and their version number is generally higher than the latest released version of WebKit  So  for example  528  is an unofficial build of WebKit that is newer than the 525 x version that shipped as part of Safari 3 1 2

User · Answer

Android studio provide all you need to see console log and other  In logcat just filter to   Web  Console  and you will see your js logs     If you get any issue you can add this plugin   https   github com apache cordova-plugin-console

User · Answer

FYI  the reason why RaphaelJS doesn t work on android is that android webkit  unlike iPhone webkit  doesn t support SVG at this time  Google has only recently come to the conclusion that SVG support an android is a good idea  so it won t be available yet for some time

User · Answer

Full Chrome remote debugging of Android native browser on a Galaxy S6 on Android 5 1 1    Enable USB Debugging on phone  Settings  about  rapidly tap build number  developer settings  USB debugging  Open  Internet  Navigate to  about debug   you will see an error  MORE menu   Settings   Debug   Remote Debugging Attach phone to computer with USB cable On the phone  in the Internet web browser  open the site you want to debug Open Chrome on computer Navigate to  chrome   inspect  Click inspect on the browser tab you want to inspect   The Galaxy S5 devices shows in Chrome but the tabs only show after you restart  After restarting and attempting to attach  the mobile browser crashes

User · Answer

No one mentioned liriliri eruda which adds its own debugging tools meant for mobile websites apps Adding this to your page   lt script src  quot   cdn jsdelivr net npm eruda quot  gt  lt  script gt   lt script gt eruda init    lt  script gt   Will add a floating icon to your page which opens the console

User · Answer

The about debug  or chrome   debug both of which say page cannot be found  but enable the Debug menu in the settings   when tried on Chrome or Opera on Android KitKat 4 4 2 on a Samsung Tab  If you have ROOT permissions on your device  you can view the console messages directly on the device  Use an app like CatLog to view the log output - https   play google com store apps details id com nolanlawson logcat amp hl en This will let you view all logcat activity   In Android KitKat 4 4 2  the browser console is output to the Chromium channel  You could filter by  Chromium  to get all browser activity  include browser s internal activity   or simply filter by  Console  to only see the Browser console log   chromium  INFO CONSOLE 3     The key  x-minimal-ui  is not recognized and ignored    source http   mywebsite com   3

User · Answer

When running the Android emulator  open your Google Chrome browser  and in the  address field   enter   chrome   inspect  devices   You ll see a list of your remote targets  Find your target  and click on the  inspect  link

User · Answer

The local debugging about config    options seem not to work in 2020  chrome ff    browsers anymore   Another browser with non-remote js console is  DevBrowser  or WebInspector  file picker not working

User · Answer

The http   jsconsole com   http   jsconsole com remote-debugging html   provides a nice way you can use to access the content of you webpage

User · Answer

My solution is  for the stock browser     Stock Browser  consolo log  into the JS source code Debug USB enabled Android SDK From Android SDK   monitor bat Monitor filter as the attached image

User · Answer

You can try  javascript-compiler-deva  from npm library by running  npm install javascript-compiler-deva  command and then running the compiler is using  node compiler js    It creates a server at port 8888  You can then hit  http   localhost 8888  and enter your JavaScript code and can see the result of any JavaScript code including  console log  in phone browser itself   It is also hosted in  https   javascript-compiler-deva herokuapp com

User · Answer

Chrome has a wonderful feature that simply takes the actual Android Chrome contents  incl  inspection etc   onto the PC screen      Enable USB debugging on the device  maybe you also need to connect once via adb devices to trigger the  allow communication with     dialogue on the mobile device  connect the Android device to the PC  start Chrome on both  and then navigate to chrome   inspect  devices on the PC  Here  the tabs from the mobile phone Chrome are listed and can be inspected    There s also a detailled manual on the net  https   www till net technologie html-javascript remote-web-debugging-unter-android-und-chrome   found that after adb logcat showed nothing from the browser

User · Answer

I use Weinre  part of Apache Cordova   With Weinre  I get Google Chrome s debug console in my desktop browser  and can connect Android to that debug console  and debug HTML and CSS  I can execute Javascript commands in the console  and they affect the Web page in the Android browser  Log messages from Android appear in the desktop debug console   However I think it s not possible to view or step through the actual Javascript code  So I combine Weinre with log messages    I don t know much about JConsole but it seems to me that HTML and CSS inspection isn t possible with JConsole  only Javascript commands and logging

User · Answer

Try     open the page that you want to debug while on that page  in the address bar of a stock Android browser  type   about debug     Note nothing happens  but some new options have been enabled      Works on the devices I  have tried  Read more on Android browser s about debug  what do those settings do   Edit  What also helps to retrieve more information like line number is to add this code to your script   window onerror   function  message  url  lineNo       console log  Error      message     n     Line Number      lineNo       return true

User · Answer

Put into address line chrome   about  You will see links to all possible dev pages

[android] How can I debug javascript on Android?

Examples related to android

Examples related to debugging

Examples related to webkit