使用调试程序功能Use the debugger features

本文介绍了如何在 DevTools Microsoft Edge调试器,包括如何设置代码行断点。This article covers how to use the debugger in Microsoft Edge DevTools, including how to set a line-of-code breakpoint. 若要设置其他类型的断点,请参阅使用断点 暂停代码To set other types of breakpoints, see Pause your code with breakpoints.

若要了解调试的基础知识,请导航到Microsoft Edge DevTools中调试 JavaScript 的入门,这是一个使用基于表单的现有网页的教程。To learn the basics of debugging, navigate to Get started with debugging JavaScript in Microsoft Edge DevTools, which is a tutorial that uses an existing, form-based webpage. 本教程具有屏幕捕获,因此你可以浏览它。The tutorial has screen captures, so you can skim it. 您可以使用演示网页轻松试用调试器功能。You can easily try out the debugger features by using the demo webpage.

查看和编辑 JavaScript 代码View and edit JavaScript code

修复 Bug 时,经常希望尝试对 JavaScript 代码进行一些更改。When fixing a bug, you often want to try out some changes to your JavaScript code. 无需在外部编辑器或 IDE 中进行更改,将文件重新上载到服务器,然后刷新页面;相反,若要测试更改,可以直接在 DevTools 中编辑 JavaScript 代码并立即查看结果。You don't need to make the changes in an external editor or IDE, re-upload the file to the server, and then refresh the page; instead, to test changes, you can edit your JavaScript code directly in DevTools and see the result immediately.

若要查看和编辑 JavaScript 文件,请运行:To view and edit a JavaScript file:

  1. 导航到 "源" 工具。Navigate to the Sources tool.

  2. 导航器窗格中 ,选择你的文件,以在编辑器窗格中 打开 它。In the Navigator pane, select your file, to open it in the Editor pane.

  3. 在" 编辑器" 窗格中,编辑文件。In the Editor pane, edit your file.

  4. 选择 Ctrl+S (Windows、Linux) 或 Command+S (macOS) 进行保存。Select Ctrl+S (Windows, Linux) or Command+S (macOS) to save. 然后,DevTools 将 JavaScript 文件加载至 Microsoft Edge。DevTools then loads the JavaScript file into the JavaScript engine of Microsoft Edge.

    编辑器窗格

使用非常打印重新设置缩小的 JavaScript 文件Reformat a minified JavaScript file with pretty-print

若要使缩小的文件可读,请选择"编辑器"窗格底部的****"格式  \ (Format ) " 按钮。To make a minified file human-readable, choose the Format (Format) button at the bottom of the Editor pane.

格式按钮

设置断点以暂停代码Set a breakpoint, to pause code

若要在运行时期间暂停代码,请设置一个断点。To pause your code in the middle of the runtime, set a breakpoint. 最基本的和已知的断点类型是代码行断点。The most basic and well-known type of breakpoint is a line-of-code breakpoint.

知道需要调查的确切代码区域时,使用代码行断点。Use a line-of-code breakpoint when you know the exact region of code that you need to investigate. DevTools 始终在指定的代码行暂停,然后再运行它。DevTools always pauses at the specified line of code, before running it.

设置代码行断点:To set a line-of-code breakpoint:

  1. 导航到 "源" 工具。Navigate to the Sources tool.

  2. 打开包含代码行的文件。Open the file that contains the line of code.

  3. 选择代码行的行号左侧的区域。Select the area to the left of the line number for the line of code. 或者,右键单击行号,然后选择"添加断点"。Or, right-click the line number and then choose Add breakpoint. 然后,行号旁边会出现一个红色圆圈,指示断点。A red circle then appears next to the line number, indicating a breakpoint.

    代码行断点

代码行断点设置效率可能较低,尤其是在您不知道具体查找位置或代码库较大时。Line-of-code breakpoints may be inefficient to set, especially if you do not know exactly where to look, or if your codebase is large. 若要在调试时节省时间,请了解如何以及何时使用其他类型的断点。To save time when debugging, learn how and when to use the other types of breakpoints. 有关详细信息,请导航到"使用断点暂停代码"。For more information, navigate to Pause your code with breakpoints.

单步执行代码Step through code

在断点暂停代码后,逐步执行代码,一次一行,一直调查控制流和属性值。After your code is paused at a breakpoint, step through the code, one line at a time, investigating control flow and property values along the way.

