使用Google Chrome逐行调试JavaScript代码

Question

使用Google Chrome逐行调试JavaScript代码

javascriptjquerydebugginggoogle-chromegoogle-chrome-devtools

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 键只是逐个跳过每个断点而不逐行进行。

- oshirowanen

你主要什么时候会遇到问题？当出现异常时吗？ - 2-bits

基本上，我有很多 JavaScript 代码，我已经无法在脑海中看到它的结构了，所以我只想逐步执行自己的代码，以便提醒自己它是如何工作的，找出问题所在。 - oshirowanen

这听起来非常类似于https://dev59.com/lmsz5IYBdhLWcg3wiYY0？rq=1 - rjmunro

看起来 https://dev59.com/52025IYBdhLWcg3wHR4Y#19032178 是你需要的答案。 - rjmunro

你可能会发现这个有用：如何在Google Chrome调试时终止脚本执行 - cssyphus

你也可以在代码中的任何位置添加 debugger，当 Chrome 执行到该处时，它会跳转到一个暂停的调试控制台，你可以在其中检查内存中的对象。同时，在开发工具菜单中也会出现一个调试器窗口。 - geotheory

2个回答

27

如何在使用Google Chrome开发者工具时逐行执行JavaScript代码，而不进入JavaScript库？

记录一下：截至2015年2月，谷歌Chrome和Firefox都有我们（包括我）需要的功能，可以避免进入库和脚本，并超越我们感兴趣的代码，它被称为黑盒化：

enter image description here

当你对源文件进行黑盒处理时，调试器在调试代码时不会跳转到该文件。

更多信息：

- Chrome: Blackbox JavaScript Source Files - Firefox: 在调试器中黑盒处理库

- Igor Parra

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Richard · Accepted Answer

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

按下F12键
在开发人员工具中选择Scripts或Sources选项卡
单击顶级文件夹图标
选择您的 JavaScript文件
通过单击左侧的行号添加断点(添加小蓝色标记)
执行JavaScript

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

F8 Continue: 将继续直至下一个断点
F10 Step over: 跳过下一个函数调用(不会进入库)
F11 Step into: 进入下一个函数调用(将进入库)
Shift + F11 Step out: 退出当前函数

更新

阅读您的更新帖子后；为了调试代码，我建议您暂时使用jQuery Development Source Code。虽然这并没有直接解决您的问题，但它将使您更容易地调试。对于您正在尝试的内容，我认为您需要步入库，因此生产代码应该有助于您解密发生了什么。