Question

当我在谷歌浏览器中打开开发人员工具时，我会看到各种功能，如个人资料，时间轴和审核，但基本功能，如能够在js文件和html和javascript代码中设置断点！我试图使用javascript控制台，它本身就是错误的 - 例如，一旦遇到JS错误，除非我刷新整个页面，否则我无法摆脱它。有人可以帮忙吗？

Answer 1

您是在讨论<script>代码中的代码，还是HTML代码属性中的代码？

<a href="#" onclick="alert('this is inline JS');return false;">Click</a>

无论哪种方式，这样the debugger keyword都可行：

<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>

N.B。如果开发工具未打开，Chrome将不会在debugger暂停。

您还可以在JS文件和<script>标记中设置属性断点：

点击来源标签
单击显示导航器图标并选择文件
双击左侧边距中的a行号。相应的行将添加到断点面板（4）。

enter image description here

Answer 2

使用sources选项卡，您可以在JavaScript中设置断点。在其下面的目录树中（带有向上和向下箭头），您可以选择要调试的文件。您可以通过按相同选项卡右侧的“恢复”来解决错误。

Answer 3

您还可以为脚本命名：

function processData(input) { //Enter your code here input = input.split("\n"); var array = input[1].split(" "); insertionSort(array); } function insertionSort(array){ for(var i=1; i<array.length; i++){ for(var j=i; j>0; j--){ if(array[j-1] > array[j]){ var temp = array[j-1]; array[j-1] = array[j]; array[j] = temp; } } console.log(array.toString().replace(/,/g," ")); } }

ofcourse用某个名称替换“somename”;）然后你会在Chrome调试器的“Sources＆gt; top＆gt;（没有域名）＆gt; somename.js”中看到它作为普通脚本，你将能够像其他脚本一样调试它

Answer 4

在脚本选项卡上打开开发人员工具的同时刷新包含脚本的页面。这将在文件列表中添加一个（程序）条目，该条目显示包含脚本的页面的html。从这里你可以添加断点。

Answer 5

调试ajax返回的html内部脚本的另一个直观的简单技巧是临时将console.log（“test”）放入脚本中。

触发事件后，打开开发人员工具中的控制台选项卡。您将看到“test”调试print语句右侧显示的源文件链接。只需单击源（类似于VM4xxx），您现在可以设置断点。

P.S。：另外，你可以考虑使用“调试器”语句，如果你正在使用chrome，就像@Matt Ball所建议的那样

Answer 6

我的情况和我做了什么来解决它：
我在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调试器，我单击“脚本”选项卡，然后如下所示下拉列表。我可以清楚地看到 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问题的人都有帮助。

Answer 7

在我的脚本上添加debugger;为我工作。

Answer 8

我也遇到了同样的问题，即如何调试<script>标记内的JavaScript。但是后来我在带有“”的“ Sources”选项卡下的“（index）”下找到了它。单击行号以设置断点。

这是Chrome71。

Answer 9

如果您看不到“脚本”标签，请确保使用正确的参数启动Chrome。当我使用参数--remote-shell-port=9222启动Chrome以调试服务器端JavaScript时，我遇到了这个问题。如果我在没有参数的情况下启动Chrome，我没有问题。

Answer 10

我遇到过这个问题，但是我的内联函数正在使用angularJS视图。因此在加载时我无法访问内联脚本来添加调试，因为只有index.html在调试器的sources选项卡中可用。

这意味着当我用我的内联打开特定视图时（没有选择），它无法访问。

我能够击中它的onlly方法是在内联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 on等于脚本ID。此信息可在此处找到：Chrome "[VM]"

Answer 11

使用 Visual Studio （2012）我遇到了同样的问题，切换到 IIS Express 解决了这个问题！

script标记的type属性没有考虑到它。

出于某种原因， Visual Studio开发服务器不提供Chrome启用断点所需的所有内容。

Answer 12

这是上面Rian Schmits' answer的扩展。就我而言，我的JavaScript代码中嵌入了HTML代码，除了HTML代码之外，我看不到任何其他内容。也许Chrome调试已经发生了多年的变化，但是右键单击“源/源”选项卡会向我显示将文件夹添加到工作区。我能够添加我的整个项目，这使我可以访问我的所有JavaScripts。您可以找到更多详细信息in this link。我希望这有助于某人。

Answer 13

我知道问题与Firefox无关，但我不想添加此问题的副本以自己回答。

对于Firefox，您需要添加debugger;才能执行@matt-ball为script标签建议的操作。

因此，在代码上，在要调试的行上方添加debugger，然后可以添加断点。如果仅在浏览器上设置断点，它将不会停止。

如果不是有关Chrome的问题，则不是添加Firefox答案的地方。不要:(减去答案只是让我知道我应该在哪里发布它，我会很乐意将其发布。：）

如何在Google Chrome中的内嵌Javascript中设置断点？

13 个答案: