Chrome DevTools 操作归纳

前言

本文是对Chrome DevTools 操作一个较为全面的归纳介绍。主要介绍的Chrome DevTools 的各个面板的功能作用以及前端开发人员的一些调试技巧。相信很多人在这之前已经在日常开发中使用着Chrome DevTools ，对其也有着一点的了解和理解。希望看完本文后对您有一点的启发和收获。

1、打开开发者工具快捷键

a)、F12
b)、ctrl + shift + I
c)、ctrl + shift + c			快速进入element
d)、ctrl + shift + j 			快速进入console

2、在element 查看DOM节点

a)、在element 选择节点

鼠标浮动到Elements上的元素时，在页面自动凸显对应的元素

b)、点击左上角的 Select a Element 按钮或者 ctrl + shift + c ，然后光标直接选择页面上的任何地方进行反向定位DOM

鼠标浮动到页面的任何位置，Elements自动展开对应的标签元素，鼠标单击可立即在Elements
位到对应的标签元素

c)、在element 页面中 按 ctrl + F, 呼出搜索框，进行搜索查询

搜索框输入“lg”并回车，网页和Elements 对应结果自动高亮。

3、 实习编辑HTML 和 DOM （临时）

a)、在element定位到要编辑的 DOM 节点，双击你想要进行的 DOM 节点（文本节点、属性节点、元素节点 等等）

b)、像在编辑器中编辑HTML: Element中定位到想要编辑的HTML DOM元素节点，选中右键，在弹出的菜单栏中 选择Edit as HTML 即可进入

c)、复制节点：Element中选中要复制的节点，右键选中Copy，然后选中需要黏贴的位置的父节点使用快捷键 ctrl + v （注意：添加的新节点默认放在父节点的最后）

4、在console 中访问节点

a)、Js的元素选中器：document.querySelectorAll();
b)、$0,访问当前选中的节点
c)、在element选中要访问的节点，右键->Copy->Copy JS Path，然后在console 中黏贴 回车

5、给DOM断点调试（断点生效自能通过JS来触发）

a)属性修改时打断点：break on –> attribute modifications

1. 添加一个属性修改断点
   

2. 在console 运行上面代码
   

3. 在断点处自动暂停
   

b)、节点删除时断点：break on -> node removal
c)、子树修改时打断点：break on ->subtree modifications

6、查看和编辑看CSS（临时）

a)、打开 Element ,在 Style 子分栏查看，选中css样式可以进行编辑

1. 点击class 最后面一行可以动态增加新的样式
2. style 中的样式越在后面优先级越低

b)、在Computed 分栏中查看全部生效的css样式

c)、在Sources 面板中打开css文件进行查看（如果是压缩后的文件，可以点击面板左下角的“{}” Format 按钮 格式化css 为未压缩前）


d)、颜色选择器插件：可以动态的进行颜色选择设定、另有取色器可以快捷的获取页面中的颜色

e)、盒模型查看器：Element 中有盒模型查看器分栏，可以清晰的查看每个DOM 的 padding、margin、border、width、height

f)、动态增加类和伪类

1. 增加类、伪类：在Style 分栏的右上角点击“+”
2. 查看编辑 Element 的force状态：在Style 分栏的右上角点击 “:hov”,在展开的CheckBox中对应的 state
   
3. 新增加的类都是临时的，但是Chrome会把这些类存储在 inspector-stylesheet文件中，点击新增样式右上角的inspector-stylesheet 链接， 可以跳转的该文件，进行复制等操作

7、快速调试CSS 数值及颜色图形动画等

a)、动态设定 text-shadow、box-shadow、color、background-color：鼠标浮动到类的右下角的三个点的

b)、动画效果设计可视化：点击DevTools 的左上角的三个点->More toold ->Animations，打开Animations 分栏进行动态调试

8、 Console 面板

a)、可进行交互式编程
b)、调试log日志
c)、Debug

1. 使用debugger命令调试代码：在需要暂停的js代码后一行插入debugger；打开DevTools 的 Sources页面中的对应的js文件，代码运行时自动在debugger处暂停，这时我们就可以使用Chrome自带的debugger工具调试代码（调试工具就在Sources 界面中）
2. 直接使用Chrome自带的debugger工具交互式的调试代码
   1. 添加断点
      
   2. 重新运行，在断点处暂停
      

9、Sources 面板

a)、Sources 面板中可以查看网站的全部静态资源

1. 在Sources 面板的左侧分栏是目录分栏，在该分栏的Page 选项卡显示的时当前网页的全部静态资源
2. 中间或者右边是代码展示分栏，可以进行交互式编辑（临时的）
3. ctrl + p 可以呼出静态资源搜索框
4. 右边或者下面，就是Chrome自带的debugger工具
   

b)、使用Snippets来辅助Debugger

1. 什么是Snippets?
   Snippet是一个代码片段，用于辅助我们进行Debugger。也可以说，它就是个插件。例如，我们可以制作一个Jquery的 Snippet，然后在Sources 面板中Run这个snippet，就可以临时在当前页面生效使用jquery了(即使我们)。

2. 在Sources 面板的目录分栏的最后一个选项卡选项有个Snippets, 选中该选项卡，我们可新增一个Snippet来辅助调试，也可以在对已存在的sinppets 进行管理。
   

c)、如何把DevTools 作为代码编辑器

在Sources 的目录分栏有一个选项卡--Filesystem，在这里我们可以把项目文件添到工作区（也就是生成一
个工作区）。添加后，我们就可以在浏览器中修改工作区中的所有文件，这些修改都是永久的。
比如说，我们除了在Soursces面板中对文件进行修改，在 Elements 的Style 中队class 进行的修改编辑
也会存储到本地文件。

10、Network 面板调试网络

a)、Network 面板可以做什么？

1. 查看网页资源请求概览，查看资源分布

Network 主要三部分：工具栏、整个页面请求的时间轴、单一请求展示列表

2. 查看单一请求的Request/Response 或者时间消耗
3. 分析网页性能优化，使用Watefall
4. 使用 ctrl + f 呼出搜索框，搜索范围：全部请求的请求内容
   

11、客户端 Application 面板

a)、查看、调试 cookie

打开application 面板，展开Storage中Cookie，选择当前网页的 Cookie, 即可查看当前网页的全部Cookie,
 同时也可以对Cookie进行增删改

b)、查看、调试LocalStorage 与 sessionStotage
操作同 Cookie

12、模拟移动设备进行调试

a)、如何进入：在DevTools 页面点击左上角的第二个按钮进入 或 快捷键方式：在DevTools 中按 ctrl + shift +M 进入
b)、如何使用

1. 进入模拟移动端模式后，我们可以选择要模拟的手机、状态、或是模拟手机横屏
   
2. 使用Sensors模拟手机的传感器的各种情景
   1. 在 DevTools 按 ctrl + shift + p , 在打开的输入框中输入 Show Sensors 打开 Sensors 页面进行情景设置。
      

后记

这篇笔记的 大部分内容来源于慕课网的视频教程《Chrome DevTools开发者工具调试指南》。在学习该教材之前，我在日常开发中一直都有使用Chrome DevTools。但一直都是较为浅显的使用（如调样式布局）。学习该教程后，获益良多呀！下面我将附上我学习Chrome DevTools 的视频教程链接，以便您更全面的了解Chrome DevTools 。
视频教材链接：https://www.imooc.com/learn/1164