使用 Google Chrome 逐行调试 Javascript

Javascript Debugging line by line using Google Chrome

提问by oshirowanen

How can I step through my javascript code line by line using Google Chromes developer tools without it going into javascript libraries?

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

For example, I am heavily using jQuery on my site, and I just want to debug the jQuery I have written, and not the javascript/jquery within the jquery libraries. How do I only step through my own jquery/javascript and not have to step through the millions of lines in the jquery libraries?

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

So if I have the following:

所以如果我有以下几点：

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
            });
        }
    });
}

if I place the breakpoint at $.ajax({, if I them start debugging that it where it stops, if I then press F11, it goes straight into the jQuery libraries. I don't want that to happen, I want it to go to the next line which is url: 'get_tab_frame.aspx?rand=' + Math.random(),.

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

I have tried pressing F10 instead, but that goes straight to the closing }of the function. And F5 just goes to the next breakpoint without stepping through each line one by one.

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

回答by Richard

Assuming you're running on a Windows machine...

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

1. Hit the F12key
2. Select the Scripts, or Sources, tab in the developer tools
3. Click the little folder icon in the top level
4. Select yourJavaScript file
5. Add a breakpoint by clicking on the line number on the left (adds a little blue marker)
6. Execute your JavaScript

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

Then during execution debugging you can do a handful of stepping motions...

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

• F8Continue: Will continue until the next breakpoint
• F10Step over: Steps over next function call (won'tenter the library)
• F11Step into: Steps into the next function call (willenter the library)
• Shift + F11Step out: Steps out of the current function

• F8Continue：会一直持续到下一个断点
• F10Step over：跳过下一个函数调用（不会进入库）
• F11步入：步入下一个函数调用（会进入库）
• Shift + F11Step out：跳出当前函数

Update

更新

After reading your updated post; to debug your code I would recommend temporarily using the jQuery Development Source Code. Although this doesn't directly solve your problem, it will allow you to debug more easily. For what you're trying to achieve I believe you'll need to step-in to the library, so hopefully the production code should help you decipher what's happening.

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

回答by Igor Parra

...How can I step through my javascript code line by line using Google Chromes developer tools without it going into javascript libraries?...

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

---

---

For the record: At this time (Feb/2015) both Google Chrome and Firefox have exactly what you (and I) need to avoid going inside libraries and scripts, and go beyond the code that we are interested, It's called Black Boxing:

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

When you blackbox a source file, the debugger will not jump into that file when stepping through code you're debugging.

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

More info:

更多信息：

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

• Chrome：Blackbox JavaScript 源文件
• Firefox：调试器中的黑盒库