公司需要写一个简单的文档给测试看，以便能更快的定位问题产生的原因，方便反馈给开发，于是有了这篇文档。
前端调试研究分析
1. 什么是调试
用手工或编译程序等方法进行测试，修正语法错误和逻辑错误的过程称为调试，前端调试主要分为CSS（DOM）调试和JavaScript调试。Javascript我们主要用Chrome Devtools进行调试。
2. CSS(DOM)调试
CSS调试用于页面样式和DOM结构调试，通过开发者工具选中DOM元素（如图1.1），整个页面的结构都在Elements功能模块渲染。
（图1.1）
如图1.2所示，我们在Elements调试功能面板（Styles模块），可以看到已选择元素的所有CSS属性，可以在element.style { }里面动态为当前DOM元素添加我们需要测试的样式，也可以选择某个CSS选择器来为整个存在该选择器的CSS添加样式。通过勾选CSS伪类属性，可以看到元素触发伪类后的样式内容。
（图1.2）
如图1.3所示，我们在Elements调试功能面板（Computed模块），可以看到当前选中元素的CSS盒子模型和当前元素的所有CSS属性，并且通过点击每个属性，可以定位到该属性在文件的位置
（图1.3）
如图1.4所示，我们在Elements调试功能面板（Event Lissteners模块），可以看到当前元素所绑定的事件都会在列表里面展现，并且根据自己的需求进行筛选。
（图1.4）
如图1.5所示，我们在Elements调试功能面板（DOM Breakpoints模块），可以看到我们设置的DOM断点，当元素触发时，就会自动转跳到实施该事件的源码地址处（图1.6）
（图1.5）
（图1.6） 如图1.7所示，我们在Elements调试功能面板（Properties模块），可以看到当前dom元素节点的各种属性，方面我们查询调试。
（图1.7）
3. Chrome DevTools调试
Chrome开发者工具集成了前端调试所用到的全部功能，如下图所示，我们可以切换不同的面板来调试不同的功能。
3.1 Console面板
（图2.1）
在日常开发者，我们会在程序里输入console.log来打印日志内容，除了打印我们预先设定好的内容外，还可以在控制台输入代码段来运行。除了正常文本或变量的值，我们还可以加上一个参数来格式化打印效果。如下图（图2.2）所示
（图2.2）
除了console.log意外， console对象还有其他方法，如下表所示。
| 方法 | 描述 | 实例 |
|---|---|---|
| Log() | 输出信息 | console.log(“123”) |
| error() | 输出错误信息，并显示错误发生的堆栈 | console.error(“Error: %s (%i)”, “err”,500) |
| group() | 用于将显示的信息分组 | console.group(‘第一层’); console.group(‘第二层’); |
| table() | 将类型已表格形式输出 | var obj= { a:{ num: “1”}}; console.table(obj); |
| time() timeEnd() |
输出程序运行时间，配合使用，在开头和结尾 | console.time(‘开始’); for (var i = 0; i < 100; i++) {} console.timeEnd(‘结束’); |
| trace() | 追踪函数的调用过程 | function d(a) { console.trace(); return a; } function b(a) { return c(a); } function c(a) { return d(a); } var a = b(‘123’); |
| warn() | 输出警告信息 | console.warn(“警告”) |
在console面板也可以通过选择器来操作元素，查看相关的属性，直接在控制台面板输入相关的命令即可。具体用法见下表
| 选择器 | 参数 | 备注 |
|---|---|---|
| $(selector) | Css选择器 | 相当于js中的document.querySelector()返回第一个匹配dom的引用 |
| $$(selector) | Css选择器 | 相当于js中的document.querySelectorAll()返回全部匹配dom引用的数组 |
| $x(xpath) | Xpath路径 | 返回一个与给定 XPath 表达式匹配的 DOM 元素数组 |
| copy(object) | Dom节点对象 | 将指定DOM对象的字符串表示形式复制到剪贴板 |
| $_ | – | 返回最近评估的表达式的值, $0~$4 0-4 最近5个你选择过的DOM节点 |
3.2 Network面板
（图2.3） 程序运行环境，网络请求是必不可少的，由上图我们可以看到一个完成网络请求的构成部分，一般情况下我们会选择XHR请求来调试。如图2.4所示，我们可以在header看请求的参数以及配置的请求头信息等。
（图2.4）
在用户的操作环境中，我们不知道网络情况怎么样，可以用开发者工具的网络模拟功能，来测试在不同网络情况下网站能否正常运行。如图2.5所示。
（图2.5）
3.3 Application面板
（图2.6） 如图2.6所示，我们在Elements调试功能面板（Application模块），在子模块Storage可以看到当前网站存储的信息,比如cookie，local Storage等信息，并可以直观的进行增删改查。子模块Cache可以看到缓存的数据。Frames可以看到当前网站的一些静态资源。
3.4 Sources面板
（图2.7） 在日常开发中，调试程序可以通过直接在代码中加上debugger（如图2.7所示），然后刷新页面，浏览器就会自己跳入断点，然后就可以进行调试。而如果想在浏览器中加入断点调试，我们需要先定位到改行代码，然后点击行号即可添加断点。
（图2.8） 当我们添加好断点后，就可以一步一步调试代码了，如图2.9所示，我们可以一步一步运行调试，也可以跳过功能，详细操作如图2.10所示。
（图2.9）
（图2.10）
3.5 vue-devtools工具
vue开发者工具是vue官方开发的chrome插件，只能在chrome浏览器上使用，可以通过Select来选中自己要调试的组件，vuex可以看到当前组件的集中管理的状态。Event可以查看当前组件所触发的事件，Routing可以看到当前浏览过的路由和所有路由信息。
3.6 其他功能
如果需要调试移动设备的页面，就可以切换开发者工具到移动端，可以选择不同的设备，或者是切换网络，横批显示等功能。如图2.12所示
（图2.12）
Chrome开发者工具也有自己的命令行窗口，我们按键盘的shift+ctrl+p即可调出窗口。如图2.13所示.可以找到自己需要的功能。命令行的功能大部分是控制一些功能的显示，或者一些快捷功能，可根据名称自由控制。比如我们要通过浏览器截屏，那么可以直接在命令窗口输入screen,然后根据需要选择，如图2.14所示。
（图2.13）
（图2.14）
4. IE浏览器调试
在开始IE浏览器调试之前，推荐使用管理员权限打开软件。
4.1 IE11+异同
在调试本地资源时，chrome开发者工具可以通过Application面板直观的管理cookie，local storage信息等，在IE浏览器中，如果我们要查看cookie，需要到网络面板，然后选中要查看的请求来查看Cookie，如图3.2所示，如果要查询Local Storage或者是Session Storage信息，我们需要在控制台打印输出，如图3.3所示。如果要清新存储信息，输入localStorage.clear（）即可。
(图3.2)
(图3.3)
IE浏览器自带仿真功能，你可以在文档模式切换不同的IE版本进行兼容性测试，如图3.4所示。选中版本后页面会自动根据你选中的版本进行渲染。
(图3.4)
5. 常见bug定位
5.1 状态码定位
在前后端交互中，我们通过接口交付数据，每一个接口都会返回一个状态码和一个提示信息，如图4.1所示，我们可以通过这两个数据来初步判断是服务器端(后端)产生了bug，还是客户端(前端)产生了bug。详细对照表如表4.1所示。
（图4.1）
本表是根据公司内部情况设置的状态码,非http状态码，根据实际情况匹配
| 状态码 | 前端 | 后端 | 备注 |
|---|---|---|---|
| 200 | — | — | 请求成功,如无数据则显示暂无数据，如果有数据没展示，则是前端问题 |
| 3xx | — | — | 需要结合errMsg来确定问题的发生 |
| 4xx | 有问题 | — | 一般是发生的数据不对或者没权限 |
| 5xx | — | 有问题 | 后端服务器处理出问题 |
| （表4.1） |
5.2 控制台定位
如果页面白屏或者是有内容加载不出来，那么需要查看控制台的信息，如果是xxx is not undefined一般有两种情况，一种情况可能是前端没有做异常数据的错误处理，导致报错。还有可能就是后端返回的数据不规范而造成的。报错信息一般会展示堆栈调用记录，我们就可以看到具体的位置来解决bug。如果网络请求有问题也会在控制台看到报错。
（图4.2）
6. 基础常识
6.1 Cookie和Local Storage的区别
首先说明的是cookie，local Storage，session Storage都是客户端（浏览器）的存储技术，用来保存一些数据，每个网站都不会共用这些信息。
Cookie一般来说是用来保存服务端传来的session信息，大小最多为4kb，可以设置有效期，域名信息，缓存等信息。
local Storage是html5新出的标准前端存储技术，通过key-value的方式存储。大小一般为5M。提供了一系列的增删改查API，local Storage一直在浏览器存储，除了用户主动删除，是一直存在的。
session Storage和local storage使用方法相同，不同的地方是只在一次会话过程中有效，如果关闭浏览器会自动清除。
6.2 px,em,rem,vw等单位的区别
这些都是CSS的长度单位，不同的是他们大小的计算方式不同，所展示的效果就不同，具体对比如下表
单位 备注
- px 相对长度单位，相对于屏幕的分辨率而言的
- em 相对长度单位，相对于当前元素父类的字体大小（font-size）而言
- rem 相对长度单位，想对于当前文档根元素(html)的字体大小而言
- vw 相对长度单位，相对于当前视口而定,全部屏幕的width为100vw
7.官方文档
谷歌官方文档 https://developers.google.com/web/tools/chrome-devtools/?hl=zh-cn