Browser Dev Tools for Mobile!

#webdev #devtool #browser #debugging

Browser Dev Tools for Mobile!

Intro

Modern day web browsers provide an important tool that we, web devs love and live for. The DevTools. We use it for

Debugging the JavaScript code on the client side.
Test and tweak the styles.
View the webpage in 3D to understand z-index.
Intercepting HTTP requests.
View the webpage on different devices' screen dimensions. Basically, it's the Swiss Army Knife that makes our lives easier. ## BUT!! How about doing the same stuff on the mobile devices? What if there's a bug that's showing up in only the mobile devices? Well, I personally have run into such cases several times and there's honestly no mobile App that's going to save our bum or at least make things easy. Well good news for us because I've found an approach that honestly blew my mind! ## The Solution I'm using my Android Smartphone as I write this article. And we'll be using Chrome browser. This approach has a tiny prerequisite:
You need to have developer options enabled on your smartphone before you proceed.
Both your PC and your smartphone should be under the same network.
We'll be using the Chrome Browser for this article. This means that you'll be needing Chrome both your PC and your smartphone. That's it! Now let's go step by step, shall we?

Step 1:

Connect your smartphone with your computer with a USB cable.

Step 2:

Open Chrome browser on your PC and type the following URL on the URL bar:
chrome://inspect/#devices
And you'll get a view like the following:

Step 3:

Now, once you connect your phone with your PC, you'll see the following message on your notification tray. Click on it.

Step 4:

Search for Wireless Debugging. Then allow it.

Step 5:

Now open your chrome browser from your phone and open any website. Then look at your PC's chrome browser and you'll find all the tabs opened on your phone. Like so.

As you can see, I have opened W3School's JavaScript Tutorial article's page.
Now go ahead and hit inspect.

Voila!! 🥳🥳 You've got the DevTools to inspect your website from your mobile! What's even crazier is that you can also interact with the website form your PC and do whatever you want with the DevTool!!