3

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

<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 页面包含一个脚本，该脚本具有fixBrokenLink在页面加载时调用的函数。然后，此函数将fragment-links.js脚本动态添加到页面。我想逐步完成该脚本。我的目标是了解该脚本如何“修复断开的链接”。当然，我可以静态分析该脚本，但我更愿意通过开发工具实时执行它，通过在执行它的代码时单步执行它。如果我认为不可能，我不会费心问这个问题。

解决方案：

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

4

4 回答 4

8

这是现在实现的，您可以在Script部分下的Event Listener Breakpoints中打开Script First Statement 。

在此处输入图像描述

于 2015-02-23T19:31:29.073 回答
4

  1. 在第一个脚本（此处为）中，在该行之后link-fixup.js立即添加一个断点。（所以，在这里，在结尾的右括号线上。）appendChild(script)link-fixup.js

  2. 通过单击 Devtools 的左上角打开 Sources 窗格中的导航器。浏览器完成加载脚本后，您将在此处看到已加载的脚本。

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

  4. 继续到断点；你完成了！

于 2012-12-12T20:41:32.293 回答
1

一种方法：

查看代码并使用 覆盖其中一个属性访问defineGetter。我与 DevTools 负责人 Pavel 进行了交谈，他建议拦截window.jQuery第一行 JS 代码。它存储旧的 jQuery 值，您可以_defineGetter_使用function() { debugger; return null; }

也可以看看：

但是，当我们这样做时，您能否提交一个您希望能够在 appendChild 即将评估 JS 时进入的错误？还要提到 Opera 的“Break on first statement of a new script”，因为这真的很方便。Chrome DevTools eng 团队希望为您提供对此用例的良好支持。

于 2012-12-12T21:27:59.220 回答
0

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

于 2012-12-13T17:27:22.063 回答