DEV Community

Cover image for Resizing alone doesn't make it mobile first
Bruno Noriller
Bruno Noriller

Posted on • Originally published at Medium

Resizing alone doesn't make it mobile first

Where I'm coming from, I never had to even bother about mobile.

When I did start bothering about it... what was my surprise when everywhere I saw they would just resize the screen and call it a day.

Granted, it was usually because one thing was being explained and most of the time... it will be enough...

Except when it isn't...

Sometimes just resizing your desktop browser isn't enough... you have to use it on the real thing.

And if that's the case... what if I told you, you could have your desktop debugging experience in your phone?

Chrome/Android debug tools

  1. On your Android device, enable debugging
    1. See more here: https://developer.android.com/studio/debug/dev-options
  2. Connect your phone and desktop by USB
  3. Go to: chrome://inspect#devices
  4. ???
  5. Profit?

inspect devices tab

To learn more: https://developer.chrome.com/docs/devtools/remote-debugging/

The basics

If you're having trouble connecting, try unplugging and replugging it (seriously), also make sure "Discover USB devices" is checked.

After it's on, you can click inspect or even open new tabs!

inspect port forwarding

And you probably want to set up the port you'll be using to be forwarded.

inspected stack overflow

And that's it!

You have the full experience of debugging straight from Chrome

  • If you use it from the phone, it's reflected in the inspect window.
  • If you use it from the inspect window, it will reflect on the phone.
  • The area reserved for the bezel and address bar is transparent, but there.
  • Have you ever visited the SO landing page?

Sorry iPhone users... this one is for Android.

Feel free to donate so I would be able to buy an iPhone. 😘

https://buymeacoffee.com/noriller

Cover Photo by Joshua Mayo on Unsplash

Oldest comments (0)