Chome开发者工具

时间  2019-11-30
标签 chome 开发者 工具 栏目 职业生涯 繁體版
原文   原文链接

参考：css

开发者工具中文文档：http://www.css88.com/doc/chrome-devtools/html

https://www.cnblogs.com/charliechu/p/5948448.htmlgit

https://blog.csdn.net/Letasian/article/details/78461438github

https://www.jianshu.com/p/3c8629d99d0aweb

https://blog.csdn.net/qq_24924483/article/details/56488135sql

Chrome 开发者工具

Chrome 开发者工具是一套内置在Google Chrome中Web开发和调试工具。使用开发者工具来重演，调试和剖析网站。chrome

注意：寻找最新版本的Chrome 开发者工具，Chrome Canary老是有最新的DevTools。shell

打开Chrome 开发者工具

a.直接在页面上点击右键，而后选择审查元素或者检查；数据库

b.直接F12键；浏览器

c.快捷键Ctrl+Shift+I (Windows) 或者 Cmd+Opt+I (Mac)打开。

 开发者工具面板

面板上包含了Elements面板、Console面板、Sources面板、Network面板、Timeline面板、Profiles面板、Application面板、Security面板、Audits面板这些功能面板。

  • Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面获得反馈。
  • Console:记录开发者开发过程当中的日志信息，且能够做为与JS进行交互的命令行Shell。
  • Sources:断点调试JS。
  • Network:从发起网页页面请求Request后分析HTTP请求后获得的各个请求资源信息（包括状态、资源类型、大小、所用时间等），能够根据这个进行网络性能优化。
  • Timeline:记录并分析在网站的生命周期内所发生的各种事件，以此能够提升网页的运行时间的性能。
  • Profiles:若是你须要Timeline所能提供的更多信息时，能够尝试一下Profiles,好比记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
  • Application:记录网站加载的全部资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
  • Security:判断当前网页是否安全。

  • Audits:对当前网页进行网络利用状况、网页性能方面的诊断，并给出一些优化建议。好比列出全部没有用到的CSS文件等。

 

1、Elements面板（元素面板）

使用“元素”面板能够经过自由操纵DOM和CSS来重演网站的布局和设计。

 

能够检查并实时编辑页面中的HTML和CSS。

  • 在Elements(元素)面板中随时检查并编辑 DOM 树中的任何元素。
  • 在Styles(样式)窗格中查看和更改应用于任何选定元素的CSS规则。
  • 在Computed(计算)窗格中查看和编辑所选元素的盒模型。
  • 在Sources(源代码)面板中查看您在本地网页上所作的任何更改。

 

 

1.修改DOM树中的任何元素

只需双击选中元素进行修改便可

2.实时编辑一个样式

在Styles(样式)窗格中，能够实时编辑样式属性名称和值。全部样式都是可编辑的，除了那些灰色的（如user agent stylesheet中的样式，它们就咱们一般说的浏览器的默认样式表）。

要编辑名称或值，只要单击它就能够了，而后进行修改，而后按Tab或Enter键保存修改。

默认状况下，咱们修改的CSS不是永久的，当您从新加载页面时，修改的内容就会丢失。若是您想要在页面从新加载时保留您的修改，请设置持续创做 。

持续创做https://developers.google.com/web/tools/setup/setup-workflow

3.检查和编辑盒模型参数

使用Computed(计算)窗格。盒模型中的全部值都是可编辑的，只需点击它们就能够了。

 

同心矩形包含当前元素的padding, border 和 margin属性的top, bottom, left, right值。

对于非静态定位的元素，还显示了position矩形，包含top, right,bottom, 和left 属性的值。

盒子简介：

html中的每个标签都是一个盒子，而且这个盒子有四个属性，以下：

    content(内容) 通常指网页中的文字或图片
    padding(内边距，填充) 盒子与内容的间隙，且会增长盒子的大小
    border(边框) 盒子自己的边框
    margin(外边距，边界) 盒子之间的间隙

其中盒模型又分为标准盒模型和怪异盒模型，在标准盒模型中有内容尺寸、盒子尺寸、区域尺寸。

在使用margin、padding、border时不影响内容尺寸，使用padding、border会增长盒子尺寸，使用margin、padding、border时都会增长区域尺寸。因为margin、padding的使用会影响区域尺寸和盒子尺寸，所以在使用时建议在盒子与盒子之间使用margin、盒子内使用padding，而盒子自己则尽可能使用auto。

 

对于position: fixed和position: absolute元素，（盒模型）中心字段包含了所选元素的实际的offsetWidth × offsetHeight像素尺寸。跟Styles(样式)窗格中的属性值同样，全部值均可以经过双击来修改。然而，改变值不保证生效，由于这取决于具体元素的定位细节。

4.查看本地修改及历史

  • 在Styles(样式)窗格中，单击您修改过的文件（灰色的没法修改）。DevTools将跳转到Sources(源代码)面板中。
  • 右键单击该文件。
  • 选择Local modifications(本地修改)

点击连接后自动跳到Souces页面

 

5.取消更改

若是您还没有设置持续创做，你只要从新加载页面，全部实时编辑内容都会丢失。