逐步执行代码Step over line of code

当暂停包含与正在调试的问题不相关的函数的代码行时,选择"单步执行**\ (** 单步  执行 ) "按钮以在不单步执行的情况下运行函数。 When paused on a line of code containing a function that isn't relevant to the problem you are debugging, choose the Step over (Step over) button to run the function without stepping into it.

选择逐步执行

例如,假设您正在调试以下代码段。For example, suppose you are debugging the following code snippet.

function updateHeader() {
    var day = new Date().getDay();
    var name = getName(); // A
    updateName(name); // D
}
function getName() {
    var name = app.first + ' ' + app.last; // B
    return name; // C
}

你已在 A 上暂停。You are paused on A. 选择“逐步执行”后,DevTools 将运行要逐步执行的函数中的所有代码,即 BCAfter you choose Step over, DevTools runs all the code in the function that you are stepping over, which is B and C. DevTools 随后在 D 上暂停。DevTools then pauses on D.

逐行执行代码Step into line of code

暂停包含与正在调试的问题相关的函数调用的代码行时,选择“逐行执行 (逐行执行) "按钮以进一步调查该函数。When paused on a line of code containing a function call that is related to the problem you are debugging, choose the Step into (Step into) button to investigate that function further.

选择逐行执行

例如,假设您正在调试以下代码段。For example, suppose you are debugging the following code snippet.

function updateHeader() {
    var day = new Date().getDay();
    var name = getName(); // A
    updateName(name);
}
function getName() {
    var name = app.first + ' ' + app.last; // B
    return name;
}

你已在 A 上暂停。You are paused on A. 选择“逐行执行”后,DevTools 将运行此代码行,然后在 B 上暂停。After you choose Step into, DevTools runs this line of code, then pauses on B.

执行剩余代码Step out of line of code

当暂停在与正在调试的问题不相关的函数内时,选择"单步执行 \ ( 单步执行 ) "按钮以运行函数的其余  代码。When paused inside of a function that isn't related to the problem you are debugging, choose the Step out (Step out) button to run the rest of the code of the function.

选择执行剩余

例如,假设您正在调试以下代码段。For example, suppose you are debugging the following code snippet.

function updateHeader() {
    var day = new Date().getDay();
    var name = getName();
    updateName(name); // C
}
function getName() {
    var name = app.first + ' ' + app.last; // A
    return name; // B
}

你已在 A 上暂停。You are paused on A. 选择“执行剩余”后,DevTools 将运行 getName() 中代码的剩余部分,在此示例中为 B,然后在 C 上暂停。After you choose Step out, DevTools runs the rest of the code in getName(), which is just B in this example, and then pauses on C.

运行所有代码到特定行Run all code up to a specific line

调试长函数时,可能有许多代码与正在调试的问题不相关。When debugging a long function, there may be a lot of code that isn't related to the problem you are debugging.

你可以选择逐行执行,但这很繁琐。You may choose to step through all the lines, but that is tedious. 您可以选择在感兴趣的行上设置代码行断点,然后选择 Resume 脚本 执行 \ (Resume 脚本执行  ) 按钮,但有一种更快的方法 You may choose to set a line-of-code breakpoint on the line in which you are interested and then choose the Resume script execution (Resume script execution) button, but there is a faster way.

将鼠标悬停在你感兴趣的代码行上,打开上下文菜单 (右键单击) ,然后选择“继续至此处”。Hover on the line of code in which you are interested, open the contextual menu (right-click), and choose Continue to here. DevTools 会运行所有代码,一直运行到该处,然后暂停到该行。DevTools runs all of the code up to that point, and then pauses on that line.

选择继续至此处

重新启动调用的顶部函数Restart the top function of the call stack

若要暂停调用堆栈中顶部函数的第一行,同时在代码行上暂停,请将鼠标悬停在"调用堆栈"窗格中的任意位置****,打开上下文菜单 \ (右键单击) ,然后选择"重新启动帧"。To pause on the first line of the top function in your call stack, while paused on a line of code, hover anywhere in the Call Stack pane, open the contextual menu (right-click), and choose Restart frame. top 函数是最后一个运行的函数。The top function is the last function that was run.

下面的代码段是一个分步执行示例。The following code snippet is an example for you to step-through.

function factorial(n) {
    var product = 0; // B
    for (var i = 1; i <= n; i++) {
      product += i;
    }
    return product; // A
}

