JS 调试

现代浏览器都有内置调试工具，可以查看错误信息，也可以打断点，甚至在代码执行时检测变量。

一般用f12调出，部分电脑用fn + f12。或者右键 > 开发者工具。

mac下 safari 和 chrome 打开开发者工具的快捷键相同， 都是option(alt) + command + i 。或者右键 > inspect（检查）。

以下将以 chrome 浏览器为例 ：

JS - 调试工具 & Elements 查看元素

• C 区是 web 页面，当鼠标点击 A 区的代码时，可以看到 C 区元素，显示元素的高宽以及class。C 区 右键 -> Edit as HTML 可以直接修改元素。
• B 区是样式修改，可以修改样式或者添加样式。但是页面一旦刷新，样式全部恢复原来的样子。
• 点击 D 的按钮，可直接在 C 区选中元素。

手机模式 ：点击 E 按钮，C 区为手机模式显示。
调试工具位置 ：点击 F 按钮，可设置调试工具的位置，看小图标即能明白。

盒子模型：B 区滑动到最底端，可以看到盒子模型，清楚的显示元素的 padding（内边距）、margin（外边距）、border（边框）、元素高宽。

JS - 调试工具 & console 控制台

控制台能看到 console.log() 的打印信息，也可以看到 程序的错误信息。信息的右边有信息的代码位置，也是可以点击进入这个位置。

var i=3;
console.log(i);

JS - 调试工具 & Sources 源代码 & 断点

查看 Sources 时，除了看源代码，还能打断点进行调试。

• B 区能查看源代码，B 区的左边能打断点调试。
• 打断点调试时，可以点击A 区的小图标。

5个小图标功能分别为 ：

• 图1 - 结束调试。
• 图2 - 单步执行，当遇到函数时把函数整个作为一步，也就是不进入函数，跳过。
• 图3 - 单步执行，遇到函数时，进入函数。
• 图4 - 把当前行后面的代码当一步执行，跳出函数。
• 图5 - 单步执行。

JS - 调试工具 & network

过滤器：过滤请求列表中显示的资源。
请求列表：web 页面请求的资源文件，有html文件，js文件，css文件，图片等。能查看每个文件的详细信息。
概要：请求总数、总数据量、总花费时间

requests：请求文件总数 13
resources：文件总数据量 395kB
Finish：总花费时间 911ms