Chrome 实用调试技巧

我相信大多数公司，前端调试代码的浏览器基本都是谷歌浏览器，因为确实做得很不错，各个功能开发的也比较实用。我们公司前端工程师统一使用谷歌浏览器调试代码，对于兼容性，很多自动化构建工具会增加适配的前缀，针对ie8以下基本不再考虑。所以我在这里就讲讲比较实用的调试和使用技巧。希望对从事前端的你有所帮助。之前写过一篇类似的文章，感觉写的并不是很好，所以这次写一篇比较集中和充满干货的文章。

我主要从四个方面来写：

1.对于DOM节点和CSS的查看和使用。

2.对于前端请求方面的查看和使用。

3.对于JS断点调试的使用

4.关于性能优化和提高性能方面的查看和使用（渲染时间线上面的知识点）

那么接下来我们闲话少说，进入正题：首先贴几张截图来看看谷歌浏览器各个按键的功能：

第一点：对于DOM节点和CSS的查看。

其实对于dom和样式的查看和使用是最基本的调试技能，其实最主要的可以处理很多样式的问题，对于样式我给大家介绍一个

对于样式，我们公司一般都是采取的实时编辑，实时的查看。然后一次性复制过去文件。这就要用到谷歌里面一个不错的功能了。在谷歌浏览器里面的sources这个地方使用快捷键ctrl+p可以搜索该网站使用的js和css文件，如图：

利用这个功能搜索出来的css文件都可以实时的编辑和显示在网页上面，方便我们做到实时效果

这是我常用的关于css的调试和查看的技巧，希望对你有所帮助。如果希望查看大型网站的更详细的，也可以安装一个谷歌的插件，可以对网站进行更详细的分析，我安装的是

可以对网站基本常用的信息进行过滤和分析。那么关于dom选择和css的选择我们先讲这些。

第二：对于前端请求方面的查看和使用：

从上面查看的文件进去，然后就可以查看请求过来的文件到底是什么以及请求更详细的信息

其实关于网络请求，谷歌有很多不错的插件，比如json转换，可以让请求过来的数据显示的更加形象，漂亮。比如需要去模拟post请求，这时候我们就需要一个插件postman，更多的可以自己去谷歌商店下载和使用。网上对于这个的介绍还是很多的，感兴趣的可以了解一下。其实对于谷歌的这个功能，我更多的是进行接口的调试和查看数据的结构，排查一些因为请求出现的问题。

第三：对于JS断点调试的使用：

这一块内容我要重点讲解一下，因为我们对于谷歌的使用，很大程度上是使用的这个功能。

调试的整个过程可以查看每一个经过的数据是什么，可以说对整个程序的运行发生了什么一目了然。配合debugger，alert，console等，可以实现快速的问题点定位，然后根据问题点进行分析和诊断，迅速解决JavaScript出现的问题点。当然这对于一般的bug是没有问题的，对于复杂的问题点，就需要一点一点的去分析和处理了。很多前端公司可以使用vue或者react，那么我们谷歌有对应的调试工具，只要去商店下载就好了，我下载了vue的，对于vue的调试和数据的查看还是很方便的。如图：

我的工作大部分是使用vue，当然也会有别的，我安装常用的插件是：

，大家可以根据需要去下载一些插件，方便我们开发，对吧。

那么接下来就是

第四点：就是对于关于性能优化和提高性能方面的查看和使用（渲染时间线上面的知识点）

关于这个知识点，我打算详细的给大家讲解，专门开一篇文章给大家。让大家对于整个浏览器的渲染和进程有一个详细的理解。和大家一起学习，希望我们在前端的路上越走越快。今天就写到这里