JS 调试

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

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

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

以下将以 chrome 浏览器为例 :

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

Elements.jpg

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

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

调试工具位置.jpg

图2

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

盒子模型.jpg

图3

JS - 调试工具 & console 控制台

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

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

控制台.jpg

图4

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

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

Sources.jpg

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

5个小图标功能分别为 :

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

JS - 调试工具 & network

network.jpg

图6

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

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