Chrome开发者工具使用小技巧

太过爱你忘了你带给我的痛 2022-05-27 14:09 468阅读 0赞

正所谓不用Chrome的开发者不合格，不晓得Chrome开发者工具进行web调试也不是合格的web开发者。所以本文总结了Chrome开发者工具使用的一些小技巧。

### 一：首先来说下如何打开开发者工具吧： ###

a.直接在页面上点击右键，然后选择审查元素或者检查；
    b.打开浏览器工具下的开发者工具；
    c.直接F12键；
    d.快捷键Command + Option+I（Ctrl+Shift+I）打开。

*  1
 *  2
 *  3
 *  4
 *  5

打开后我们看到的界面大概如下：   
![这里写图片描述][SouthEast]

### 二：Chrome开发者工具结构 ###

#### 1.Elements ####

允许我们从浏览器的角度看页面，也就是说我们可以看到chrome渲染页面所需要的的HTML、CSS和DOM(Document Object Model)对象。此外，还可以编辑这些内容更改页面显示效果。
    在Elements下点击左上方小箭头可以指定页面元素对应相应代码；

*  1
 *  2
 *  3

![这里写图片描述][SouthEast 1]

点击元素右键对元素进行监听

![这里写图片描述][SouthEast 2]

#### 2.Network ####

可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。此外，还可以查看HTTP的请求头，返回内容等；

*  1
 *  2

![这里写图片描述][SouthEast 3]

#### 3.Sources ####

主要用来调试js或者修改样式表啥的，主要是修改编辑源文件吧；

*  1
 *  2

![这里写图片描述][SouthEast 4]

#### 4.Timeline ####

提供了加载页面时花费时间的完整分析，所有事件，从下载资源到处理Javascript，计算CSS样式等花费的时间都展示在Timeline中；

*  1
 *  2

#### 5.Profiles ####

分析web应用或者页面的执行时间以及内存使用情况；

*  1
 *  2

#### 6.Resources ####

对本地缓存（IndexedDB、Web SQL、Cookie、应用程序缓存、Web Storage）中的数据进行确认及编辑；

*  1
 *  2

#### 7.Audits ####

分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案；

*  1
 *  2

#### 8.Console ####

显示各种警告与错误信息，并且提供了shell用来和文档、开发者工具交互，在调试js代码很重要。

*  1
 *  2

![这里写图片描述][SouthEast 5]

### 三：Workspace工具 ###

是一个可以在开发者工具中调试修改js或者css同时自动保存文件的工具，能够避免开发人员在工具中调试好，再在编辑器中修改一次代码的重复操作，提高效率。把文件添加到workspace中修改的方法：

*  1
 *  2

1.  打开开发者工具（F12），切换到Sources选项卡==》在需要编辑的资源文件下右键选择 『Add Folder to Workspace』==》选择源文件所在文件夹，当弹出提示时，选择允许==》在Chrome的Source面板右键选择需要编辑的源文件，选择“Map to a Network Resource”
2.  打开开发者工具（F12），点击右下角的设置按钮==》选择 Workspace, 然后选择 Add folder==》选择源文件所在文件夹，当弹出提示时，选择允许==》在Chrome的Source面板右键选择需要编辑的源文件，选择“Map to a Network Resource”
3.  这样在Chrome的调试工具里面编辑该源文件，或者直接修改css样式（对于css文件），再用Ctrl+S保存，这样修改的代码就自动保存到本地文件中了。

### 四：代码格式化 ###

有很多css/js的代码都会被 minify 掉，你可以点击代码窗口左下角的那个 { }  标签，chrome会帮你给格式化掉。

*  1
 *  2

![这里写图片描述][SouthEast 6]  
四：强制dom状态   
有些HTML的DOM是有状态的，比如a 标签，其会有 active，hover， focus，visited这些状态，有时候，我们的CSS会来定关不同状态的样式，在分析网页查看网页上DOM的CSS样式时，我们可以点击CSS样式上的 :hov 这个小按钮来强制这个DOM的状态。   
![这里写图片描述][SouthEast 7]

### 五：动画 ###

现在的网页上都会有一些动画效果。在Chrome的开发者工具中，通过右上角的菜单中的 More Tools => Animations 呼出相关的选项卡。于是你就可以慢动作播放动画了（可以点选 25% 或 10%），然后，Chrome还可以帮你把动画录下来，你可以拉动动再画的过程，甚至可以做一些简单的修改。

*  1
 *  2

![这里写图片描述][SouthEast 8]

### 六：颜色取色和选择 ###

我们可以在网页中获取某元素字体颜色或者背景颜色等，只需要点击该元素颜色那个框框那里就会弹出颜色取色器，进行颜色选择和查看，如下：

*  1
 *  2

![这里写图片描述][SouthEast 9]

### 七：Sources中的调试 ###

#### 1.断点调试 ####

这一步就是打开文件，在任意一行的行号，点击就会出现一个断点！

*  1
 *  2

![这里写图片描述][SouthEast 10]

#### 2.debugger调试 ####

![这里写图片描述][SouthEast 11]  
![这里写图片描述][SouthEast 12]

大家可能看到，上图红框的按钮，我按照编号简单说下：   
a.停止当前的断点调试   
b.继续执行下一行代码，（1.这个方式不会进入函数，2.这个方式快捷键是f10）   
c.跳入函数中去（这个方式快捷键是f11）   
d.跳出当前的函数   
e.禁用所有的断点，停止任何调试   
f.程序运行时遇到异常时是否中断调试

### 八：application中的缓存和文件 ###

1.  cookie
2.  localstorage和localsession
3.  缓存（Cache Storage）
4.  indexedDB
5.  Frames（页面上的资源包括fonts，images，js文件，css文件等）。

--------------------

*以上就是Chrome开发者工具一些基本常见的操作或者小技巧*

[SouthEast]: /images/20220527/82367829b21b468c9c517dc8fd7daa11.png
[SouthEast 1]: /images/20220527/1ffeb93188d2436a8152bacdb30ad058.png
[SouthEast 2]: /images/20220527/d14d6949d3244aa5a608fffc7c3c744b.png
[SouthEast 3]: /images/20220527/6fec03f729e248b1a46540db12ec69b0.png
[SouthEast 4]: /images/20220527/5dd5ef19ad434a1eb8c84d188abb15ed.png
[SouthEast 5]: /images/20220527/2f506138d60c4412867b4d02d24908f2.png
[SouthEast 6]: /images/20220527/a59dec1cb739423f8bbd03459816538c.png
[SouthEast 7]: /images/20220527/21c8503095e347629c177c5f37ffcc4e.png
[SouthEast 8]: /images/20220527/9e60066a98fc4257921172bec4e225fe.png
[SouthEast 9]: /images/20220527/ee6015ebff634a1f84396f78468eaf57.png
[SouthEast 10]: /images/20220527/81f9b4e88f5142878cfa18f26c3eb658.png
[SouthEast 11]: /images/20220527/8fdd21faaa6b4137b977f0d1ce4ff82b.png
[SouthEast 12]: /images/20220527/94c67d0d766b41e987c105d861588397.png