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

Question

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)?

score 321 · Accepted Answer · edited Jun 19 '23 at 15:41

321

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

Connect your Android device
Select your device: More tools > Inspect devices* from dev tools on pc/Mac.
Authorize on your mobile.
Happy debugging!!

* This is now "Remote devices".

edited Jun 19 '23 at 15:41

isherwood

58,414
16
114
157

answered May 16 '16 at 14:35

PseudoAj

5,234
2
17
37

"Authorize on your mobile." - how? – O. R. Mapper Mar 03 '17 at 11:31
118

Is this possible do this without an external computer? – Eric Reed Aug 20 '17 at 16:57
127

Question asks for *open developer tools console in Chrome on Android phone?* your soultion requires an seperate debugging machine. In your answer debugging is not on the phone itself – Fennekin Nov 02 '17 at 16:32
8

There is no other way I am aware of @fennekin. Please feel free to update if you think there is better way, – PseudoAj Nov 04 '17 at 05:01
35

As of jan 2019 , I was not able to find Inspect devices under More Tools, I finally found it at chrome://inspect, and you need to allow usb debugging from your phone – Abhinav Singh Jan 21 '19 at 10:46
1

Now it is called "Remote devices". – user202729 Mar 03 '19 at 11:30
1

This answer requires a PC, which is not helpful for debugging mobile specific web page issues, IMO. – Lady Aleena Sep 16 '20 at 22:15
This answer is outdated, the answer by @Daniel Lemke is probably the best replacement. – John Miller Oct 06 '22 at 16:01
"Inspect devices" was removed from Chrome. You now have to use the address "chrome://inspect/#devices" on the host computer, but it doesn't work for me. Doesn't find my connected remote device. – David Spector Dec 07 '22 at 21:38

score 124 · Answer 2 · answered Sep 25 '18 at 21:24

124

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)

answered Sep 25 '18 at 21:24

trogper

1,516
1
12
14

3

Very good companion to tools like Termux which make development on lone mobile devices real! I already integrated `eruda-webpack-plugin` into one project: `npm i eruba-webpack-plugin --save-optional`. – vintprox Aug 03 '19 at 09:50
Easiest way to get what is in console – makwana.a Aug 11 '19 at 03:07
Awesome solution. It is available in a CDN. – netishix Sep 27 '19 at 04:31
1

This doesn't seem to work for me. Pasting it in the address bar (and then readding 'javascript:') doesn't seem to do anything. – B T Dec 17 '19 at 10:20
@BT some websites restrict to loading scripts from from listed allowed domains. Try it on another website. – trogper Dec 17 '19 at 13:12

fatemeh sadeghi · Answer 3 · 2023-02-14T21:05:35.833

121

To use remote debugging first activate developer mode in Android.

In Android go to Settings, search build number, then click on it several times to activate developer mode
In Android go to Settings > Developer Options > Enable usb debugging
Connect to computer with usb cable
In desktop Chrome type chrome://inspect , then press enter
In mobile open url then check it, on this page on desktop chrome://inspect/#devices

edited Feb 14 '23 at 21:05

answered Jun 09 '21 at 11:08

fatemeh sadeghi

1,757
1
11
14

1

What exactly should "happen" in chrome://inspect/#devices when I open a URL on the phone? Because nothing seems to be happening there, even though I followed steps 1-4. In particular, nothing is listed in the Devices subpage, my phone does not appear there, even though I did receive an authorization request on the phone and accepted it. – Szczepan Hołyszewski Apr 20 '22 at 11:28
@SzczepanHołyszewski The link that you open in the mobile is listed in the PC console and you can debug it, just as you open a link directly in the PC and debug it. If this is not done correctly, Google Development may be blocked So use a VPN or proxy on your PC and try again – fatemeh sadeghi Apr 24 '22 at 08:08
2

Totally works on 12.12.2022 – Yolo Dec 12 '22 at 21:30

score 55 · Answer 4 · edited Jun 19 '23 at 15:42

55

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.

edited Jun 19 '23 at 15:42

isherwood

58,414
16
114
157

answered Jun 09 '21 at 14:09

Daniel Lemke

