How to Watch Page Rendering, Step-by-Step

It’s often useful to understand exactly how a page is rendered after some action is taken, so that we can, for instance:

  • Implement wait conditions against the presence/visibility status of specific elements in the DOM.
  • Resolve “other element would receive click” issues when using selenium (a.k.a overlapping elements during the rendering process).

Within DevTools, there’s a really simple trick that allows you to watch how a page is rendered (how DOM elements are added/removed/updated after some action is taken) in “slow motion”:

1.) Open DevTools (hit F12 on your keyboard, or right click anywhere on the page and select “Inspect”).

2.) On the Elements tab, right click on the <body> tag of the HTML, and select Break on > subtree modifications:

3.) Take some action on the page (for example, click a button, set a field, etc.)

4.) If the action taken causes the HTML to be updated in ANY way, you’ll see this overlay on the web page:

5.) You can then continually iterate through the rendering process by pressing the “Resume” button in the “Paused in debugger” widget outlined in red above. As you’ll see, you can watch how the page changes, step-by-step, and inspect the HTML at any given step once you see an element you’re interested in.

Notes:

  • In Step 2, placing the breakpoint on the <body> tag means that ANY changes will pause the rendering process, which may be too broad. If you know specifically which part of the page is expected to change, you can place the breakpoint more strategically to capture exactly the rendering you’re interested in.
  • See this post for more information on how to use DevTools in general.
5 Likes