如何在 Google Chrome 的内联 Javascript 中设置断点？

Posted

技术标签:

【中文标题】如何在 Google Chrome 的内联 Javascript 中设置断点？【英文标题】：How to set breakpoints in inline Javascript in Google Chrome? 【发布时间】：2011-07-06 14:19:47 【问题描述】：

当我在 Google Chrome 中打开开发人员工具时，我看到了各种功能，例如配置文件、时间线和审核，但缺少基本功能，例如能够在 js 文件和 html 和 javascript 代码中设置断点！我尝试使用 javascript 控制台，它本身就有问题 - 例如，一旦遇到 JS 错误，除非我刷新整个页面，否则我无法摆脱它。有人可以帮忙吗？

【问题讨论】：

我放弃了 Chrome。尝试使用 Firefox 并在几秒钟内击中我的断点。使用 Chrome 可能是可能的，但具体方法肯定不明显！ @OliverP 我还建议在 Chrome 有时无法正常工作时尝试 Firefox。我在.php 文件中有一些内联脚本，Chrome 只是无法在 Chrome devtool 的Source 选项卡中显示源文件。我尝试了 Firefox，一切正常。 【参考方案1】：

我知道 Q 与 Firefox 无关，但我不想添加此问题的副本来自己回答。

对于 Firefox，您需要添加 debugger; 才能执行 @matt-ball 为 script 标记建议的操作。

因此，在您的代码中，您在要调试的行上方添加debugger，然后您可以添加断点。如果你只是在浏览器上设置断点，它不会停止。

如果这不是添加 Firefox 答案的地方，因为问题是关于 Chrome 的。不要:(减去答案只是让我知道我应该在哪里发布它，我会很高兴地移动帖子。:)

【讨论】：

【参考方案2】：

我也遇到了同样的问题，如何调试 <script> 标签内的 JavaScript。但后来我在 Sources 选项卡下找到了它，名为“（index）”，带有括号。点击行号设置断点。

这是 Chrome 71。

【讨论】：

如何找到/打开这个(index)文件？【参考方案3】：

在我的脚本顶部添加debugger; 对我有用。

【讨论】：

这个最方便了【参考方案4】：

另一个直观的简单技巧是调试 ajax 返回的 html 中的脚本，特别是在脚本中临时放置 console.log("test")。

触发事件后，打开开发人员工具中的控制台选项卡。 您将在“test”调试打印语句的右侧看到源文件链接。只需单击源（类似于 VM4xxx），您现在就可以设置断点。

P.S.：此外，如果您使用 chrome，您可以考虑添加“调试器”语句，就像 @Matt Ball 所建议的那样

【讨论】：

【参考方案5】：

您还可以为脚本命名：

<script> ... (your code here) //# sourceURL=somename.js </script>

当然用某个名称替换“somename”；）然后您将在 chrome 调试器中的“Sources > top > (no domain) > somename.js” 中看到它作为普通脚本，您将能够对其进行调试像其他脚本一样

【讨论】：

最简单、最完美的方式。但请注意其他人，请记住在将其推送到生产之前将其删除。 天哪，你不知道这对我有多大帮助。哦，我的上帝，这太棒了。多年来我一直在寻找类似的东西。 我使用了这个（很好的）想法，但在源选项卡中看不到新文件，只有 html 文件。然后我执行了代码，最后，在控制台中，在从脚本写入的任何消息的右侧，您可以看到代码的链接。最好的部分是该链接显示了您为脚本提供的文件名（即，//# sourceURL=somename.js）。 如果可以的话，我会给你 1000 个赞；）非常有用的技巧 @ZameerFouzan，为什么需要从生产中删除它？有什么真正的副作用吗？【参考方案6】：

这是上面Rian Schmits' answer 的扩展。在我的例子中，我的 JavaScript 代码中嵌入了 HTML 代码，除了 HTML 代码我什么也看不到。也许 Chrome 调试多年来发生了变化，但右键单击 Sources/Sources 选项卡向我展示了将文件夹添加到工作区。我能够添加我的整个项目，这让我可以访问我所有的 JavaScript。您可以找到更多详细信息in this link。我希望这对某人有所帮助。

【讨论】：

【参考方案7】：

使用源选项卡，您可以在 JavaScript 中设置断点。在它下面的目录树中（带有向上和向下箭头），您可以选择要调试的文件。您可以通过按同一选项卡右侧的恢复来摆脱错误。

【讨论】：

由于某种原因，我看到了包含的 js 文件列表，但我无法选择执行页面本身，它没有显示在列表中。有什么想法吗？ @ulu，我遇到了同样的问题。确保在 除了在 HTML5 中这个属性不再是强制性的。我不是为了调试而更改源代码！ 添加 type="text/javascript" 后我也看不到 如果这不起作用，并且您有内联 JavaScript 代码，例如：&lt;script&gt; your code &lt;/script&gt; 添加一个名称，例如：&lt;script&gt; your code //# sourceURL=somename.js &lt;/script&gt;This is explained better in an answer below【参考方案8】：

我遇到了这个问题，但是我的内联函数使用了 angularJS 视图。因此，在加载时，我无法访问内联脚本来添加调试，因为调试器的源选项卡中只有 index.html 可用。

这意味着当我使用内联打开特定视图时（对此别无选择），它无法访问。

我能够做到这一点的唯一方法是在内联 JS 函数中放置一个错误的函数或调用。

我的解决方案包括：

