1.如何调出开发者工具

  • 按fn+F12调出
  • 右键审查调出

2.开发者工具概览

  • Chrome开发者工具中，调试时使用最多的三个功能页面是：元素（ELements）、控制台（Console）、源代码（Sources），此外还有网络（Network）等。
  • 元素（Elements）：用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。
  • 控制台（Console）：控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。
  • 源代码（Sources）：该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。
  • 网络（Network）：网络页面主要用于查看header等与网络连接相关的信息。
源代码（Sources）
  • 查看文件：在源代码（Source）页面可以查看到当前网页的所有源文件。在左侧栏中可以看到源文件以树结构进行展示。
  • 添加断点：在源代码左边有行号，点击对应行的行号，就好给改行添加上一个断点（再次点击可删除断点）。右键点击断点，在弹出的菜单中选择Edit breakpoint可以给该断的添加中断条件。
  • 中断调试：添加断点后，当JS代码运行到断点时会中断（对于添加了中断条件的断点在符合条件时中断），此时可以将光标放在变量上查看变量的值：
  • 也可以在右边的侧栏上查看：
  • 在右侧变量上方，有继续运行、单步跳过等按钮，可以在当前断点后，逐行运行代码，或者直接让其继续运行。

for example

  • 第一步：复现BUG
    这里有一个我们要使用到的网页。在新的标签打开它：打开Demo 在Number 1的输入框输入5 在Number 2的输入框输入1 点击Add Number 1 and Number 2按钮
    在下方会输出5 + 1 = 51应该输出为6, 而不是51。
  • 第二步：使用断点来暂停代码执行
  • 回到Demo页面，打开开发者工具
  • 点击Source标签
  • 点击Event Listener Breakpoints，将里面的内容展开。
  • 将鼠标移到Mouse前面, 点击三角展开里面的内容
  • 选中click
  • 回到demo，点击Add Number 1 and Number 2。开发者工具会将Demo的执行暂停，并且在Source部分高亮如下代码：
    function onClick() {}
  • 第三步：单步执行调试代码
  • 在开发者工具的Source面板，点击第三个(Step into next function call)
  • 该按钮引导你单步执行定义的点击事件，一次一行。点击后，第15行代码高亮：
  • 现在点击第二个(Step over next function call)按钮
  • 该按钮会跳过当前要执行的函数inutsAreEmpty，而不是进入该函数。同时直接跳到第19行，因为当前输入框不为空。
  • 这就是单步调试代码的基本思路
  • 第四步：设置另一个断点
  • 找到updateLabel函数的最后一行
    label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
  • 点击第一个Resume script execution按钮
  • 在左侧，Local部分已经将addend1，addend2和sum的值都显示出来了。你就会发现它们都是字符串，字符串相加就是将它们拼接起来，然而我们想要的是数字求和 。
  • 第五步：检查变量值
  • 在开发者面板下的Source面板，点击Watch,展开里面的内容(初次展开为空)。
  • 点击右侧的+号(Add Expression)
  • 输入typeof sum
  • 敲击回车键。开发者面板会显示typeof sum: "string"。
  • 在Console中输入parseInt(addend1) + parseInt(addend2)
  • 敲击回车键，输出6。
  • 第六步：修复BUG
  • 在开发者工具的Source面板，将源代码中var sum = addend1 + addend2替换为var sum = parseInt(addend1) + parseInt(addend2);。
  • 保存改动(Mac: Command + S)。
  • 点击第五个Deactivate breakpoints按钮，该按钮取消所有设置的断点。
  • 点击第一个Resume script execution按钮。