假设您已设置持续创做，想要撤消更改：

  • 使用Ctrl + Z（Windows）或 Cmd + Z（Mac）快速撤消经过Elements(元素)面板对DOM或样式的细微更改。
  • 要撤消对文件进行的全部本地修改，打开Sources(源代码)面板，而后选择文件名旁边的revert(还原)。

2、Console(控制台面板)

在开发期间，可使用控制台面板记录诊断信息。或者使用它做为 shell,在页面上与JavaScript交互。

  • 使用控制台面板
  • 进行信息交互

了解如何：打开DevTools Console(控制台)，堆叠冗余消息或在本身的行上显示它们，清除或保持输出或将其保存到文件，过滤输出，以及了解其余Console(控制台)设置。

  • 以专用面板形式，或做为任何其余面板的抽屉式面板的形式，打开Console(控制台)。
  • 堆叠冗余消息或在本身的行上显示它们。
  • 清除或保持页面之间的输出，或将其保存到文件。
  • 按严重性级别，经过隐藏网络消息，或经过正则表达模式过滤输出。

1.打开控制台

以专用面板形式打开 Console(控制台)：直接点击Console

或做为任何其余面板的抽屉式面板形式打开：

打开控制台面板

要打开专用的控制台面板，请执行如下之一操做：

  • 按 Ctrl+Shift+J（Windows / Linux）或Cmd+Opt+J（Mac）。
  • 若是 DevTools 已打开，请按Console(控制台)按钮。

打开控制台面板时，控制台抽屉式窗格会自动折叠隐藏。

打开控制台抽屉式窗格

要在任何其余面板打开控制台抽屉式窗格，请执行如下之一操做：

  • 在 DevTools 获取焦点时 按Esc键。
  • 点击Customize and control DevTools(自定义并控制DevTools，也叫开发者工具主菜单)按钮，而后选择Show console(显示控制台)。

 

2.信息栈

若是连续地重复信息，不会在新行上打印出每一个信息实例，控制台会“堆叠”重复信息，并在左边显示一个数字，表示消息重复的次数。

注： 当须要换到下一行而不是回车的时候，请按Shift+Enter

  • console.log 显示通常的基本日志信息，当要显示的基本日志太多时可使用console.group将相关的日志进行分组
  • console.warn 显示带有黄色小图标的警告信息
  • console.error 显示带有红色小图标的红色的错误信息

若是您喜欢每一个日志独占一行，请在 DevTools settings(设置)中启用Show timestamps(显示时间戳)。

因为每一个信息的时间戳不一样，每条信息都显示在其本身单独的行上。

3.控制历史的信息操做

能够经过执行如下任一操做来清除Console(控制台)的历史记录：

  • 在Console(控制台)中右键单击，而后选择Clear console(控制台)。
  • 在控制台中键入clear()。
  • 在JavaScript代码中调用console.clear()。
  • 使用快捷键Ctrl+L（Mac，Windows，Linux）

保留历史记录

勾选Console(控制台)顶部的Preserve log(保留日志)复选框，能够在页面刷新或页面跳转时保留控制台历史记录。信息将被存储，直到您清除Console(控制台)信息或关闭tab页。

 

或者在控制台右击 save as 将控制台输出记录保存到日志文件中

执行上下文

在下面的截图中的top下拉菜单被称为Execution Context Selector(执行上下文选择器)。

您一般会看到上下文设置为top（页面的顶部框架）。

其余框架和扩展在其本身的上下文中起做用。要使用这些其余上下文，您须要从下拉菜单中选择它们。例如，若是您想查看 pixel 该上下文中存在的变量，您须要在Execution Context Selector(执行上下文选择器)下拉菜单中选择它。

Console(控制台)默认为top上下文，除非经过检查另外一个上下文中的元素来访问DevTools。例如，若是您检查<iframe>中的<p>元素，那么DevTools将Execution Context Selector(执行上下文选择器)设置为<iframe>的上下文。

当你在top以外的上下文中工做时，DevTools 的Execution Context Selector(执行上下文选择器)高亮显示为红色，以下面的截图所示。这是由于开发人员不多须要在top以外的上下文中工做。它能够很容易混淆，当你输入一个变量，期待获得一个值的时候，可能只能看到它是一个 undefined（由于它在不一样的上下文中定义）。

附加设置

打开 DevTools 的 settings(设置)，转到General(常规)选项卡，而后向下滚动到Console(控制台)部分能够进一步对控制台进行设置。

控制台设置

 

设置 描述
Hide network messages 
(隐藏网络消息)		 默认状况下，控制台报告网络问题。勾选此选项将指示控制台不显示这些错误的日志。例如，将不记录404和500这种系列的错误。
Log XMLHttpRequests 
(记录 XMLHttpRequests )		 决定控制台是否要记录每一个XMLHttpRequest。
Preserve log upon navigation 
(跳转时保留日志)		 在页刷新或页面跳转期间保留控制台历史记录。
Show timestamps 
(显示时间戳)		 当调用控制台方法的时候，为显示在控制台上的每一个消息预置时间戳。 这个主要用于在发生特定事件时进行调试。这将禁用消息栈（message stacking）。
Enable custom formatters 
(启用自定义格式)		 控制JavaScript对象的格式。
Autocomplete from history 
(从历史记录中自动完成)		 控制台会记住你的历史消息记录，轻松实现自动完成功能，输入时前面会有蓝色的箭头图标,如图：
从历史记录中自动完成

 3、Sources(源代码面板)

