Debugger CSS and HTML in the browser

Every web application developer needs a CSS and HTML debugger to increase productivity. Currently, most browsers include a debugger of this type pro defect. I will focus on the two browsers most used by blog users, which is FireFox, followed closely by Chrome.

To access the debugger, just click with the right mouse button on an element of the web that we want to debug (for example a link or an image) and choose the option “Inspect element”.
After doing the above we will see that some toolbars appear with CSS and HTML code to be able to examine it and be able to debug it and optimize it. We can even modify the code directly and see the result on the screen.

FireFox CSS and HTML debugger.

The debugger that it brings by default is quite complete and simple. To have all the options on the screen, you must activate “Style” (ALT + S) and the “Marking Panel” (ALT + M) and we can see both CSS and HTML code.
One feature that I would dare to say unique about the FireFox debugger is the “3D View” that allows us to see the different layers of HTML elements in relief and thus understand the code in an intuitive and visual way.
As a default tool it is very good and its use can save you hours of work.

Chrome and CSS CSS debugger.

It is similar to FireFox but its interface is somewhat different. It shows us directly the HTML code and the CSS. It has an advantage over FireFox and it shows colors from hexadecimal value in a small square. At the same time if we click on that square we can choose another any color in a color picker.
In terms of functionality it is more complex than FireFox and offers more options and possibilities for the developer, but its advanced is more complex.

If you use Chorme as a browser, the default CSS and HTML debugger is sufficient, I would not use any plugin or extension for the elderly.

FireBug the best CSS and HTML Debugger.

This debugger was originally designed for FireFox although today there is a Lite version for Chrome. It must be said that this debugger exploits its full potential using it on FireFox, which is what I recommend since in Chrome you can use the debugger as an effect that the browser brings.

First you have to install FireBug on FireFox from its official website .

Once its use is installed, it is very simple, right-click on an element and click on “Inspect element with FireBug” and the two screens with CSS code and HTML code appear. We can also enable / disable FireBug from the new icon that appears in the FireFox toolbar at the top right.


Leave a Reply

Your email address will not be published.