前言

本节来记录一些实践的部分--代码调试。

debug--调试

通常来说主要通过两种方式进行调试：代码中调试、浏览器中调试。

代码中调试

在代码中调试，其实说白了也就常用的alert()、console、debugger等输出和断点。

alert

alert()会在窗口中显示一个警告对话框，上面显示有指定的文本内容以及一个“确定”按钮。

使用alert()需要注意的是：

alert()会阻塞进程。
alert(param)中param只能是number、string类型或者它们组成的数组。

如果我们运行以下代码：

alert(["123", "123", 32, { 1: 123 }]);

会得到这样的结果：

console

console常用的几个方法有：

console.log()：打印字符串，以及对象、变量什么的都可以。
console.info()：打印以感叹号字符开始的信息，使用方法和log相同。
console.error()：打印一条错误信息。
console.dir()：打印一条以三角形符号开头的语句，可以点击三角展开查看对象的属性。

console.dir()常用于打印DOM元素的属性

debugger

debugger语句调用任何可用的调试功能，例如设置断点。如果没有调试功能可用，则此语句不起作用。
当debugger被调用时, 执行暂停在debugger语句的位置。就像在脚本源代码中的断点一样。

浏览器(Chrome)调试

DevTools

我们先看看 Chrome 提供的开发者工具：

箭头按钮：用于在页面选择一个元素来审查和查看它的相关信息。
设备图标：点击它可以切换到不同的终端（移动端和 PC 端）进行开发模式。可以选择不同的移动终端设备，同时可以选择不同的尺寸比例。常用的移动端页面调试，还能通过配置User agent来模拟终端环境。
Elements：用来查看、修改页面上的元素，包括DOM标签，以及css样式的查看，修改，还有相关盒模型的图形信息。
Console：用于打印和输出相关的命令信息，源代码定位等等。
Sources：Sources下的Sources查看浏览器页面中的源文件（html/js/img/css等），点击下面的{}大括号可以将代码转成可读格式，同时可给js文件添加上断点。Sources下的Snippets可以添加文件片段，可在浏览器中运行。
Network：可以看到所有的资源请求，包括网络请求、静态资源（html、css、js、图片等）文件请求，常用于调试网络请求。

剩下的功能或许用得不是特别多，可以了解下（本人了解不多，或许不一定准确）：

Performance：查看页面在浏览器运行时的性能表现，如 CPU\GPU 执行时间与内存占用等。
Memory：似乎是内存泄漏分析相关的功能？
Application：会列出所有的资源，以及 HTML5 的 Database 和 LocalStore 等，你可以对存储的内容编辑和删除。
Security：查看网站的安全性，有效证书等。
Audits：会针对目前网页提出若干条优化的建议，这些建议分为两大类，一类是网络加载性能，另一类是界面性能。

打断点

1. 代码断点

常用的浏览器代码断点，在Sources面板js文件行号处设置断点，如图我们下了个断点：

这里我们在请求发起的位置打了个断点，每次我们在搜索输入框输入的时候，都会发送请求，触发 debug 模式。

这里除了常规断点外, 还有个条件断点(右键 -> conditional breakpoint), 在设置的条件为true时才会断电, 在循环中需要断点时比较有用。断点后可以查看堆栈、变量。

2. 事件断点

元素上事件断点：某一事件/某类事件，从Elements > Event Listeners中进行。

3. DOM 断点

一般是DOM结构改变时触发。有时候我们需要监听某个DOM被修改情况，而不关心是哪行代码做的修改（也可能有多处都会对其做修改），可以直接在DOM上设置断点。

在元素审查的Elements标签页中在某个元素上右键菜单里可以设置三种不同情况的断点：

子节点修改
自身属性修改
自身节点被删除

4. XHR 断点

右侧调试区有一个XHR Breakpoints，点击+ 并输入URL包含的字符串，即可监听该URL的Ajax请求，输入内容就相当于URL的过滤器。
一旦XHR调用触发时就会在request.send()的地方中断。

5. 全局事件断点

对事件发生时断点，不会限定在元素上，只要是事件发生，并且有handler就断点。
还可以对resize、ajax、setTimeout/setInterval断点。

结束语

基于 Chrome 浏览器，大致讲了一些开发者工具的功能。调试是很重要的一步，每一次 debug 我们都要吸取经验，总结教训。不管是 CSS 还是 JS 的调试，经验的积累都是很需要的，同时也能提高我们写代码的质量。加油！共勉

第六届字节跳动青训营前端开发调试 | 青训营

前言