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)?
You can do it using remote debugging. Here is official documentation. Basic process:
* from dev tools on pc/Mac.* This is now "Remote devices".
To use remote debugging first activate developer mode in Android.
chrome://inspect , then press enterchrome://inspect/#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)
eruda-webpack-plugin into one project: npm i eruba-webpack-plugin --save-optional.
The originally accepted answer doesn't seem to be valid anymore. From the current Chrome developer docs, these are the basic steps you need to go through:
- Open the Developer Options screen on your Android. See Configure On-Device Developer Options.
- Select Enable USB Debugging.
- On your development machine, open Chrome.
- Go to
chrome://inspect#devices.- Make sure that the Discover USB devices checkbox is enabled.
After that, open Chrome on your Android device (and confirm the USB Debugging prompt in case it pops up). Switch back to your PC and you should see the currently open browser tabs:
If your device tabs do not appear, you might need to trigger the USB Debugging prompt by activating file transfer on your mobile device.
chrome://inspect#devices page loaded directly from the terminal, like: $ chrome 'chrome://inspect#devices'?!
chrome://inspect/#devices on your phone's Chrome, you have to go to it on your computer, as per instructions.
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.
Edit 2022: It's even better now. The console is built-in and available in the menu.
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 multiple 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!
The Kiwi browser not only allows you to use Chrome dev tools but you can also view the page at the same time.
If you use Android split screen you can open a window and move the dev tools to a new window.
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
mobileConsole.init() it. That trick helps in my case. YMMV.if (!mobileConsole.status.initialized) { mobileConsole.init(); } "Allows you to install all chrome extensions as well as access dev tools (console, ...)
to access and test all the consoles of different mobile browsers, you can use the following similar websites:
Injecting Eruda into the page you are currently visiting or import it as a dev dependency onto your project. You can also demo it here. Make sure you read the github documentation.
For inject it you can paste the code below into your search bar, and because browsers remove the javascript: when you paste it, be sure to reintroduce it. And more importantly, be aware that you are directly running a piece of javascript that source externally hosted code. Make sure you trust the author and have reviewed the code it depends on.
javascript:(function () { var script = document.createElement('script'); script.src="https://cdn.jsdelivr.net/npm/eruda"; document.body.append(script); script.onload = function () { eruda.init(); } })();
For security reasons some browsers have disable running javascript from the search bar.
Remotely debugging Firefox is another option. the steps are mentioned here
You can use remote debugging via Chrome’s DevTools—by connecting your Android phone to your PC and using chrome://inspect—but that setup isn’t always ideal for quick fixes. I ran into this same issue and built a lightweight workaround: a JavaScript tool (logtohtml) that injects a floating console log window right on your page (just add ?logtohtml=true to your URL). It lets you see console output and network activity without needing to plug in your phone.
While it’s not a full replacement for desktop DevTools yet, I'm planning to add more features from DevTools in upcoming versions—think local storage tracking, event logs, and more—to make mobile debugging even smoother.
Hope this helps!
