使用 Google Chrome 逐行调试 Javascript [英] Javascript Debugging line by line using Google Chrome

问题描述

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

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

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

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?

所以如果我有以下几点:

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 + '
Error Text: ' + error + '
Response 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(),.

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(),.

我曾尝试按 F10 键，但这会直接进入函数的结束 }.而F5只是直接到下一个断点，没有逐行逐行.

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.

推荐答案

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

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

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

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

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

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

• F8 Continue:会一直持续到下一个断点
• F10 Step over:跳过下一个函数调用(不会输入图书馆)
• F11 步入:步入下一个函数调用(将进入图书馆)
• Shift + F11 Step out:跳出当前功能

• F8 Continue: Will continue until the next breakpoint
• F10 Step over: Steps over next function call (won't enter the library)
• F11 Step into: Steps into the next function call (will enter the library)
• Shift + F11 Step out: Steps out of the current function

更新

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

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.

这篇关于使用 Google Chrome 逐行调试 Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！