在“源代码”面板中，能够断点调试 JavaScript 。或者经过Workspaces（工做区）链接本地文件，使用开发者工具实时编辑。

  • 断点调试
  • 调试混淆代码
  • 使用开发者工具的Workspaces（工做区）创建永久性

遍历代码

设置断点

当暂停脚本时，Scope(做用域)窗格将显示那个时刻全部当前定义的属性。

仅当脚本暂停时，Scope(做用域)窗格才会有内容。当您的页面正在运行时，Scope(做用域)窗格显示空白。

Scope(做用域)窗格显示定义在本地(函数内部)，闭包，和全球的属性。

若是属性旁边有一个剪头图标，则表示它是一个对象。单击剪头图标能够展开对象并查看其属性。

有时属性会变淡。 例如，下面截图中，属性constructor比confirm属性更淡。

Dimmed down properties

颜色较暗的属性是可枚举的。颜色较淡的属性是不可枚举的。有关详细信息，请参阅如下 Stack Overflow 中的问题：Chrome开发人员工具做用域窗格中的颜色是什么意思？

简单来讲就是：若是属性显示为暗灰色，则表示它不可枚举。所以，当您遍历对象的属性时，它不会显示出来

 

调用堆栈

靠近边栏顶部的是Call Stack(调用堆栈)窗格。当代码在断点处暂停时，Call Stack(调用堆栈)窗格显示执行路径，按时间逆序，将代码带到该断点。这有助于理解如今执行到哪里，它是如何到达这里的，是调试的一个重要因素。

Call stack

使用断点调试代码：

https://www.jianshu.com/p/e6ba1fee8e7d

