解决方案：

Question

假设我们有一个包含此内联脚本的网页：

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

如您所见，外部脚本external.js附加到页面。

我想在该外部脚本的开头暂停执行。我不能够编辑该外部脚本。（如果是的话，我只是在该文件的顶部插入一个debugger;语句。）

我目前暂停（上述脚本）的声明：

document.body.appendChild(script);

页面上没有其他SCRIPT元素，因此，如果我继续执行，下一个要执行的语句将是外部脚本的第一个语句。

如何命令Chrome的开发工具在下一个语句中暂停执行？ “Step over”命令仅在同一个调用堆栈中有效。

为什么我需要这个：（这只是后台。你不需要阅读它。）W3C的HTML5 404页面包含一个script with a fixBrokenLink function，它在页面加载时调用。然后，此函数将fragment-links.js脚本动态添加到页面。我想逐步完成那个剧本。我的目标是了解该脚本如何“修复断开的链接”。当然，我可以静态地分析该脚本，但是我更愿意通过开发工具实现它，在执行代码时逐步执行它。如果我不认为这是可能的话，我不会费心问这个问题。

解决方案：

如果从接受的答案中不清楚，只需要跳过document.body.appendChild(script);语句，以便在结束括号}暂停执行（参见上面的代码）。此时，Chrome将在后台加载外部脚本，以便最终显示在开发工具中。一旦完成，可以在该脚本中设置断点，并继续执行到该断点。

Answer 1

现在已实施，您可以在脚本部分下的事件监听器断点中启用脚本优先声明。

enter image description here

Answer 2

在第一个脚本（此处为link-fixup.js）中，在 appendChild(script)行后立即添加断点。（所以，在这里，在link-fixup.js末尾的近端括号行。）

单击Devtools的左上角，在“源”窗格中打开导航器。浏览器完成加载脚本后，您将看到列出的已加载脚本。

在导航器中，在“源”窗格中打开已加载的脚本（此处为fragment-links.js），并在其中放置断点。

进入断点;你已经完成了！

Answer 3

一种方法：

查看代码并使用defineGetter覆盖其中一个属性访问。我与DevTools Lead的Pavel进行了交谈，他建议拦截window.jQuery这是第一条JS线。它存储了旧的jQuery值，您可以使用_defineGetter_

function() { debugger; return null; } 也可以看看：

http://wordsbyf.at/2011/12/23/debugging-javascript-is-a-lame-title/（Getters / Setters）
和：https://gist.github.com/1676346

但是当我们参与其中时，你是否可以file a bug想要在eval JS中进入appendChild？还要提到Opera的“打破新脚本的第一个声明”，因为它非常方便。 Chrome DevTools eng团队希望为这个用例提供很好的支持。

Answer 4

据我所知，这还没有实现。但是，您可以在专用错误http://code.google.com/p/chromium/issues/detail?id=156556

上投票或发表评论

如何在动态添加的JavaScript文件的开头暂停执行？

解决方案：

4 个答案: