精华内容
下载资源
问答
  • Chrome 开发者工具使用详细手册 2019年1月最新整理文档,200多页,图文并茂。 谷歌官方文档
  • weex-devtool-iOS使用Chrome开发人员工具对本机iOS应用程序进行远程调试启动首先,通过$ npm i安装[weex-toolkit] [电子邮件保护] -g然后运行命令:$ weex debug您可以看到QR weex-devtool-使用Chrome开发者工具为您...
  • Chrome开发者工具详解

    万次阅读 多人点赞 2018-06-15 10:52:51
    Chrome开发者工具详解(1)-Elements、Console、Sources面板Chrome开发者工具面板面板上包含了Elements面板、Console面板、Sources面板、Network面板、Timeline面板、Profiles面板、Application面板、Security面板、...

    Chrome开发者工具详解(1)-Elements、Console、Sources面板

    Chrome开发者工具面板

    面板上包含了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文件等。

      注: 这一篇主要讲解前三个面板Elements、Console、Sources

    Elements面板

    实时编辑DOM节点和CSS样式

    • 双击DOM树视图里面的节点,可以实时编辑标签属性,修改的效果会立刻反应在浏览器里面

    • 点击右侧Style面板,可以实时修改CSS的属性值,这里面的所有样式Name和Value都是可以编辑的;在每个属性后面单击可以添加新的样式,如下图:

    • 点击右侧Computed面板,可以编辑左侧选中的盒子模型参数,所有的值都是可以修改的;点击不同的位置(topbottomleftright) 就可以修改元素的paddingbordermargin属性值。

    • 查看网页的本地修改历史
    • 点击Styles面板中修改过属性的文件名,会跳转到Source面板
    • 在文件位置右击选择Local modifications,可以查看本地的所有修改记录
    • 点击指定的时间点可以看到粉红背景的删除内容和绿色背景的添加内容

    Console面板

    控制台输出日志

    通过JS代码或者命令行console.log()console.warn()
    console.error()可以将日志信息输出到控制台

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

    • console.assert 当第一个参数为false时,才会显示第一个参数的值

    • 可以根据JS条件判断输出不同的日志信息

    注: 当需要换到下一行而不是回车的时候,请按Shift+Enter

    控制台交互

    • JS表达式计算

    在上一小节,我们已经看到可以在控制台输入JS表达式点击Enter即可得到表达式的值,当你在控制台输入命令时,会弹出相应的智能提示框,你可以用Tab自动完成当前的建议项

    • 选择元素

    快捷方式描述
    $()返回与指定的CSS选择器相匹配的第一个元素,等同于document.querySelector()
    $$()返回与指定的CSS选择器相匹配的所有元素的数组,等同于document.querySelectorAll()
    $x()返回与指定的XPath相匹配的所有元素的数组

    注: 我在实际操作过程中发现$()并没有按预期返回相匹配的第一个元素,而是返回了所有匹配的元素数组,我也给Google提供了这个issue,等待Google的答复。

    Sources面板

    你可以在这个面板里面调试你的JS代码,也可以在工作区打开你的本地文件。

    调试JS代码

    • 你可以点击JS代码块前面的数字外来设置断点,如果当前代码是经过压缩的话,可以点击下方的花括号{}来增强可读性,所有的断点都会列出右侧的断点区。

    • 设置断点

    断点可以在DOM元素节点发生改变时XHR生命周期状态改变时指定的事件执行时被触发

    ① DOM元素节点发生改变时

    Elements面板中指定的DOM节点上右击,在弹出的菜单中选择Break on...,可以看到三个选择项,比如我们选择Subtree modifications
    那么当选择的节点里面的子节点被添加、删除、修改,则断点就会被触发。设置方式如下图:

    下图是在我的系统里添加指定省市指定医院时由于增加了元素节点而触发的断点,通过单步调试可以看到会弹出一个div对话框供用户添加数据。

    ② XHR生命周期状态改变时

    当XHR生命周期状态发生改变或者XHR的URL与Sources面板右侧的XHR Breakpoints栏设置的字符串匹配时,则断点就会有触发。

    ③ 指定的事件执行时

    Sources面板右侧的XHR Breakpoints栏下面是Event Listener Breakpoints,列出了各种类型的事件,勾选你要监听的事件,
    在指定的事件执行时,断点就会有触发。

    Chrome开发者工具详解(2)-Network面板

    注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享

    Chrome开发者工具面板

    面板上包含了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文件等。

    Network面板

    概述

    Network面板可以记录页面上的网络请求的详情信息,从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间、Request和Response等),可以根据这个进行网络性能优化。

    我把Google官方网站上介绍Network面板的图贴到这里,该面板主要包括5大块窗格(Pane):

    1. Controls 控制Network的外观和功能。
    2. Filters 控制Requests Table具体显示哪些内容。
    3. Overview 显示获取到资源的时间轴信息。
    4. Requests Table 按资源获取的前后顺序显示所有获取到的资源信息,点击资源名可以查看该资源的详细信息。
    5. Summary 显示总的请求数、数据传输量、加载时间信息。

    其中 Requests Table 显示如下信息列:

    • Name 资源名称,点击名称可以查看资源的详情情况,包括HeadersPreviewResponseCookiesTiming
    • Status HTTP状态码。
    • Type 请求的资源MIME类型。
    • Initiator 标记请求是由哪个对象或进程发起的(请求源)。
    • Parser: 请求由Chrome的HTML解析器时发起的。
    • Redirect:请求是由HTTP页面重定向发起的。
    • Script:请求是由Script脚本发起的。
    • Other:请求是由其他进程发起的,比如用户点击一个链接跳转到另一个页面或者在地址栏输入URL地址。
    • Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)
    • Time 请求或下载的时间,从发起Request到获取到Response所用的总时间。
    • Timeline 显示所有网络请求的可视化瀑布流(时间状态轴),点击时间轴,可以查看该请求的详细信息,点击列头则可以根据指定的字段可以排序。

    捕获屏幕

    Controls窗格包括的功能有网络日志录制、日志清理、捕获屏幕、过滤器,视图切换、保留日志开关、Cache开关、网络连接开关、网速阀值。

    以捕获屏幕为例,点击摄像机按钮(捕获屏幕),重新加载页面即可捕获屏幕。

    双击其中的截屏可以放大显示,在放大的图下方可以点击跳转到上一帧或者下一帧。

    单击则可以查看该帧被捕获时的网络请求信息,并且在Overview上会有一条黄色竖线以标记该帧被捕获的具体时间点。

    查看DOMContentLoaded和load事件信息

    DOMContentLoadedload这两个事件会高亮显示。

    DOMContentLoaded事件会在页面上DOM完全加载并解析完毕之后触发,不会等待CSS、图片、子框架加载完成。
    load事件会在页面上所有DOM、CSS、JS、图片完全加载完毕之后触发。

    DOMContentLoaded事件在Overview上用一条蓝色竖线标记,并且在Summary蓝色文字显示确切的时间。

    load事件同样会在OverviewRequests Table上用一条红色竖线标记,在Summary也会以红色文字显示确切的时间。

    查看具体资源的详情

    通过点击某个资源的Name可以查看该资源的详细信息,根据选择的资源类型显示的信息也不太一样,可能包括如下Tab信息:

    • Headers 该资源的HTTP头信息。
    • Preview 根据你所选择的资源类型(JSON、图片、文本)显示相应的预览。
    • Response 显示HTTP的Response信息。
    • Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。
    • Timing 显示资源在整个请求生命周期过程中各部分花费的时间。

    针对上面4个Tab进行详细讲解一下各个功能:

    ① 查看资源HTTP头信息

    Headers标签里面可以看到HTTP Request URLHTTP MethodStatus CodeRemote Address等基本信息和详细的Response Headers
    Request Headers以及Query String Parameters或者Form Data等信息。

    ② 查看资源预览信息

    Preview标签里面可根据选择的资源类型(JSON、图片、文本、JS、CSS)显示相应的预览信息。下图显示的是当选择的资源是JSON格式时的预览信息。

    ③ 查看资源HTTP的Response信息

    Response标签里面可根据选择的资源类型(JSON、图片、文本、JS、CSS)显示相应资源的Response响应内容。下图显示的是当选择的资源是CSS格式时的响应内容。

    ④ 查看资源Cookies信息

    如果选择的资源在Request和Response过程中存在Cookies信息,则Cookies标签会自动显示出来,在里面可以查看所有的Cookies信息。

    ⑤ 分析资源在请求的生命周期内各部分时间花费信息

    Timing标签中可以显示资源在整个请求生命周期过程中各部分时间花费信息,可能会涉及到如下过程的时间花费情况:

    • Queuing 排队的时间花费。可能由于该请求被渲染引擎认为是优先级比较低的资源(图片)服务器不可用超过浏览器的并发请求的最大连接数(Chrome的最大并发连接数为6).
    • Stalled 从HTTP连接建立到请求能够被发出送出去(真正传输数据)之间的时间花费。包含用于处理代理的时间,如果有已经建立好的连接,这个时间还包括等待已建立连接被复用的时间。
    • Proxy Negotiation 与代理服务器连接的时间花费。
    • DNS Lookup 执行DNS查询的时间。网页上每一个新的域名都要经过一个DNS查询。第二次访问浏览器有缓存的话,则这个时间为0。
    • Initial Connection / Connecting 建立连接的时间花费,包含了TCP握手及重试时间。
    • SSL 完成SSL握手的时间花费。
    • Request sent 发起请求的时间。
    • Waiting (Time to first byte (TTFB)) 是最初的网络请求被发起到从服务器接收到第一个字节这段时间,它包含了TCP连接时间,发送HTTP请求时间和获得响应消息第一个字节的时间。
    • Content Download 获取Response响应数据的时间花费。

    TTFB这个部分的时间花费如果超过200ms,则应该考虑对网络进行性能优化了,可以参见网络性能优化方案及里面的相关参考文档。

    查看资源的发起者(请求源)和依赖项

    通过按住Shift并且把光标移到资源名称上,可以查看该资源是由哪个对象或进程发起的(请求源)和对该资源的请求过程中引发了哪些资源(依赖资源)。

    在该资源的上方第一个标记为绿色的资源就是该资源的发起者(请求源),有可能会有第二个标记为绿色的资源是该资源的发起者的发起者,以此类推。

    在该资源的下方标记为红色的资源是该资源的依赖资源。

    参考资料

    Chrome开发者工具详解(3)-Timeline面板

    注: 这一篇主要讲解面板Timeline,参考了Google的相关文档,主要用于公司内部技术分享。

    注: 这一篇主要讲解面板Timeline,参考了Google的相关文档,主要用于公司内部技术分享。

    Timeline面板

    Timeline面板是整个面板里面最复杂的一个面板,涉及的东西比较多。可以利用这个面板来记录和分析网页运行过程中的所有活动行为信息。
    你可以充分利用这个面板来分析你的网页的程序性能问题。

    概述

    下图是从Google官方网站中介绍Timeline面板的图贴到这里,该面板主要包括4大块窗格(Pane):

    1. Controls 录制开关和控制录制过程中需要记录哪些信息。
    2. Overview 网页性能的概要信息。
    3. Flame Chart CPU堆栈轨迹的可视化图表(火焰图)。在图表里面有1到3条虚竖线。
    4. Details 当选择一个指定的事件后,会显示这个事件的更多信息;当没有选择事件时,会显示指定的时间帧信息。

    Flame Chart里面的虚竖线含义:蓝色标记DOMContentLoaded事件;绿色标记第一次的绘制时间点;红色代表load事件。

    其中第2块Overview显示了网页性能相关的概要信息,可以通过鼠标或者区域边界上的灰色滑块来拖出一个指定区域范围,Flame Chart会跟着局部放大显示指定区域内的详情信息。

    可以通过键盘上的W,S来放大和缩小指定区域,通过A,D来向左或向右移动指定区域。

    从Google把图贴到这里,这个窗格包含了三个图表:

    1. FPS 每秒帧数(Frames Per Second)。绿色柱状条越高,则每秒帧数越高。在FPS图表上方的红色块是标记一个长帧。
    2. CPU 标记CPU资源的使用情况,这里的面积图标记着消耗CPU资源的各类事件。
    3. NET 各种颜色的柱状条分别显示一种资源。柱状条越长,代表获取这个资源的时间越长。

    CPU面积图中各颜色的含义:蓝色代表HTML文件;黄色代表脚本文件;紫色代表样式文件;绿色代表媒体文件;灰色代表其它杂项文件。

    NET图表柱状条两种颜色的含义:较亮的部分表示等待时间(当资源被请求时,直到第一个字节被下载的时间);较暗的部分表示传输时间(在第一个和最后一个字节被下载之间的时间)。

    网页录制详情

    支持两种网页录制操作:①录制网页加载,②录制网页交互。为了便于分析,录制的时间不宜太长、还要避免不必要的交互操作、并禁用浏览器的缓存和插件。

    当录制完成后,在Flame Chart(火焰图)中点击左侧三角可以展开详情,点击其中的事件或者空白处,可以在Details里面查看该事件或者总的概要信息。这里面包含的信息量很大,限于篇幅原因,下次有机会再作深入介绍,或者直接到Google上查看Timeline Event Reference这个参考文档。

    录制中进行JS分析

    在录制之前点击Controls中的JS Profile复选框,可以在时间轴中捕获JavaScript的堆栈信息(会产生一定的性能消耗),并且在Flame Chart(火焰图)中会显示所有被调用的JavaScript函数信息。

    录制中捕获截屏

    在录制之前点击Controls中的Screenshots复选框,可以在录制过程中捕获截屏,鼠标在Overview上从左向右移动则可以看到录制的动画。

    绘制解析

    在录制之前点击Controls中的Paint复选框,可以获取绘制事件的更多细节信息(注意这会产生很多的性能消耗)。如果要深入了解网页渲染方面的信息,可以点击DevTools右上角的菜单,在More tools里面选中Rendering settings,这里面包含了如下设置项:

    • Paint Flashing 高亮显示网页中需要被重绘的部分。
    • Layer Borders 显示Layer边界。
    • FPS Meter 每一秒的帧细节,帧速率的分布信息和GPU的内存使用情况。
    • Scrolling Performance Issues 分析鼠标滚动时的性能问题,会显示使屏幕滚动变慢的区域。
    • Emulate CSS Media 仿真CSS媒体类型,查看不同的设备上CSS样式效果,可能的媒体类型选项有printscreen

    把上面的所有设置项勾选上,网页的显示效果如下:

    查询指定事件

    你可以通过在DevTools上按Cmd+F(Mac)调出查询框,来查看指定时间区域范围内的指定类型的事件,点击Cmd+G(Mac)或者Cmd+Shift+G(Mac)可以按事件发生的顺序来查询。

    图中查询到了4个红色标记着的Parse HTML事件,点击Cmd+G焦点会在这4个事件移动。

    运行时性能分析

    上面大致介绍了Timeline面板上的各个功能菜单,那么如何去利用该面板去分析和优化网页程序的运行性能呢,由于篇幅限制,就不在这边展开讨论,感兴趣的读者直接到Google开发者文档上查看,Google开发者文档有最权威最新的信息。

    参考文档

    Chrome开发者工具详解(4)-Profiles面板

    如果上篇中的Timeline面板所提供的信息不能满足你的要求,你可以使用Profiles面板,利用这个面板你可以追踪网页程序的内存泄漏问题,进一步提升程序的JavaScript执行性能

    概述

    当前使用的Chrome最新版为54.0.2840.71,这个版本的Profiles面板比之前提供的功能更多也更强大,下面是该面板所包含的功能点:

    • Record JavaScript CPU Profile 用于分析网页上的JavaScript函数在执行过程中的CPU消耗信息。
    • Take Heap Snapshot 创建堆快照用来显示网页上的JS对象和相关的DOM节点的内存分布情况。
    • Record Allocation Timeline 从整个Heap角度记录内存的分配信息的时间轴信息,利用这个可以实现隔离内存泄漏问题。
    • Record Allocation Profile 从JS函数角度记录内存的分配信息。

    Record JavaScript CPU Profile简介

    通过选择Record JavaScript CPU Profile,然后点击Start,结合你所要分析的具体场景,你可以重新加载网页,或者在网页上进行交互,甚至什么都不操作。最后点击Stop,完成记录操作。

    有三种不同的视图可供选择:

    • Chart 按时间先后顺序显示的火焰图。

    • Heavy(Bottom Up) (自底向上)根据对性能的消耗影响列出所有的函数,并可以查看该函数的调用路径。

    • Tree(Top Down) (自顶向下) 从调用栈的顶端(最初调用的位置)开始,显示调用结构的总体的树状图情况。

    我们以Chart视图为例分析一下JS的执行的性能情况:

    该视图会以时间顺序展示CPU的性能情况,视图主要分成两块:

    • Overview 整个录制结果的鸟瞰图(概览),柱形条的高度对应了调用堆栈的深度,也就是说柱形条高度越高,调用堆栈的深度越深。
    • Call Stacks 在录制过程中被调用的函数的深入分析视图(调用堆栈),横轴表示时间,纵轴表示调用栈,自上而下的表示函数的调用情况。也就是说上面的函数调用在它下面的函数。

    视图中的函数颜色不同于其它的面板,这里面的函数颜色标记是随机显示的。然而相同的函数调用颜色标记是相同的。

    其中纵轴表示的函数调用堆栈高度仅仅函数的调用嵌套层次比较深,不表示其重要性很高,但是横轴上一个很宽的柱形条则意味着函数的调用需要一个很长的时间去完成,那么你就考虑去做一些优化操作,具体可以参见网络性能优化方案及里面的相关参考文档。

    将鼠标移到Call Stacks中的函数上可以显示函数的名称和时间相关的数据,会提供如下信息:

    • Name 函数名称
    • Self time 函数的本次调用运行的时间,仅仅包含该函数本身的运行时间,不包含它所调用的子函数的时间。
    • Total time 函数的本次调用运行的总时间,包含它所调用的子函数的运行时间。
    • URL 函数定义在文件中所在的位置,其格式为file.js:100,表示函数在file.js文件中的第100行。
    • Aggregated self time 在这次的录制过程中函数调用运行的总时间,不包含它所调用的子函数的时间。
    • Aggregated total time 在这次的录制过程中所有的函数调用运行的总时间,包含它所调用的子函数的时间。
    • Not optimized 如果优化器检测到该函数有潜在的优化空间,那么该函数会被列在这里。

    Take Heap Snapshot简介

    通过创建堆快照可以查看创建快照时网页上的JS对象和DOM节点的内存分布情况。利用该工具你可以创建JS的堆快照、内存分析图、对比堆快照以及定位内存泄漏问题。选中Take Heap Snapshot,点击Take Snapshot按钮即可获取快照,在每一次获取快照前都会自动执行垃圾回收操作。

    快照最初会存储在渲染进程的内存之中,当我们点击创建快照按钮来查看时才会被传输到DevTools中,当快照被加载到DevTools里面并经过解析之后,在快照标题下方的文字显示是数字就是可访问到的JS对象总的大小。

    堆快照提供了不同的视角来进行查看:

    • Summary 该视图按照构造函数进行分组,用它可以捕获对象和它们使用的内存情况,对于跟踪定位DOM节点的内存泄漏特别有用。
    • Comparison 对比两个快照的差别,用它可以对比某个操作前后的内存快照。分析操作前后的内存释放情况以及它的引用计数,便于你确认内存是否存在泄漏以及造成的原因。
    • Containment 该视图可以探测堆的具体内容,它提供了一个更适合的视图来查看对象结构,有助于分析对象的引用情况,使用它可以分析闭包和进行更深层次的对象分析。
    • Statistics 统计视图。

    Summary视图

    该视图会显示所有的对象信息,点击其中的一个对象进行展开可查看更详细的实例信息。鼠标移动到某个对象上会显示该对象实例的详情信息。

    图中的各列的具体含义如下:

    • Constructor 显示所有的构造函数,点击每一个构造函数可以查看由该构造函数创建的所有对象。
    • Distance 显示通过最短的节点路径到根节点的距离。
    • Objects Count 显示对象的个数和百分比。
    • Shallow size 显示由特定的构造函数创建的所有对象的本身的内存总数。
    • Retained size 显示由该对象及其它所引用的对象的总的内存总数。

    Shallow sizeRetained size的区别?Shallow size是对象本身占用内存的大小,不包含它所引用的对象。Retained size是该对象本身的Shallow size,加上能从该对象直接或者间接访问到对象的Shallow size之和。也就是说Retained size是该对象被GC之后所能回收到内存的总和。

    在展开构造函数,则会列出该函数相关的所有对象实例,可以查看该对象的Shallow size和Retained size,在@符号后面的数字是该对象的唯一标识ID

    其中黄色的对象表示在它被某个JS所引用,而红色的对象表示由黄色背景色引用被分离开出的节点。

    这些构造函数都代表什么含义呢?

    • (global property) 全局对象(比如window)和通过它引用的对象之间的中间对象,如果一个对象是由Person构造函数生成并被全局对象所引用,那么它们的引用路径关系就像这样[global] > (global property) > Person。这跟常规的对象之间直接引用相比,采用中间对象主要是考虑性能的原因。全局对象的改变是很频繁的,而非全局变量的属性访问最优化方案对全局变量是不适用的。
    • (roots) 它们可以是由引擎自己的目标创建的一些引用,这个引擎可以缓存引用的对象,但所有的这些引用都是弱引用,它们不会阻止引用对象被回收。
    • (closure) 一些函数闭包中的一组对象的引用。
    • (array, string, number, regexp) 一系属性引用了数组(Array),字符串(String),数字(Number)或正则表达式的对象类型。
    • HTMLDivElement, HTMLAnchorElement, DocumentFragment等 你的代码中对元素(elements)的引用或者指定的document对象的引用。

    Comparison视图

    通过比较多个快照之间的差异来找出内存泄露的对象,为了验证某个程序的操作不会引起内存泄露(通常会执行一个操作后再执行一个对应的相反操作,比如打开一个文档后再关闭它,应该是没有产生内存泄露问题的),你可以执行如下步骤:

    1. 在执行一个操作之前拍一个快照。
    2. 执行一个操作,通过你认为可能会引起内存泄露的一次页面交互操作。
    3. 执行一个相反的操作。
    4. 拍第二个快照,切换到Comparison视图,并与第一个快照进行对比。

    切换到Comparison视图之后,就可以看到两个不同的快照之间的差别。

    Containment视图

    该视图本质上就是应用程序的对象结构的“鸟瞰图”,允许你去深入分析函数的闭包,了解应用程序底层的内存使用情况。

    这个视图提供了多个入口:

    • DOMWindow objects DOMWindow对象,即JS代码全局对象。
    • Native objects 浏览器原生对象,比如DOM节点,CSS规则。

    闭包小建议: 在快照的分析中命名函数的闭包相比匿名函数的闭包更容易区分。

    Google上提供的例子和图如下:

    function createLargeClosure() {
      var largeStr = new Array(1000000).join('x');
    
      var lC = function() { // 匿名函数
        return largeStr;
      };
    
      return lC;
    }
    function createLargeClosure() {
      var largeStr = new Array(1000000).join('x');
    
      var lC = function lC() { // 命名函数
        return largeStr;
      };
    
      return lC;
    }

    Statistics视图

    该视图是堆快照的总的分布统计情况,这个直接上图就可以了:

    内存泄露示例

    还是把Google提供的内存泄露的小例子贴出来:

    DOM内存泄露可能比你想象的要大,考虑一下下面的例子-什么时候#tree节点被释放掉?

      var select = document.querySelector;
      var treeRef = select("#tree");
      var leafRef = select("#leaf");
      var body = select("body");
    
      body.removeChild(treeRef);
    
      //由于treeRef #tree不能被释放
      treeRef = null;
    
      //由于leafRef的间接引用 #tree还是不能被释放
    
      leafRef = null;
      //现在没有被引用,#tree这个时候才可以被释放了

    #leaf节点保持着对它的父节点(parentNode)的引用,这样一直递归引用了#tree节点,所以只有当leafRef被设置成null后,#tree下面的整个树节点才有可能被垃圾回收器回收。

    Record Allocation Timeline简介

    该工具是可以帮助你追踪JS堆里面的内存泄漏的另一大利器。

    选中Record Allocation Timeline按钮,点击Start按钮之后,执行你认为可能会引起内存泄漏的操作,操作之后点击左上角的停止按钮即可。你可以在蓝色竖线上通过缩放来过滤构造器窗格来仅仅显示在指定的时间帧内的被分配的对象。

    录制过程中,在时间线上会出现一些蓝色竖条,这些蓝色竖条代表一个新的内存分配,这个新的内存分配都可以会有潜在的内存泄露问题。

    通过展开对象并点击它的值则可以在Object窗格中查看更多新分配的对象细节。

    Record Allocation Profile简介

    从JS函数角度记录并查看内存的分配信息。点击Start按钮,执行你想要去深入分析的页面操作,当你完成你的操作后点击Stop按钮。然后会显示一个按JS函数进行内存分配的分解图,默认的视图是Heavy (Bottom Up),该视图会把最消耗内存的函数显示在最顶端。

    下图是切换到Chart视图时具体的界面,点击任意函数跳转到Sources面板可以查看具体的函数信息。

    参考文档

    Chrome开发者工具详解(5)-Application、Security、Audits面板

    这篇文章是Chrome开发者工具详解这一系列的最后一篇,介绍DevTools最后的三个面板功能-Application面板、Security面板、Audits面板的基本功能:

    Application面板简介

    该面板主要是记录网站加载的所有资源信息,包括存储数据(Local Storage、Session Storage、IndexedDB、Web SQL、Cookies)、缓存数据、字体、图片、脚本、样式表等。

    这个面板跟前前面几道硬菜(Network面板Timeline面板Profiles面板)比起来简单多了,这里就稍微作一下介绍:

    • Local Storage 如果你在开发过程中使用了local storage来存储键值对(KVPs),那么你就可以通过Local Storage窗格来检查、新增、修改、删除这个键值对。
    • Application Cache 你可以使用Application Cache窗格去查看通过Application Cache API创建的资源。
    • Frames 将页面上的资源按frame类别进行组织显示。

    Frames窗格

    在上图中可以查看到顶级的top是一个主文档,在top下面是主文档的FontsImagesScriptsStylesheets等资源。最后一个就是主文件自身。

    在资源上右击后在弹出菜单选择Reveal in Network Panel,就会跳转到Network面板并定位到该资源的位置。


    你也可以在Sources面板里面按frame类别来查看资源信息。

    Security面板简介

    通过该面板你可以去调试当前网页的安全和认证等问题并确保您已经在你的网站上正确地实现HTTPS。

    HTTPS(Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的安全版。即HTTP下加入SSL层,HTTPS的安全基础是SSL,因此加密的详细内容就需要SSL。 它是一个URI scheme(抽象标识符体系),句法类同http:体系。用于安全的HTTP数据传输。https:URL表明它使用了HTTP,但HTTPS存在不同于HTTP的默认端口及一个加密/身份验证层(在HTTP与TCP之间)。

    HTTPS和HTTP的区别主要为以下四点:
    ① https协议需要到CA申请证书,一般免费证书很少,需要交费。
    ② http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。
    ③ http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。
    ④ http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。

    如果网页是安全的,则会显示这样一条消息:This page is secure (valid HTTPS).

    通过点击View certificate可以查看main origin的服务器证书信息。
    点击左侧可以查看指定源的连接和证书详情。

    如果网页是不安全的,则会显示:This page is not secure.

    该面板可以区分两种类型的不安全的页面:

    • 如果被请求的页面通过HTTP提供服务,那么这个主源就会被标记为不安全。
    • 如果被请求的页面是通过HTTPS获取的,但这个页面接着通过HTTP继续从其他来源检索内容,那么这个页面仍然被标记为不安全。这就是所谓的混合内容页面,混合内容页面只是部分受到保护,因为HTTP内容(非加密的内容)可以被嗅探者入侵,容易受到中间人攻击

    点击左侧则提供一个跳转到Network面板视图的链接信息。

    中间人攻击(Man-in-the-Middle Attack,"MITM攻击")是一种“间接”的入侵攻击,这种攻击模式是通过各种技术手段将受入侵者控制的一台计算机虚拟放置在网络连接中的两台通信计算机之间,这台计算机就称为“中间人”。

    Audits面板简介

    对当前网页进行网络利用情况、网页性能方面的诊断,并给出一些优化建议。比如列出所有没有用到的CSS文件等。

    选中Network UtilizationWeb Page Performance,点击Run按钮,将会对当前页面进行网络利用率和页面的性能优化作出诊断,并给出相应的优化建议。


    转自:

    http://www.cnblogs.com/charliechu/p/6021141.html

    http://zhuchenglin.me/


    Chrome Developer Tools 中的 Preview 不显示 HTML 的问题:

    https://developers.google.com/web/updates/2018/02/devtools#pretty-printing

    https://bugs.chromium.org/p/chromium/issues/detail?id=785050

    https://groups.google.com/forum/#!topic/google-chrome-developer-tools/6btEa32ISEA

    https://developers.google.com/web/updates/2018/02/devtools#pretty-printing




    展开全文
  • 下面对目前很受喜欢的Chrome开发者工具进行介绍。Chrome开发者工具是一套内嵌到Chrome浏览器的Web开发工具和调试工具,只要安装了Chrome 浏览器,就可以使用。 在Chrome浏览器中,开发者工具的打开方式主要有以下几种...

    前端开发中,经常需要调试代码,所以各种调试工具及浏览器控制台的使用会对开发起到很大的作用。下面对目前很受喜欢的Chrome开发者工具进行介绍。Chrome开发者工具是一套内嵌到Chrome浏览器的Web开发工具和调试工具,只要安装了Chrome 浏览器,就可以使用。

    在Chrome浏览器中,开发者工具的打开方式主要有以下几种。

    • 按“F12”键。
    • 按“Ctrl + Shift +I”组合键。
    • 右击页面的任意位置,选择快捷菜单中的“检查”命令。
    • 单击 Chrome浏览器右上角的自定义图标,展开菜单,选择“更多工具”→“开发者工具”命令,如下图所示。

    打开开发者工具后,会看到有许多标签的面板,如下图所示。
    开发者工具01
    上图中,比较常用的是Elements、Console、Sources和Network这4个面板,接下来一一为读者介绍其使用方式。

    1、Elements面板

    Elements面板即元素面板,使用该面板可以直接操作DOM元素和样式,包括查看元素属性或者修改元素属性、修改样式等,非常方便开发者调试HTML结构和CSS样式,页面效果如图所示。

    开发者工具面板02
    在上图,选中 Elements面板,左侧栏会显示页面的 DOM结构,右侧栏显示对应的选中节点样式以及标准盒模型,可以方便查看页面任意内容的宽、高等属性。

    在Elements面板中无论修改HTML结构还是CSS代码,修改以后的效果都会实时同步到页面中。例如,修改当前选中的标签的 width属性为500 px,页面中的div宽度就会发生变化,同时右侧栏中该元素的盒模型值也会更新。

    2. Console面板

    Console面板即控制台面板,使用该面板不仅可以输出开发过程中的日志信息,而且可以直接编写代码,作为与JavaScript进行交互的 Shell命令行,页面效果如下图所示。
    开发console面板
    在Console面板可直接定义函数并调用。另外,除了在Console面板中直接定义代码,使用JavaScript中注入的Console对象中的常用方法,也可以快速显示页面中元素的信息。

    值得一提的是,在Console面板中编写代码时,按“Shif+Enter”组合键可以实现代码的换行。

    3. Sources面板

    Sources面板即源代码面板,如果在工作区打开本地文件,可以实时编辑代码,并支持断点调试,如下图所示。

    在下图中,打开JavaScript文件,单击代码前面的编号计可以设詈断占进行调试,例如单击代码序号137和141,设置的所有断点都会显示在右侧的Breaknoints断点区。

    然后重新刷新页面,即可看到设置断点位置的代码运行情况。
    打断点测试

    4.Network面板

    Network面板即网络面板,用于记录页面上网络请求的详情信息,根据它可进行网络性能优化,打开扩展的Network面板,查看所有请求的运行状况,页面效果如图所示。
    在这里插入图片描述
    开发者工具

    展开全文
  • Chrome 开发者工具中文手册 Chrome DevTools 是公认的优秀的前端调试工具,由于功能强大,所以使用起来有一定的学习门槛,与此同时 Chrome DevTools 暂时没有中文手册,对于不太熟悉英文的同学会比较吃力。 本项目的...
  • Chrome 开发者工具官方中文文档

    千次阅读 2018-11-07 12:03:25
    传送门 Chrome开发者工具官方中文文档 front-end-study系列

    在这里插入图片描述
    传送门

    Chrome开发者工具官方中文文档

    Chrome开发者工具详解

    前端学习front-end-study系列

    Elements面板(https://zhuanlan.zhihu.com/p/24535735?refer=thinkingInFE)

    Elements 面板主要用于对页面 HTML 和 CSS 的检查以及可视化编辑。

    这是我的 Github 首页的 Elements 面板:
    在这里插入图片描述
    可以看到整个面板被分成 3 个部分,左上是一棵 DOM 树,左下是选中元素的所有父节点,右边是选中元素的样式。左下的部分比较简单,不做详细说明。

    DOM 树

    检查页面元素

    右击页面任意一处,选择检查 / 审查元素,查看选中页面对应的 DOM 元素
    点击
    当图标显示为蓝色时,鼠标点击页面任意一处,可以查看选中页面对应的 DOM 元素
    鼠标悬停 DOM 树上的任意一个节点,页面会用淡蓝色的蒙板在页面上标记 DOM 节点对应的页面
    按键盘的向上向下键可以在展开的节点之间进行切换,向左向右键可以收缩和展开节点

    编辑 DOM

    你可以任意修改 DOM 树上的任意信息,比如修改节点的类型、属性,或者改变 DOM 节点的所属关系等等。不过需要注意的是,这些修改都是临时的,不会得到保存,当刷新页面时所有修改都将重置。

    双击元素标签,修改 DOM 节点类型,比如将 div 改成 ul
    双击元素属性,修改 DOM 节点属性,比如修改节点的 id
    选择一个 DOM 节点,按 enter 键,然后按 tab 键选择想修改的属性或标签
    选择一个 DOM 节点,并将其拖到目标位置,可以改变页面元素的结构
    选择一个 DOM 节点,按 delete 键删除
    Ctrl + Z / Cmd + Z,撤回操作

    这 6 个是比较常见的操作,操作起来也是直截了当,更多的操作可以通过选中一个 DOM 节点,再右击进行查看:
    在这里插入图片描述

    Add Attribute:为选中节点添加一个属性
    Edit Attribute:修改选中节点中选中属性
    Edit as HTML:将选中节点当做 HTML 进行编辑
    复制选中的节点,可以复制选中节点的选择器、XPath、元素本身、outerHTML 等,也能剪切、粘贴节点,我们一般选择复制节点的选择器
    Hide element:隐藏节点
    Delete element:删除节点
    Expand all:展开所选节点下的所有子节点
    Collapse all:收缩所选节点下的所有子节点,包括自己

    4 个伪类:选中则表示所选节点处于相应的状态,比如选中 :hover 则表示所选节点当前正处于鼠标悬停的状态

    Scroll into View:如果所选的 DOM 节点对应的页面元素不在可视区域内的话,点击这个选项则会将页面滚动到可以显示对应的页面元素的位置

    Break on:给 DOM 节点设置断点,主要用来调试 JavaScript 代码,这段代码的作用是用来修改所加断点的 DOM 节点,这一般用在比较复杂的网页应用当中。可以给所选的 DOM 节点添加 3 种类型的断点:

    • subtree modifications:所选节点的子节点被添加、删除、移动的话,则会触发

    • attribute modifications:所选节点的属性被修改的话,则会触发

    • node removal:所选节点被删除的话,则会触发

    这 3 种断点可以同时作用在一个节点上。为了便于大家理解,我们举个例子。拿 jQuery 官网举例(主要在 Console 里可以使用 jQuery):

    我给 header 节点加一个 “attribute modifications” 的断点,如下图所示:
    在这里插入图片描述
    我在 Console 中输入这一句代码并回车:

    $("header").attr("id", "my-header")
    

    你会发现页面处于 debug 模式,并且代码会跳转到修改选中节点属性的 JavaScript 代码那里:
    在这里插入图片描述
    样式

    其实把右边的那一块统称为样式有点不恰当,因为这一块主要由 5 个小的面板组成:
    在这里插入图片描述
    分别是:

    Style:实时编辑与所选元素相关的样式
    Computed:检查编辑所选元素的盒模型
    Event Listeners:查看与所选元素相关的 JS 事件监听
    DOM Breakpoints: DOM 断点
    Properties:所选节点对应的对象及父类们
    

    Styles

    Styles 面板可以允许你通过各种方式来修改元素的样式,并且会想方设法使得你调试时简单方便。
    在这里插入图片描述
    按照上图标注的序号进行描述:

    element.style:代表所选元素的内联样式。比如我选择的是 Github 的 header 块,如果我直接修改其 HTML 为 <div class="header" style="background: red"></div>,那么 element.style 中就会出现 background: red;,相反,如果我在 element.style 块中点击任意空白处,添加 CSS 样式,那么你会在对应的元素节点上看到 style 属性,值就是你写在 element.style 内的内容

    鼠标悬浮在 “三点图标” 上会出现
    在这里插入图片描述
    可以帮助你通过可视化界面的形式调试 text-shadow、 box-shadow、 color、 background。另外,最后一个 “+” 的符号代表可以添加新的 CSS 规则(在 element.style 中没有)

    单击属性或者属性值,进行修改,按 tab 键修改下一个属性或值,按 tab + shift 修改上一个属性或值。当值是数字类型时,按上下键可以以 1 为单位递增或递减,按 alt + 上下键以 0.1 为单位递增或递减,shift + 上下键以 10 为单位递增或递减,记不得这些快捷键就老老实实手动输入吧;点击空白处,添加新的样式

    Style 面板对 color 非常友好,点击色块可以打开取色器(color picker,取色器功能非常强大,大家自行感受),然后对颜色进行可视化编辑。同样的,shadow 属性也能如此

    以 “Inherited from …” 为分界,上面的样式都是作用于元素本身的,下面的都是其继承而来的,继承的对象一般不止一个,可能是父元素,父元素的父元素…

    将鼠标悬停在一个选择器上时,可以看到这个选择器所影响的所有页面元素(不包括可视区域外的元素)

    这边有 3 个选项

    • 点击 “:hov”,出现

    • 在这里插入图片描述
      可以强制所选元素处于某个状态,这个也能通过右击元素,选择一个状态来实现

    • 点击 “.cls”,出现
      在这里插入图片描述
      查看所有与当前元素直接相关的样式规则,你可以禁止/允许某个类作用于所选元素,也可以添加新的类

    • 点击 “+”,新建一个样式规则

    对样式进行了修改之后,如果你想保存这些修改,你可以参考这篇官方文档。现在的 CSS 文件基本上都是编译后的结果,而保存的文件一般也是编译后的 CSS 文件,所以这么做的作用不大(如果有可以直接保存原始样式文件的方法,大家可以留言)。所以我们一般将 Styles 面板当做一个所见即所得的调试工具。

    Computed
    在这里插入图片描述

    Computed 面板显示了如下内容:

    所选元素的盒模型
    所选元素的 CSS 样式以及值,不仅显示最终所采用的值,也显示被覆盖了的值
    每个属性值所在的文件
    

    鼠标悬停在盒模型上的 margin、border、padding 以及内容区域,可以在网页中看到与之相对应的区域。你还可以双击盒模型上的数字来修改它。如果所选元素的 position 属性的值为 absolute 或者 fixed 的话,还可以在 margin 的外围设置 position。

    Event Listeners
    在这里插入图片描述

    上图截取的是知乎首页顶部的“提问”按钮对应的 <button class=...>提问</button>。Event Listeners 面板显示了这个节点注册的所有事件类型,展开一个事件类型(这里是 click),可以看到这个类型下的所有处理函数。

    在面板的顶部有一排选项:
    在这里插入图片描述

    Ancestors:禁止则只显示直接定义在所选元素上的事件监听

    监听器类型:Passive / Blocking / All:Passive Event Listener 是从 Chrome 51 开始添加的一个新特性,主要用来让页面滑动更加流畅

    Framework listeners:很多框架、类库都封装了原生的事件,禁止 Framework listeners 可以查看事件在框架或类库的代码下的实现,而允许 Framework listeners 则可以深入框架或类库内部查看事件定义的代码

    DOM Breakpoints

    我给 Github 的表示 head 的块添加了 3 个 DOM 断点:
    在这里插入图片描述
    当把鼠标悬停在节点标识符上时可以在网页相应区域显示对应的页面元素,勾选前面的复选框代表断点有效,不勾选代表断点虽然存在,但无法使用。

    Properties

    这是所选 DOM 节点对应的对象以及这个对象的父类、父类的父类…的集合。

    展开全文
  • 这篇文章告诉你如何通过用Chrome开发者工具(ChromeDeveloperTools)找到这几行关键的代码。我们来看一个简单的“颜色排序器”应用,这个应用展示了一个由各种颜色构成的网格,你可以拖拽这些颜色进行混合。每一个点...
  • 谷歌浏览器Chrome开发者工具详解

    千次阅读 2019-06-17 20:20:19
    Chrome开发者工具详解(1)-Elements、Console、Sources面板Chrome开发者工具面板面板上包含了Elements面板、Console面板、Sources面板、Network面板、Timeline面板、Profiles面板、Appli...

    Chrome开发者工具详解(1)-Elements、Console、Sources面板

    Chrome开发者工具面板

    面板上包含了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文件等。

      注: 这一篇主要讲解前三个面板Elements、Console、Sources。

    Elements面板

    实时编辑DOM节点和CSS样式

    • 双击DOM树视图里面的节点,可以实时编辑标签属性,修改的效果会立刻反应在浏览器里面

    • 点击右侧Style面板,可以实时修改CSS的属性值,这里面的所有样式Name和Value都是可以编辑的;在每个属性后面单击可以添加新的样式,如下图:

    • 点击右侧Computed面板,可以编辑左侧选中的盒子模型参数,所有的值都是可以修改的;点击不同的位置(top、bottom、left、right) 就可以修改元素的padding、border、margin属性值。

    • 查看网页的本地修改历史
    • 点击Styles面板中修改过属性的文件名,会跳转到Source面板
    • 在文件位置右击选择Local modifications,可以查看本地的所有修改记录
    • 点击指定的时间点可以看到粉红背景的删除内容和绿色背景的添加内容

    Console面板

    控制台输出日志

    通过JS代码或者命令行console.log()console.warn()
    console.error()可以将日志信息输出到控制台

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

    • console.assert 当第一个参数为false时,才会显示第一个参数的值

    • 可以根据JS条件判断输出不同的日志信息

    注: 当需要换到下一行而不是回车的时候,请按Shift+Enter

    控制台交互

    • JS表达式计算

    在上一小节,我们已经看到可以在控制台输入JS表达式点击Enter即可得到表达式的值,当你在控制台输入命令时,会弹出相应的智能提示框,你可以用Tab自动完成当前的建议项

    • 选择元素

    快捷方式描述
    $()返回与指定的CSS选择器相匹配的第一个元素,等同于document.querySelector()
    $$()返回与指定的CSS选择器相匹配的所有元素的数组,等同于document.querySelectorAll()
    $x()返回与指定的XPath相匹配的所有元素的数组

    注: 我在实际操作过程中发现$()并没有按预期返回相匹配的第一个元素,而是返回了所有匹配的元素数组,我也给Google提供了这个issue,等待Google的答复。

    Sources面板

    你可以在这个面板里面调试你的JS代码,也可以在工作区打开你的本地文件。

    调试JS代码

    • 你可以点击JS代码块前面的数字外来设置断点,如果当前代码是经过压缩的话,可以点击下方的花括号{}来增强可读性,所有的断点都会列出右侧的断点区。

    • 设置断点

    断点可以在DOM元素节点发生改变时、XHR生命周期状态改变时、指定的事件执行时被触发

    ① DOM元素节点发生改变时

    在Elements面板中指定的DOM节点上右击,在弹出的菜单中选择Break on...,可以看到三个选择项,比如我们选择Subtree modifications
    那么当选择的节点里面的子节点被添加、删除、修改,则断点就会被触发。设置方式如下图:

    下图是在我的系统里添加指定省市指定医院时由于增加了元素节点而触发的断点,通过单步调试可以看到会弹出一个div对话框供用户添加数据。

    ② XHR生命周期状态改变时

    当XHR生命周期状态发生改变或者XHR的URL与Sources面板右侧的XHR Breakpoints栏设置的字符串匹配时,则断点就会有触发。

    ③ 指定的事件执行时

    在Sources面板右侧的XHR Breakpoints栏下面是Event Listener Breakpoints,列出了各种类型的事件,勾选你要监听的事件,
    在指定的事件执行时,断点就会有触发。

    Chrome开发者工具详解(2)-Network面板

    注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享。

    Chrome开发者工具面板

    面板上包含了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文件等。

    Network面板

    概述

    Network面板可以记录页面上的网络请求的详情信息,从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间、Request和Response等),可以根据这个进行网络性能优化。

    我把Google官方网站上介绍Network面板的图贴到这里,该面板主要包括5大块窗格(Pane):

    1. Controls 控制Network的外观和功能。
    2. Filters 控制Requests Table具体显示哪些内容。
    3. Overview 显示获取到资源的时间轴信息。
    4. Requests Table 按资源获取的前后顺序显示所有获取到的资源信息,点击资源名可以查看该资源的详细信息。
    5. Summary 显示总的请求数、数据传输量、加载时间信息。

    其中 Requests Table 显示如下信息列:

    • Name 资源名称,点击名称可以查看资源的详情情况,包括HeadersPreviewResponseCookiesTiming
    • Status HTTP状态码。
    • Type 请求的资源MIME类型。
    • Initiator 标记请求是由哪个对象或进程发起的(请求源)。
    • Parser: 请求由Chrome的HTML解析器时发起的。
    • Redirect:请求是由HTTP页面重定向发起的。
    • Script:请求是由Script脚本发起的。
    • Other:请求是由其他进程发起的,比如用户点击一个链接跳转到另一个页面或者在地址栏输入URL地址。
    • Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)
    • Time 请求或下载的时间,从发起Request到获取到Response所用的总时间。
    • Timeline 显示所有网络请求的可视化瀑布流(时间状态轴),点击时间轴,可以查看该请求的详细信息,点击列头则可以根据指定的字段可以排序。

    捕获屏幕

    Controls窗格包括的功能有网络日志录制、日志清理、捕获屏幕、过滤器,视图切换、保留日志开关、Cache开关、网络连接开关、网速阀值。

    以捕获屏幕为例,点击摄像机按钮(捕获屏幕),重新加载页面即可捕获屏幕。

    双击其中的截屏可以放大显示,在放大的图下方可以点击跳转到上一帧或者下一帧。

    单击则可以查看该帧被捕获时的网络请求信息,并且在Overview上会有一条黄色竖线以标记该帧被捕获的具体时间点。

    查看DOMContentLoaded和load事件信息

    DOMContentLoadedload这两个事件会高亮显示。

    DOMContentLoaded事件会在页面上DOM完全加载并解析完毕之后触发,不会等待CSS、图片、子框架加载完成。
    load事件会在页面上所有DOM、CSS、JS、图片完全加载完毕之后触发。

    DOMContentLoaded事件在Overview上用一条蓝色竖线标记,并且在Summary以蓝色文字显示确切的时间。

    load事件同样会在Overview和Requests Table上用一条红色竖线标记,在Summary也会以红色文字显示确切的时间。

    查看具体资源的详情

    通过点击某个资源的Name可以查看该资源的详细信息,根据选择的资源类型显示的信息也不太一样,可能包括如下Tab信息:

    • Headers 该资源的HTTP头信息。
    • Preview 根据你所选择的资源类型(JSON、图片、文本)显示相应的预览。
    • Response 显示HTTP的Response信息。
    • Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。
    • Timing 显示资源在整个请求生命周期过程中各部分花费的时间。

    针对上面4个Tab进行详细讲解一下各个功能:

    ① 查看资源HTTP头信息

    在Headers标签里面可以看到HTTP Request URLHTTP MethodStatus CodeRemote Address等基本信息和详细的Response Headers
    、Request Headers以及Query String Parameters或者Form Data等信息。

    ② 查看资源预览信息

    在Preview标签里面可根据选择的资源类型(JSON、图片、文本、JS、CSS)显示相应的预览信息。下图显示的是当选择的资源是JSON格式时的预览信息。

    ③ 查看资源HTTP的Response信息

    在Response标签里面可根据选择的资源类型(JSON、图片、文本、JS、CSS)显示相应资源的Response响应内容。下图显示的是当选择的资源是CSS格式时的响应内容。

    ④ 查看资源Cookies信息

    如果选择的资源在Request和Response过程中存在Cookies信息,则Cookies标签会自动显示出来,在里面可以查看所有的Cookies信息。

    ⑤ 分析资源在请求的生命周期内各部分时间花费信息

    在Timing标签中可以显示资源在整个请求生命周期过程中各部分时间花费信息,可能会涉及到如下过程的时间花费情况:

    • Queuing 排队的时间花费。可能由于该请求被渲染引擎认为是优先级比较低的资源(图片)、服务器不可用、超过浏览器的并发请求的最大连接数(Chrome的最大并发连接数为6).
    • Stalled 从HTTP连接建立到请求能够被发出送出去(真正传输数据)之间的时间花费。包含用于处理代理的时间,如果有已经建立好的连接,这个时间还包括等待已建立连接被复用的时间。
    • Proxy Negotiation 与代理服务器连接的时间花费。
    • DNS Lookup 执行DNS查询的时间。网页上每一个新的域名都要经过一个DNS查询。第二次访问浏览器有缓存的话,则这个时间为0。
    • Initial Connection / Connecting 建立连接的时间花费,包含了TCP握手及重试时间。
    • SSL 完成SSL握手的时间花费。
    • Request sent 发起请求的时间。
    • Waiting (Time to first byte (TTFB)) 是最初的网络请求被发起到从服务器接收到第一个字节这段时间,它包含了TCP连接时间,发送HTTP请求时间和获得响应消息第一个字节的时间。
    • Content Download 获取Response响应数据的时间花费。

    TTFB这个部分的时间花费如果超过200ms,则应该考虑对网络进行性能优化了,可以参见网络性能优化方案及里面的相关参考文档。

    查看资源的发起者(请求源)和依赖项

    通过按住Shift并且把光标移到资源名称上,可以查看该资源是由哪个对象或进程发起的(请求源)和对该资源的请求过程中引发了哪些资源(依赖资源)。

    在该资源的上方第一个标记为绿色的资源就是该资源的发起者(请求源),有可能会有第二个标记为绿色的资源是该资源的发起者的发起者,以此类推。

    在该资源的下方标记为红色的资源是该资源的依赖资源。

    参考资料

    Chrome开发者工具详解(3)-Timeline面板

    注: 这一篇主要讲解面板Timeline,参考了Google的相关文档,主要用于公司内部技术分享。。

    注: 这一篇主要讲解面板Timeline,参考了Google的相关文档,主要用于公司内部技术分享。。

    Timeline面板

    Timeline面板是整个面板里面最复杂的一个面板,涉及的东西比较多。可以利用这个面板来记录和分析网页运行过程中的所有活动行为信息。
    你可以充分利用这个面板来分析你的网页的程序性能问题。

    概述

    下图是从Google官方网站中介绍Timeline面板的图贴到这里,该面板主要包括4大块窗格(Pane):

    1. Controls 录制开关和控制录制过程中需要记录哪些信息。
    2. Overview 网页性能的概要信息。
    3. Flame Chart CPU堆栈轨迹的可视化图表(火焰图)。在图表里面有1到3条虚竖线。
    4. Details 当选择一个指定的事件后,会显示这个事件的更多信息;当没有选择事件时,会显示指定的时间帧信息。

    Flame Chart里面的虚竖线含义:蓝色标记DOMContentLoaded事件;绿色标记第一次的绘制时间点;红色代表load事件。

    其中第2块Overview显示了网页性能相关的概要信息,可以通过鼠标或者区域边界上的灰色滑块来拖出一个指定区域范围,Flame Chart会跟着局部放大显示指定区域内的详情信息。

    可以通过键盘上的W,S来放大和缩小指定区域,通过A,D来向左或向右移动指定区域。

    从Google把图贴到这里,这个窗格包含了三个图表:

    1. FPS 每秒帧数(Frames Per Second)。绿色柱状条越高,则每秒帧数越高。在FPS图表上方的红色块是标记一个长帧。
    2. CPU 标记CPU资源的使用情况,这里的面积图标记着消耗CPU资源的各类事件。
    3. NET 各种颜色的柱状条分别显示一种资源。柱状条越长,代表获取这个资源的时间越长。

    CPU面积图中各颜色的含义:蓝色代表HTML文件;黄色代表脚本文件;紫色代表样式文件;绿色代表媒体文件;灰色代表其它杂项文件。

    NET图表柱状条两种颜色的含义:较亮的部分表示等待时间(当资源被请求时,直到第一个字节被下载的时间);较暗的部分表示传输时间(在第一个和最后一个字节被下载之间的时间)。

    网页录制详情

    支持两种网页录制操作:①录制网页加载,②录制网页交互。为了便于分析,录制的时间不宜太长、还要避免不必要的交互操作、并禁用浏览器的缓存和插件。

    当录制完成后,在Flame Chart(火焰图)中点击左侧三角可以展开详情,点击其中的事件或者空白处,可以在Details里面查看该事件或者总的概要信息。这里面包含的信息量很大,限于篇幅原因,下次有机会再作深入介绍,或者直接到Google上查看Timeline Event Reference这个参考文档。

    录制中进行JS分析

    在录制之前点击Controls中的JS Profile复选框,可以在时间轴中捕获JavaScript的堆栈信息(会产生一定的性能消耗),并且在Flame Chart(火焰图)中会显示所有被调用的JavaScript函数信息。

    录制中捕获截屏

    在录制之前点击Controls中的Screenshots复选框,可以在录制过程中捕获截屏,鼠标在Overview上从左向右移动则可以看到录制的动画。

    绘制解析

    在录制之前点击Controls中的Paint复选框,可以获取绘制事件的更多细节信息(注意这会产生很多的性能消耗)。如果要深入了解网页渲染方面的信息,可以点击DevTools右上角的菜单,在More tools里面选中Rendering settings,这里面包含了如下设置项:

    • Paint Flashing 高亮显示网页中需要被重绘的部分。
    • Layer Borders 显示Layer边界。
    • FPS Meter 每一秒的帧细节,帧速率的分布信息和GPU的内存使用情况。
    • Scrolling Performance Issues 分析鼠标滚动时的性能问题,会显示使屏幕滚动变慢的区域。
    • Emulate CSS Media 仿真CSS媒体类型,查看不同的设备上CSS样式效果,可能的媒体类型选项有printscreen

    把上面的所有设置项勾选上,网页的显示效果如下:

    查询指定事件

    你可以通过在DevTools上按Cmd+F(Mac)调出查询框,来查看指定时间区域范围内的指定类型的事件,点击Cmd+G(Mac)或者Cmd+Shift+G(Mac)可以按事件发生的顺序来查询。

    图中查询到了4个红色标记着的Parse HTML事件,点击Cmd+G焦点会在这4个事件移动。

    运行时性能分析

    上面大致介绍了Timeline面板上的各个功能菜单,那么如何去利用该面板去分析和优化网页程序的运行性能呢,由于篇幅限制,就不在这边展开讨论,感兴趣的读者直接到Google开发者文档上查看,Google开发者文档有最权威最新的信息。

    参考文档

    Chrome开发者工具详解(4)-Profiles面板

    如果上篇中的Timeline面板所提供的信息不能满足你的要求,你可以使用Profiles面板,利用这个面板你可以追踪网页程序的内存泄漏问题,进一步提升程序的JavaScript执行性能。

    概述

    当前使用的Chrome最新版为54.0.2840.71,这个版本的Profiles面板比之前提供的功能更多也更强大,下面是该面板所包含的功能点:

    • Record JavaScript CPU Profile 用于分析网页上的JavaScript函数在执行过程中的CPU消耗信息。
    • Take Heap Snapshot 创建堆快照用来显示网页上的JS对象和相关的DOM节点的内存分布情况。
    • Record Allocation Timeline 从整个Heap角度记录内存的分配信息的时间轴信息,利用这个可以实现隔离内存泄漏问题。
    • Record Allocation Profile 从JS函数角度记录内存的分配信息。

    Record JavaScript CPU Profile简介

    通过选择Record JavaScript CPU Profile,然后点击Start,结合你所要分析的具体场景,你可以重新加载网页,或者在网页上进行交互,甚至什么都不操作。最后点击Stop,完成记录操作。

    有三种不同的视图可供选择:

    • Chart 按时间先后顺序显示的火焰图。

    • Heavy(Bottom Up) (自底向上)根据对性能的消耗影响列出所有的函数,并可以查看该函数的调用路径。

    • Tree(Top Down) (自顶向下) 从调用栈的顶端(最初调用的位置)开始,显示调用结构的总体的树状图情况。

    我们以Chart视图为例分析一下JS的执行的性能情况:

    该视图会以时间顺序展示CPU的性能情况,视图主要分成两块:

    • Overview 整个录制结果的鸟瞰图(概览),柱形条的高度对应了调用堆栈的深度,也就是说柱形条高度越高,调用堆栈的深度越深。
    • Call Stacks 在录制过程中被调用的函数的深入分析视图(调用堆栈),横轴表示时间,纵轴表示调用栈,自上而下的表示函数的调用情况。也就是说上面的函数调用在它下面的函数。

    视图中的函数颜色不同于其它的面板,这里面的函数颜色标记是随机显示的。然而相同的函数调用颜色标记是相同的。

    其中纵轴表示的函数调用堆栈高度仅仅函数的调用嵌套层次比较深,不表示其重要性很高,但是横轴上一个很宽的柱形条则意味着函数的调用需要一个很长的时间去完成,那么你就考虑去做一些优化操作,具体可以参见网络性能优化方案及里面的相关参考文档。

    将鼠标移到Call Stacks中的函数上可以显示函数的名称和时间相关的数据,会提供如下信息:

    • Name 函数名称
    • Self time 函数的本次调用运行的时间,仅仅包含该函数本身的运行时间,不包含它所调用的子函数的时间。
    • Total time 函数的本次调用运行的总时间,包含它所调用的子函数的运行时间。
    • URL 函数定义在文件中所在的位置,其格式为file.js:100,表示函数在file.js文件中的第100行。
    • Aggregated self time 在这次的录制过程中函数调用运行的总时间,不包含它所调用的子函数的时间。
    • Aggregated total time 在这次的录制过程中所有的函数调用运行的总时间,包含它所调用的子函数的时间。
    • Not optimized 如果优化器检测到该函数有潜在的优化空间,那么该函数会被列在这里。

    Take Heap Snapshot简介

    通过创建堆快照可以查看创建快照时网页上的JS对象和DOM节点的内存分布情况。利用该工具你可以创建JS的堆快照、内存分析图、对比堆快照以及定位内存泄漏问题。选中Take Heap Snapshot,点击Take Snapshot按钮即可获取快照,在每一次获取快照前都会自动执行垃圾回收操作。

    快照最初会存储在渲染进程的内存之中,当我们点击创建快照按钮来查看时才会被传输到DevTools中,当快照被加载到DevTools里面并经过解析之后,在快照标题下方的文字显示是数字就是可访问到的JS对象总的大小。

    堆快照提供了不同的视角来进行查看:

    • Summary 该视图按照构造函数进行分组,用它可以捕获对象和它们使用的内存情况,对于跟踪定位DOM节点的内存泄漏特别有用。
    • Comparison 对比两个快照的差别,用它可以对比某个操作前后的内存快照。分析操作前后的内存释放情况以及它的引用计数,便于你确认内存是否存在泄漏以及造成的原因。
    • Containment 该视图可以探测堆的具体内容,它提供了一个更适合的视图来查看对象结构,有助于分析对象的引用情况,使用它可以分析闭包和进行更深层次的对象分析。
    • Statistics 统计视图。

    Summary视图

    该视图会显示所有的对象信息,点击其中的一个对象进行展开可查看更详细的实例信息。鼠标移动到某个对象上会显示该对象实例的详情信息。

    图中的各列的具体含义如下:

    • Constructor 显示所有的构造函数,点击每一个构造函数可以查看由该构造函数创建的所有对象。
    • Distance 显示通过最短的节点路径到根节点的距离。
    • Objects Count 显示对象的个数和百分比。
    • Shallow size 显示由特定的构造函数创建的所有对象的本身的内存总数。
    • Retained size 显示由该对象及其它所引用的对象的总的内存总数。

    Shallow size和Retained size的区别?Shallow size是对象本身占用内存的大小,不包含它所引用的对象。Retained size是该对象本身的Shallow size,加上能从该对象直接或者间接访问到对象的Shallow size之和。也就是说Retained size是该对象被GC之后所能回收到内存的总和。

    在展开构造函数,则会列出该函数相关的所有对象实例,可以查看该对象的Shallow size和Retained size,在@符号后面的数字是该对象的唯一标识ID

    其中黄色的对象表示在它被某个JS所引用,而红色的对象表示由黄色背景色引用被分离开出的节点。

    这些构造函数都代表什么含义呢?

    • (global property) 全局对象(比如window)和通过它引用的对象之间的中间对象,如果一个对象是由Person构造函数生成并被全局对象所引用,那么它们的引用路径关系就像这样[global] > (global property) > Person。这跟常规的对象之间直接引用相比,采用中间对象主要是考虑性能的原因。全局对象的改变是很频繁的,而非全局变量的属性访问最优化方案对全局变量是不适用的。
    • (roots) 它们可以是由引擎自己的目标创建的一些引用,这个引擎可以缓存引用的对象,但所有的这些引用都是弱引用,它们不会阻止引用对象被回收。
    • (closure) 一些函数闭包中的一组对象的引用。
    • (array, string, number, regexp) 一系属性引用了数组(Array),字符串(String),数字(Number)或正则表达式的对象类型。
    • HTMLDivElement, HTMLAnchorElement, DocumentFragment等 你的代码中对元素(elements)的引用或者指定的document对象的引用。

    Comparison视图

    通过比较多个快照之间的差异来找出内存泄露的对象,为了验证某个程序的操作不会引起内存泄露(通常会执行一个操作后再执行一个对应的相反操作,比如打开一个文档后再关闭它,应该是没有产生内存泄露问题的),你可以执行如下步骤:

    1. 在执行一个操作之前拍一个快照。
    2. 执行一个操作,通过你认为可能会引起内存泄露的一次页面交互操作。
    3. 执行一个相反的操作。
    4. 拍第二个快照,切换到Comparison视图,并与第一个快照进行对比。

    切换到Comparison视图之后,就可以看到两个不同的快照之间的差别。

    Containment视图

    该视图本质上就是应用程序的对象结构的“鸟瞰图”,允许你去深入分析函数的闭包,了解应用程序底层的内存使用情况。

    这个视图提供了多个入口:

    • DOMWindow objects DOMWindow对象,即JS代码全局对象。
    • Native objects 浏览器原生对象,比如DOM节点,CSS规则。

    闭包小建议: 在快照的分析中命名函数的闭包相比匿名函数的闭包更容易区分。

    Google上提供的例子和图如下:

    
        
    1. function createLargeClosure() {
    2. var largeStr = new Array(1000000).join('x');
    3. var lC = function() { // 匿名函数
    4. return largeStr;
    5. };
    6. return lC;
    7. }
    
        
    1. function createLargeClosure() {
    2. var largeStr = new Array(1000000).join('x');
    3. var lC = function lC() { // 命名函数
    4. return largeStr;
    5. };
    6. return lC;
    7. }

    Statistics视图

    该视图是堆快照的总的分布统计情况,这个直接上图就可以了:

    内存泄露示例

    还是把Google提供的内存泄露的小例子贴出来:

    DOM内存泄露可能比你想象的要大,考虑一下下面的例子-什么时候#tree节点被释放掉?

    
        
    1. var select = document.querySelector;
    2. var treeRef = select("#tree");
    3. var leafRef = select("#leaf");
    4. var body = select("body");
    5. body.removeChild(treeRef);
    6. //由于treeRef #tree不能被释放
    7. treeRef = null;
    8. //由于leafRef的间接引用 #tree还是不能被释放
    9. leafRef = null;
    10. //现在没有被引用,#tree这个时候才可以被释放了

    #leaf节点保持着对它的父节点(parentNode)的引用,这样一直递归引用了#tree节点,所以只有当leafRef被设置成null后,#tree下面的整个树节点才有可能被垃圾回收器回收。

    Record Allocation Timeline简介

    该工具是可以帮助你追踪JS堆里面的内存泄漏的另一大利器。

    选中Record Allocation Timeline按钮,点击Start按钮之后,执行你认为可能会引起内存泄漏的操作,操作之后点击左上角的停止按钮即可。你可以在蓝色竖线上通过缩放来过滤构造器窗格来仅仅显示在指定的时间帧内的被分配的对象。

    录制过程中,在时间线上会出现一些蓝色竖条,这些蓝色竖条代表一个新的内存分配,这个新的内存分配都可以会有潜在的内存泄露问题。

    通过展开对象并点击它的值则可以在Object窗格中查看更多新分配的对象细节。

    Record Allocation Profile简介

    从JS函数角度记录并查看内存的分配信息。点击Start按钮,执行你想要去深入分析的页面操作,当你完成你的操作后点击Stop按钮。然后会显示一个按JS函数进行内存分配的分解图,默认的视图是Heavy (Bottom Up),该视图会把最消耗内存的函数显示在最顶端。

    下图是切换到Chart视图时具体的界面,点击任意函数跳转到Sources面板可以查看具体的函数信息。

    参考文档

    Chrome开发者工具详解(5)-Application、Security、Audits面板

    这篇文章是Chrome开发者工具详解这一系列的最后一篇,介绍DevTools最后的三个面板功能-Application面板、Security面板、Audits面板的基本功能:

    Application面板简介

    该面板主要是记录网站加载的所有资源信息,包括存储数据(Local Storage、Session Storage、IndexedDB、Web SQL、Cookies)、缓存数据、字体、图片、脚本、样式表等。

    这个面板跟前前面几道硬菜(Network面板Timeline面板Profiles面板)比起来简单多了,这里就稍微作一下介绍:

    • Local Storage 如果你在开发过程中使用了local storage来存储键值对(KVPs),那么你就可以通过Local Storage窗格来检查、新增、修改、删除这个键值对。
    • Application Cache 你可以使用Application Cache窗格去查看通过Application Cache API创建的资源。
    • Frames 将页面上的资源按frame类别进行组织显示。

    Frames窗格

    在上图中可以查看到顶级的top是一个主文档,在top下面是主文档的Fonts、Images、Scripts、Stylesheets等资源。最后一个就是主文件自身。

    在资源上右击后在弹出菜单选择Reveal in Network Panel,就会跳转到Network面板并定位到该资源的位置。


    你也可以在Sources面板里面按frame类别来查看资源信息。

    Security面板简介

    通过该面板你可以去调试当前网页的安全和认证等问题并确保您已经在你的网站上正确地实现HTTPS。

    HTTPS(Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的安全版。即HTTP下加入SSL层,HTTPS的安全基础是SSL,因此加密的详细内容就需要SSL。 它是一个URI scheme(抽象标识符体系),句法类同http:体系。用于安全的HTTP数据传输。https:URL表明它使用了HTTP,但HTTPS存在不同于HTTP的默认端口及一个加密/身份验证层(在HTTP与TCP之间)。

    HTTPS和HTTP的区别主要为以下四点:
    ① https协议需要到CA申请证书,一般免费证书很少,需要交费。
    ② http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。
    ③ http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。
    ④ http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。

    如果网页是安全的,则会显示这样一条消息:This page is secure (valid HTTPS).。

    通过点击View certificate可以查看main origin的服务器证书信息。
    点击左侧可以查看指定源的连接和证书详情。

    如果网页是不安全的,则会显示:This page is not secure.。

    该面板可以区分两种类型的不安全的页面:

    • 如果被请求的页面通过HTTP提供服务,那么这个主源就会被标记为不安全。
    • 如果被请求的页面是通过HTTPS获取的,但这个页面接着通过HTTP继续从其他来源检索内容,那么这个页面仍然被标记为不安全。这就是所谓的混合内容页面,混合内容页面只是部分受到保护,因为HTTP内容(非加密的内容)可以被嗅探者入侵,容易受到中间人攻击。

    点击左侧则提供一个跳转到Network面板视图的链接信息。

    中间人攻击(Man-in-the-Middle Attack,"MITM攻击")是一种“间接”的入侵攻击,这种攻击模式是通过各种技术手段将受入侵者控制的一台计算机虚拟放置在网络连接中的两台通信计算机之间,这台计算机就称为“中间人”。

    Audits面板简介

    对当前网页进行网络利用情况、网页性能方面的诊断,并给出一些优化建议。比如列出所有没有用到的CSS文件等。

    选中Network Utilization、Web Page Performance,点击Run按钮,将会对当前页面进行网络利用率和页面的性能优化作出诊断,并给出相应的优化建议。


    转自:

    http://www.cnblogs.com/charliechu/p/6021141.html

    http://zhuchenglin.me/


    Chrome Developer Tools 中的 Preview 不显示 HTML 的问题:

    https://developers.google.com/web/updates/2018/02/devtools#pretty-printing

    https://bugs.chromium.org/p/chromium/issues/detail?id=785050

    https://groups.google.com/forum/#!topic/google-chrome-developer-tools/6btEa32ISEA

    https://developers.google.com/web/updates/2018/02/devtools#pretty-printing




    展开全文
  • Chrome开发者工具Filter多条件过滤

    千次阅读 2020-08-26 11:36:10
    Filter多条件过滤 条件之间用 / 隔开,注意/前后有两个空格,下面是例子 一开始有6个请求 过滤出GET方法的4个请求 在GET请求过滤的基础上增加了 / domain:csdnimg.cn的过滤条件(注意/左右有空格),多条件过滤... ...
  • #1楼 参考:https://stackoom.com/question/uFLr/如何在Chrome开发者工具中禁用JavaScript #2楼 单击Developer Tools一角的⋮菜单,单击Settings,然后选中Debugger下的Disable Javascript 。 #3楼 chrome://chrome...
  • Chrome开发者工具是谷歌浏览器自带的一款开发者工具,它可以给开发者带来很大的便利,作为一个测试工程师,熟练使用这个工具会也是必须的,接下来我们一起学习吧。 打开开发者工具F12 或 Ctrl + Shift + I 工具面板...
  • chrome 开发者工具中文文档

    千次阅读 2018-03-27 18:43:15
    传送门
  • 首先先把 chrome 的官方文档放出来镇楼:chrome开发者工具 如果下面介绍的一些选项你无法找到,都可以在 more tools 中找到 PS:本文首先会为大家介绍开发工具最基本的使用方式,然后介绍一些...
  • 除了抓包工具fiddler外,最方便的工具就是chrome自带的开发者工具了,一般按F12或者ctrl+shift+I就可以调出窗口。 界面如下,选中network选项 比如需要查询始发地和目的地的时效,点击查询按钮,可见一次查询...
  • 说起要截取整个网站页面,很多朋友第一时间想到的都是用哪款chrome扩展,确实,我们网站之前也有介绍过一些截图插件比如:但其实现在不少浏览器都自带截屏功能了。...第一步:打开chrome开发者工具。打开你想截图的...
  • 在请求上右键选择“Copy”→“Copy as cURL”,如下图: 然后在终端中粘贴上面赋值的内容,粘贴后如下: 在最后加上“--output responsefile”,如下图所示: 然后打开当前目录,可以看到生成的responsefile...
  • 使用Chrome开发者工具获取元素Xpath 用Chrome打开网页、按F12打开开发者工具、点击按钮选取网页元素 点击要获取xpath的元素、右侧面板右键元素对应的网页代码、Copy、Copy full Xpath 粘贴即可看到获取的元素Xpath...
  • 以下演示如何使用Chrome开发者工具调用REST接口; fetch('/posts', { method: 'POST', body: JSON.stringify({ title: 'foo', body: 'bar', userId: 1 }), headers: { 'Content-type': 'application/json; ...
  • 主要给大家介绍了chrome开发者工具-timeline的相关资料,文中介绍的非常详细,对大家的学习或者工作具有一定的参考价值,需要的朋友们下面来一起学习学习吧。
  • chrome开发者工具中文文档

    千次阅读 2019-04-03 15:01:53
    界面 链接 https://www.html.cn/doc/chrome-what/ 下边这个是谷歌官方的
  • mac下safari和chrome打开开发者工具的快捷键相同,都是option(alt)+command+i 参考:Mac下safari、chrome打开开发者工具快捷键
  • 哈希(Chrome扩展程序) Chrome网上应用店: 其他浏览器的独立版本: 此扩展用于计算加密哈希并执行常见转换。 这对程序员和系统管理员可能很有用。 它完全用JavaScript实现,所有计算都在客户端执行,因此很...
  • Chrome开发者工具骚操作Chrome开发者工具骚操作打开开发者工具Elements元素面板Console控制台面板Sources源代码面板Network网络面板Application应用面板Settings设置面板 Chrome开发者工具骚操作 笔者日常作爬虫开发...
  • 转自:https://blog.csdn.net/csdnligao/article/details/53925094  
  • 最近开发发现 Chrome 开发者工具里网络请求参数信息被放到了Payload一栏里,感觉可以,查找信息更方便了些 官方新功能介绍文档: https://developer.chrome.com/zh/blog/new-in-devtools-96/ 网络面板新增载荷...
  • 当我们爬取不同的网站是,每个网站页面的实现方式各不相同,我们...Chrome 开发者工具是一套内置于 Google Chrome 中的 Web 开发和调试工具,可用来对网站进行迭代、调试和分析。因为国内很多浏览器内核都是基于 Chr...
  • 对于每个前端从业者来说,除了 F5 键之外,用的最多的另外一个键就是 F12 了。最近大神(@小鱼二)推荐我一个网站,才知道 Chrome 还有各种骚姿势。这个网站是:u...
  • Google Chrome开发者工具基本使用方法
  • chrome开发者工具之performance

    千次阅读 2019-04-29 14:58:25
    右边的横线表示等待主进程所花费的时间,在NetWork工具中没有显示出来 b、Frames: 1》鼠标放到某一个小色块上,会有一个浮框显示如:77.9ms ~13fps frames 【13fps有77.9ms】 c、Main: 1》这里显示的倒...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 64,018
精华内容 25,607
关键字:

chrome开发者工具

友情链接: form-table.zip