当我在谷歌Chrome中打开开发人员工具时，我看到了各种各样的功能，如配置文件，时间线和审计，但基本功能，如能够在js文件和html和javascript代码中设置断点是缺失的!我尝试使用javascript控制台，它本身就有bug——例如，一旦遇到JS错误，除非刷新整个页面，否则我无法摆脱它。有人能帮忙吗?
当前回答
在脚本选项卡上打开开发人员工具时，刷新包含脚本的页面。这将在文件列表中添加一个(程序)条目，显示页面的html(包括脚本)。从这里可以添加断点。
其他回答
您谈论的是<script>标记中的代码，还是HTML标记属性中的代码，就像这样?
<a href="#" onclick="alert('this is inline JS');return false;">Click</a>
无论哪种方式，像这样的调试器关键字都可以工作:
<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>
注意:如果开发工具没有打开，Chrome不会在调试器上暂停。
你也可以在JS文件和<script>标签中设置属性断点:
单击Sources选项卡 单击Show Navigator图标并选择文件 双击左侧空白处的a行号。相应的行被添加到Breakpoints面板(4)。
这是上文Rian Schmits回答的延伸。在我的例子中，我在JavaScript代码中嵌入了HTML代码，除了HTML代码，我看不到其他任何东西。也许Chrome调试已经改变了多年，但右键单击源/源选项卡给我添加文件夹到工作区。我可以添加我的整个项目，这让我可以访问我所有的JavaScripts。你可以在这个链接中找到更多细节。我希望这能帮助到一些人。
我的处境以及我是如何改变的: 我有一个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>
现在进入Javascript调试器在Chrome，我点击脚本选项卡，并下拉列表如上所示。我可以清楚地看到scripts/common.js，但我不能在下拉菜单中看到当前的html页面test.html，因此我无法调试嵌入的javascript:
<script type="text/javascript">
document.write("something");
</script>
这令人费解。然而，当我从嵌入脚本中删除过时的type="text/javascript"时:
<script>
document.write("something");
</script>
．．然后刷新/重新加载页面，瞧，它出现在下拉列表中，一切又恢复正常了。 我希望这对任何在html页面上调试嵌入式javascript有问题的人都有帮助。
对于像我这样的人:只是想
(添加断点)调试正常的js代码 < >脚本…</script>内部/嵌入HTML
步骤:
来源->页面->顶部->找到你的html ->点击->右侧显示html和js脚本->添加断点->调试
我遇到了这个问题，但是我的内联函数是在一个angularJS视图中。因此，在加载时，我无法访问内联脚本来添加调试，因为只有index.html在调试器的sources选项卡中可用。
这意味着，当我打开特定的视图与我的内联(没有选择在这)是不可访问的。
我能击中它的唯一方法是把一个错误的函数或调用内联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控制台提示。
Uncaught TypeError: undefined is not a function
这里重要的事情是它的来源:VM5658:6单击它可以让我遍历内联并将断点保留在那里以供以后使用。
极其复杂的到达方式。但是当处理动态加载视图的单页应用程序时，它是有用的。
虚拟机[n]无显著值，n on等于脚本ID。此信息可以在这里找到:Chrome“[VM]”
