Firebug without Firefox
The problem..
If I had been allocated one Firefox extension to use, without hesitation it would be Joe Hewitt's Firebug. But, eventually, I have to test my code in IE (and Safari1), and need to debug some DOM or css scripting. Many times I would use the url field to execute Javascript in the page using this method...
javascript:function(){ /* some code */ }()
Wrapping the code in a function will prevent variable name collisions. The problem is that this method can get messy and time consuming when trying to inspect elements nested deep within the DOM.
An answer?
I created a bookmarklet that allows you to inspect DOM elements, just like Firebug2. Using a bookmarklet allows it to run in any javascript browser, including Firefox. After inspection, a console can be used to modify and query the object. How does it work? The bookmarklet is just a stub that loads the external javascript file3. It adds a click and mouseover handler to the document body object. The mouseover handler adds a window status message with the highlighted DOM tree, and the click attribute opens the inspector.
The inspector has a console with the variable clicked_element pointing to the element. Common attributes like id, class and innerHTML can be edited live. All other attributes can be viewed (or changed using the console) and the computed style is also available.
Download
Save the bookmarklet archive, or try it out on this page. (You can also bookmark this link directly)
Screenshots
Todo
- Allow inspecting of active elements - buttons, links
- Improve inspector look
Editing innerHTML containing ' breaks
1Safari webkit nightlies include a DOM inspector, but no console for easy manipulation.
2I know this is hardly a port of firebug, but the title "DOM/CSS Javascript inspector bookmarklet for IE/Safari" wasn't as catchy.
3IE 6 has huge limitation in that the url is only parsed to 512 characters. The external javascript is also much easier to maintain.
0 TrackBacks
Listed below are links to blogs that reference this entry: Firebug without Firefox.
TrackBack URL for this entry: http://www.nearinfinity.com/mt/mt-tb.cgi/432
Leave a comment