Detecting errors on a web page with Firebug
What is the best way to check our web applications for errors like "duplicate attribute"?
My development team tends to use Firefox and Firebug for web development. We have noticed some bugs entering the codebase, usually duplicate attributes, such as:
<div id="MyDiv" class="hide" class="interestingDiv">
We do not see errors in the Firebug console and we do not see Firebug reporting errors.
We noticed that Firefox itself is aware of these errors. By clicking View Page Source, Firefox displays the second class in red and has a Duplicate Attribute tooltip. However, we need to look for the code we are looking for for any errors highlighted in red.
Surely there is a better way than manually looking at the code? What tools should we use?
Thank,
Phil
source to share
Firefox automatically fixes HTML errors such as duplicate attributes i.e. just ignores the second attribute. He does not disclose this as a bug for the Browser Console .
Firebug just displays the error messages that Firefox provides through its APIs, it doesn't parse the HTML / CSS / JavaScript itself. Since Firefox does not generate an error message for incorrect HTML, the Firebug Console does not display anything related to this.
Although Firefox offers a different way to display HTML errors through its original view. To get there, simply right click on the page and select "View Source Page" from the context menu. In this view, duplicate attributes are highlighted in red:
Other options you have:
- Use an HTML validation tool such as the Html Validator add-on for Firefox or http://validator.w3.org/ .
- You might want to watch out for Firefox error 878364 asking to export HTML errors.
source to share
The W3 html validator will look at your html and check for errors like this:
EDIT: It looks like there is a Firefox add-on that validates HTML. I've never used it before, but you can look into it:
https://addons.mozilla.org/en-US/firefox/addon/html-validator/
source to share