4、Network(网络面板）

使用“网络”面板了解请求和下载的资源文件，并优化您的网页加载性能。

 Network(网络)面板记录在页面上有关每一个网络操做的信息，包括详细的时序数据，HTTP请求和响应头，Cookie等。

  • 使用Network(网络)面板记录和分析网络活动。
  • 以聚合（全部类型）或单个资源类型查看负载信息。
  • 过滤和排序资源的显示方式。
  • 保存，复制和清除网络记录。
  • 根据您的须要自定义Network(网络)面板。

网络面板包含5个窗格：

  1. Controls(控件): 使用这些选项能够控制 Network(网络)面板的外观和功能。
  2. Filters(过滤器): 使用这些选项能够控制在请求列表中显示哪些资源。提示：按住Cmd（Mac）或Ctrl（Window / Linux），而后点击过滤器能够同时选择多个过滤器。
  3. Overview(概览): 这个图表显示检索资源的时间轴。若是您看到多个垂直堆叠的栏，这意味着这些资源被同时检索。
  4. Requests Table(请求列表): 此列表列出了检索的每一个资源。默认状况下，此表按时间顺序排序，也就是最先的资源在顶部。单击资源名称能够得到更多信息。提示：右键单击列表的任何标题栏能够以添加或删除信息列。
  5. Summary(概要): 概要窗格告诉您请求的总数，传输的数据量，和加载时间。

网络面板的5个窗格

默认状况下，请求表列显示如下列。您能够添加和删除列（右键单击列表的任何标题栏能够以添加或删除信息列）。

  • Name(名称) : 资源的名称。
  • Status(状态) : HTTP状态代码。
  • Type(类型) : 请求的资源的MIME类型。
  • Initiator(发起人) : 发起请求的对象或进程。它可能有如下几种值：
    • Parser(解析器) : Chrome的HTML解析器发起了请求。
    • Redirect(重定向) : HTTP重定向启动了请求。
    • Script(脚本) : 脚本启动了请求。
    • Other(其余) : 一些其余进程或动做发起请求，例如用户点击连接跳转到页面，或在地址栏中输入网址。
  • Size(尺寸) : 响应头的大小（一般是几百字节）加上响应数据，由服务器提供。
  • Time(时间) : 总持续时间，从请求的开始到接收响应中的最后一个字节。
  • Timeline(时间轴) : Timeline列显示全部网络请求的视觉瀑布。点击此列的标题栏会显示其余排序字段的菜单。

记录网络活动

当网络面板打开时，DevTools默认记录全部网络活动。要记录，只需在面板打开时从新加载页面，或者等待当前加载的页面上的网络活动。

您能够经过record(记录)按钮来判断DevTools是否正在记录。 当它是红色（记录按钮打开）， DevTools正在记录。 当它为灰色（记录按钮打开）时， DevTools不记录。 单击此按钮开始或中止录制， 或按键盘快捷键Cmd + E（Mac）或Ctrl + E（Window / Linux）。

 

在录制过程当中截屏

Network(网络)面板能够在页面加载过程当中捕获屏幕截图。此功能称为Filmstrip(幻灯片)。

点击camera(摄像机)图标能够启用Filmstrip(幻灯片)。当图标为灰色时，表示Filmstrip(幻灯片)停用（Filmstrip(幻灯片)禁用）。 当图标为蓝色时，表示Filmstrip(幻灯片)被启用（Filmstrip(幻灯片)启用）。

从新载入页面能够捕获屏幕截图。 屏幕截图显示在Overview(概览)窗格的上方。

当您将鼠标悬停在某个屏幕截图上的时候，Timeline(时间轴)会显示一条垂直的黄线，指示该帧是什么时候被捕获的。

双击屏幕截图能够放大它。当屏幕截图被放大时，使用键盘的左右箭头键在屏幕截图之间切换（上一张，下一张）。

 

查看DOMContentLoaded和load事件信息

Network(网络)面板会高亮显示两个事件：DOMContentLoaded和load。

DOMContentLoaded和load介绍：https://www.cnblogs.com/caizhenbo/p/6679478.html

从页面空白到展现出页面内容，就是HTML文档被加载和解析完成，会触发DOMContentLoaded事件

load，页面上全部的资源（图片，音频，视频等）被加载之后才会触发load事件，简单来讲，页面的load事件会在DOMContentLoaded被触发以后才触发。

当页面的初始的标记被解析完时，会触发DOMContentLoaded。 它在Network(网络)面板上的两个位置显示：

  • 在Overview(概览)窗格中的蓝色垂直线表示这个事件。
  • 在Summary(概要)窗格中，您能够查看事件的确切时间。

网络面板上的DOMContentLoaded事件

当页面彻底加载时触发load事件。 它显示在三个地方：

  • 在Overview(概览)窗格的红色垂直线表示这个事件。
  • 在Requests Table(请求列表)中的红色垂直线也表示这个事件。
  • 在Summary(概要)中，您能够查看改事件的确切时间。

网络面板上的load事件

查看单个资源的详细信息

点击资源名称（在Requests Table(请求列表)的Name(名称)列中）能够查看该资源的更多信息。

可用的标签页取决于您选择的资源类型，但如下四个标签页是最多见的：

  • Headers(标头) : 与资源相关的HTTP头。
  • Preview(预览) : 预览JSON，图片和文字资源。
  • Response(响应) : HTTP响应数据（若是有）。
  • Timing(时序) : 资源的请求生命周期的明细分类。

查看单个资源的详细信息

查看HTTP头信息

点击Headers显示该资源详细的头信息。

Headers(头信息)标签页显示资源的请求URL，HTTP方法，和响应状态代码。 另外， 它列出HTTP响应和请求头信息及他们对应的值，和任何查询字符串参数。

status code ：http 状态码 https://baike.baidu.com/item/HTTP%E7%8A%B6%E6%80%81%E7%A0%81/5053660?fr=aladdin

http协议报头详解

单个资源的HTTP头信息

您能够经过点击view source(视图源)或view parsed(视图解析)连接查看在源或解析格式中的响应标头，请求标头，或查询字符串参数。

查看头信息源

您还能够经过点击query string parameters(查询字符串参数)旁边的view URL encoded(查看URL编码)或view decoded(查看解码)连接，查看URL编码或解码格式的query string parameters(查询字符串参数)。

查看URL编码

http请求头部＋响应码

　　表1 公共头部
 字段  说明
 Remote Address  请求的远程地址
 Request URL  请求的域名
 Request Method  页面请求的方式：GET/POST
 Status Code  请求的返回状态
 
 表2 请求头
 字段  说明
 Accept  表示浏览器支持的 MIME 类型
 Accept-Encoding  浏览器支持的压缩类型
 Accept-Language  浏览器支持的语言类型，而且优先支持靠前的语言类型
 Cache-Control 指定请求和响应遵循的缓存机制 
 Connection  当浏览器与服务器通讯时对于长链接如何进行处理：close/keep-alive
 Cookie  向服务器返回cookie，这些cookie是以前服务器发给浏览器的
 Host  请求的服务器URL
 Referer  该页面的来源URL
 User-Agent  用户客户端的一些必要信息
 
 
 表3 返回头
 字段  说明
 Cache-Control  告诉浏览器或者其余客户，什么环境能够安全地缓存文档
 Connection  当client和server通讯时对于长连接如何进行处理
 Content-Encoding  数据在传输过程当中所使用的压缩编码方式
 Content-Type  数据的类型
 Date  数据从服务器发送的时间
 Expires  应该在何时认为文档已通过期，从而再也不缓存它？
 Server  服务器名字。Servlet通常不设置这个值，而是由Web服务器本身设置
 Set-Cookie  设置和页面关联的cookie
 Transfer-Encoding  数据传输的方式

1xx：信息，请求收到，继续处理
2xx：成功，行为被成功地接受、理解和采纳
3xx：重定向，为了完成请求，必须进一步执行的动做
4xx：客户端错误，请求包含语法错误或者请求没法实现
5xx：服务器错误，服务器不能实现一种明显无效的请求

查看网络时序

点击Timing(时序)选项卡可查看单个资源的请求生命周期的明细分类。

生命周期显示在如下类别中花费的时间：

  • Queuing(排队)
  • Stalled(停滞)
  • 若是适用：DNS lookup(DNS查找)， initial connection(初始链接)， SSL handshake(SSL握手)
  • Request sent(请求发送)
  • Waiting(等待)（到开始下载第一个字节的时间（TTFB））
  • Content Download(内容下载)

时序选项卡

 

预览某个资源

点击Preview(预览)标签页能够查看某些资源的预览。Preview(预览)标签页可能显示或不显示任何有用的信息， 具体取决于您选择查看的资源类型。

查看HTTP响应内容

点击Response(响应)标签页能够查看该资源未格式化的HTTP响应内容。 Response(响应)标签页可能包含或可能不包含任何有用的信息， 具体取决于您选择查看的资源类型。

查看cookies

储存在用户本地终端上的数据，用于辨别用户身份

点击Cookies标签页能够查看资源的HTTP请求和响应头信息中传输的Cookie列表。此标签页仅在传输Cookie时可用。

如下是Cookie列表中每一个列的说明：

  • Name(名称) : Cookie的名称。
  • Value(值) : Cookie的值。
  • Domain(域) : Cookie所属的域。
  • Path(路径) : Cookie来自的网址路径。
  • Expires / Max-Age(到期/最大可用时间) : Cookie的有效期或max-age属性的值。
  • Size(尺寸) : Cookie的大小（以字节为单位）。
  • HTTP : 表示Cookie只能由浏览器在HTTP请求中设置，且没法使用JavaScript访问。
  • Secure(安全) : 此属性的存在表示Cookie只能经过安全链接传输(HTTPS协议传输)。

资源Cookie

查看WebSocket帧

点击Frames(帧)标签页能够查看WebSocket链接信息。此标签页仅在所选资源由WebSocket链接发起时可见。

WebSocket简介

WebSocket帧标签页

下面的列表描述了Frames(帧)标签页中表格中的每一列：

  • Data(数据) : 消息承载的内容。若是消息是纯文本，则会显示在此处。 若是是二进制操做码，这个字段显示操做码的名称和代码。支持如下操做码：
    • Continuation Frame
    • Binary Frame
    • Connection Close Frame
    • Ping Frame
    • Pong Frame
  • Length(长度) :消息承载内容的长度（以字节为单位）。
  • Time(时间) :建立消息时的时间戳。

消息根据其类型进行颜色编码：

  • 发出的文本消息是浅绿色的。
  • 收到的文本消息是白色的。
  • WebSocket操做码是浅黄色。
  • 错误是浅红色的。

有关实时的注意事项：

  • 要在消息到达后刷新Frames(帧)列表，请点击左侧的资源名称。
  • Frames(帧)列表只保留最近的100条WebSocket消息。

查看资源发起者和依赖关系

按住Shift并移动鼠标到资源上可查看它的发起者和依赖关系。这部分是你鼠标悬停的资源的target(目标)引用。

从target(目标)往上查找,第一个颜色编码为绿色的资源是target(目标)的发起者。若是存在第二个颜色编码为绿色资源，那么这个是发起者的发起者。从target(目标)向下查找，任何颜色编码为红色的资源都是target的依赖。

在下面的截图中，target(目标)是dn/。target(目标)的发起者是以rs=AA2Y...开头的脚本。发起者（rs=AA2Y...）的发起者是google.com。最后，dn.js是target(目标)(dn/)的依赖项。

查看资源启动器和依赖项

请注意，对于拥有大量资源的网页，您可能没法查看全部发起者或依赖关系。

排序请求

默认状况下，Requests Table(请求列表)中的资源按每一个请求的开始时间排序，最先开始的请求在最上面。

点击Requests Table(请求列表)中列的标题栏，能够按照该标题下的每一个资源的值对列表进行排序。再次单击相同的标题栏可将排序顺序更改成升序或降序。

Timeline时间轴列与其余列不一样。当点击时，它显示一个排序字段的菜单：

  • Timeline(时间轴) : 按每一个网络请求的开始时间排序。这是默认排序，它与Start Time(开始时间)选项相同。
  • Start Time(开始时间) : 按每一个网络请求的开始时间排序（与按Timeline(时间轴) 选项排序相同）。
  • Response Time(响应时间) : 按每一个请求的响应时间排序。
  • End Time(完成时间/结束时间) : 按每一个请求完成的时间排序。
  • Duration(持续时间) : 按每一个请求的总时间排序。选择这个过滤器能够肯定哪一个资源须要加载最长的时间。
  • Latency(延迟时间) : 按请求开始和响应开始之间的时间排序。选择这个过滤器能够肯定哪一个资源下载第一个字节（TTFB）的延迟时间最长。

 

使用过滤器

Network(网络)面板提供了许多方法来过滤显示哪些资源。点击filters(过滤器)按钮（过滤器按钮）以隐藏或显示Filters(过滤器)窗格。

使用内容类型按钮来显示或隐藏所选内容类型的资源。

注意: 按住  Ctrl (Windows/Linux)Cmd (Mac) 或者 Cmd (Mac)，而后点击过滤器能够同时启用多个过滤器。

 

在filter(过滤器)文本字段输入框的过滤功能很是强大，输入一个字符串后，Network(网络)面板就只显示资源名字和它匹配的请求。

根据资源名称过滤

filter(过滤器)文本字段还支持各类关键字，使您能够经过各类属性对资源进行排序，例如按照文件大小排序使用larger-than关键字。

下面的列表描述了全部关键字。

  • domain(域) : 仅显示来自指定域的资源。您可使用通配符（*）来包括多个域。例如，*.com显示以.com结尾的全部域名中的资源。 DevTools会在自动完成下拉菜单中自动填充它遇到的全部域。
  • has-response-header(响应头信息) : 显示包含指定HTTP响应头信息的资源。 DevTools会在自动完成下拉菜单中自动填充它遇到的全部响应头。
  • is : 使用is:running过滤出WebSocket资源。
  • larger-than(大于) : 显示大于指定大小的资源（以字节为单位）。设置值1000等效于设置值1k。
  • method(方法) : 显示经过指定的HTTP方法类型检索的资源。DevTools使用它遇到的全部HTTP方法填充下拉列表。
  • mime-type(mime类型) : 显示指定MIME类型的资源。 DevTools使用它遇到的全部MIME类型填充下拉列表。

    MIME (Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准。

    MIME 消息能包含文本、图像、音频、视频以及其余应用程序专用的数据。

  • mixed-content(混合内容) : 显示全部混合内容资源（mixed-content:all）或仅显示当前显示的内容（mixed-content:displayed）。
  • scheme(协议) : 显示经过不受保护的HTTP（scheme:http）或受保护的HTTPS（scheme:https）检索的资源。
  • set-cookie-domain(cookie域) : 显示具备Set-Cookie头,而且其Domain属性与指定值匹配的资源。DevTools会在自动完成下拉菜单中自动填充它遇到的全部Cookie域。
  • set-cookie-name(cookie名) : 显示具备Set-Cookie头,而且名称与指定值匹配的资源。DevTools会在自动完成下拉菜单中自动填充它遇到的全部Cookie名。
  • set-cookie-value(cookie值) : 显示具备Set-Cookie头,而且值与指定值匹配的资源。DevTools会在自动完成下拉菜单中自动填充它遇到的全部cookie值。
  • status-code(状态码) : 仅显示其HTTP状态代码与指定代码匹配的资源。DevTools会在自动完成下拉菜单中自动填充它遇到的全部状态码。

根据文件尺寸过滤

上面的某些关键字提到了自动填充下拉菜单。要触发自动完成菜单，键入关键字后跟一个冒号。例如，在如下截图中，输入domain:触发了自动完成下拉菜单。

过滤器文本字段自动完成

复制，保存和清除网络信息

右键单击Requests Table(请求列表)以复制，保存或删除网络信息。一些选项是上下文相关的，因此若是你想在单个资源上操做，您须要右键单击该资源行。下面的列表描述了每一个选项。

  • Copy Response(复制响应) : 将所选资源的HTTP响应复制到系统剪贴板。
  • Copy as cURL(复制为cURL) : 将所选资源的网络请求做为cURL命令字符串复制到系统剪贴板。 请参阅将复制请求为cURL命令。
  • Copy All as HAR(所有复制为HAR) : 将全部资源复制到系统剪贴板做为HAR数据。 HAR文件包含描述网络“瀑布”的JSON数据结构。一些第三方工具可使用HAR文件中的数据重建网络瀑布。有关详细信息，请参阅Web性能强大工具：HTTP归档（HAR）。
  • Save as HAR with Content(另存为带内容的HAR) : 将全部网络数据与每一个页面资源一块儿保存到HAR文件中。 二进制资源（包括图像）被编码为Base64编码文本。
  • Clear Browser Cache(清除浏览器缓存) : 清除浏览器高速缓存。提示：您也能够从Network Conditions(网络条件)抽屉式窗格中启用或禁用浏览器缓存。
  • Clear Browser Cookies(清除浏览器Cookie) : 清除浏览器的Cookie。
  • Open in Sources Panel(在源文件面板中打开) : 在Sources(源文件)面板中打开选定的资源。
  • Open Link in New Tab(在新标签页中打开连接) : 在新标签页中打开所选资源。您还能够在Requests Table(请求列表)中双击资源名称。
  • Copy Link Address(复制连接地址) : 将资源URL复制到系统剪贴板。
  • Save(保存) : 保存所选的文本资源。仅显示在文本资源上。
  • Replay XHR(从新发送XHR) : 从新发送所选的XMLHTTPRequest。仅显示在XHR资源上。

复制和保存上下文菜单

将一个或全部请求复制为cURL命令

cURL是用于进行HTTP处理的命令行工具。

右键单击Requests Table(请求列表)中的资源，将鼠标悬停在Copy(复制)上，而后选择Copy as cURL(复制为cURL)，能够拷贝一个cURL请求字符串，只要该资源已经被Network(网络)面板检测到。

将单个请求复制为cURL命令

选择Copy All as cURL(所有复制为cURL)能够复制Network(网络)面板检测到的全部资源的cURL请求字符串。

复制所有时，将忽略过滤（例如，若是您过滤Network(网络)面板，来仅显示CSS资源，而后按Copy All as cURL(所有复制为cURL)，你会获得全部检测到的资源，而不仅有CSS）。

自定义Network(网络)面板

默认状况下，Requests Table(请求列表)一个资源只显示很小的一行。 单击Use large resource rows(使用大资源行)按钮（大资源行按钮）以增长每行的大小。

大行可以使一些列能够显示两个文本字段：主要字段和次要字段。列的标题栏指示辅助字段的含义。

增长和删除列

右键单击Requests Table(请求列表)中的任意标题栏能够增长或删除列。

增长或删除列

5、Profiles(分析面板)

演示界面：https://googlechrome.github.io/devtools-samples/jank/

面板介绍：https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/#set_up_the_demo

运行时性能是页面在运行时执行的方式，而不是加载。对于分析页面的响应，动画和空闲阶段很是有用。

模拟移动CPU

移动设备的CPU功率远低于台式机和笔记本电脑。每当您对页面进行概要分析时，请使用CPU限制来模拟您的页面在移动设备上的执行状况。

  1. 在DevTools中，单击“ 性能”选项卡。

  2. 确保已启用“ 屏幕截图”复选框。

  3. 单击捕获设置  捕获设置。DevTools显示与其如何捕获性能指标相关的设置。

  4. 对于CPU，请选择6x减速。DevTools限制你的CPU，使其比平时慢6倍 捕获设置

记录运行时性能

  1. 在DevTools中，单击“ 录制” 记录。DevTools在页面运行时捕获性能指标。
  2. 等几秒钟。
  3. 单击中止。DevTools中止记录，处理数据，而后在“性能”面板上显示结果。

分析结果

分析每秒帧数

测量任何动画性能的主要指标是每秒帧数（FPS）。当动画以60 FPS运行时，用户会很高兴。

  1. 看看FPS图表。每当你在FPS上方看到一个红色条时 ，就意味着帧速率降低到很低，可能会损害用户体验。一般，绿色条越高，FPS越高。

    FPS图表

  2. 在FPS图表下方，您能够看到CPU图表。中相应的颜色 CPU图表对应于颜色摘要选项卡，在性能板的底部。CPU图表充满颜色的事实意味着CPU在录制期间被最大化。每当你看到CPU长时间达到最大值时，就会找到减小工做量的方法。

    CPU图表和摘要选项卡

  3. 将鼠标悬停在FPS，CPU或NET图表上。DevTools显示该页面的截图。左右移动鼠标以重放录制内容。这称为擦洗，它对手动分析动画的进展很是有用。

    查看屏幕截图

  4. 在“ 框架”部分中，将鼠标悬停在其中一个绿色方块上。DevTools向您显示该特定帧的FPS。每帧可能远低于60 FPS的目标。

    悬停在一个框架上

另外：打开FPS表

另外一个方便的工具是FPS仪表，它在页面运行时提供FPS的实时估算。

  1. 按 Control+ Shift+ P（Windows，Linux）或 Command+ Shift+ P（Mac）打开命令菜单。
  2. 开始Rendering在Command菜单中键入，而后选择Show Rendering。

  3. 在“ 渲染”选项卡中，启用FPS Meter。视口的右上角会出现一个新的叠加层。

    FPS仪表

  4. 禁用FPS仪表，而后按Escape关闭“ 渲染”选项卡。


  1. 请注意摘要选项卡。若是未选择任何事件，此选项卡会显示活动明细。该页面花费了大部分时间进行渲染。因为性能是减小工做量的艺术，所以您的目标是减小渲染工做所花费的时间。

  2. 展开主要部分。随着时间的推移，DevTools会向您显示主线程上的活动火焰图。x轴表示随时间的记录。每一个条状结构表明一个活动。更长的条形意味着事件须要更长时间。y轴表示调用堆栈。当您看到事件堆叠在彼此之上时，意味着上层事件致使较低事件。

    主要部分

  3. 还有不少数据，经过在Overview（包括 FPS，CPU和NET图表）上单击，按住并拖动鼠标来放大单个Animation Frame Fired事件。“ 主要”部分和“ 摘要” 选项卡仅显示录制的选定部分的信息。

    放大单个动画帧射击事件图：放大单个动画帧触发事件注：缩放另外一种方法是把重点放在主要经过单击其背景或选择事件部分，而后按 W，A，S，D 键。

  4. 请注意动画帧触发 事件右上角的红色三角形。每当您看到一个红色三角形时，都会警告可能存在与此事件相关的问题。

    注意：每当执行回调时都会发生动画帧触发事件 requestAnimationFrame()。

  5. 单击动画帧触发事件。“ 摘要”选项卡如今显示有关该事件的信息。注意揭示连接。单击它会致使DevTools突出显示启动 动画帧触发事件的事件。另请注意app.js：94连接。单击它会跳转到源代码中的相关行。

    有关动画帧触发事件的更多信息

 6、Application(应用)面板

在  Application(应用)面板检查和管理 Storage(存储)、  Databases(数据库)和 Caches(缓存)。

 

  • 查看和编辑本地和会话存储。

  • 检查和修改 IndexedDB 数据库。

  • 在Web SQL数据库上执行语句。

  • 查看 Application 和 Service Worker 缓存。

  • 单击按钮，清除全部存储，数据库，缓存和service workers。

Local storage（本地存储）

若是您使用local storage(本地存储)来存储键值对(KVP)，您能够在Local Storage(本地存储)窗格中检查，修改和删除这些键值对(KVP)。

本地存储窗格

  • 双击某个键或值来编辑该值。
  • 双击一个空单元格能够添加一个新的键值对(KVP)。
  • 单击键值对(KVP)，而后按delete(删除)按钮（删除按钮）删除该KVP。您能够从Clear storage(清除存储)窗格单击一个按钮来清除全部本地存储数据。
  • 若是您在与某个页面交互中建立，删除或修改键值对(KVP)，您不会实时看到这些变化更新。点击refresh(刷新)按钮（刷新按钮）来查看这些更改。

Session storage（会话存储）

Session Storage(会话存储)窗格的工做方式与Local Storage(本地存储)窗格相同。 查看上面的本地存储部分，了解如何查看和编辑会话存储。

IndexedDB

使用IndexedDB窗格检查、 修改和删除 IndexedDB 数据。

当您展开IndexedDB窗格时，下面的第一级是数据库。若是有多个数据库处于活动状态，那么您将看到多个条目。在下面的屏幕截图中，页面中只有一个活动状态的数据库。

indexeddb tab

单击数据库的名称能够查看该数据库的安全来源（主机地址），名称和版本。

indexeddb database

展开数据库能够查看其键值对(KVP)。

indexeddb key-value pairs

使用Start from key(从键开始)文本字段旁边的箭头按钮能够切换键值对(KVP)的页面。

展开一个值，而后双击能够编辑该值。添加，修改或删除值时，这些更改将不会实时更新。单击refresh(刷新)按钮以更新数据库。

editing an indexeddb kvp

在Start from key(从键开始)文本字段中输入一个键值，以筛选出小于该值的全部键。

filtered kvps

当你添加，修改或删除值时，这些更改将不会实时更新。单击点击refresh(刷新)按钮（刷新按钮）来更新数据库。

单击clear object store(清除对象储存)按钮（清除对象储存）能够从数据库中删除全部数据。您还能够经过单击Clear storage(清除存储)窗格来完成此操做,以及注销service workers并删除其余存储和缓存。

Web SQL

使用 Web SQL 窗格 查询和修改 Web SQL 数据库。

单击数据库名称能够打开该数据库控制台。你能够在这里执行数据库语句。

web sql console

点击一个数据库表查看该表的数据

web sql table

  • 你不能在这里更新值，可是你能够经过数据库控制台更新（见上文）。
  • 点击列头 能够按列排序该表。
  • 你对表所作的更改不会实时更新。点击refresh(刷新)按钮（刷新按钮）来查看你的更新。
  • 在 Visibile columns(可见列)文本字段里中输入用空格或逗号来分隔的列名称，将仅显示的那些列。

Application Cache（应用缓存）

Application Cache（应用缓存）

使用 Application Cache(应用缓存)窗格来检查资源和经过 应用缓存 API建立的规则.

application cache pane

每一行表明一个资源。

Type列将具备下列值之一：

  • Master - 在资源上的 manifest 属性表示此缓存是它的主人。
  • Explicit - 此资源在清单中明确列出.
  • Network - 该清单指定的资源必须来自网络。
  • Fallback - 在 Resource 列中的URL 被回退为另外一个URL(不在 DevTools中显示).

在表的底部有状态图标指示您的网络链接和应用程序缓存的状态。应用程序缓存能够具备如下状态：

  • IDLE - 高速缓存中有没有新的变化.
  • CHECKING - 该清单正在读取和已检查更新.
  • DOWNLOADING - 资源是被添加到缓存中.
  • UPDATEREADY - 缓存在一个新版本中可使用.
  • OBSOLETE - 正在删除缓存.

Service Worker Caches

Application(应用)面板上的Cache Storage(缓存存储)窗格容许您检查，修改和调试使用（service worker）缓存API建立的缓存。 请查看下面的指南以得到更多帮助。

清除 service workers, storage, databases, 和 caches

有时你只须要清除特定来源的全部数据。Application(应用)面板上的Clear storage(清除存储)窗格容许您选择性地注销service workers，存储和高速缓存。若要清除数据，只需勾选组件旁边的复选框，而后单击Clear site data(清除站点数据)。该操做将删除Clear storage(清除存储)签下列出的源的全部数据。

clear storage

Security 面板

  • 使用Security中的Overview(概述)当即查明当前页面是否安全。
  • 检查单个origins来查看链接和证书详细信息（对于Secure Origins）或者肯定哪些请求是不受保护的（对于Non-Secure Origins）。

要查看页面总体的安全性，打开DevTools并转到Security面板。

你看到的第一件事是Security Overview(安全概述)。一目了然，Security Overview(安全概述)会告诉您的页面是否安全。安全的页面会显示信息：his page is secure (valid HTTPS).

点击 View certificate 按钮能够查看main origin的服务器证书。

不安全的网页会显示信息： This page is not secure.。

Security面板识别两种类型的不安全网页。若是请求的页面经过HTTP提供，那么main origin被标记为不安全。

若是经过HTTPS检索所请求的页面，但该页面后续使用HTTP从其余源检索内容，那么该页面仍被标记为不安全。 这钟页面被称为混合内容页面。混合内容页面仅部份内容受保护，由于HTTP内容能够被嗅探器访问而且容易受到中间人攻击。

点击View request in Network Panel(在网络面板中单击查看请求)能够打开 Network(网络)面板的过滤视图,并准确地查看经过HTTP协议提供的请求。这里显示全部来自未受保护的源的全部请求。

 

Audits审查

看看能够采起哪些措施来改进应用。

点击此图标后，您能够到一个菜单。

经过选择选择你想审查的内容

而后确认，稍后会生成一个审查报告

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程