Developers often turn to an HTML debugger for its ease of use in correcting layout mistakes. The debugging tool effectively provides a graphical user interface for editing the page contents. A typical debugger will display both a preview of the page and the underlying code. Inspecting elements within the page preview provides a clear view of the tag and style attributes affecting the selected element. If the debugger supports live tweaking, then changes made are reflected immediately in the preview window, allowing for quick corrections.
Other tools an HTML debugger may offer include trace style functions and border illustration. Trace style functions allow the developer to figure out which style sheets affect an element and observe the interplay between style sheets. Border illustrations provide graphical lines that mark the edges of normally invisible borders, like the margins around a text field.
An HTML debugger allows a developer to test the markup and code written in a variety of browser platforms. Each web browser follows its own internal rules when choosing how to display or process an element of a website. Computing differences mean elements don't always appear the same in different browsers. Any discrepancies in display or program execution between browsers can then be detected and corrected to ensure all users have the same experience.