如何在Google Chrome浏览器的嵌入式Javascript中设置断点？
Answers:
使用“源”选项卡，您可以在其中的JavaScript中设置断点。在其下方的目录树中（带有向上和向下箭头），可以选择要调试的文件。您可以通过按同一选项卡右侧的“恢复”来避免出现错误。
<script> your code </script>像添加名称：<script> your code //# sourceURL=somename.js </script> 这是在下面的答案解释的更好
您是在谈论<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>注意：debugger如果未打开开发工具，Chrome将不会在暂停。
您还可以在JS文件和<script>标签中设置属性断点：
- 点击来源标签
- 单击显示导航器图标，然后选择一个文件
- 双击左边距中的行号。相应的行将添加到“ 断点”面板（4）。
Sources而不是Scripts现在。
您还可以为脚本命名：
<script>
... (your code here)
//# sourceURL=somename.js
</script>
当然，用一些名称替换“ somename”；），然后您将在chrome调试器中的“源>顶部>（无域）> somename.js”处看到它作为普通脚本，就可以像其他脚本一样对其进行调试
在脚本选项卡上打开开发人员工具的同时刷新包含脚本的页面。这将在文件列表中添加一个（程序）条目，该条目显示包含脚本的页面的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>现在，在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时遇到问题的人有所帮助。
type是必需属性。在HTML5中，它是可选的。
<div>使我看不到调试器中的代码
我遇到了这个问题，但是我的内联函数使用了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 Consolse中被提示。
Uncaught TypeError: undefined is not a function 重要的是这里的来源： VM5658:6单击此按钮使我可以逐步遍历内联并将断点保持在那里以备后用。
达到它的方式非常费劲。.但是它可以工作，并且在处理动态加载视图的单页应用程序时可能很有用。
的VM[n]值无明显意义，且“ n开”等于脚本ID。可以在这里找到此信息：Chrome“ [VM]”
我知道问题并不重要，Firefox但我不想添加此问题的副本以自己回答。
对于Firefox，您需要添加 debugger;以能够执行为标签建议的@ matt-ballscript。
因此，在代码上，您debugger要在要调试的行上方添加，然后可以添加断点。如果仅在浏览器上设置断点，它将不会停止。
考虑到问题与Chrome有关，如果不是在此添加Firefox答案的地方。不要:(减去答案只是让我知道我应该在哪里发布它，我会很乐意将帖子移动。:)
这是Rian Schmits上面答案的扩展。就我而言，我的JavaScript代码中嵌入了HTML代码，除了HTML代码之外，我什么都看不到。也许这些年来，Chrome调试已发生了变化，但是右键单击“源/源”选项卡向我显示了“ 将文件夹添加到工作区”。我能够添加我的整个项目，这使我可以访问所有JavaScript。您可以在此链接中找到更多详细信息。我希望这对某人有帮助。