Find out what file/line in JS is changing the text of an element

Question

I'm working on a pretty large (a lot of files) and poorly organized web project for a client. Somewhere in the mess of things there is some JavaScript that is truncating H3 tags and adding ellipsis to them. I would like to find that line of script and remove it. I just need to find out where it is...

Manually searching through all of the files on the site could take forever (since, due to the poor code of the site, the JS that produces the dom manipulation could exist in a PHP file somewhere, or in a JS file, or...who knows).

I know that with Chrome, for example, you can do DOM manipulation breakpoints. The problem is that from what I can tell the Subtree modifications and Attributes modifications breakpoints don't actually break on simple text modifications.

Are there any options in any browser to listen on the DOM element and see where the script is that is modifying it?

Answer 1

To check whether the change happens on the server or client side you should first check the network reponses. If the text is truncated inside the server response, then the change already happens on the server side. If not, it happens on the client side. When it happens on the client side, it may be done either through JavaScript or through CSS.

Firebug

Check server response

Switch to the Net panel, focus the search field, ensure that the Response Bodies option is checked, then enter the heading (untruncated). If it is found, then the change happens on the client side.

Check CSS

In case the change happens on the client side, it may be part of some CSS. E.g. there is a CSS property called text-overflow, which allows to add an ellipsis to the text.

To check that inspect the related element and search within the Styles or Computed side panel whether the text-overflow property is set for the element.
The ellipsis may also be achieved via some trick setting the content property to an ellipsis. If you cannot find any CSS like that, the change probably happens via JavaScript.

Check JavaScript

you can stop the script execution at the line that changes it by right-clicking the element you want to inspect within the HTML panel and choose Break On Child Addition or Removal.

Once the text is changed, the script execution stops at the related line.

Example

<p>foo</p>
<button onclick="changeText()">Change text</button>
<script>
function changeText() {
  var p = document.querySelector("p");
  p.textContent = "bar";
}
</script>

Set the Break On Child Addition or Removal for the <p>foo</p> element to try it out.

Note: Unfortunately Firebug doesn't always jump to the right script or position, but at least it does stop when the change happens within JavaScript.

Chrome DevTools

Check server response

Switch to the Network panel and search for the untruncated heading in the response bodies of the network requests. (As far as I know, there is no way to search automatically within the response bodies.) If it is found, then the change happens on the client side.

Check CSS

As described above, the change may also be part of CSS.

To check that inspect the related element and search within the Styles or Computed side panel whether the text-overflow or the content property is set for the element.
If you cannot find any CSS like that, the change probably happens via JavaScript.

Check JavaScript

Within the Chrome DevTools it works similar like in Firebug. So, in case the change happens on the client side, right-click the element within the Elements panel and choose Break on > Subtree modifications from the context menu.

Once the text is changed, the script execution stops at the related line.

Answer 2

Add debugger calls in each one of your js files to force the execution to pause on each file. If the h3 changes after jumping a specific stop point, chances are the guilty script is in that page (or the function is being called on that page).