0
140
ViewsGetting to the origin of data in HTML/JavaScript
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
Answer question0
Using the Chrome Dev Tools, you can do the following:
- Navigate to the Elements panel
- Right-click the
<body/>tag and select Break on... > subtree modifications
- 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.
0
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