Chrome调试工具奇淫技

悠悠 2022-08-22 04:57 142阅读 0赞

> 来自：w3cTrain
> 
> 出处：http://w3ctrain.com/2015/12/15/chrome-dev-tools/

名字起得有点奇怪，但是没关系。我只是随便起的。

> 孔子约：工欲善其事，必先利其器。  
> 老子也约过：孔子说得对！

所以对前端er来说，熟练掌握浏览器调试工具是性能优化的必备条件。

首先我们得知道如何打开Chrome调试工具。

你可以鼠标右键，选择审查元素（Inspect Element）或者使用快捷键（⌥⌘I）。

![640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1][]

Element

接下来我们先简要介绍一下Chrome调试工具各个工具的作用。

### Element ###

###     ###

### Elements板块你可以看到整个页面的Dom结构。你可以在这里编辑HTML,查看元素CSS,查找元素等等。 ###

###     ###

### Network ###

这个板块，你可以查看页面所加载的所有资源响应情况，响应时间，浏览器等待时间，状态码，MINE Type,资源大小等。

###     ###

### Sources ###

Sources就是所有资源了，你可以看到页面加载的资源，图片，css,js等，它们会按照资源的来源分类。

###     ###

### Timeline ###

跟前面的工具相比，Timeline就高级很多了。它可以让你查看浏览器的渲染流程。解析代码,布局，绘制，合并渲染层。了解更多，查看之前的文章浏览器渲染流程

### Profiles ###

Profiles工具主要是用来检测CPU占用程度，堆栈申请的内存。

###     ###

### Resources ###

Resources工具显示资源的，跟Sources不同的是，它会对文档类型分类。并且它可以查看，增加，删除，修改页面LocalStorage，SessionStorage,Cookies等等。

### Audits ###

Audits工具非常智能，它会告诉你如何优化页面，告诉你应该合并CSS,JS，应该明确图片的大小，以及某个css文件中unused CSS的百分比等。

### Console ###

Console应该都很熟悉了吧？经常会以为少写了’\}’而报语法错误。当然它的功能远不止这些。点击这里查看更多

## 奇淫技 ##

*  隐藏的刷新按钮，在开发者工具打开的情况下，长按左上角的刷新按钮，会出现多种加载选项。

![640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1 1][]

刷新按钮

*  可以保存修改，Source面板下的文件是可以修改并且支持版本回退的。打开一个文件，进行编辑，保存。右键打开Local Modifications,你可以看到保存记录，你可以选择回退，到某个时间点。你也可以另存为~

![640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1 2][]

保存，回退

*  css选择器，Elements工具中的选择器，支持css选择器

![Image 1][]

支持css选择器

*  jQuery语法，Console工具支持jQuery语法，选中后，你还可以右键选择Reveal In Elements Panel,跳回Element工具。

![Image 1][]