你已在 A 上暂停。You are paused on A. 选择重启帧后,应暂停在 上 B ,无需设置断点或选择 "恢复脚本执行"。After choosing Restart frame, you should be paused on B, without ever setting a breakpoint or choosing Resume script execution.

选择重启帧

恢复脚本运行时Resume script runtime

若要在脚本暂停后继续运行时,请选择 Resume script execution \ (Resume script  execution ) button。To continue the runtime after a pause of your script, choose the Resume script execution (Resume script execution) button. DevTools 将一直运行脚本,直到下一个断点(如果有)。DevTools runs the script up until the next breakpoint, if any.

选择恢复脚本执行

强制脚本运行时Force script runtime

若要忽略所有断点并强制脚本继续运行,请选择并按住 Resume脚本执行 \ (Resume 脚本执行 ) 按钮,然后选择"强制脚本执行  \ (强制脚本执行****  ) "按钮。To ignore all breakpoints and force your script to continue to run, choose and hold the Resume script execution (Resume script execution) button and then choose the Force script execution (Force script execution) button.

选择强制脚本执行

更改线程上下文Change thread context

使用 Web 工作进程或服务工作进程时,选择“线程”窗格中列出的上下文以切换到该上下文。When working with web workers or service workers, choose on a context listed in the Threads pane to switch to that context. 蓝色箭头图标表示当前选定的上下文。The blue arrow icon represents which context is currently selected.

线程窗格

例如,你在主脚本和服务工作进程脚本的断点上暂停。For example, suppose that you are paused on a breakpoint in both your main script and your service worker script. 您希望查看服务工作器上下文的本地和全局属性,但 Sources 工具显示主脚本上下文。You want to view the local and global properties for the service worker context, but the Sources tool is showing the main script context. 若要切换到服务工作器上下文,在" 线程 "窗格中,选择服务工作器条目。To switch to the service worker context, in the Threads pane, choose the service worker entry.

查看和编辑属性和变量View and edit properties and variables

在代码行上暂停时,使用“范围”窗格查看和编辑本地、关闭和全局范围中的属性和变量的值。While paused on a line of code, use the Scope pane to view and edit the values of properties and variables in the local, closure, and global scopes.

  • 双击某个属性值以更改该值。Double-click a property value to change it.
  • 不可枚举的属性显示为灰色。Non-enumerable properties are greyed out.

范围窗格

观看 JavaScript 表达式的值Watch the values of JavaScript expressions

使用“监视”窗格观察自定义表达式的值。Use the Watch pane to watch the values of custom expressions. 你可以观看任何有效的 JavaScript 表达式。You can watch any valid JavaScript expression.

监视窗格

  • 若要创建新的监视表达式,请选择"添加 监视 表达式 \ ( 添加监视表达式 ) 按钮。To create a new watch expression, select the Add watch expression (Add watch expression) button.
  • 若要刷新所有现有表达式的值,请选择"刷新 \ (  刷新 ) "按钮。To refresh the values of all existing expressions, select the Refresh (Refresh) button. 逐步执行代码时,值将自动刷新。Values automatically refresh while stepping through code.
  • 若要删除监视表达式,请右键单击该表达式,然后选择"删除 监视 表达式 \ ( 删除监视表达式 ) "。To delete a watch expression, right-click the expression and then select Delete watch expression (Delete watch expression).

查看调用堆栈View the call stack

在代码行上暂停时,使用“调用堆叠”窗格查看让你到达此点的调用堆叠。While paused on a line of code, use the Call Stack pane to view the call stack that got you to this point.

选择一个项以跳转到调用该函数的代码行。Choose an entry to jump to the line of code where that function was called. 蓝色箭头图标表示 DevTools 当前突出显示的函数。The blue arrow icon represents which function DevTools is currently highlighting.

调用堆叠窗格

备注

当未在代码行上暂停时,“调用堆叠”窗格为空。When not paused on a line of code, the Call Stack pane is empty.

复制堆叠跟踪Copy stack trace

若要将当前调用堆栈复制到剪贴板,请将鼠标悬停在"调用**** 堆栈"窗格中的任意位置,打开上下文菜单 \ (右键单击) ,然后选择"复制堆栈跟踪 "。To copy the current call stack to the clipboard, hover anywhere in the Call Stack pane, open the contextual menu (right-click), and choose Copy stack trace.

