Getting to the origin of data in HTML/JavaScript

Viewed 41

What's a consistent way to find the origin of data from a certain web app?

Context: I'm working on a native app, and am trying to capture data from a publicly hosted JavaScript app. But I can't figure out where exactly the data I'm looking for originates from. The Document Object Model is quite chaotic.

Consider:

<html>
<body>
    <script src="app.js"></script>
</body>
</html>

and consider app.js:

// super complex app starts here
var hello = "hello world";
document.write(hello);
// super complex app ends here

Let's say app.js is a super complex compressed JS app, that somehow writes "hello world" to the document but we have no immediate idea where it's coming from...

What's a definitive way to figure out where "hello world" first gets mentioned to the DOM?

Web inspector seems unable to search all downloaded files for "hello world"...

2 Answers

Using the Chrome Dev Tools, you can do the following:

  1. Navigate to the Elements panel
  2. Right-click the <body/> tag and select Break on... > subtree modifications Picture of the Chrome devtools, with the body tag hovered and right-clicked; the context menu is open and the cursor is hovering "subtree modifications" in the "break on..." submenu
  3. Refresh the page

Now every time the contents of the <body/> element is modified by JavaScript, the Chrome Devtools will pause as though there is a breakpoint set on the line that is making the modification.

One caveat: if the source is minified without source maps, you can try "pretty printing" it by clicking the "{}" icon in the lower-left of the sources code view, but even that may be of limited value; reading minified code can be anywhere from difficult to impossible.

Chrome devtools sources view opened, with the pretty print icon in the lower-left corner pointed to with a large red arrow

It is possible to search in the browser console in all scripts.

Under the corresponding tab (firefox: debugger, chrome: sources) the search field opens with the shortcut:

CTRL+SHIFT+F

Related