ChromeDevtools是我们日常使用的工具，多学习一些小技巧还是很有意义的。今天就来学习一些常用的小技巧，都是一眼就能看出来的小技巧。Sources切换分组方式Sources面板默认是按域名分组的，所以找某个文件比较麻烦：其实可以切换成不按域名分组的方式：找一个文件会清爽很多某些文件以这种方式。Network自定义显示栏目Network可以修改显示的栏目。比如我勾选Cookie和Set-Cookie:Network列表中会显示这两列：这两列是什么意思？Set-Cookie表示这个请求响应会设置几个cookie。请求的详细信息确实是这样的：Cookies就是这个请求会携带几个cookie：比如请求携带17个cookie：不用数，一定是17个。另外，还可以自定义显示的header：您可以显示任何您想要的标题。有的同学可能会问了，难道在请求详情中不能看到所有的header吗？在这里展示它们有什么意义？效率不同。如果你一一点击查看，效率肯定比直接在列表中显示表头要差很多。快速复制样式我们经常使用chromedevtools调试样式，然后将调整好的样式复制到编辑器中。你选择然后复制吗？其实大可不必，直接使用这两个功能：复制单个样式或者复制所有样式，效率更高。快速查看计算出来的样式有时候我们写的样式需要经过一些计算才能得到最终的样式，比如rem，calc等：计算后怎么知道这里的1rem是多少呢？可以在右边的computed中找到：但是这个太多了，怎么才能快速的找到我要看的1rem对应的个数呢？可以右键这个样式，点击查看计算值，可以快速筛选出那个样式对应的计算样式：调试手机网页很多人在调试手机网页的时候都是用vconsole来显示日志，效率很低。Chromedevtools支持远程调试，可以在安卓手机上调试网页。只需将手机和电脑用USB连接即可（需要在安卓手机的设置中开启USB调试）。之后打开chrome://inspect可以看到手机端的所有网页，以及APP调试包的webview中的网页：点击inspect调试手机网页：可以inspect元素，执行一些js控制台，可以使用Network查看网络请求，大部分调试功能都可以使用。这不比vconsole香吗？浏览器中的网页和调试包APP的webview中的网页都可以进行调试。当然手机最好用chrome浏览器打开，支持的功能最多。总结今天我们学习了一些chromedevtoolstricks：源码默认按域名分组，可以切换成文件名列表，更方便查找文件。网络可自定义显示列，如Cookie、Set-Cookie或任意header样式可右键复制声明快速复制的样式可右键查看计算值快速查看计算值chromedevtools可调试网页Android手机连接USB的（在浏览器和调试包APP的webview中），调试体验比vconsole好看完记住这几个tips，下次用chromedevtools的时候试试看。
