Question

如何使用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只是一个接一个地进入下一个断点而没有逐步走过每一行。

Answer 1

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

点击F12键
选择开发人员工具中的Scripts或Sources标签
点击顶层的小文件夹图标
选择您的 JavaScript文件
点击左侧的行号（添加一点蓝色标记）
执行您的JavaScript

然后在执行调试期间，你可以做一些踩踏动作......

F8继续：将继续下一个断点
F10跳过：跳过下一个函数调用（不会输入库）
F11踏入：进入下一个函数调用的步骤（将进入图书馆）
Shift + F11走出去：离开现在的步骤功能

<强>更新

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

Answer 2

...如何使用Google Chromes开发人员工具逐行浏览我的javascript代码，而无需进入javascript库？...

记录：此时（2015年2月）谷歌浏览器和Firefox都有你（和我）需要避免进入库和脚本，并超越我们感兴趣的代码，它被称为黑色拳击：

enter image description here

当你对源文件进行黑盒子时，调试器不会跳转到那个在单步调试时调用文件。

更多信息：

Chrome：Blackbox JavaScript Source Files
Firefox：Black box libraries in the Debugger

Javascript使用谷歌浏览器逐行调试

2 个答案: