打开DevTools
devtools,即Chrome 开发者工具，Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。
打开devtools的三种方式：
- 在Chrome菜单中选择 更多工具 再选择并点击开发者工具（右图即是Chrome菜单符号，位于屏幕的右上角）
- 在页面元素上右键点击，选择 “检查”（这个操作会直接跳转到指定元素的元素面板）
- 使用 快捷键 Ctrl+Shift+I 或 F12
打开devtools后，如果是进入元素面板，那么它的大体样式应该就是这个样子，并且我们还能发现，除了Elements面板外还有Console，Sources，Network，performance等一系列其它板块的面板。
下图是所有类型的devtools面板公有的第一行：
除去中间部分表示各种类型的devtools面板，其最左边与最右边分别有两个按钮（按从左往右的顺序进行叙述）。
第一个按钮的功能就是查看页面内某个具体元素的元素面板，等价于选择此元素直接用第二种方式打开devtools；第二个按钮表示切换页面的显示形式（手机与电脑）；第三个按钮表示打开devtools的菜单选项；第四个按钮表示关闭devtools。
打开devtools的菜单选项：
这里是dectools里面一些很常用的功能，首先Dockside可以控制devtools位于屏幕的打开方位，Show console drawer打开抽屉形式的控制台面板，Run command打开devtools里的commend menu，Setting就是设置devtools里面的很多东西等等。更多的功能以及其作用大家还是自己亲自玩玩才更加清楚。
元素面板
打开元素面板的方式直接打开devtools即可，如果默认不是Elements面板，直接点击Elements面板进行跳转即可，其实一般情况下用第二种检查元素的方式打开此面板最为高效。
元素面板的操作简单来看也就三种操作：选择一个元素，查看CSS以及改变CSS
此面板可粗略分成左右两个子面板。左边面板结构比较简单由上下两部分组成，上边面板即此页面的html代码，可以查看也能修改，修改后能生效但是刷新页面后又会恢复原样；下边面板是显示当前元素的一个层级结构，点击后上边面板的选择区域可进行对于的跳转，主要是查看的功能。
在右边面板中又有许多子面板，styles，Computed，Event Listeners等等。
Style面板
第一行：
这一行主要有四个功能区，从左往右分别是过滤搜索，改变元素状态，给元素新增类选择器以及创建一个新的样式规则。
过滤搜索就是按照一些特定的css样式属性进行过滤显示。
改变元素状态，点击后会有五种可选状态。
给元素新增类选择器即如下图所示：
创建一个新的样式规则，这里可以允许我们给元素自定义增添许多样式。
主体部分：
这里面显示的是一些已被定义的css样式，相比而言Computed面板显示的是一些实际应用的css样式。
element.style，在这里你可以给当前元素新添一些css样式，你也可以直接在下面的具体区域去修改或者新添css样式，横线划掉的样式代表未生效的样式。
鼠标hover到某一个样式区域栏，此区域的右下角会显示一个当前区域生效的菜单选项，此菜单选项就是为了更高效的辅助开发，hover此菜单选项，显示如下：
从左往右功能依次是，添加text-shadow，添加box-shadow，添加color，添加background-color，最后一个加号与第一行的加号功能一致。
最下方：
显示此元素的盒子模型（可查看与修改）
Computed面板
此面板显示实际应用的css样式，所以所有样式都只能查看，不能修改。此面板结构很简单，只有上下两部分：上半部分显示实际应用的元素盒子模型；下半部分显示一些具体的实际应用的css样式。至于中间的一个过滤搜索框与一个显示内容button的功能可参考Styles面板，这里就不再叙述。
devtools取色器
打开devtools的取色器
点击含有颜色的图标即可：
此取色器可大致有9个功能板块：
- 颜色色调（细色调）
- 滴管，可直接吸取网页的指定颜色（默认是已启用，使用最为方便）
- 点击后复制颜色值到剪切板
- 颜色值
- 调色板
- 颜色色调（粗色调）
- 不透明度
- 颜色显示值切换器（在当前颜色的RGBA，HSLA和十六进制表示之间切换）
- 调色板切换器
控制台面板
两种类型的控制台面板的打开方式：直接在面板打开和在折叠抽屉中打开。
折叠抽屉，是devtools隐藏的一个命令菜单，这里可以调用很多devtools里的其它功能模块，两种打开方式：一种是前面已叙述的点击devtools设置+run command，一种是快捷键Command+Shift+P。
直接在面板打开的两种方式：通过devtools跳转，使用快捷键Control+Shift+J （无需提前打开devtools）。
通过折叠抽屉打开的两种方式：打开命令菜单并运行Show Console，打开设置并运行Show Console command或者直接使用快捷键Esc。
此两种模式的控制台不能同时显示，所以还有另一种显示：
但是这两种形式的控制台面板功能是一模一样的。
基本功能介绍
控制台面板的功能主要有三类：显示信息，过滤信息和运行JavaScript代码。
还是先看第一行功能区：
从左往右，依次有七个功能区。
首先，第一个按钮是个显示/隐藏侧边栏的按钮，其功能是进行控制台面板的显示信息过滤。
显示侧边栏时其右边的Default levels下拉菜单会被禁止使用，因为它的作用也是过滤信息并且侧边栏的过滤功能包含它。这是Default levels下拉菜单栏：
共有四种选项，按照严重级别排序分别为：Verbose（详细）,Info（信息），Warnings（警告）,Error（错误）。
在侧边栏的信息过滤功能中，除了上述四种过滤方式外还可以根据具体的messages进行过滤。
这一行中还有一个具有过滤功能的功能区——过滤框。
过滤框主要能按照以下三种类型的输入进行信息过滤：
- URL
- 上下文
- 正则表达式
第二个按钮的功能是清除控制台信息，除此之外还有三种清除控制台信息的方式：
- 右键单击消息，然后选择Clear Console
- 在控制台中键入clear()，然后运行
- 快捷键Control+L
接下来，top下拉菜单栏的功能是改变不同的JavaScript目录。
第四个眼睛标志的按钮是用于创建一个Live表达式，此表达式的值可实时更新。
最后一个settings按钮具备显示信息的控制功能，其里面有八个选择项：
此功能区域的设置也可以在devtools设置里面的Preferences里面进行设置：
这八个选项的具体功能我在这就不具体叙述，大家可以自己亲自动手玩玩便知。
控制台应用
介绍完控制台面板的一些基本功能区，接下来介绍控制台具体怎么用。
首先，此控制台可以直接运行用户自定义编写的JavaScript代码，包括用JavaScript代码来修改当前页面。编写代码的语法我这里就不做介绍，可自行参看JavaScript语法。
注意：在控制台中Enter键代表运行此单元代码块，而换行行为的快捷键为Shift+Enter。
此控制台还拥有许多自己的API，都是console.xxx()的形式，如console.log()，console.count()，console.error()等等，这里我也不进行详细介绍，大家有兴趣可以自己去玩玩。
除此之外，控制台中还有另外一类很实用的API：
$_： 返回最近计算的表达式的值。
$0 - $4： $0返回最近选择的元素或JavaScript对象，$1返回第二个最近选择的元素，依此类推。
$(selector)： 使用指定的CSS选择器返回对第一个DOM元素的引用。
（此函数等价于document.querySelector() ）
$$(selector)： 返回与给定CSS选择器匹配的元素数组。
（此函数等价于document.querySelectorAll()）
还有 $x(path)，copy(object)，getEventListeners(object)，dir(object) 等一些列API，这里我也不再过多叙述。
网络面板
打开网络面板的方式是先打开devtools然后再跳转到Network。
网络面板的功能主要有五种：记录网络请求，改变加载行为，过滤请求，请求排序以及分析请求。
功能区介绍
第一行的功能区：
第一个红色按钮表示停止记录网络请求，快捷键 Control+E。
第二个按钮表示清除请求表中的所有请求。
第三个按钮是开启过滤功能，点击后会新出现一行过滤功能选项。
最左边的那个过滤框是按属性（例如请求的域或大小）过滤请求，然后旁边的单选框表示是否隐藏data URLs，后面那些选项是按照请求类型进行过滤，最后还有一种可以按照时间进行过滤（稍后再叙述）。
注意：在类型过滤时除All选项外，按住Ctrl可以进行多选过滤。
第四个搜索按钮可以当在HTTP标头和所有资源的响应中搜索某个字符串或正则表达式。
Preserve log可以保存保存跨页面加载的请求，Disable cache 可以禁用缓存。
Online下拉菜单栏可以模拟慢速网络连接，总共有四种可选状态。
倒数第三按钮倒数第二按钮分别是导入HAR文件和导出HAR文件。
最后一个Network Settings按钮里面虽然只有四个选项，但是都很强大。
Use large request rows： 可以使得网络请求表中有更多空白。
Group by frame： 将请求按照框架进行分组显示。
Show overview： 展现网络请求的细节。
在这里就可以通过时间进行请求过滤。
Capture screenshots： 捕捉屏幕截图可以分析用户在等待页面加载时所看到的内容。
分析请求
默认情况下，请求表显示以下列：
- Name，资源的文件名或标识符。
- Status，HTTP状态码。
- Type，所请求资源的类型。
- Initiator，发送请求的对象。
- Size，响应标头和响应主体的组合大小，由服务器提供。
- Time，从请求开始到响应中最后一个字节接收的总持续时间。
- Waterfall，每个请求活动的可视化细节。
注意：
- 鼠标hover到Name列可看到完整的URL。
- 所有列都是支持resize
- 请求表的列元素显示是动态的，右键可选则自己想要显示的列
- 允许自定义列元素
自定义列元素：鼠标右键列头，hover到Response Headers，点击Manage Header Columns，点击Add custom header…
查看响应体：点击Name列里面的具体行即可
此时又会出现一个新的面板，这里有五个模块，包括HTTP响应头，响应体预览，响应体等等。这里我也不具体叙述，大家可以自己去查看。
在此版块的最下面还有一个请求信息的汇总：
结语
到此，第一期也是最初版的devtools知识笔记告一段落，由于我自己也是devtools的初学者，所以知识深度只能至此且文章内容也难免会有错误之处，大家有看到的欢迎评论区指出。随着devtools的继续学习和使用，我也会持续更新此文章内容，希望此文章能对大家有所帮助。
最后，我给出我学习devtools所参考的官方教程链接：devtools使用教程