how to debug html page on mobile?

Question

I have developed a custom wordpress template based on theme twentythirteen.

The theme works fine on desktop, it's so so on tablets, and looks really wrong on smartphones.

The customized parts (the one that I made) resize correctly to take all the width possible, but the content structure that I kept of the original theme becomes more narrow that the screen. On smartphones the content width is like 20% of the available screen width.

How can I check what is wrong to fix it? I do suppose that it could be the other way around: the customizations stay too big, while the responsive layout resize itself correctly, with the result that the mobile browser scales everything to fit and I get my changes fine and the responsive part very small.

In that case, how could I fix the resize of my custom parts to fit nicely?

Answer 1

I looked for remote debugging and I solved my issue using this solution: https://developers.google.com/chrome-developer-tools/docs/remote-debugging