Detect errors on web page with Firebug

问题

What is the best way to check our web applications for errors such as "duplicate attribute"?

My development team tends to use Firefox and Firebug for web development. We've noticed some errors creeping into the codebase, usually duplicate attributes such as:

<div id="MyDiv" class="hide" class="interestingDiv">

We see no errors in Firebug's console nor can see anyway to get Firebug to report that there are errors.

We have noticed that Firefox itself IS aware of these errors. By clicking on "View Page Source", Firefox renders the second class in red and has a tooltip of "Duplicate Attribute". However we have to hunt through the code ourselves looking for any errors highlighted in red.

Surely there is a better way than manually looking at the code? What tools should we be using?

Thanks,

Phil

回答1:

Firefox automatically corrects HTML errors like duplicate attributes, i.e. it just ignores the second attribute. It doesn't expose this as error to its Browser Console.

Firebug just displays the error messages Firefox exposes via its APIs, it doesn't anaylize the HTML/CSS/JavaScript by itself. So as Firefox doesn't produce an error message for incorrect HTML, Firebug's Console panel doesn't display anything related to that.

Though Firefox offers another way to display HTML errors via is its source view. To get there just right-click into the page and choose View Page Source from the context menu. This view highlights duplicate attributes in red:

Other options you have are:

Use an HTML validator tool like the Html Validator add-on for Firefox or http://validator.w3.org/.
You may want to follow the Firefox bug 878364 asking for exposing HTML errors.