CODEWITHSUNDEEP
javascriptdebugginggoogle-chrome-devtools
Šime Vidas
Šime Vidas

Reputation: 185923

How to pause execution at the beginning of a dynamically added JavaScript file?

Let's say we have a web-page that contains this inline-script:

<script>
(function () {
    var script = document.createElement('script');
    script.src = 'http://remote.com/external.js';
    document.body.appendChild(script);
}());
</script>

As you can see, an external script, external.js, is appended to the page.

I would like to pause execution at the beginning of that external script. I am not able to edit that external script. (If I was, I'd just insert a debugger; statement at the top of that file.)

I am currently paused at this statement (of the above script):

document.body.appendChild(script);

There are no other SCRIPT elements on the page, so, if I resume execution, the next statement that is going to be executed will be the first statement of the external script.

How can I command Chrome's dev tools to pause execution at that next statement? A "Step over" command works only within the same call stack.

Why I need this: (This is just background. You don't need to read this.) W3C's HTML5 404 page contains a script with a fixBrokenLink function which is invoked on page load. This function then dynamically adds the fragment-links.js script to the page. I'd like to step through that script. My goal is to understand how that script "fixes broken links". Of course, I could analyze that script statically, but I'd prefer to do it live, via the dev tools, by stepping through its code while it's being executed. I wouldn't bother asking this question if I didn't think it was possible.

The solution:

In case it's not clear from the accepted answer, one merely has to step over the document.body.appendChild(script); statement, so that execution is paused at the closing brace } (see code above). At that point, Chrome will load the external script in the background, so that it will appear in the dev tools eventually. Once it does, one can set a break point in that script, and resume execution to that break point.

Upvotes: 3

Views: 2484

Answers (4)

Matija Grcic
Matija Grcic

Reputation: 13381

This is implemented now and you can turn on Script First Statement in the Event Listener Breakpoints under Script section.

enter image description here

Upvotes: 10

beefeather
beefeather

Reputation: 1040

This is not implemented yet as far as I know. However you can vote for it or comment at dedicated bug http://code.google.com/p/chromium/issues/detail?id=156556

Upvotes: 0

Paul Irish
Paul Irish

Reputation: 49142

One approach:

Look at the code and override one of the property accesses with defineGetter. I spoke with Pavel, the DevTools Lead and he recommended intercepting window.jQuery which is about the first JS line. It stores old jQuery value and you could _defineGetter_ with function() { debugger; return null; }

See also:

But while we're at it, can you file a bug that you want to be able to step into appendChild when it is about to eval JS? Also mention Opera's "Break on first statement of a new script" as that's really handy. The Chrome DevTools eng team would like to give you nice support for this use case.

Upvotes: 1

apsillers
apsillers

Reputation: 115950

  1. In the first script (here, link-fixup.js), add a breakpoint immediately after the appendChild(script) line. (So, here, on the close-bracket line at the end of link-fixup.js.)

  2. Open the navigator in the Sources pane by clicking the top left corner of Devtools. You'll see the loaded script listed there once the browser completes loading the script.

  3. In the navigator, open the loaded script (here, fragment-links.js) in the Sources pane and place a breakpoint in it.

  4. Proceed to the breakpoint; you're done!

Upvotes: 4

Related Questions