使用 Google Chrome 逐行调试 Javascript

IT技术 javascript jquery debugging google-chrome google-chrome-devtools
2021-01-29 06:11:25

如何使用 Google Chromes 开发人员工具逐行执行我的 javascript 代码而不进入 javascript 库?

例如,我在我的网站上大量使用 jQuery,我只想调试我编写的 jQuery,而不是 jquery 库中的 javascript/jquery。我如何只单步执行我自己的 jquery/javascript 而不必单步执行 jquery 库中的数百万行?

所以如果我有以下几点:

function getTabFrame() {
    $.ajax({
        url: 'get_tab_frame.aspx?rand=' + Math.random(),
        type: 'GET',
        dataType: 'json',
        error: function(xhr, status, error) {
            //alert('Error: ' + status + '\nError Text: ' + error + '\nResponse Text: ' + xhr.responseText);
        },
        success: function(data) {
            $.each(data, function(index, item) {
                // do something here
            });
        }
    });
}

如果我将断点放在$.ajax({,如果我开始调试它在它停止的地方,如果我然后按 F11,它会直接进入 jQuery 库。我不希望这种情况发生,我希望它转到下一行,即url: 'get_tab_frame.aspx?rand=' + Math.random(),.

我试过按 F10 键,但这直接}导致函数关闭而F5只是去下一个断点,没有逐行逐行。

2个回答

假设您在 Windows 机器上运行...

  1. F12关键
  2. 在开发者工具中选择Scripts, 或Sources, 选项卡
  3. 单击顶层的小文件夹图标
  4. 选择您的JavaScript 文件
  5. 通过点击左边的行号添加断点(添加一点蓝色标记)
  6. 执行你的 JavaScript

然后在执行调试期间你可以做一些步进运动......

  • F8 Continue:会一直持续到下一个断点
  • F10Step over:跳过下一个函数调用(不会进入库)
  • F11step into:进入下一个函数调用( 进入库)
  • Shift + F11 Step out:跳出当前函数

更新

阅读您更新的帖子后;要调试您的代码,我建议暂时使用jQuery 开发源代码虽然这不能直接解决您的问题,但它可以让您更轻松地进行调试。对于您想要实现的目标,我相信您需要介入到库中,因此希望生产代码可以帮助您破译正在发生的事情。

除非我搞错了,在 Chrome 开发者工具中,我相信 F5 会刷新页面;F8 是继续键,不是吗?
2021-03-20 06:11:25
F5 也将一直持续到最后它会刷新
2021-03-22 06:11:25
我已经更新了我的答案,希望它应该会有所帮助。
2021-03-23 06:11:25
如果我的 js 代码在 Html 文件中怎么办??
2021-03-30 06:11:25
请参阅我的问题中的其他信息,以举例说明正在发生的事情。我觉得 Google Chrome 的开发人员工具无法逐行进行类型调试?
2021-04-05 06:11:25

...如何使用 Google Chromes 开发人员工具逐行执行我的 javascript 代码而不进入 javascript 库?...


记录:此时(2015 年 2 月)Google Chrome 和 Firefox 都拥有您(和我)需要避免进入库和脚本并超出我们感兴趣的代码的内容,这称为黑盒:

在此处输入图片说明

当您对源文件进行黑盒处理时,调试器不会在单步调试您正在调试的代码时跳转到该文件。

更多信息:

就是这样,这对调试非常有用,谢谢。
2021-03-16 06:11:25