如何在 Google Chrome 的内联 Javascript 中设置断点？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5156388/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set breakpoints in inline Javascript in Google Chrome?
提问by ace
When I open Developer Tools in Google Chrome, I see all kinds of features like Profiles, Timelines, and Audits, but basic functionality like being able to set breakpoints both in js files and within html and javascript code is missing! I tried to use the javascript console, which itself is buggy - for example, once it encounters a JS error, I cannot get out of it unless I refresh the whole page. Can someone help?
当我在 Google Chrome 中打开开发人员工具时，我看到了各种功能，如配置文件、时间线和审核，但缺少基本功能，例如能够在 js 文件中以及在 html 和 javascript 代码中设置断点！我尝试使用 javascript 控制台，它本身就有问题——例如，一旦遇到 JS 错误，除非我刷新整个页面，否则我无法摆脱它。有人可以帮忙吗？
采纳答案by Rian Schmits
Use the sources tab, you can set breakpoints in JavaScript there. In the directory tree underneath it (with the up and down arrow in it), you can select the file you want to debug. You can get out of an error by pressing resume on the right-hand side of the same tab.
使用源选项卡，您可以在 JavaScript 中设置断点。在其下方的目录树中（其中带有向上和向下箭头），您可以选择要调试的文件。您可以通过按同一选项卡右侧的恢复来摆脱错误。
回答by Matt Ball
Are you talking about code within <script>tags, or in the HTML tag attributes, like this?
您是在谈论<script>标签内的代码，还是像这样的 HTML 标签属性中的代码？
<a href="#" onclick="alert('this is inline JS');return false;">Click</a>
Either way, the debuggerkeywordlike this will work:
无论哪种方式，这样的debugger关键字都会起作用：
<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>
N.B.Chrome won't pause at debuggers if the dev tools are not open.
注意debugger如果开发工具没有打开，Chrome 不会在s 处暂停。
You can also set property breakpoints in JS files and <script>tags:
您还可以在 JS 文件和<script>标签中设置属性断点：
- Click the Sourcestab
- Click the Show Navigatoricon and select the a file
- Double-click the a line number in the left-hand margin. A corresponding row is added to the Breakpointspanel (4).
- 单击源选项卡
- 单击“显示导航器”图标并选择一个文件
- 双击左边距中的行号。相应的行将添加到Breakpoints面板 (4)。
回答by buildhome.eu
You also can give a name to your script:
您还可以为脚本命名：
<script>
... (your code here)
//# sourceURL=somename.js
</script>
<script>
... (your code here)
//# sourceURL=somename.js
</script>
ofcourse replace "somename" by some name ;) and then you will see it in the chrome debugger at "Sources > top > (no domain) > somename.js" as a normal script and you will be able to debug it like other scripts
当然，将“somename”替换为某个名称；) 然后您将在 Chrome 调试器中的“Sources > top > (no domain) > somename.js”中看到它作为普通脚本，您将能够像其他脚本一样调试它
回答by Gruff Bunny
Refresh the page containing the script whilst the developer tools are open on the scripts tab. This will add a (program) entry in the file list which shows the html of the page including the script. From here you can add breakpoints.
刷新包含脚本的页面，同时在脚本选项卡上打开开发人员工具。这将在文件列表中添加一个（程序）条目，该条目显示包含脚本的页面的 html。从这里您可以添加断点。
回答by ken
Another intuitive simple trick to debug especially script inside html returned by ajax, is to temporary put console.log("test") inside the script.
另一个直观的简单调试技巧，尤其是 ajax 返回的 html 中的脚本，是将 console.log("test") 临时放在脚本中。
Once you have fired the event, open up the console tab inside the developer tools. you will see the source file link shown up at the right side of the "test" debug print statement. just click on the source (something like VM4xxx) and you can now set the break point.
触发事件后，打开开发人员工具中的控制台选项卡。您将看到源文件链接显示在“测试”调试打印语句的右侧。只需单击源（类似于 VM4xxx），您现在就可以设置断点。
P.S.: besides, you can consider to put "debugger" statement if you are using chrome, like what is being suggested by @Matt Ball
PS：此外，如果您使用的是 chrome，您可以考虑放置“调试器”语句，就像@Matt Ball 所建议的那样
回答by Aditya Singh
My situation and what I did to fix it:
I have a javascript file included on an HTML page as follows:
Page Name: test.html
我的情况以及我做了什么来修复它：
我在 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>
Now entering the Javascript Debugger in Chrome, I click the Scripts Tab, and drop down the list as shown above. I can clearly see scripts/common.jshowever I could NOTsee the current html page test.htmlin the drop down, therefore I could not debug the embedded javascript:
现在在 Chrome 中输入 Javascript 调试器，我单击脚本选项卡，然后下拉列表，如上所示。我可以清楚地看到脚本/ common.js不过我可以不看当前HTML页面的test.html在下拉，所以我不能调试嵌入的JavaScript：
<script type="text/javascript">
document.write("something");
</script>
That was perplexing. However, when I removed the obsolete type="text/javascript"from the embedded script:
那令人费解。但是，当我从嵌入式脚本中删除过时的type="text/javascript" 时：
<script>
document.write("something");
</script>
..and refreshed / reloaded the page, voila, it appeared in the drop down list, and all was well again.
I hope this is helpful to anyone who is having issues debugging embedded javascript on an html page.
..并刷新/重新加载页面，瞧，它出现在下拉列表中，一切又好了。
我希望这对在 html 页面上调试嵌入式 javascript 时遇到问题的任何人都有帮助。
回答by JEKO
Adding debugger;on top at my script worked for me.
debugger;在我的脚本上添加对我有用。
回答by ocarlsen
I was having the same problem too, how to debug JavaScript that is inside <script>tags. But then I found it under the Sources tab, called "(index)", with parenthesis. Click the line number to set breakpoints.
我也遇到了同样的问题，如何调试<script>标签内的 JavaScript 。但是后来我在 Sources 选项卡下找到了它，称为“（index）”，带括号。单击行号以设置断点。
This is Chrome 71.
这是 Chrome 71。
回答by Pogrindis
I came across this issue, however my inline function was withing an angularJS view. Therefore on the load i could not access the inline script to add the debug, as only the index.html was available in the sources tab of the debugger.
我遇到了这个问题，但是我的内联函数使用了 angularJS 视图。因此在加载时我无法访问内联脚本来添加调试，因为调试器的源选项卡中只有 index.html 可用。
This meant that when i was opening the particular view with my inline (had no choice on this) it was not accessible.
这意味着当我使用内联打开特定视图时（对此别无选择），它无法访问。
The onlly way i was able to hit it was to put an erroneous function or call inside the inline JS function.
我能够命中它的唯一方法是在内联 JS 函数中放置一个错误的函数或调用。
My solution included :
我的解决方案包括：
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);
}
This mean when i clicked on my button, i was then prompted in the chrome consolse.
这意味着当我点击我的按钮时，我会在 chrome consolse 中收到提示。
Uncaught TypeError: undefined is not a function
The important thing here was the source of this : VM5658:6clicking on this allowed me to step through the inline and hold the break point there for later..
这里重要的是它的来源：VM5658:6点击它允许我单步执行内联并在那里保持断点以备后用..
Extremely convoluted way of reaching it.. But it worked and might prove useful for when dealing with Single page apps which dynamically load your views.
达到它的极其复杂的方式......但它有效并且可能证明在处理动态加载您的视图的单页应用程序时很有用。
The VM[n]has no significant value, and the non equates to the script ID. This info can be found here : Chrome "[VM]"
在VM[n]没有显著价值，和n上等同于脚本ID。可以在此处找到此信息：Chrome“[VM]”
回答by Pogrindis
If you cannot see the "Scripts" tab, make sure you are launching Chrome with the right arguments. I had this problem when I launched Chrome for debugging server-side JavaScript with the argument --remote-shell-port=9222. I have no problem if I launch Chrome with no argument.
如果您看不到“脚本”选项卡，请确保使用正确的参数启动 Chrome。当我启动 Chrome 以使用参数调试服务器端 JavaScript 时，我遇到了这个问题--remote-shell-port=9222。如果我不加任何参数地启动 Chrome，我就没有问题。
