How to debug your web development with a mobile screen?

mate
3 min readOct 26, 2023

--

Hello guys!

Do you develop website UI? I think a lot of people have struggled or are struggling with it now. I understand how pain in the ass it is to adopt a UI that is only developed for desktop screens but mobile ones.

I have been developing websites using javascript, html, and CSS. Mainly, I developed a website for desktop-size UI so I didn’t have any knowledge of responsive design. However, I started thinking that I wanted to create a website from scratch by myself. So I started studying structure design, UI design, and of course coding. Through this study, I found some tips that are very useful for responsive web design development. So today, I want to share them and boost your web development!

Today I wanna show you how to debug the web UI with a mobile screen.

Debug with mobile UI on a browser

Firstly, you can’t check if the UI is working well unless you can debug your development with a mobile-size screen. So I want to tell you how to debug with a mobile-size screen. I’m going to explain with Google Chrome browser.

Firstly, open a browser and open a localhost URL like this.

And then, you click the right button of your mouse or double-finger click on your magic board and click inspect like this.

After that, there is a panel on your screen. So push the screen-switch button at the top left corner.

Then, you can see another screen. So lastly, you can choose the screen you want to debug by selecting the one from the selection button on the top navigation bar.

Then, you can debug your UI with a mobile screen.

How was that? This is the first article on how to debug your web development with a mobile screen.

I hope this boosts your web development!

If you like this article, smash the clap button!

Tschüss!

--

--

mate
mate

Written by mate

I'm learning basis of programming in 42 Heilbronn. I will make articles that my granma can understand!