web前端Chrome调试常见操作

引言

在web前端代码编写时，需要使用谷歌浏览器调试页面；谷歌浏览器在css和js上具有完整的提示功能，在需要查询某个属性或者函数是否能用时，可以直接在谷歌浏览器中试验。
下面总结自己工作中常用技巧。

调试工具打开

1. 调试工具有两种方式打开：一种是鼠标右键——检查，另一种是按F12
2. 调试工具的右上角的“三个点”样子的按钮，点击可以选择调试工具在右边或者下面或者其他方式显示

dom元素调试

1. 在打开的调试工具中的最上面一栏，选择Element，则可以看到当前页的dom结构
2. 在Element中，划到哪个元素就可以在页面对应位置看到相关选中效果；对应的一个操作，点击调试工具的左上角的箭头，然后在页面中点击，则可以查看页面点击元素在Element中的位置
3. 在Element中，点击选中某个元素，直接键盘按 backspace或者delete就可以直接删除，在排除某个样式影响错误的时候，可以这样快速定位到错误
4. 在Element中，双击标签名称，可以改变标签名；双击属性，可以选中修改属性，复制；双击内容可以修改内容；选中整个标签元素，右键——“Edit as Html”或者直接F2可以修改整句标签，包括标签名、属性、内容等，一般测试滚动样式是否正常时，直接选中
5. 标签，复制粘贴达到迅速获得较多内容出现滚动

css样式调试

1. 选中dom元素时，在Styles栏可以看到该元素的所有样式设置，包括继承得到的样式，覆盖和被覆盖的样式情况；在Styles栏旁边有个Computed按钮，点击可以看到该元素经过计算后，真正生效的样式列表
2. 在Styles栏中，双击可以修改样式；点击大括号{}中最后一个样式的下面可以新添加样式；选中某个样式名字或者值，删除为空，可以删除样式
3. 调整属性中的数字时，选中，按向上或者向下可以实现+1或-1的调整
4. 双击选中某个属性后，回车可以切换不断向下切换选中的样式
5. 点击颜色显示的那个标识可以打开颜色的修改设置

Console中调试

1. Console里面可以进行编程序，提示功能十分强大，常用于测试一些拿不准的判断或者功能函数，也可以查询API
2. 当Console里面有报错时，可以直接点击定位错误，这是自动跳转到Sources栏，这一栏可以断点调试，快捷键主要使用F8（从当前断点向下继续执行直到下一个断点）、F10（从当前中断地向下执行一步）、F11（进入某个函数中一步一步执行）。使用webpack压缩打包时，开启sourcemap可以映射到未压缩前的代码中调试。

NetWork中调试

1. 这里在刚打开时，可能什么都没有，需要重新刷新页面，得到加载资源的顺序、体积大小和时间消耗等信息。
2. 在上面有一栏加载资源的分类，有All，XHR、JS、CSS、Img… 。其中，常用的是XHR，因为要查看ajax请求，点击后，在Header栏可以查看此次请求的首部信息，在Response栏可以看到服务器返回信息

Application中查看保存信息

在该栏可以查看cookie、localStorage等信息