Subscribe to RSS Feed

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.

Break On Attribute Change

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

Example Element 1

  • 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.

Example Element 2

  • 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.

Example Element 3

  • 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.


Rss Commenti

5 Comments

  1. thats a really cool round up :) Great post.

    #1 Mustafa
  2. That's a really cool round up. Great article

    #2 Mustafa
  3. [...] FF13 - Developper - Software is hard | Firebug Tip: Break on HTML Mutation Debugging JavaScript with Firebug Firecookie is a an extension for Firebug that makes possible to view and manage cookies in your browser. [...]

    #3 Firefox extensions - Firebug | Pearltrees
  4. Thanks!

    #4 Igor Skomorokh
  5. This is a new thing that I learnt reading your post..Thanks for sharing..

    #5 Offshore Software Company

Sorry, the comment form is closed at this time.