如何在 Google Chrome 的内联 Javascript 中设置断点？
[英]How to set breakpoints in inline Javascript in Google Chrome?
问题描述
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.
当我在 Google Chrome 中打开开发人员工具时，我看到了各种功能，例如配置文件、时间线和审核，但基本功能，例如能够在 js 文件和 html 和 javascript 代码中设置断点，我尝试使用javascript 控制台，它本身是有问题的——例如，一旦遇到 JS 错误。 I cannot get out of it unless I refresh the whole page?除非我刷新整个页面，否则我无法摆脱它？ Can someone help?有人可以帮忙吗？
14 个解决方案
解决方案1
199 2011-03-01 15:26:46
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 debugger keyword like this will work: 无论哪种方式，像这样的debugger关键字将起作用：
<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>
NB Chrome won't pause at debugger s if the dev tools are not open. NB Chrome不会在暂停debugger ■如果开发者工具都打不开。
You can also set property breakpoints in JS files and <script> tags: 您还可以在JS文件和<script>标记中设置属性断点：
- Click the Sources tab 单击“ 源”选项卡
- Click the Show Navigator icon and select the a file 单击“ 显示导航器”图标，然后选择一个文件
- Double-click the a line number in the left-hand margin. 双击左侧边距中的行号。 A corresponding row is added to the Breakpoints panel (4). 相应的行将添加到“ 断点”面板（4）。
解决方案2
116 已采纳 2011-03-01 15:32:27
Use the sources tab, you can set breakpoints in JavaScript there. 使用sources选项卡，您可以在JavaScript中设置断点。 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. 您可以通过按相同选项卡右侧的“恢复”来解决错误。
解决方案3
48 2016-08-25 23:18:15
You also can give a name to your 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 ofcourse用某个名称替换“somename”;）然后你会在Chrome调试器的“Sources> top>（no domain）> somename.js”中看到它作为普通脚本，你可以像其他脚本一样调试它
解决方案4
40 2012-02-28 14:08:30
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. 这将在文件列表中添加一个（程序）条目，该条目显示包含脚本的页面的html。 From here you can add breakpoints. 从这里您可以添加断点。
解决方案5
16 2014-08-09 10:10:16
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. 您将看到“test”调试print语句右侧显示的源文件链接。 just click on the source (something like VM4xxx) and you can now set the break point. 只需单击源（类似于VM4xxx），您现在可以设置断点。
PS: 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所建议的那样
解决方案6
10 2012-04-11 22:25:28
My situation and what I did to fix it: 我的情况和我做了什么来解决它：
I have a javascript file included on an HTML page as follows: 我在HTML页面上包含一个javascript文件，如下所示：
Page Name: test.html 页面名称：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. 现在，在Chrome中输入Javascript调试程序，单击“脚本”选项卡，然后如下所示下拉列表。 I can clearly see scripts/common.js however I could NOT see the current html page test.html in the drop down, therefore I could not debug the embedded 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问题的人都有帮助。
解决方案7
4 2018-03-28 09:19:41
Adding debugger; 添加debugger; on top at my script worked for me. 我脚本的顶部为我工作。
解决方案8
3 2018-12-17 22:28:13
I was having the same problem too, how to debug JavaScript that is inside <script> tags. 我也有同样的问题，如何调试<script>标签内的JavaScript。 But then I found it under the Sources tab, called "(index)", with parenthesis. 但后来我在Sources选项卡下找到它，名为“（index）”，带括号。 Click the line number to set breakpoints. 单击行号以设置断点。
This is Chrome 71. 这是Chrome 71。
解决方案9
2 2014-07-04 09:11:27
I came across this issue, however my inline function was withing an angularJS view. 我遇到了这个问题，但是我的内联函数正在使用angularJS视图。 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. 因此在加载时我无法访问内联脚本来添加调试，因为只有index.html在调试器的sources选项卡中可用。
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. 我能够击中它的onlly方式是在内联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:6 clicking 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 n on equates to the script ID. VM[n]没有重要值， n on等于脚本ID。 This info can be found here : Chrome "[VM]" 此信息可在此处找到： Chrome“[VM]”
解决方案10
2
If you cannot see the "Scripts" tab, make sure you are launching Chrome with the right arguments. 如果您看不到“脚本”标签，请确保使用正确的参数启动Chrome。 I had this problem when I launched Chrome for debugging server-side JavaScript with the argument --remote-shell-port=9222 . 当我使用参数--remote-shell-port=9222启动Chrome以调试服务器端JavaScript时，我遇到了这个问题。 I have no problem if I launch Chrome with no argument. 如果我在没有参数的情况下启动Chrome，我没有问题。
解决方案11
1 2013-09-24 18:07:44
Using Visual Studio (2012) I had the same issue and switching to IIS Express solved the problem! 使用Visual Studio （2012）我遇到了同样的问题，切换到IIS Express解决了这个问题！
The script tag's type attribute did not factor into it. script标记的type属性没有考虑到它。
For some reason the Visual Studio Development Server does not provide everything Chrome needs to enable the breakpoints. 出于某种原因， Visual Studio开发服务器不提供Chrome启用断点所需的所有内容。
解决方案12
0 2016-03-01 20:03:56
This is an extension of Rian Schmits' answer above. 这是Rian Schmits上面回答的延伸。 In my case, I had HTML code embedded in my JavaScript code and I couldn't see anything other than the HTML code. 就我而言，我的JavaScript代码中嵌入了HTML代码，除了HTML代码之外，我看不到任何其他内容。 Maybe Chrome Debugging has changed over the years but right-clicking the Sources/Sources tab presented me with Add folder to workspace . 也许Chrome调试已经发生了多年的变化，但是右键单击Sources / Sources选项卡向我展示了Add folder to workspace 。 I was able to add my entire project, which gave me access to all of my JavaScripts. 我能够添加我的整个项目，这使我可以访问我的所有JavaScripts。 You can find more detail in this link . 您可以在此链接中找到更多详细信息。 I hope this helps somebody. 我希望这有助于某人。
解决方案13
0 2019-05-26 22:59:53
I know the Q is not about Firefox but I did not want to add a copy of this question to just answer it myself. 我知道Q不是关于Firefox但我不想添加这个问题的副本来自己回答。
For Firefox you need to add debugger; 对于Firefox，您需要添加debugger; to be able to do what @matt-ball suggested for the script tag. 能够做@ matt-ball为script标签建议的script 。
So on your code, you add debugger above the line you want to debug and then you can add breakpoints. 因此，在您的代码上，您将debugger添加到要调试的行上方，然后您可以添加断点。 If you just set the breakpoints on the browser it won't stop. 如果您只是在浏览器上设置断点，它将不会停止。
If this is not the place to add a Firefox answer given that the question is about Chrome.
解决方案14
0 2022-08-04 02:15:23
You have to add 'type="text/javascript"' to the script blocks for them to be picked up as script.您必须将 'type="text/javascript"' 添加到脚本块中，才能将它们作为脚本拾取。 EG: <script type="text/javascript">...your code here... </script> EG: <script type="text/javascript">...your code here... </script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.