Chrome 浏览器 F12 开发者工具简单使用

1.如何调出开发者工具

按F12调出
右键检查（或快捷键Ctrl+Shift+i）调出

2.开发者工具初步介绍

chrome开发者工具最经常使用的四个功能模块：元素（ELements）、控制台（Console）、源代码（Sources），网络（Network）。css

元素（Elements）：用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。css能够即时修改，即时显示。大大方便了开发者调试页面html
控制台（Console）：控制台通常用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。还能够看成Javascript API查看用。例如我想查看console都有哪些方法和属性，我能够直接在Console中输入"console"并执行~git
源代码（Sources）：该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是能够调试JavaScript源代码，能够给JS代码添加断点等。github
网络（Network）：网络页面主要用于查看header等与网络链接相关的信息。chrome

2.1元素（Elements）

查看元素的代码：点击左上角的箭头图标（或按快捷键Ctrl+Shift+C）进入选择元素模式，而后从页面中选择须要查看的元素，而后能够在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置

查看元素的属性：定位到元素的源代码以后，能够从源代码中读出改元素的属性。以下图中的class、src、width等属性的值。api

固然从源代码中读到的只是一部分显式声明的属性，要查看该元素的全部属性，能够在右边的侧栏中查看：

修改元素的代码与属性：点击元素，然查看右键菜单，能够看到chrome提供的可对元素进行的操做：包括编辑元素代码（Edit as HTML）、修改属性（Add attribute、Edit attribute）等。选择Edit as HTML选项时，元素进入编辑模式，能够对元素的代码进行任意的修改。固然，这个修改也仅对当前的页面渲染生效，不会修改服务器的源代码，故而这个功能也是做为调试页面效果而使用。

查看元素的CSS属性：在元素的右边栏中的styles页面能够查看该元素的CSS属性，这个页面展现该元素原始定义的CSS属性以及从父级元素继承的CSS属性。从这个页面还能够查到该元素的某个CSS特性来自于那个CSS文件，使编码调试时修改代码变得很是方便。

在Styles页旁边，有一个Computed页面，这个页面展现该元素通过计算以后的全部CSS属性，即最后浏览器渲染页面时使用的属性。属性的计算由浏览器自动进行，是浏览器渲染页面的一个必不可少的过程。

修改元素的CSS属性：在元素的Styles页面，能够对元素的CSS属性进行修改，甚至删除原有、添加新属性。不过，这些修改，仅对当前浏览器的页面展现生效，不会修改CSS源代码。因此在这里进行CSS属性的修改通常用来调整和完善元素的渲染效果。

给元素添加断点：在元素的右键菜单中选择断点选项（Break on…），选中以后，当元素被修改（一般是被JS代码修改）时，页面加载会暂停，而后能够查看该元素的属性。

元素断点添加以后，能够在右侧栏的DOM Breakpoints页面中看到，这个页面能够看到当前网页的全部元素断点。

查看元素的监听事件：元素的右边栏的Event Listener页面，能够查看到该元素的全部监听事件。在开发中，尤为是维护其余人的代码时，会出现不了解元素对应的监听事件，这个时候，能够在这个页面中找到。这个页面不只能看到对应的事件函数，还能够定位该函数所在的JS文件以及在该文件中的具体位置（行数），大大提升开发维护的效率。

控制台（Console）

查看JS对象的及其属性：
浏览器
执行JS语句：
缓存
查看控制台日志：当网页的JS代码中使用了console.log()函数时，该函数输出的日志信息会在控制台中显示。日志信息通常在开发调试时启用，而当正式上线后，通常会将该函数去掉服务器

源代码（Source）

查看文件：在源代码（Source）页面能够查看到当前网页的全部源文件。在左侧栏中能够看到源文件以树结构进行展现。
添加断点：在源代码左边有行号，点击对应行的行号，就好给改行添加上一个断点（再次点击可删除断点）。右键点击断点，在弹出的菜单中选择Edit breakpoint能够给该断的添加中断条件。

