45

如何在不进入 javascript 库的情况下使用 Google Chrome 开发人员工具逐行遍历我的 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 只是转到下一个断点，而不是逐行逐行执行。

4

2 回答 2

87

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

  1. 敲F12键
  2. 在开发人员工具中选择Scripts或选项卡Sources
  3. 单击顶层的小文件夹图标
  4. 选择您的JavaScript 文件
  5. 通过单击左侧的行号添加断点（添加一个小蓝色标记）
  6. 执行你的 JavaScript

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

  • F8继续：将一直持续到下一个断点
  • F10跳过：跳过下一个函数调用（不会进入库）
  • F11Step into：进入下一个函数调用（将 进入库）
  • Shift + F11Step out：跳出当前函数

更新

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

于 2012-05-17T14:56:30.960 回答
27

...如何在不进入 javascript 库的情况下使用 Google Chrome 开发人员工具逐行遍历我的 javascript 代码？...

记录在案：目前（2015 年 2 月）Google Chrome 和 Firefox 都具有您（和我）需要避免进入库和脚本，并超出我们感兴趣的代码的内容，它被称为 Black Boxing：

在此处输入图像描述

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

更多信息：

于 2015-02-11T18:00:22.437 回答