选择复制堆叠跟踪

以下代码段是一个输出示例。The following code snippet is an example of the output.

getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onChoose (get-started.js:15)

忽略脚本或脚本模式Ignore a script or pattern of scripts

若你想要在调试时忽略该脚本,请将脚本标记为库代码。Mark a script as Library code when you want to ignore that script while debugging. 被标记为库代码时,脚本会在“调用堆叠”窗格中被遮盖,且你在单步执行代码时绝不会单步执行脚本的函数。When marked as Library code, a script is obscured in the Call Stack pane, and you never step into the functions of the script when you step through your code.

例如,在下面的代码段中,行使用 A lib ,这是第三方库。For example, in the following code snippet, line A uses lib, which is a third-party library. 如果您确信正在调试的问题与该第三方库不相关,那么将脚本标记为库代码 是有意义的If you are confident that the problem you are debugging is not related to that third-party library, then it makes sense to mark the script as Library code.

function animate() {
    prepare();
    lib.doFancyStuff(); // A
    render();
}

在编辑器窗格中将脚本标记为库代码Mark a script as Library code from the Editor pane

若要从编辑器窗格中将脚本标记为****库代码:To mark a script as Library code from the Editor pane:

  1. 打开文件。Open the file.

  2. 将鼠标悬停在任意位置并打开上下文菜单 (右键单击)。Hover anywhere and open the contextual menu (right-click).

  3. 选择 "添加脚本"忽略之前 (标记为库代码的列表) 。Choose Add script to ignore list (previously shown as Mark as Library code).

    在编辑器窗格中将脚本标记为库代码

从调用堆叠窗格中将脚本标记为库代码Mark a script as Library code from the Call Stack pane

若要从"调用堆栈 "窗格中将 脚本 标记为库 代码:To mark a script as Library code from the Call Stack pane:

  1. 将鼠标悬停在脚本的函数上,然后打开上下文菜单 (右键单击)。Hover on a function from the script and open the contextual menu (right-click).

  2. 选择 "添加脚本"忽略之前 (标记为库代码的列表) 。Choose Add script to ignore list (previously shown as Mark as Library code).

    从调用堆叠窗格中将脚本标记为库代码

在设置中将脚本标记为库代码Mark a script as Library code from Settings

若要标记脚本的单个脚本或脚本模式 ,设置:To mark a single script or pattern of scripts from Settings:

  1. 打开“设置”。Open Settings.

  2. 导航到“库代码”设置。Navigate to the Library code setting.

  3. 选择“添加模式”。Choose Add pattern.

  4. 输入脚本名称或脚本名称的正则表达式模式,以标记为库代码Enter the script name or a regex pattern of script names to mark as Library code.

  5. 选择“添加”。Choose Add.

    在设置中将脚本标记为库代码

从任何页面运行调试代码的代码段Run snippets of debug code from any page

如果你的控制台一次又一次地运行相同的调试代码,请考虑使用代码段。If you find yourself running the same debug code in the Console over and over, consider Snippets. 代码段是你在 DevTools 中创作、存储和运行的运行时脚本。Snippets are runtime scripts that you author, store, and run within DevTools.

请参阅 在任何网页上运行 JavaScript 代码段See Run snippets of JavaScript on any webpage.

另请参阅See also

联系 Microsoft Edge DevTools 团队Getting in touch with the Microsoft Edge DevTools team

使用以下选项讨论帖子中的新功能和更改,或与 DevTools 相关的任何其他内容。Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • 使用“发送反馈”图标发送反馈,或在 DevTools 中选择Alt+Shift+I \ (Windows、Linux) 或 Option+Shift+I \ (macOS)。Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • 发推 @EdgeDevToolsTweet at @EdgeDevTools.
  • 我们想要的 Web 提交建议。Submit a suggestion to The Web We Want.
  • 若要提交有关本文的错误,请使用以下“反馈” 部分。To file bugs about this article, use the following Feedback section.

Microsoft Edge DevTools 中的“发送反馈”图标

备注

此页面的某些部分是根据 Google 创建和共享的作品所做的修改,并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
原始页面位于此处,由 Kayce Basques\(Chrome DevTools & Lighthouse 的技术作家\)撰写。The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Creative Commons License
本作品根据 Creative Commons Attribution 4.0 International License 获得许可。This work is licensed under a Creative Commons Attribution 4.0 International License.