文章目录DevTools元素面板Style面板Computed面板DevTools颜色选择器控制台面板基本功能介绍控制台APP应用程序网络面板功能区分析请求的绑定
打开dev工具
http://www.Sina.com/http://www.Sina.com /
在“Chrome”菜单中选择更多工具，右键单击开发人员工具(右图为“Chrome”菜单符号，位于屏幕右上角)。 选择“检查”(此操作直接跳转到指定元素的“元素”面板)如果使用快捷键Ctrl Shift I或F12打开了devtools，然后进入“元素”面板，则大致的样式将在此处显示您还可以看到，除了“Elements”面板外，还有一系列其他板块的面板，如控制台、源、网络和性能。devtools,即Chrome 开发者工具，Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。
显示了除中央部分以外的各种类型的devtools面板，其最左和最右分别有两个按钮(从左到右依次叙述)。
3358 www.Sina.com/http://www.Sina.com/http://www.Sina.com /
“元素”面板只需要通过打开“元素”面板直接打开devtools，如果默认值不是“元素”面板，则可以直接单击“元素”面板进行跳转，但实际上，通过第二种元素检查方法打开此面板效率最高
要素面板的操作简单来看，为打开devtools的三种方式：
下图是所有类型的devtools面板公有的第一行：
右侧面板包含许多子面板，如styles、Computed和Event Listeners。
样式面板第一个按钮的功能就是查看页面内某个具体元素的元素面板，等价于选择此元素直接用第二种方式打开devtools；第二个按钮表示切换页面的显示形式（手机与电脑）；第三个按钮表示打开devtools的菜单选项；第四个按钮表示关闭devtools。
打开devtools的菜单选项：
筛选搜索将根据特定的css样式属性筛选显示。
要更改元素的状态，单击可选择五种状态。
将类选择器添加到元素中，如下图所示。
创建新的样式规则。 在这里，可以为元素定制添加很多样式。这里是dectools里面一些很常用的功能，首先Dockside可以控制devtools位于屏幕的打开方位，Show console drawer打开抽屉形式的控制台面板，Run command打开devtools里的commend menu，Setting就是设置devtools里面的很多东西等等。更多的功能以及其作用大家还是自己亲自玩玩才更加清楚。
这里显示了一些预定义的css样式，而“Computed”面板显示了实际使用的css样式。选择一个元素，查看CSS以及改变CSS
当鼠标移动到样式区域栏上时，该区域的右下角将显示当前区域的有效菜单选项。 此菜单选项旨在提供更高效的开发支持。 此菜单选项显示如下：
http://www.Sina.com/http://www.Sina.com /
显示此元素的框模型。 可以显示和修改
计算面板
此面板显示实际应用的css样式，因此所有样式都只能显示，不能修改。 这个面板的结构很简单，只有上下两个部分。 上半部分表示实际使用的元素框模型。 下半部分给出了具体实用的css风格。 中央过滤器搜索框和显示内容button的功能可以在“Styles”面板中找到，但不在此介绍。
devtools拾色器此面板可粗略分成左右两个子面板。左边面板结构比较简单由上下两部分组成，上边面板即此页面的html代码，可以查看也能修改，修改后能生效但是刷新页面后又会恢复原样；下边面板是显示当前元素的一个层级结构，点击后上边面板的选择区域可进行对于的跳转，主要是查看的功能。
请点击有颜色的图标。
此取色器可大致有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进行过滤。
这一行中还有一个具有过滤功能的功能区——过滤框。
过滤框主要能按照以下三种类型的输入进行信息过滤：
第二个按钮的功能是清除控制台信息，除此之外还有三种清除控制台信息的方式：
右键单击消息，然后选择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： 捕捉屏幕截图可以分析用户在等待页面加载时所看到的内容。
默认情况下，请求表显示以下列：
注意：
鼠标hover到Name列可看到完整的URL。所有列都是支持resize请求表的列元素显示是动态的，右键可选则自己想要显示的列允许自定义列元素自定义列元素：鼠标右键列头，hover到Response Headers，点击Manage Header Columns，点击Add custom header…
查看响应体：点击Name列里面的具体行即可
此时又会出现一个新的面板，这里有五个模块，包括HTTP响应头，响应体预览，响应体等等。这里我也不具体叙述，大家可以自己去查看。
在此版块的最下面还有一个请求信息的汇总：
到此，第一期也是最初版的devtools知识笔记告一段落，由于我自己也是devtools的初学者，所以知识深度只能至此且文章内容也难免会有错误之处，大家有看到的欢迎评论区指出。随着devtools的继续学习和使用，我也会持续更新此文章内容，希望此文章能对大家有所帮助。
最后，我给出我学习devtools所参考的官方教程链接：devtools使用教程