chrome调试必知必会

1 概述

业务系统在分析前端问题时，离不开使用浏览器调试工具，目前chrome在网页前端调试是最流行的工具，非之一。
对于初学者，甚至有多年工作经验的都不一定掌握的很全面。本文分享一些常用好用的功能点。

2 打开调试

打开chrome , 在右侧菜单，找到“更多工具” -> "开发者工具”点击，或者按快捷键F12.

3 必知必会

调试工具分为Element 、Console 、Sources 、Network和Application等。

3.1 快捷键

在开发工具中，点击设置，弹出界面，切换到快捷键，可以开到工具中的功能点对应的快捷键。

3.2 窗口模式

 调试窗口支持弹出式，固定左边，固定右边，固定下方四种模式。

3.3 源码

3.3.1 打开文件

按快捷键 ctrl + P, 弹出搜索文件，输入后选中打开。可以打开js，css，h图片等。

3.3.2 查找方法

在打开的js文件中，按快捷键 ctrl + shift + O 弹出输入框，输入信息后查找相应的方法，选中。

3.3.3 格式化

在js文件编辑界面的左下方，有个大括号，点击可以对当前js进行格式化。

3.3.4 转到行

按 ctrl + G，弹出输入行号，录入后回车，调整到js相应行。

3.3.5 设置断点

设置断点后，可以查看调用堆栈，本地变量或者全局变量，以及观察自定义表达式。

3.3.6 断点调试

下方图片按钮按迅速功能如下：
1 恢复脚本运行 F8
2 下一步方法 F10
3 进入方法内 F11
4 跳出方法 shift + F11
5 下一步 F9
6 所有断点启用或者不可用 ctrl + F8

单独的一个断点移除可以通过在源码断点处进行移除。

3.3.7 条件断点

对于一个频繁调用的方法，如果设置了断点，断点会频繁到达，不方便调试，最佳方案是设置条件，使其到达满足业务场景。
选中行，右键点击 Add conditional breakpoint, 如下：

3.3.8 当前文件内搜索

打开文件后，按 ctrl + f， 弹出输入框，输入信息后回车搜索。

3.4 全局搜索和Console

3.4.1 全局搜索

按 ctrl + shift + f ，进入全局搜索，如下：

3.4.2 Console

控制台可以查看前端日志信息，也可以输入代码片段，测试执行结果。

3.5 元素

3.5.1 元素选择

点击左上角元素选择按钮，然后鼠标移动到网页中任意元素中，可以查看元素的html + css内容。

3.5.2 编辑html元素

 可以通过增加属性，编辑属性，编辑html，删除元素等操作进行元素管理。

3.5.3 样式分析

查看右边样式页签，可以分析样式情况，也可以通过修改看下样式的影响效果。

另外也可以最终的计算结果中，看到元素的盒子模式样式结果。

3.6 网络

3.6.1 网络总体

在网络界面可以看到当前页面的请求数，请求大小，加载时间。对于要优化性能，可以通过减少请求数，加载文件大小来处理。

3.6.2 xhr

可以在网络页签中分析xhr请求，请求的地址参数，头部信息，以及返回结果内容等。

3.6.3 分析该请求从哪里发出

如果要分析一个请求是从前端哪个js发出的，可以选中该请求，在启动器列查看调用堆栈，然后点击js，就会跳到js对应于代码行中。该方法是分析的利器。

3.6.4 浏览器不缓存调试

在开发程序功能时，修改服务端页面代码，推荐把不缓存打勾，以免本地缓存，加载不到最新改动代码，不利于提高研发效率。

3.6 应用查看Cookies

点击应用页签，点击左侧Cookies 目录，选择要查看的地址，可以查看该地址的Cookies 情况，也可以进行编辑修改。

3.7 总结

学习掌握chrome调试，对于分析前端问题，以及分析后端接口返回内容，都极有帮助。熟练掌握和应用快捷键，可以提升研发效率。