How I tracked down bugs on design

Today, I needed to translate static html pages (with javascripts) to dynamic php pages.
But that was more difficult than I thought. I will share how I debugged the php + html + css + javascript pages.

1. I primitively and foolishly translated the static html to php (.twig file) following my instinct.

2. Full of bugs on the design.

3. Track down the bug. At first, I tried to find what is causing the bug by deleting elements one by one. For example, we have this page:

Wikipedia toppage

And the earth is supposed to be at center, but it is leaning to right side...!

I guess it is because of something inside body. So I deleted most of the suspicious elements except the earth symbol in the body. How? Open the page with google chrome and hit F12.

This is the developer tool. Right-click on a element you want to delete and choose "Edit as html". Then you can delete the html elements (which will not be saved. The original html files will not be affected from here). Or just simply choose "Delete element" which will delete the element (and it will not affect the original file too).

Suspicious elements were deleted, but the earth's design is still leaning to right. So seems like, the symbol itself is suspicious. At least, the deleted elements were not causing the problem. So we can track down the bug this way.

So I check the img tag of it. I edit the attribute of the tag by "Edit as html".

 The problem was hard-coded width attribute of the tag.

I removed it and the bug was removed :) This is how I tracked down the bug on design.