JavaScript 调试功能

本文介绍如何在 Microsoft Edge DevTools 中使用调试器功能,包括如何设置代码行断点。

另请参阅:

查看和编辑 JavaScript 代码

修复 bug 时,通常需要尝试对 JavaScript 代码进行一些更改。 无需在外部编辑器或 IDE 中进行更改,将文件重新上传到服务器,然后刷新页面;相反,若要测试更改,可以直接在 DevTools 中编辑 JavaScript 代码并立即查看结果。

查看和编辑 JavaScript 文件:

  1. 在新窗口或选项卡中打开要调试的网页。可以使用“ 调试 JavaScript 入门 ”演示页。

  2. 若要打开 DevTools,请右键单击网页,然后选择“ 检查”。 或者,按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 随即打开。

  3. 在 DevTools 的 “活动栏”上,选择“ ”选项卡。如果该选项卡不可见,请单击“ 更多工具 (更多工具”图标) 按钮。

  4. 在“ 导航器 ”窗格中,选择要更改的文件,在 “编辑器 ”窗格中将其打开。 如果使用演示页,请选择“ get-started.js”。

  5. “编辑器 ”窗格中,编辑文件。 例如,在 alert("The add button was clicked"); 演示页的 函数 onClick 中添加 。

  6. Ctrl+S (Windows、Linux) 或 Command+S (macOS) 进行保存。 然后,DevTools 将 JavaScript 文件加载到 Microsoft Edge 的 JavaScript 引擎中,更改将立即生效。

    源工具,其中显示了 get-started.js 文件中的代码更改

  7. 测试更改。 例如,单击演示页上的 “添加数字 1 和数字 2 ”按钮。 此时会显示警报。

在 DevTools 中所做的更改对于快速测试 bug 修复非常有用,但该更改是暂时的。 若要使更改永久,需要在源代码中进行更改,然后将文件重新上传到服务器。

使用 pretty-print 重新格式化缩小的 JavaScript 文件

若要使缩小的文件易于阅读,请单击“编辑器”窗格底部的“格式化 (格式) ”按钮。

“格式”按钮

设置断点以暂停代码

若要在运行时中间暂停代码,请设置断点。 最基本的已知断点类型是代码行断点。

如果知道需要调查的代码的确切区域,请使用代码行断点。 DevTools 始终在指定的代码行暂停,然后再运行它。

设置代码行断点:

  1. 在新窗口或选项卡中打开要调试的网页。可以使用“ 调试 JavaScript 入门 ”演示页。

  2. 若要打开 DevTools,请右键单击网页,然后选择“ 检查”。 或者,按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 随即打开。

  3. 在 DevTools 的 “活动栏”上,选择“ ”选项卡。如果该选项卡不可见,请单击“ 更多工具 (更多工具”图标) 按钮。

  4. 在“ 导航器 ”窗格中,选择包含要调试的代码行的文件。 如果使用演示页,请选择“ get-started.js”。

  5. 单击代码行号左侧的区域。 或者,右键单击行号,然后选择 “添加断点”。

    然后,行号旁边会显示一个红色圆圈,指示断点:

    代码行断点

代码行断点有时设置效率低下,特别是当你不知道要查找的确切位置或代码库是否很大时。 若要在调试时节省时间,请了解如何以及何时使用其他类型的断点。 请参阅 使用断点暂停代码

单步执行代码

在断点处暂停代码后,单步执行代码,一次一行,并在此过程中调查控制流和属性值。 若要了解如何在断点处暂停,请参阅上面的 设置断点以暂停代码

单步执行代码行

在包含与正在调试的问题无关的函数的代码行上暂停时,请单击“ 单步 执行 (逐步) ”按钮,以运行函数而不单步执行。

单击“单步执行”

例如,假设要调试以下代码片段:

function updateLabel() {
    var addend1 = getNumber1(); // A
    var addend2 = getNumber2(); // B
    var sum = addend1 + addend2; // C
    label.textContent = addend1 + " + " + addend2 + " = " + sum;
}
function getNumber1() {
    return inputs[0].value;
}
function getNumber2() {
    return inputs[1].value;
}

你将在 上 A暂停。 单击“ 单步执行”后,DevTools 将运行函数中的所有 getNumber1() 代码,然后在 上 B暂停。 如果再次单击“ 单步执行 ”,DevTools 将运行函数中的所有 getNumber2() 代码,然后在 上 C暂停。

单步执行代码行

在包含与正在调试的问题相关的函数调用的代码行上暂停时,单击“ 单步执行 (单步执行到) ”按钮以进一步调查该函数:

单击“单步执行”

例如,假设你正在调试以下代码:

