如何在Google Chrome中的内嵌Javascript中设置断点？
ace*_*ace 199 javascript debugging google-chrome
当我在谷歌浏览器中打开开发人员工具时,我会看到各种功能,如个人资料,时间轴和审核,但基本功能,如能够在js文件和html和javascript代码中设置断点!我试图使用javascript控制台,它本身就是错误的 - 例如,一旦遇到JS错误,除非我刷新整个页面,否则我无法摆脱它.有人可以帮忙吗？
Mat*_*all 202
您是在谈论<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>
NB Chrome不会在暂停debugger■如果开发者工具都打不开.
您还可以在JS文件和<script>标记中设置属性断点:
- 单击" 源"选项卡
- 单击" 显示导航器"图标,然后选择一个文件
- 双击左侧边距中的行号.相应的行将添加到" 断点"面板(4).
- 该选项卡现在称为"Sources"而不是"Scripts". (8认同)
- 我的意思是能够在html中的脚本标记内设置断点.我也试过使用调试器; 关键字,但它不起作用.Chrome没有断点,但它适用于Firefox.我正在寻找不基于调试器关键字的断点解决方案,这不便于在代码中放入很多地方然后不得不删除. (5认同)
- 没有"脚本"选项卡.我看到此图片中的所有其他标签但没有"脚本"标签! (4认同)
- 当我尝试调试 html 嵌入式 js 时，我的开发区域中出现了一个空白页面。我必须在查看空白源文件时刷新才能将其填充。 (4认同)
- 在Scripts选项卡下的下拉列表中,我只看到列出的JS文件,而不是包含我要调试的<script>标记的HTML文件.FF上的Firebug具有类似的下拉列表,但也列出了包含<script>标记的HTML文件.这是一个错误还是有其他方法在内联JS代码中设置断点？ (2认同)
Ria*_*its 118
使用sources选项卡,您可以在JavaScript中设置断点.在其下面的目录树中(带有向上和向下箭头),您可以选择要调试的文件.您可以通过按相同选项卡右侧的"恢复"来解决错误.
- @ulu,我遇到了同样的问题.确保在<script>元素上设置了type ="text/javascript"属性. (63认同)
- 由于某种原因,我看到包含的js文件的列表,但我无法选择执行页面本身,它不会显示在列表中.有任何想法吗？ (28认同)
- 除了在HTML5中,此属性不再是必需的.我没有改变源代码只是为了调试! (9认同)
- 添加type ="text/javascript"后我甚至都看不到 (9认同)
- 如果这不起作用，并且您有内联 javascript 代码，例如：`<script> your code </script>`，请添加以下名称：`<script> your code //# sourceURL=somename.js </script>` [这在下面的答案中有更好的解释](/sf/answers/2740930461/) (6认同)
小智 55
您还可以为脚本命名:
<script>
... (your code here)
//# sourceURL=somename.js
</script>
ofcourse用某个名称替换"somename";)然后你会在Chrome调试器的"Sources> top>(no domain)> somename.js"中看到它作为普通脚本,你可以像其他脚本一样调试它
- 最简单和完美的方式去。但请注意其他人，请记住在将其推送到生产之前将其删除。 (3认同)
- 如果可以的话，我会给你 1000 票；）非常有用的技巧 (3认同)
- 天哪，你不知道这对我有多大帮助。哦，天哪，这太棒了。多年来，我一直在寻找这样的东西。 (2认同)
ken*_*ken 17
调试ajax返回的html中的脚本的另一个直观的简单技巧是临时将console.log("test")放入脚本中.
触发事件后,打开开发人员工具中的控制台选项卡.您将看到"test"调试print语句右侧显示的源文件链接.只需单击源(类似于VM4xxx),您现在可以设置断点.
PS:另外,你可以考虑使用"调试器"语句,如果你使用的是chrome,就像@Matt Ball所建议的那样
小智 10
我的情况和我做了什么来解决它:
我在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调试程序,单击"脚本"选项卡,然后如下所示下拉列表.我可以清楚地看到脚本/ common.js不过我可以不看当前HTML页面的test.html在下拉,所以我不能调试嵌入的JavaScript:
<script type="text/javascript">
document.write("something");
</script>
那令人困惑.但是,当我从嵌入式脚本中删除过时的type ="text/javascript"时:
<script>
document.write("something");
</script>
..并刷新/重新加载页面,瞧,它出现在下拉列表中,一切都很好.
我希望这对任何在html页面上调试嵌入式javascript问题的人都有帮助.
- 它与类型没有任何关系。脚本在执行后由 VM 收集，除非此时已打开检查器。当您重新加载页面时，它没有收集脚本。 (2认同)
我也遇到了同样的问题，如何调试<script>标签内的 JavaScript 。但是后来我在 Sources 选项卡下找到了它，称为“（index）”，带括号。单击行号以设置断点。
这是 Chrome 71。
- 如何查找/打开这个“(index)”文件？ (6认同)
我知道问题不是关于Firefox但我不想添加这个问题的副本来自己回答。
对于 Firefox，您需要添加 debugger;才能执行@matt-ball建议的script标记操作。
因此，在您的代码中，您可以debugger在要调试的行上方添加，然后可以添加断点。如果您只是在浏览器上设置断点，它就不会停止。
如果这不是添加 Firefox 答案的地方，因为问题是关于 Chrome 的。不要:(减去答案，只是让我知道应该将其发布到哪里，我会很乐意移动该帖子。:)
| 归档时间： |
|
| 查看次数： |
161719 次 |
| 最近记录： |