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

Question

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

249

当我在Google Chrome中打开开发者工具时，我看到了各种功能，如Profiles，Timelines和Audits，但是一些基本功能却缺失，例如能够在js文件和html和javascript代码内设置断点。我尝试使用JavaScript控制台，但它本身存在漏洞 - 例如，一旦遇到JS错误，除非刷新整个页面，否则无法解决。有人可以帮忙吗？

- ace

1

我放弃了Chrome。尝试使用Firefox，几秒钟内就成功了断点。虽然在Chrome中也可能实现，但显然不是那么明显！ - Oliver P

@OliverP 我也建议在Chrome无法正常工作时尝试使用Firefox。我有一些内联脚本在.php文件中，但Chrome无法在Chrome开发工具的“源”选项卡中显示源文件。我尝试了Firefox，一切都按预期工作。 - Rick

16个回答

138

使用源代码选项卡，您可以在其中设置JavaScript断点。在其下方的目录树（带有向上和向下箭头），您可以选择要调试的文件。您可以通过按同一选项卡右侧的“继续”来解除错误。

- Rian Schmits

40

不知何故，我可以看到包含的JS文件列表，但无法选择要执行的页面本身，它没有显示在列表中。有什么想法吗？ - ulu

68

@ulu，我遇到了同样的问题。请确保你的<script>元素上设置了type="text/javascript"属性。 - contactmatt

13

除了在HTML5中该属性不再是强制性的外，我不会更改源代码只为了调试！ - sashok_bg

11

即使添加了 type="text/javascript"，我仍然看不到。 - Nitin Kumar Mishra

8

如果这种方法不起作用，并且您有内联JavaScript代码，例如：<script> your code </script>，请添加一个名称，例如：<script> your code //# sourceURL=somename.js </script>。更好的解释在下面的答案中。点击此处查看。 - KM.

显示剩余2条评论

137

您还可以给脚本起一个名称：

<script> ...（在此处编写您的代码） //# sourceURL=文件名.js </script>

当然，请将“文件名”替换为实际的名称。然后，您就可以像调试其他脚本一样，在Chrome调试器中查看它：选择“Sources > top > (no domain) > 文件名.js”，这会将其显示为普通脚本，您可以对其进行调试。

- buildhome.eu

3

最简单且完美的方法。但是请注意，对于其他人，请记得在推向生产环境之前将其删除。 - Zameer Fouzan

2

哦，我的天啊，你不知道这有多帮助我了。哦，我的天啊，这太棒了。我已经寻找类似的东西很久了。 - GregRos

我使用了这个（好）想法，但在源选项卡中看不到新文件，只有HTML文件。然后我执行了代码，在控制台的结尾处，无论从脚本中写的任何消息右侧，您都可以看到一个指向代码的链接。最好的部分是，该链接显示了您为脚本提供的文件名（即//# sourceURL=somename.js）。 - Manuel Rivera

4

如果可以的话，我会给你1000个赞；）非常有用的技巧。 - Giulio Quaresima

这太有用了，我以后会以你的名字命名这个JS。 - oldpride

1

@ZameerFouzan，为什么你需要将其从生产环境中移除？有任何真正的副作用吗？ - oldpride

56

在开发者工具中打开脚本标签页，并刷新包含脚本的页面。这将在文件列表中添加一个（程序）条目，其中显示了包括脚本在内的页面的HTML内容。从这里，您可以添加断点。

- Gruff Bunny

这对我没有用。相反，我点击了右下角的脚本错误图标，在脚本选项卡中打开程序文件。 - sanbikinoraion

1

谢谢！使用Chrome 69，即使我不在源选项卡中，这也可以工作。在页面加载时打开开发人员工具似乎是关键。 - Sam

如果这是我的问题，那么这将是被接受的答案。谢谢。 - plumpNation

在 Chrome 83 中工作。在我的环境中，文件名基于您的应用程序的 URL。例如，如果 URL 是 example.com/xxx/yyy，则文件名将为“yyy”。 - Helix Quar

22

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

一旦你触发了事件，在开发者工具中打开控制台选项卡。你将看到“test”调试输出附近右侧显示源文件链接。只需点击源文件链接（类似于VM4xxx），您现在就可以设置断点。

P.S.：此外，如果您正在使用Chrome浏览器，您可以考虑使用"debugger"语句，就像@Matt Ball所建议的那样。

- ken

1

这是我以前经常使用的一个。非常感谢你的提醒。 - Vibhor Dube

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，但是我无法在下拉列表中看到当前的HTML页面test.html，因此我无法调试嵌入式JavaScript：

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

那真是令人困惑。但是当我从嵌入的脚本中去掉了过时的type="text/javascript"之后:

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

刷新/重新加载页面后，出现在下拉列表中，一切都恢复正常。
我希望这对于任何遇到在HTML页面上调试嵌入式JavaScript的问题的人都有所帮助。

- Aditya Singh

干得好！在Mac 10.7.4上使用Chrome 20.0.1132.57测试通过。已向Chromium项目提交了错误报告。 - Mars Robertson

请注意，在HTML 4和XHTML中，“type”是必需的属性。在HTML5中，它是可选的。 - hotshot309

2

这与类型无关。脚本在执行后由VM收集，除非此时已经打开了检查器。当您重新加载页面时，它不会收集脚本。 - vsevik

在我的情况下，缺少 <div> 导致我无法在调试器中看到代码。 - ceztko

10

我也遇到了相同的问题，如何调试嵌在<script>标签中的JavaScript。但是，在“Sources”标签下找到了它，名为“(index)”，有括号。点击行号设置断点。

这是Chrome 71。

- ocarlsen

6

如何找到/打开这个(index)文件？ - user

7

在我的脚本顶部添加 debugger; 对我很有帮助。

- JEKO

那是最方便的一个。 - HamedH

5

我知道这个问题与Firefox无关，但我不想添加一个复制此问题的副本来回答它。

对于Firefox，您需要添加debugger;才能像@matt-ball建议的那样为script标记进行调试。

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

如果这不是添加Firefox答案的地方，因为问题是关于Chrome的，请勿：（减去答案，只需让我知道应该在哪里发布它，我将乐意移动帖子。:）

- T04435

2

我遇到了这个问题，然而我的内联函数在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只等于脚本ID。可以在此处找到此信息：Chrome“[VM]”。

- Pogrindis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matt Ball · Accepted Answer

你是在谈论在 <script> 标签内的代码，还是在 HTML 标记属性中，就像这样？

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

无论哪种方式，像这样使用debugger关键字都可以工作：

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

N.B. 如果开发者工具未打开，Chrome不会在debugger处暂停。

您还可以在JS文件和<script>标记中设置属性断点：

点击Sources选项卡
单击Show Navigator图标并选择一个文件
双击左边栏的行号。对应的行将添加到Breakpoints面板中（4）。

enter image description here