Software is hard

• Published:July 19th, 2012
• Comments:5 Comments
• Category:Firebug, Firebug Tip, Planet Mozilla

Break on HTML mutation feature has been introduced in an article Dynamic and Graphical Web Page Breakpoints submitted to WWW 2010.

This feature is great for exploring and learning an existing code that is dealing with HTML/UI. It allows the Firebug user to break JavaScript execution when various HTML mutation events happen and see the line of code that caused that event.

There are three types of mutation events.

• Break On Attribute Change
• Break On Child Addition or Removal
• Break On Element Removal

Let's go over three simple examples that explain how to use the feature and how it can be useful to web developers. Each example is available live on this page and so, you can just open Firebug UI (or install Firebug) and try it out immediately.

See all Firebug tips

Break On Attribute Change

The first example shows how to break when an HTML attribute changes.

• Open Firebug, enable the Script panel and reload the page
• Inspect the Example Element 1 above using Firebug Inspector
• As soon as you see the DIV element in the HTML panel right click on it and check Break On Attribute Change

• Click on Change Attribute button (on this page)
• Firebug debugger breaks JS execution showing you the line of code that caused the change.

Break On Child Addition or Removal

Let's see how to quickly find the code that is responsible for removal/addition of child elements.

• Open Firebug, enable the Script panel and reload the page
• Inspect the Example Element 2 above using Firebug Inspector
• As soon as you see the DIV element in the HTML panel right click on it and check Break On Child Addition or Removal

• Click on Append Child button (on this page)
• Firebug debugger breaks JS execution showing you the line of code that caused the change.

Break On Element Removal

The last example show how to handle HTML element removal.

• Open Firebug, enable the Script panel and reload the page
• Inspect the Example Element 3 above using Firebug Inspector
• As soon as you see the DIV element in the HTML panel right click on it and check Break On Element Removal

• Click on Remove me button (on this page)
• Firebug debugger breaks JS execution showing you the line of code that caused the change.

Check out all Break On... events available in Firebug.