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?
当我在谷歌Chrome中打开开发人员工具时，我看到了各种特性，比如概要文件、时间线和审计，但是基本的功能，比如能够在js文件中，在html和javascript代码中设置断点，都是缺失的!我尝试使用javascript控制台，它本身就是bug——例如，一旦它遇到了JS错误，我就无法跳出它，除非我刷新整个页面。有人可以帮忙吗?
11 个解决方案
#1
99
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.
使用sources选项卡，可以在JavaScript中设置断点。在它下面的目录树中(其中有上下箭头)，您可以选择要调试的文件。您可以通过在同一选项卡的右侧按resume来避免错误。
#2
184
Are you talking about code within <script> tags, or in the HTML tag attributes, like this?
您是在讨论
<a href="#" onclick="alert('this is inline JS');return false;">Click</a>
Either way, the debugger keyword like this will work:
无论哪种方式，调试器关键字都可以:
<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.
如果开发工具没有打开，那么Chrome不会在调试器上暂停。
You can also set property breakpoints in JS files and <script> tags:
您还可以在JS文件中设置属性断点，以及
- Click the Sources tab
- 单击“源”选项卡
- Click the Show Navigator icon and select the a file
- 单击Show Navigator图标并选择a文件
- Double-click the a line number in the left-hand margin. A corresponding row is added to the Breakpoints panel (4).
- 双击左边空白处的a行号。将相应的行添加到断点面板(4)。
#3
33
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.
当开发人员工具在scripts项上打开时，刷新包含脚本的页面。这将在文件列表中添加一个(程序)条目，它显示了包含脚本的页面的html。从这里可以添加断点。
#4
18
You also can give a name to your script:
你也可以给你的剧本起个名字:
<script> ... (your code here) //# sourceURL=somename.js </script>
< >脚本…(你的代码在这里)//# sourceURL=somename。js脚本< / >
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”)，然后您将在“source > top >(无域名)> somename”的chrome调试器中看到它。作为一个普通的脚本，您可以像调试其他脚本一样调试它
#5
14
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.
一旦您触发了事件，在developer tools中打开控制台选项卡。您将看到“测试”调试打印语句右侧显示的源文件链接。只需单击源代码(比如VM4xxx)，就可以设置断点。
P.S.: besides, you can consider to put "debugger" statement if you are using chrome, like what is being suggested by @Matt Ball
注::此外，如果你使用的是chrome，你可以考虑使用“调试器”语句，如@Matt Ball建议的那样
#6
9
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
我的情况和我做了什么来修复它:我有一个javascript文件包含在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. 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:
现在，我在Chrome中输入Javascript调试器，单击Scripts选项卡，然后按下列表，如上面所示。我能清楚地看到脚本/常见的。但是我看不到当前的html页面测试。在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:
这是令人费解的。但是，当我从嵌入式脚本中删除过时的类型=“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
2
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.
如果您看不到“Scripts”选项卡，请确保使用正确的参数启动Chrome。我在启动Chrome调试服务器端JavaScript时遇到了这个问题——remote-shell-port=9222。我没有问题，如果我启动Chrome没有任何争论。
#8
2
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视图。因此，在加载时，我无法访问内联脚本以添加调试(仅作为索引)。在调试器的sources选项卡中可以使用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安慰中被提示。
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. This info can be found here : Chrome "[VM]"
VM[n]没有显著的值，而n则等于脚本ID。
#9
0
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.
脚本标记的类型属性没有考虑进去。
For some reason the Visual Studio Development Server does not provide everything Chrome needs to enable the breakpoints.
由于某些原因，Visual Studio开发服务器并没有提供所有Chrome需要的东西来启用断点。
#10
0
This is an extension of Rian Schmits' answer above. In my case, I had HTML code embedded in my JavaScript code and I couldn't see anything other than the HTML code. Maybe Chrome Debugging has changed over the years but right-clicking the Sources/Sources tab presented me with Add folder to workspace. I was able to add my entire project, which gave me access to all of my JavaScripts. You can find more detail in this link. I hope this helps somebody.
这是Rian Schmits在上面的回答的延伸。在我的例子中，我在JavaScript代码中嵌入了HTML代码，除了HTML代码，我什么都看不到。也许Chrome的调试已经改变了多年，但是右键点击source /Sources选项卡给我提供了添加文件夹到工作空间。我可以添加我的整个项目，这使我可以访问我所有的javascript。你可以在这个链接中找到更多的细节。我希望这对某人有帮助。
#11
0
Adding debugger; on top at my script worked for me.
添加调试器;最重要的是，我的剧本对我起了作用。
#1
99
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.
使用sources选项卡，可以在JavaScript中设置断点。在它下面的目录树中(其中有上下箭头)，您可以选择要调试的文件。您可以通过在同一选项卡的右侧按resume来避免错误。
#2
184
Are you talking about code within <script> tags, or in the HTML tag attributes, like this?
您是在讨论
<a href="#" onclick="alert('this is inline JS');return false;">Click</a>
Either way, the debugger keyword like this will work:
无论哪种方式，调试器关键字都可以:
<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.
如果开发工具没有打开，那么Chrome不会在调试器上暂停。
You can also set property breakpoints in JS files and <script> tags:
您还可以在JS文件中设置属性断点，以及
- Click the Sources tab
- 单击“源”选项卡
- Click the Show Navigator icon and select the a file
- 单击Show Navigator图标并选择a文件
- Double-click the a line number in the left-hand margin. A corresponding row is added to the Breakpoints panel (4).
- 双击左边空白处的a行号。将相应的行添加到断点面板(4)。
#3
33
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.
当开发人员工具在scripts项上打开时，刷新包含脚本的页面。这将在文件列表中添加一个(程序)条目，它显示了包含脚本的页面的html。从这里可以添加断点。
#4
18
You also can give a name to your script:
你也可以给你的剧本起个名字:
<script> ... (your code here) //# sourceURL=somename.js </script>
< >脚本…(你的代码在这里)//# sourceURL=somename。js脚本< / >
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”)，然后您将在“source > top >(无域名)> somename”的chrome调试器中看到它。作为一个普通的脚本，您可以像调试其他脚本一样调试它
#5
14
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.
一旦您触发了事件，在developer tools中打开控制台选项卡。您将看到“测试”调试打印语句右侧显示的源文件链接。只需单击源代码(比如VM4xxx)，就可以设置断点。
P.S.: besides, you can consider to put "debugger" statement if you are using chrome, like what is being suggested by @Matt Ball
注::此外，如果你使用的是chrome，你可以考虑使用“调试器”语句，如@Matt Ball建议的那样
#6
9
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
我的情况和我做了什么来修复它:我有一个javascript文件包含在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. 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:
现在，我在Chrome中输入Javascript调试器，单击Scripts选项卡，然后按下列表，如上面所示。我能清楚地看到脚本/常见的。但是我看不到当前的html页面测试。在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:
这是令人费解的。但是，当我从嵌入式脚本中删除过时的类型=“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
2
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.
如果您看不到“Scripts”选项卡，请确保使用正确的参数启动Chrome。我在启动Chrome调试服务器端JavaScript时遇到了这个问题——remote-shell-port=9222。我没有问题，如果我启动Chrome没有任何争论。
#8
2
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视图。因此，在加载时，我无法访问内联脚本以添加调试(仅作为索引)。在调试器的sources选项卡中可以使用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安慰中被提示。
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. This info can be found here : Chrome "[VM]"
VM[n]没有显著的值，而n则等于脚本ID。
#9
0
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.
脚本标记的类型属性没有考虑进去。
For some reason the Visual Studio Development Server does not provide everything Chrome needs to enable the breakpoints.
由于某些原因，Visual Studio开发服务器并没有提供所有Chrome需要的东西来启用断点。
#10
0
This is an extension of Rian Schmits' answer above. In my case, I had HTML code embedded in my JavaScript code and I couldn't see anything other than the HTML code. Maybe Chrome Debugging has changed over the years but right-clicking the Sources/Sources tab presented me with Add folder to workspace. I was able to add my entire project, which gave me access to all of my JavaScripts. You can find more detail in this link. I hope this helps somebody.
这是Rian Schmits在上面的回答的延伸。在我的例子中，我在JavaScript代码中嵌入了HTML代码，除了HTML代码，我什么都看不到。也许Chrome的调试已经改变了多年，但是右键点击source /Sources选项卡给我提供了添加文件夹到工作空间。我可以添加我的整个项目，这使我可以访问我所有的javascript。你可以在这个链接中找到更多的细节。我希望这对某人有帮助。
#11
0
Adding debugger; on top at my script worked for me.
添加调试器;最重要的是，我的剧本对我起了作用。