\`支持\`jQuery语法

*  查看使用字体，Elements工具右侧css模块，最底部可以看到某个元素最终具体使用的字体。

![Image 1][]

某个元素最终具体使用的字体

*  setting，devtools中的setting，支持在DevTools打开时强制清除缓存，记录AJAX,打开source map,增删改模拟器等等。

![Image 1][]

devtools中的setting

*  Add Folder to Workspace，在Source面板下，右键选择Add Folder to Workspace，之后就可以直接编辑该目录下的任何文件。

![Image 1][]

Add Folder to Workspace

*  Source下的Snippets，可以让你想保存小段的脚本、书签或是你在浏览器中调试时经常用到的代码，都可以使用Snippets，你可以在Source面板里创建、存储和运行这些Snippets。

![Image 1][]

Snippets

##     ##

## 12月15更新 ##

*  Scroll Into View，滚动浏览器到元素所处位置

![Image 1][]

Scroll Into View

*  Snippets，这里有很多实用的Snippets，比如运行allcolors.js，你可以列出当前页面所有颜色值。

![640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1 3][]

Snippets

*  调试sass，通过工具生成sourcemap以及Chrome的一点设置，你可以调试sass,coffeescript,并且实时保存。 相关文章：Working with CSS Preprocessors, Developing With Sass and Chrome DevTools

![640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1 4][]

调试sass

*  $0,$\_ 打印，Element面板选中标签

![Image 1][]

$0,$\_ 打印

在Console面板，可以使用$0或者$\_快速将它打印出来

![Image 1][]

快速将它打印出来

*  Console更多功能,Console面板还有很多功能，比如console.error ,console.group , console.time。自行查阅API

![Image 1][]  
console.group合并输出

![Image 1][]

添加样式

*  Chrome Dev开发者选项,浏览器进入chrome://flags，你会看到很多浏览器很多隐藏功能，启用开发者工具实验。

![Image 1][]

chrome://flags

然后再进入设置，你会看到新增加了很多开发者选项。

![640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1 5][]

开发者选项

打开Layer面板，可以让你看到页面中的复合层。（查找页面原因的时候非常有用）

![640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1 6][]

打开Layer面板

查看页面响应式断点,打开模拟器，在左上角有个按钮，单击它，你能看到页面中的响应式断点。

![640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1 7][]

查看页面响应式断点

##     ##

## 总结 ##

这篇文章的内容到此为止算是完结了，总结的过程也重新复习了一遍操作。虽然这些技能可能都算不上什么特殊技巧，掌握它们，也不会让你瞬间变得有多强大。但是熟悉它们，善用它们，可能会让你在某些场合，省下大量时间去喝杯咖啡。睡觉！

[640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1]: /images/20220722/53d9b862f2144fec9c84f6961e3913ba.png
[640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1 1]: /images/20220722/ec74c2b3b8ac45e4bf9edded6eba0a9b.png
[640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1 2]: /images/20220722/6df346a2f1674ff880df71c17b0d6f7c.png
[Image 1]: 
[640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1 3]: /images/20220722/b1349f2b8fbb445886f3594ee305e9dd.png
[640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1 4]: /images/20220722/a08a311d64a94eb9b0f23a83fd8bb42e.png
[640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1 5]: /images/20220722/7c15e161b7434e66a3fd2c5a6ba96013.png
[640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1 6]: /images/20220722/bdb8dc4aee8543a29b99ae526cfe3586.png
[640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1 7]: /images/20220722/783a7643ba984f008c192ccdde9a4c09.png

发表评论取消回复

表情：

评论列表（有 0 条评论，142人围观）

还没有评论，来说两句吧...

相关阅读

相关 Chrome调试工具奇淫技

> 来自：w3cTrain > > 出处：http://w3ctrain.com/2015/12/15/chrome-dev-tools/ 名字起得有点奇怪，但是

悠悠/ 2022年08月22日 04:57/ 0 赞/ 143 阅读

相关 Android Studio 奇技淫巧

> 这篇文章篇幅较长，可以使用版权声明下面的目录，找到感兴趣的进行阅读目录 > 3.1 Android Studio使用初探 > > >

红太狼/ 2022年07月14日 03:57/ 0 赞/ 226 阅读

相关 Java奇淫巧技之Lombok

Lombok是一个可以通过简单的注解形式来帮助我们简化消除一些必须有但显得很臃肿的Java代码的工具，通过使用对应的注解，可以在编译源码的时候生成对应的方法。官方地址：[ht

港控/mmm°/ 2022年06月16日 07:10/ 0 赞/ 173 阅读

相关 Java奇淫巧技之Lombok

from: http://blog.csdn.net/ghsau/article/details/52334762 背景我们在开发过程中，通常都会定义大量

爱被打了一巴掌/ 2022年06月10日 07:57/ 0 赞/ 179 阅读

相关 JS 奇淫巧技

ps: js另外一种高深写法，只不过不适合基础太差的想故意装逼的，因为你要是有意而为之，只能是披着羊皮的狼，玩死自己。要不叫做JsFuck。可以自行JsFuck。什么叫基础

桃扇骨/ 2022年05月24日 02:30/ 0 赞/ 170 阅读

相关 Java奇淫巧技之Lombok

Lombok是一个可以通过简单的注解形式来帮助我们简化消除一些必须有但显得很臃肿的Java代码的工具，通过使用对应的注解，可以在编译源码的时候生成对应的方法。官方地址：[ht

你的名字/ 2022年04月06日 03:14/ 0 赞/ 186 阅读

相关 Java奇淫巧技之Lombok

Lombok是一个可以通过简单的注解形式来帮助我们简化消除一些必须有但显得很臃肿的Java代码的工具，通过使用对应的注解，可以在编译源码的时候生成对应的方法。官方地址：[ht

╰+攻爆jí腚メ/ 2022年04月06日 03:14/ 0 赞/ 184 阅读

相关 Java奇淫巧技之Lombok

背景我们在开发过程中，通常都会定义大量的JavaBean，然后通过IDE去生成其属性的构造器、getter、setter、equals、hashcode、toStr

悠悠/ 2022年03月26日 03:48/ 0 赞/ 248 阅读

相关 Java奇淫巧技之Lombok

Lombok是一个可以通过简单的注解形式来帮助我们简化消除一些必须有但显得很臃肿的Java代码的工具，通过使用对应的注解，可以在编译源码的时候生成对应的方法。官方地址：[htt

一时失言乱红尘/ 2022年02月26日 08:54/ 0 赞/ 214 阅读

相关 word使用的奇技淫巧

1、批量删除超链接 ctrl+A 全选 Ctrl+Shift+F9 ，会取消所有的超链接 2、快速统一图片大小选中一张图片，右击“大小和位置”设

怼烎@/ 2022年02月16日 20:20/ 0 赞/ 213 阅读