function updateLabel() {
    var addend1 = getNumber1(); // A
    var addend2 = getNumber2();
    var sum = addend1 + addend2;
    label.textContent = addend1 + " + " + addend2 + " = " + sum;
}
function getNumber1() {
    return inputs[0].value; // B
}
function getNumber2() {
    return inputs[1].value;
}

你将在 上 A暂停。 单击“ 单步执行”后,DevTools 将运行此代码行,然后在 上 B暂停。

从代码行中走出来

在与正在调试的问题无关的函数中暂停时,单击“ 单步执行 (单步 执行) 按钮以运行函数的其余代码。

单击“单步执行”

例如,假设你正在调试以下代码:

function onClick() {
  if (inputsAreEmpty()) {
    label.textContent = "Error: one or both inputs are empty."; // B
    return;
  }

  updateLabel(); // C
}
function inputsAreEmpty() {
  if (getNumber1() === "" || getNumber2() === "") { // A
    return true;
  } else {
    return false;
  }
}

你将在 上 A暂停。 单击“单步执行”后,DevTools 在 中inputsAreEmpty()运行其余代码,如果inputsAreEmpty返回 true,则B暂停,否则将暂停C

运行所有代码到特定行

调试长函数时,可能有很多代码与调试的问题无关。

  • 可以通过多次单击“步执行 (单步执行) ”按钮逐个逐行执行函数的所有行。

  • 稍好一点,可以在感兴趣的行上设置代码行断点,然后单击“ 恢复脚本执行 (恢复脚本执行) 按钮。

  • 但有一种更快的方法:右键单击代码行,然后选择“ 继续到此处”:

    选择“继续到此处”

    DevTools 将运行到该点的所有代码,然后在该行上暂停。

重启调用堆栈的 top 函数

若要在调用堆栈中 top 函数的第一行暂停,在代码行上暂停时,请右键单击“ 调用堆栈 ”窗格,然后选择“ 重启帧”。 top 函数是运行的最后一个函数。

以下代码是单步执行的示例:

function updateLabel() {
  var addend1 = getNumber1(); // B
  var addend2 = getNumber2();
  var sum = addend1 + addend2;
  label.textContent = addend1 + " + " + addend2 + " = " + sum; // A
}

你将在 上 A暂停。 选择 “重启帧”后,你将在 上 B暂停,而无需在该行上设置断点并选择“ 恢复脚本执行”。

选择“重启帧”

恢复脚本执行

若要在脚本暂停后继续运行时,请单击“ 恢复脚本执行 (恢复脚本执行) 按钮。 DevTools 将运行脚本,直到下一个断点(如果有)。

单击“恢复脚本执行”按钮

强制执行脚本

若要忽略所有断点并强制脚本继续运行,请单击并按住“ 恢复脚本执行 (恢复脚本执行) 按钮,然后单击强制 脚本执行 (强制执行脚本) 按钮。

单击“强制脚本执行”按钮

更改线程上下文

使用 Web 辅助角色或服务辅助角色时,单击“ 线程 ”窗格中列出的上下文以切换到该上下文。 蓝色箭头图标表示当前选择的上下文:

“线程”窗格

例如,假设你在main脚本和服务辅助角色脚本中的断点上暂停。 你希望查看服务辅助角色上下文的本地和全局属性,但工具显示main脚本上下文。 若要切换到服务辅助角色上下文,请在“ 线程 ”窗格中单击服务辅助角色条目。

查看和编辑属性和变量

在代码行上暂停时,使用“ 作用域 ”窗格可以查看和编辑局部范围、闭包范围和全局范围中的属性和变量的值。

  • 双击属性值以对其进行更改。
  • 不可枚举属性灰显。

“作用域”窗格

监视 JavaScript 表达式的值

使用“监视”窗格watch自定义表达式的值。 可以watch任何有效的 JavaScript 表达式。

“监视”窗格

  • 若要创建新的watch表达式,请单击“添加watch表达式 (添加watch表达式) 按钮。

  • 若要刷新所有现有表达式的值,请单击“ 刷新 (刷新) ”按钮。 单步执行代码时,值会自动刷新。

  • 若要删除watch表达式,请右键单击该表达式,然后选择“删除watch表达式”。

查看调用堆栈

在代码行上暂停时,使用“ 调用堆栈 ”窗格查看已达到此点的调用堆栈。

单击某个条目以跳转到调用该函数的代码行。 蓝色箭头图标表示 DevTools 当前突出显示的函数:

“调用堆栈”窗格

注意

在代码行上未暂停时, “调用堆栈 ”窗格为空。

复制堆栈跟踪

若要将当前调用堆栈复制到剪贴板,请右键单击“ 调用堆栈 ”窗格,然后选择“ 复制堆栈跟踪”。

