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

Šim*_*das 3 javascript debugging google-chrome-devtools

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

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

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

我想在该外部脚本的开头暂停执行.我无法编辑该外部脚本.(如果是的话,我只是debugger;在该文件的顶部插入一条语句.)

我目前暂停了这个声明(上面的脚本):

document.body.appendChild(script);
Run Code Online (Sandbox Code Playgroud)

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

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

为什么我需要这个:(这只是背景.你不需要阅读它.)W3C的HTML5 404页面包含一个脚本,fixBrokenLink其中包含一个在页面加载时调用函数.然后,此函数将fragment-links.js脚本动态添加到页面.我想逐步完成那个剧本.我的目标是了解该脚本如何"修复断开的链接".当然,我可以静态地分析该脚本,但是我更愿意通过开发工具实现它,在执行代码时逐步执行它.如果我不认为这是可能的话,我不会打扰这个问题.


解决方案:

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

Mat*_*cic 7

现在已实现,您可以在" 脚本"部分下的" 事件侦听器断点"中启用" 脚本优先语句 " .

在此输入图像描述