function doMyInline(data) 
        //Throw my undefined error here. 
        $("select.Sel").debug();

        //This is the real onclick i was passing to 
        angular.element(document.getElementById(data.id)).scope().doblablabla(data.id);

这意味着当我单击按钮时，Chrome 控制台会提示我。 

Uncaught TypeError: undefined is not a function

这里重要的是它的来源：VM5658:6 点击它允许我单步执行内联并将断点保留在那里以备后用..

实现它的方式极其复杂。但它确实有效，并且在处理动态加载视图的单页应用程序时可能很有用。

VM[n] 没有重要价值，n on 等同于脚本 ID。此信息可在此处找到：Chrome "[VM]"

【讨论】：

【参考方案9】：

使用 Visual Studio (2012) 我遇到了同样的问题，切换到 IIS Express 解决了这个问题！

script 标记的type 属性没有考虑在内。

由于某种原因，Visual Studio 开发服务器没有提供 Chrome 启用断点所需的一切。

【讨论】：

【参考方案10】：

您是在谈论&lt;script&gt; 标签内的代码，还是像这样在 HTML 标签属性中的代码？

<a href="#" onclick="alert('this is inline JS');return false;">Click</a>

无论哪种方式，the debugger keyword 都可以这样工作：

<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>

注意如果开发工具未打开，Chrome 不会在debuggers 暂停。

还可以在JS文件和&lt;script&gt;标签中设置属性断点：

    点击来源标签 单击显示导航器图标并选择文件 双击左边空白处的行号。 Breakpoints 面板 (4) 中添加了相应的行。

【讨论】：

没有脚本选项卡。我看到这张图片中的所有其他选项卡，但没有脚本选项卡！。 我的意思是能够在 html 的脚本标签内设置断点。我也尝试过使用调试器；关键字，但它不起作用。 Chrome 不会在此设置断点，但可以在 Firefox 中使用。我正在寻找不基于调试器关键字的断点解决方案，这不方便在代码中放置很多地方然后不得不删除。 在脚本选项卡下的下拉列表中，我只看到列出的 JS 文件，但没有看到包含我要调试的 标签现在被称为Sources，而不是Scripts。 当我尝试调试我的 html 嵌入式 js 时，我的开发区出现了一个空白页面。我必须在查看空白源文件时刷新才能填充它。【参考方案11】：

我的情况以及我做了什么来解决它： 我在 HTML 页面中包含一个 javascript 文件，如下所示：页面名称：test.html

<!DOCTYPE html>
<html>
    <head>
        <script src="scripts/common.js"></script>
        <title>Test debugging JS in Chrome</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div>
         <script type="text/javascript">
            document.write("something");
         </script>

        </div>
     </body>
</html>

现在在 Chrome 中进入 Javascript 调试器，我单击 Scripts 选项卡，然后如上所示下拉列表。我可以清楚地看到 scripts/common.js 但是我可以 NOT 在下拉列表中看到当前的 html 页面 test.html，因此我可以不调试嵌入的javascript：

<script type="text/javascript">
  document.write("something");
</script>

这很令人困惑。但是，当我从嵌入式脚本中删除过时的 type="text/javascript" 时：

<script>
  document.write("something");
</script>

..并刷新/重新加载页面，瞧，它出现在下拉列表中，一切都很好。 我希望这对任何在 html 页面上调试嵌入式 javascript 时遇到问题的人有所帮助。

【讨论】：

干得好！在 Mac 10.7.4 上的 Chrome 20.0.1132.57 中测试已提交错误到 Chromium 项目。 请注意，在 HTML 4 和 XHTML 中，type 是必需的属性。在 HTML5 中，它是可选的。 它与类型没有任何关系。该脚本在执行后由 VM 收集，除非此时检查器已打开。当您重新加载页面时，它没有收集脚本。 我是我的情况，缺少 &lt;div&gt; 使我无法在调试器中看到代码【参考方案12】：

在脚本选项卡上打开开发人员工具时刷新包含脚本的页面。这将在文件列表中添加一个（程序）条目，该条目显示包含脚本的页面的 html。从这里您可以添加断点。

【讨论】：

这对我不起作用。相反，我单击右下角的脚本错误图标以在脚本选项卡中打开程序文件。 谢谢！使用 Chrome 69，即使我不在源选项卡中，它也能正常工作。在页面加载时打开开发者工具似乎是关键。 如果这是我的问题，这将是公认的答案。谢谢。 在 Chrome 83 中工作。在我的环境中，文件名基于您应用的 URL。例如，如果 URL 是 example.com/xxx/yyy，则文件名将是“yyy”。【参考方案13】：

如果您看不到“脚本”标签，请确保您使用正确的参数启动 Chrome。当我使用参数--remote-shell-port=9222 启动用于调试服务器端 JavaScript 的 Chrome 时遇到了这个问题。如果我在没有参数的情况下启动 Chrome，我没有问题。

【讨论】：

您能详细说明一下吗？我遇到了这个确切的问题 - 根本看不到脚本选项卡。我下载了最新的 chrome 开发者版本。

以上是关于如何在 Google Chrome 的内联 Javascript 中设置断点？的主要内容，如果未能解决你的问题，请参考以下文章

如何在 chrome 中的内联 javascript 中添加断点

Google禁止从第三方网站安装Chrome扩展程序

如何修复光标在 Android Chrome 上的内联 contenteditable 中跳转？

使用 Javascript 以编程方式将 Google Chrome 置于全屏模式？

如何检查 Chrome 扩展程序是不是已完全安装

chrome元素检查器中的element.style？