“复制堆栈跟踪”命令

以下代码是输出的示例:

getNumber2 (get-started.js:40)
inputsAreEmpty (get-started.js:24)
onClick (get-started.js:16)

忽略脚本或脚本模式

若要在调试时忽略脚本,请将脚本添加到 “忽略列表”。 当脚本包含在 “忽略列表”中时,脚本在 “调用堆栈 ”窗格中被遮盖,在单步执行代码时永远不会单步执行脚本的函数。

例如,在以下代码片段中, line A 使用 lib,这是一个第三方库。 如果你确信要调试的问题与该第三方库无关,那么将脚本添加到 忽略列表是有意义的:

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

从“编辑器”窗格将脚本添加到 “忽略列表

若要从“编辑器”窗格将脚本添加到“忽略列表”,请执行以下操作:

  1. 打开此文件。

  2. 右键单击文件中的任何位置,然后选择“ 添加要忽略的脚本”列表

    从“编辑器”窗格将脚本添加到“忽略列表”

从“调用堆栈”窗格将脚本添加到“忽略列表”

若要从“调用堆栈”窗格将脚本添加到“忽略列表”,请执行以下操作:

  • 在断点处暂停代码。

  • 右键单击“ 调用堆栈 ”窗格中的函数,然后选择“ 添加要忽略的脚本”列表

    从“调用堆栈”窗格将脚本添加到“忽略列表”

将脚本添加到“设置”中的“忽略列表”

若要将单个脚本或脚本模式添加到“设置中的忽略列表”:

  1. 若要打开“设置”,请在 DevTools 中单击“ 自定义和控制 DevTools ”图标 (“自定义和控制 DevTools”图标) ,然后单击 “设置 (设置”图标) 。 或者,当 DevTools 具有焦点时,按 F1

  2. 导航到“设置”的“忽略列表”页。

    将脚本添加到“设置”中的“忽略列表”

  3. 单击“ 添加模式 ”按钮。 显示建议的模式: /framework\.js$

  4. 输入要添加到 忽略列表的脚本名称或脚本名称的正则表达式模式。

  5. 单击“添加”按钮。

从任何页面运行调试代码片段

如果发现自己在 控制台 工具中一遍又一遍地运行相同的调试代码,请考虑使用代码片段。 代码片段是在 DevTools 中创作、存储和运行的运行时脚本。

请参阅 在任何网页上运行 JavaScript 的代码片段

使用 # sourceURL 在 DevTools 中命名已计算和内联代码

若要使不是文件的代码块在整个 DevTools(包括 工具中)具有文件名,请在注释中使用 # sourceURL 杂注。

不是文件的代码块包括:

  • 使用 eval() 函数运行的 JavaScript 代码。
  • 标记中的 <script> JavaScript 代码。
  • 标记中的 <style> CSS 代码。

当浏览器运行上述类型的代码时,DevTools 没有用于显示这些代码块的文件名,并且代码块具有泛型名称,或者根本不显示。

文件名在整个 DevTools UI 中显示,例如在以下位置:

  • “源”工具的“导航器”窗格。
  • “源”工具的“调试器”窗格中的“调用堆栈”。
  • “源”工具的“编辑器”窗格中的文件选项卡。
  • 控制台工具中的日志、警告和错误消息。
  • 性能工具中的火焰图。

# sourceURL语法//# sourceURL=my-assigned-file-name.js为 或 /*# sourceURL=my-assigned-file-name.css*/的杂注是一个特殊注释,它在整个 DevTools 中为已评估和内联代码提供虚拟文件名。

# sourceURL使用杂注为不是文件的代码块提供虚拟文件名,并在工具和整个 DevTools 中显示该文件名称。 例如:

  • 对于 JavaScript:

    function sum(a, b) {
      return a + b;
    }
    
    console.log(sum(1, 2));
    
    //# sourceURL=math-utilities.js
    
  • 对于 CSS:

    .card {
      padding: 1rem;
      border-radius: 0.5rem;
    }
    
    /*# sourceURL=card-styles.css*/
    

因此,DevTools 显示这些代码块,以及指定的虚拟文件名, (math-utilities.jscard-styles.css) :

源和控制台工具,显示虚拟文件名

另请参阅

注意

此页面的部分内容是基于 Google 创建和 共享 的工作进行的修改,并根据 Creative Commons 署名 4.0 国际许可中所述的条款使用。 原始页面 在此处 找到,由 Kayce Basques (Technical Writer、Chrome DevTools & Lighthouse) 创作。

Creative Commons 许可证 此作品根据 Creative Commons 署名 4.0 国际许可获得许可