How to Debug your website in Android Chrome

Hello everyone. Today I came across one really good way to debug a website in Android Chrome. Its really cool stuff . You can debug your website in android chrome the same way we use developer tools in chrome desktop.

Let me take you to the steps of how to do this… 🎆

Welcome to Remote Debugging 💥 🌟

Remote debug live content on an Android device from your Windows, Mac, or Linux computer.

Here I will take you through how to ,

• Set up your Android device for remote debugging, and discover it from your development machine.
• Inspect and debug live content on your Android device from your development machine.
• Show the content from your Android device onto a Developer Tools instance on your development machine.

Requirements 🖥 🛠

Have this in your Mac/Windows/Linux machine

• Chrome 32 ^+
• USB drivers (Only for Windows)
• A USB cable for Android phone to connect to development machine

For the Android mobile

• Android 4.0 ^+
• Install Chrome for Android (Try to keep the latest one 😉)
• Enable the USB debugging in the Android Developer options.

Let’s Try It .. ❗️❗️️ 😍

Let’s try out this. Open the Chrome in development machine and click on the options and select Developer Tools.. In the Developer Tools you will see Main menu options icon. Click on it and select More tools. In the More tools you’ll see lots of options. Select the Remote devices and it will open one more tab . In that you will be able to see the connected mobile devices (Make sure that Discover USB devices is enabled).

Remote device tab.. !!

Now the fun part 😻 … Select any of connected device and in that device open the chrome . You can start debugging in two ways

1. Type the url of your website in the open tab of desktop remote connection tab .

Open the URL in Android chrome from Development Machine

2. Open the url from the mobile chrome browser — Type the url in Android Chrome tab

When the URL is loaded you will be able to see something like this,

Check the Inspect button.

Now click on the Inspect button in the right side of the web UR, that you want to .

Now you you can see the logs , network calls , memory usage etc..

Remote Debugging Console for android Chrome.

That’s it folks. 👏 👏👏👏…. ❗️❗️❗️❗️❗️….

If you like my post and want to get future update, do click 👏👏👏, follow me on medium.