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