Chrome devtools is a great resource for web developers. With devtool, developers can view console logs, errors messages, local storage, session storage and view the source code of a website.

You can access these tools by pressing F12 or right clicking on a web page and clicking 'inspect'. But how can you view them for mobile?

How can I access devtools on mobile?

You can't view devtools directly on mobile but you can connect the device to a PC via USB and see dev tools for each browser tab open.

So how do you do that?

Enable developer mode

First let's enable developer mode on your android device. This is done by opening up your phone settings and search "Build number". Once you find it, tap the build number several times.
Developer mode has been enabled. Now search for "usb debugging" in your settings and enable. You have now set up your developer mode.

Connect to your PC

With developer mode enabled, connect your phone to your PC with a USB.

Open up Chrome dev tools

Open up chrome on your PC and navigate to chrome://inspect/#devices. You will see the connected devices here and all the chrome tabs open on your mobile device.

If you right click on the tab and click inspect tab you now have access to all the developer tools as if you are viewing the site on mobile.

Isn't that awesome!!

To say thank you, you could buy me a coffee?