How to break on a *later* subtree modification in DevTools on github.com

Question

Webpages of forked GitHub repos display info such as "This branch is 10 commits behind". This used to be static HTML, but now that text appears with a delay. Specifically, a <span> is newly added with a <span> and sometimes <a> inside it.

I'm trying to find what code adds that info (and where that info comes from in that particular situation).

I use "Break on subtree modifications" in DevTools on parent/ancestor elements. After reloading the page, that breakpoint in some cases remains (maybe depending on which HTML element I add it to). But the breakpoint for some reason isn't triggered when the <span> gets added.

Why isn't the "Break on subtree modifications" triggered, and how can I find out what code adds the additional DOM elements?

Edit: I'm narrowing down the question, so that I can accept the current answer and ask the "why" part and about the origins of the info in separate questions.

Answer 1

DOM mutation breakpoints currently don't survive page reloads. That means, you have to set "Break on subtree modifications" on the ancestor element before it is modified. And in case of contents being loaded right after the page load, like in this case, you have to be quick.

In such cases, you can throttle the network speed to have more time to set the breakpoint. You can do that within the Network panel.

In the Chrome DevTools this option looks like this:

And in the Firefox DevTools it looks like this:

Reduce the network speed to some slow connection like "Slow 3G"/"Good 2G", then switch back to the Elements/Inspector panel, and set the option to break on subtree modifications on the ancestor element (the one with [data-testid="branch-info-bar"]) in this case.

Then the script execution will stop at the line where the element's contents are removed from the DOM.

For this case, this halts at a script remove-child-patch.ts (checked using the Firefox Debugger and source mapping to see the original sources):

As that's the code that removes the original contents but you want the one that adds the new ones, you have to ignore that line. In Firefox you do that by right-clicking the line and choosing "Ignore line".

When you ignored that line, you can continue the script execution, which will then halt at the one that adds the new content (react-dom.production.min.js, with source mapping enabled):