中断调试：添加断点后，当JS代码运行到断点时会中断（对于添加了中断条件的断点在符合条件时中断），此时能够将光标放在变量上查看变量的

也能够在右边的侧栏上查看：

在右侧变量上方，有继续运行、单步跳过等按钮，能够在当前断点后，逐行运行代码，或者直接让其继续运行。

Network详细介绍

那我就按照从左到右的顺序来写啦~cookie

：记录按钮处于打开状态时会在此面板进行网络链接的信息记录，关闭后则不会记录。
：清除按钮清除当前的网络链接记录信息。（点击一下就能清空）
：捕获截屏记录页面加载过程当中一些时间点的页面渲染状况，截图根据可视窗口截取，以下图所示。

：过滤器可以自定义筛选条件，找到本身想要资源信息，以下图所示。

也能够是一些指定条件
指定条件有哪些？

domain：资源所在的域，即url中的域名部分。如 domain:api.github.com

has-response-header：资源是否存在响应头，不管其值是什么。如 has-response-header：Access-Control-Allow-Origin

is：当前时间点在执行的请求。当前可用值：running

larger-than：显示大于指定值大小规格的资源。单位是字节(B),可是K(kB)和M(MB)也是能够的~ 如larger-than:150K

method：使用何种HTTP请求方式。如 GET

mime-type：也写做content-type，是资源类型的标识符。如 text/html

scheme：协议规定。如 HTTPS

set-cookie-name：服务器设置的cookies名称

set-cookie-value：服务器设置的cookies的值

set-cookie-domain：服务器设置的cookies的域

status-code：HTTP响应头的状态码

：显示详细信息

：显示时间流

可以根据时间，查看对应时间下浏览器请求的资源信息

：是否保留日志

当选择保留日志，从新加载url当前界面时，以前请求显示的资源信息，会保留下来，不会清空的哟~
：是否进行缓存

当打开开发者工具时生效，打开这个开关，则页面资源不会存入缓存，能够从Status栏的状态码看文件请求状态。
：设置模拟限速，以下图所示。

设置限速能够模拟处于各类网络环境下的不一样用户访问本页面的状况。

Network主题内容介绍

下列介绍中，前者为名词解释，后者为举例

Name/Pat：资源名称以及URL路径（main.css）
Method：Http请求方法 (GET或者POST)
status/Text：Http状态码/文字解释（200，ok）
Type ：请求资源的MIME类型，MIME是Multipurpose Internet Mail Extensions (html,css,js等)

Initiator：解释请求是怎么发起的，有四种可能的值

1.Parser ：请求是由页面的html解析时发送 2.Redirect：请求是由页面重定向发送 3.script ：请求是由script脚本处理发送 4.other ：请求是由其余过程发送的，好比页面里的Link连接点击

size/content：size是响应头部和响应体结合的大小，content是请求解码后的大小

请求文件具体说明

点击某个具体请求后的界面，以下图所示：

一共分为四个模块：

Headers

Header面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等

Preview：预览面板，用于资源的预览。

Response：响应信息面板包含资源还未进行格式处理的内容

Timing：资源请求的详细信息花费时间

细节补充

对某请求右键，出现页面以下图所示。

Copy Request Headers：复制HTTP请求头到系统剪贴板

Copy Response Headers：复制HTTP响应头到系统剪贴板

Copy Response：复制HTTP响应内容到系统剪贴板

Copy as
cURL：将网络请求做为一个curl的命令字符复制到系统剪贴板(curl是一种开源的命令行工具和库，用于配合url语法进行数据传输)

Copy All as HAR：将网络请求记录信息以HAR格式复制到系统剪贴板(what is HAR file)

Save as HAR with Content：将资源的全部的网络信息保存到HAR文件中(.har文件)

Clear Browser Cache：清除浏览器缓存

Clear Browser Cookies：清除浏览器cookies

Open in Sources Panel：当前选中资源在Sources面板打开

Open Link in New Tab：在新tab打开资源连接

Copy Link Address：复制资源url到系统剪贴板

若将全部的网络信息保存到HAR文件中，点击这里，可上传查看