Chrome Devtool 调试 Javascript

---

重现错误

• 单击打开演示。演示在新选项卡中打开。
• 在 Number 1 中输入数字5
• 在 Number 2 中输入数字2
• 点击 Add Number 1 and Number 2
  

熟悉 Sources 面板 UI

• 点击Source
  get-started 是 get-started.html（不包括JS）
  get-started.js 就是 get-started 的 js 文件
  

使用console.log()

• 使用console.log()，您需要手动打开源代码，找到相关代码，插入console.log()语句，然后重新加载页面才能在控制台中看到消息。使用断点，您甚至可以在不知道代码结构的情况下暂停相关代码

时间监听器断点

• 选中鼠标点击事件监听器，当鼠标点击Add Number1 and Number2，会字段暂停在点击的代码部分
  
  
• 如果想在不同的代码行上暂停，请按 Resume Script Execution，直到在正确的行上暂停
  

单步执行代码

• 单步执行代码，一次一行
  
• 跳过下一个函数调用
  

设置代码断点

• 点击你想设置断点代码的左侧，出现蓝色标记，表示设置好断点
• 点击恢复脚本执行，点击蓝色图标可以跳到下一个断点
  
  

检查变量值

• Scope
  会显示当前的局部和全局变量，以及每个变量的值。如果适用，它还显示了闭包变量
  
• watch
  点击 + 号
  键入 typeof sum
  按 enter
  DevTools 显示typeof sum: "string". 冒号右侧的值是 Watch Expression 的结果
  
• 控制台
  按ESC打开控制台
  在控制台中，键入parseInt(addend1) + parseInt(addend2)
  

应用修复

• 在代码编辑器中，将第 31 行 , 替换var sum = addend1 + addend2为var sum = parseInt(addend1) + parseInt(addend2)
• 按 Ctrl + S 保存修改
  

---

单步调试代码

跳过代码行

• 跳过函数而不是进入他
  
• 例：在A上暂停，按下Step over，会执行BC，之后在D上暂停

  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上暂停。按下 Step into，在B上暂停

跳出代码行

• 例：在A上暂停，按下 Step out，DevTools 执行 getName() 中剩余代码，然后在C上暂停

  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
  }
  

将所有代码运行到某一行

• 第一种方法：
  在感兴趣的行上设置一个代码行断点，然后按 Resume Script Executoin
  
• 第二种方法：
  右键单击您感兴趣的代码行，然后选择Continue to here。DevTools 运行到该点的所有代码，然后在该行上暂停
  

恢复脚本执行

• 在暂停后点击继续脚本执行，DevTools 执行脚本直到下一个断点
  

强制执行所有脚本

• 忽略所有断点强制脚本继续执行，请单击并按住Resume Script Execution 恢复脚本执行，然后选择Force script execution 强制执行脚本。
  

更改线程上下文

• 使用 Web Worker 或 Service Worker 时，单击“Threads”窗格中列出的上下文以切换到该上下文。蓝色箭头图标表示当前选择了哪个上下文
  

查看和编辑本地、闭包和全局属性

• 在一行代码上暂停时，使用 Scope 查看和编辑本地、闭包和全局范围内的属性和变量的值
• 双击属性值以更改它
• 不可枚举的属性显示为灰色
  

查看当前调用堆栈

• 如果您正在使用异步代码，请选中Async复选框以启用异步调用堆栈
• 单击条目可跳转到调用该函数的代码行
  

复制堆栈

• 右键单击“Call Stack”窗格中的任意位置，然后选择“Copy Stack Trace”以将当前调用堆栈复制到剪贴板
  

忽略脚本或脚本模式

• A是您信任的第三方库。如果您确信您正在调试的问题与第三方库无关，那么忽略该脚本是有意义的

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

忽略编辑器窗格中的脚本

忽略“调用堆栈”窗格中的脚本

忽略设置中的脚本

观察自定义 JavaScript 表达式的值

• 使用 Watch 窗格来观察自定义表达式的值。您可以查看任何有效的 JavaScript 表达式