1,966
18
24

Why can't I open Chrome with `chrome://inspect#devices` page loaded directly from the terminal, like: `$ chrome 'chrome://inspect#devices'`?! – Piotr Henryk Dabrowski Dec 01 '21 at 15:04
My Android 11 keeps changing the url to chrome://inspect/#devices then complains that the site can't be reached. – David Spector Dec 07 '22 at 20:50
Did you follow the prerequisite steps like enabling USB debugging etc.? – Daniel Lemke Dec 16 '22 at 07:16
@PiotrHenrykDabrowski and @DavidSpector You can't open `chrome://inspect/#devices` on your phone's Chrome, you have to go to it on your computer, as per instructions. – Studocwho Apr 05 '23 at 21:22

Pawel · Answer 5 · 2022-10-10T22:30:27.773

37

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.

edited Oct 10 '22 at 22:30

answered Jan 17 '20 at 22:01

Pawel

16,093
5
70
73

1

This is great, not remote! – Csaba Toth Jul 11 '21 at 20:01
1

Brilliant! Works perfectly. TYVM – jay-danger Feb 03 '23 at 17:29
1

Just tried it out, Works great! Thanks! – MichaelEr Jul 08 '23 at 16:53

score 22 · Answer 6 · answered Oct 07 '19 at 03:29

22

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!

answered Oct 07 '19 at 03:29

Sensei James

2,617
30
36

This is a good starting point, but doesn't show console logs – skplunkerin Aug 02 '20 at 13:17
1

@skplunkerin not sure what you mean? Console log output: https://lh3.googleusercontent.com/IRfklLLjZk265Dt99YOuSXrEnV4PSYMXrKgL6VkbVQ_soWn3O8WfL3Eem9d8YzdFAb0=w3360-h1856-rw – Sensei James Aug 10 '20 at 21:30
1

Oh, I thought that only logged XHR requests, not all console logs. Thanks! – skplunkerin Aug 11 '20 at 20:39
3

this is not called rest params, but just variadic function / multiple params – caub Sep 28 '21 at 21:21
4

The link is now a 404 – Peter V. Mørch Feb 06 '22 at 04:32

score 13 · Answer 7 · edited Jul 23 '18 at 22:56

13

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

edited Jul 23 '18 at 22:56

divibisan

11,659
11
40
58

answered Jun 12 '18 at 06:29

John Balvin Arias

2,632
3
26
41

FYI: You might encounter a situation that the console would NOT show up. Based on some conversation at the end of [its official homepage](http://www.hnldesign.nl/work/code/mobileconsole-javascript-console-for-mobile-devices/#comment-76505), you can try to explicitly `mobileConsole.init()` it. That trick helps in my case. YMMV. – RayLuo Jan 19 '19 at 03:17
1

that link still works, it just takes long time to load. Nonetheless I can summarize that those conversation between me and that lib owner ended up with him adding the following information into the Notes section in his main page: "If mobileConsole doesn’t start (mobile detection fails), you can either override autostart by setting overrideAutorun to true or add the following script to your page: `if (!mobileConsole.status.initialized) { mobileConsole.init(); } ` " – RayLuo Jun 25 '19 at 21:28

score 6 · Answer 8 · answered Sep 14 '22 at 21:36

6

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.

answered Sep 14 '22 at 21:36

KhalfaniW

211
2
3

BlackHammer · Answer 9 · 2022-06-12T21:31:55.900

4

Use Kiwi Browser app

Allows you to install all chrome extensions as well as access dev tools (console, ...)

Or

to access and test all the consoles of different mobile browsers, you can use the following similar websites:

https://www.browserstack.com/

edited Jun 12 '22 at 21:31

answered Jun 12 '22 at 21:24

BlackHammer

91
1
3

Using Kiwi worked great, thanks! – Crossoni Jul 13 '22 at 10:09

score 1 · Answer 10 · answered May 26 '21 at 04:33

1

Remotely debugging Firefox is another option. the steps are mentioned here

answered May 26 '21 at 04:33

zahra_oveyedzade

988
10
17

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

10 Answers10

Use Kiwi Browser app

Or

Linked

Related