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

An AngularJS application works fine on desktop, but is not rendering properly on mobile (actual code is showing). This is on an Android phone.

I would like to see what errors are showing in the console.

Is it possible to open JS console on chrome app on mobile (like it is on desktop)?

Answers


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!!

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)


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


You may probably try the Gear Browser, it can inspect elements and debug website just on mobile.

https://gear4.app


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!


Need Your Help

Error inflating class CollapsingToolbarLayout

android android-collapsingtoolbarlayout inflate-exception android-support-design android-studio-2.1

My CollapsingToolbarLayout crashes because of Error inflating class android.support.design.widget.CollapsingToolbarLayout.

Rails 3.2 frequent postgres prepared statement already exists errors

ruby-on-rails postgresql heroku ruby-on-rails-3.2 prepared-statement

I've been digging around stackoverflow trying to find others who get these prepared statements already exists errors.