Dissect Your HTML with DOM Monster!
DOM Monster is a new cross-browser bookmarklet tool which analyzes your Document Object Model and other features of your HTML page. It reports valuable information about the number of elements, empty nodes, the content ratio and nesting depths. However, the most useful feature is an overall rating and a list of warnings and tips to help you optimize your code…
Click this DOM Monster link to view the results for this page or drag it to your bookmarks bar to create a permanent link.
DOM Monster is the brainchild of Amy Hoy and JavaScript guru Thomas Fuchs. The bookmarklet works in all the main browsers but, although that should include Internet Explorer, it wouldn’t work for me? Firefox, Chrome, Safari and Opera all operate as expected, with the webkit browsers offering a few additional CSS3 effects.
While there are many code analyzers available, DOM Monster provides useful information I haven’t seen elsewhere. The results are reminiscent of the the YSlow add-in for Firebug but there’s more emphasis on optimizing the performance of the HTML document than analyzing network performance and file sizes.
There are some great tips such as:
- informing you when a new version of a JavaScript library is available
- reducing the number of
scripttags - warning that you have too many JavaScript global variables
- reporting excessive white space
- suggesting the removal of inline JavaScript
- providing the content to HTML code ratio (over 50% is considered good).
DOM Monster is a handy tool which is open source and free to use. For more information, visit the DOM Monster home page or the GitHub repository.
