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

问题描述

如果不使用Google Chromium开发工具，我如何逐行处理我的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?

所以如果我有以下内容： p>

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

如果我将断点放在$ code $ $ 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只是去下一个断点，而不是逐个逐行地遍历每一行。 / p>

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. 选择脚本或来源，开发人员工具中的标签


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 继续：将继续下一个断点


• F10 步骤：下一个函数调用步骤（不会输入
  库）


• F11 步入：进入下一个函数调用（将
  输入库）


• Shift + F11 退出：从当前的
  函数中退出

• 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.

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