Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to open developer tools console in Chrome on Android phone?

People also ask

Can you access dev tools on mobile?

Yes, we have integrated Chrome DevTools on select browsers on real devices (iOS & Android) in Live. To access the same for debugging your website when testing on mobile devices, click on the “DevTools” button on the in-session toolbar.

How do I view console in Chrome mobile?

Click the Inspect option under the tab you want to view the web console for. A new window will open. You can interact with the Chrome browser on your Android phone via the left panel in this window or you can interact with it on your device so long as you do not disconnect it from your computer.

How do I get to Developer options in Chrome mobile?

To enable the Developer options, tap the Build Number option seven times. Note: As per the official Android documentation, one can find this option in one of the following locations, depending on the Android version: Android 9 (API level 28) and higher: Settings > About Phone > Build Number. Android 8.0.


You can do it using remote debugging, here is official documentation. Basic process:

  1. Connect your android device
  2. Select your device: More tools > Inspect devices* from dev tools on pc/mac.
  3. Authorize on your mobile.
  4. Happy debugging!!

* This is now "Remote devices".


When you don't have a PC on hand, you could use Eruda, which is devtools for mobile browsers https://github.com/liriliri/eruda
It is provided as embeddable javascript and also a bookmarklet (pasting bookmarklet in chrome removes the javascript: prefix, so you have to type it yourself)


to use remote debug first active developer mode in android

1-in android>setting>search bulid number-->then click on it several times to activate developer mode

2- android>setting>developer options>enable usb debugging

3- connect to computer with usb cable

4-in chrome pc type chrome://inspect > enter

5- in mobile open url then monitor in pc chrome://inspect/#devices


Please do yourself a favor and just hit the easy button:

download Web Inspector (Open Source) from the Play store.

A CAVEAT: ATTOW, console output does not accept rest params! I.e. if you have something like this:

console.log('one', 'two', 'three');

you will only see

one

logged to the console. You'll need to manually wrap the params in an Array and join, like so:

console.log([ 'one', 'two', 'three' ].join(' '));

to see the expected output.

But the app is open source! A patch may be imminent! The patcher could even be you!


Kiwi Browser is mobile Chromium and allows installing extensions. Install Kiwi and then install "Mini JS console" Chrome extension(just search in Google and install from Chrome extensions website, uBlock also works ;). It will become available in Kiwi menu at the bottom and will show the console output for the current page.


I you only want to see what was printed in the console you could simple add the "printed" part somewhere in your HTML so it will appear in on the webpage. You could do it for yourself, but there is a javascript file that does this for you. You can read about it here:

http://www.hnldesign.nl/work/code/mobileconsole-javascript-console-for-mobile-devices/

The code is available from Github; you can download it and paste it into a javascipt file and add it in to your HTML