chrome调试工具高级不完整使用指南(优化篇)

上一篇文章我们说了chrome调试工具的一些比较基础功能的用法,接下来我们要在这一篇文章中说一说,其他一些chrome调试工具的使用方法

2.2 优化模块介绍

2.2.1 Network模块

在netWork模块中,大致上可以分成四块模块,

1- 这个模块相当于是一个功能菜单,左边的四个按钮依次表示的是:

1-1 停止捕获请求

1-2 清除所有的请求

1-3 对请求进行快照

1-4 是否开启过滤选项,也就是是否开启图中的2

除此之外里面的Disable Cache是用来请求请求缓存,Preserve log 用来保存请求记录  offine断网,其他的具体使用与分析会在后面的课程中讲解

2- 这个模块主要是用来过滤请求的类型的

3- 这个的功能是相当于查看各个请求的发送时间,完成时间的一个总的概况,主要是用来全局分析用的

4- 查看里面的各个请求的具体情况

2.2.2  Performance模块

上面的这样图是博客园的首页的一张图片

根据博主的经验我们重点要看的就是第一和第二,然后其他部分博主一般也没有使用到,具体用法不详,知道的同学请在留言中补充一下

1- 功能菜单模块

主要要讲解一下前5个按钮功能,

1-1 用于触发监控页面,从而输出性能分析图

1-2 重新刷新请求性能分析

1-3 清除所有的分析信息

1-4 上传分析报告图

1-5 下载分析报告图

2- 这一部分主要涉及到火焰图的分析,具体可以赚到阮一峰大大的相关博文

2.2.3 Memory模块

这个模块是用来对内存占用情况进行分析的。其中里面有3个小的功能

图中上面的1-3分别代表的功能是:

1- 内存堆栈快照 这个功能主要是用来查看当前(没有被垃圾回收机制回收的)的各项资源的占用情况与内存的一个比例。

2- 用于动态监控从start启动之后内存的一个占用情况

3- 通过一个时间轴图来动态监控占用情况,这个相比于2的一个好处是可以动态的监控不需要手动控制,另外一个就是可以通过图的形式直观地显示

2.2.4 Security 模块

这个模块主要是用来判断当前页面中是否使用了有效的HTTPS证书,不起到其他的作用

2.2.5 audits模块

这个模块主要是chrome提供的用来自动分析页面的情况的,但是由于这个需要FQ所以推荐大家使用旧的版本Legacy audits来进行分析页面

开启方式如下:

使用Ctrl+Shift+P 激活面板,激活之后就会开启里面内置的一些隐藏模块

具体的一些性能优化提示自己看看英文的内容,不懂英文请百度

好的,所有的模块大致上面已经说了一遍了,接下来的内容就是开始说说怎样在实际应用中使用这些特性。

chrome调试工具高级不完整使用指南(基础篇)

chrome调试工具高级不完整使用指南(优化篇)

chrome调试工具高级不完整使用指南(实战一)

chrome调试工具高级不完整使用指南(实战二)

chrome调试工具高级不完整使用指南(实战三)

原文地址:https://www.cnblogs.com/st-leslie/p/8244559.html

时间: 2024-10-06 11:08:56

chrome调试工具高级不完整使用指南(优化篇)的相关文章

chrome调试工具高级不完整使用指南(基础篇)

一.前言 本文记录的是作者在工作上面对chrome的一些使用和情况的分析分享,内容仅代表个人的观点.转发请注明出处(http://www.cnblogs.com/st-leslie/),谢谢合作 二.浏览器模块介绍 由于chrome浏览器一直在不断的进行更新迭代,会不断的新增功能,有一些老的功能会被摒弃掉,所以我们介绍这个功能的时候是以这个系列文章发布时候的最新版为主(2018-01-05 ) 1. 用来选择所需要的HTML元素,通过HTML元素定位到Elements中的对应代码 2. 用来在手

Spark性能优化指南——基础篇(转)

http://mp.weixin.qq.com/s?__biz=MjM5NDMwNjMzNA==&mid=2651805828&idx=1&sn=2f413828d1fdc6a64bdbb25c51508dfc&scene=2&srcid=0519iChOETxAx0OeGoHnm7Xk&from=timeline&isappinstalled=0#rd Spark性能优化指南--基础篇 优才网 2016-05-18 前言 在大数据计算领域,Spar

高级Bash脚本编程指南

http://tldp.org/LDP/abs/html/ 高级Bash脚本编程指南对脚本语言艺术的深入探索 本教程不承担以前的脚本或编程知识,但进展迅速走向一个中级/高级水平的指令...一直偷偷在细小的UNIX®智慧和学识.它作为一本教科书,一本手册,自学,并作为一个参考和知识的来源,壳牌的脚本技术.练习和大量的评论实例请读者参与,在这样的前提下,真正学习脚本的唯一途径是编写脚本.这本书是适合课堂使用的一般介绍编程的概念.本文件被授予公共领域.没有版权! 奉献对于安妮塔,所有魔术的来源内容表第

《高级Bash脚本编程指南》十年来首次修订

新年伊始,开源慕课的知识库上线了.初期提供了<Linux命令大全/Bash 参考><高级Bash脚本编程指南>两个系列.其他资料正将陆续上线. 其中,<高级Bash脚本编程指南>对于Shell学习者来说,是一本神一样的书籍. 它的原作者是Mendel Cooper,英文名叫<Advanced Bash-Scripting Guide>发表在http://tldp.org/ 上,是一本免费的书籍. 有人说,学习Unix/Linux,有座山叫shell编程,你总

怎样搭建一个完整的便于优化的网站

在网站搭建初期就完成所有便于优化的框架和内容能够缩短整个网站优化时间,一个完整的便于优化的网站包含:满足用户需求的程序和内容.便于优化的路径.优先层次的布局.附加价值的内容.长尾关键词布局.合理的内链设置. 学习要点 一.符合用户需求的程序和内容 1.程序.在做网站之前要考察什么程序是符合这个网站的,比如养羊,搜索养羊出现在百度首页的是养羊吧,那么说明搜索养羊的用户有讨论需求,那么论坛类型更加适合网站.但是如果搜索婚纱摄影,出现在百度第一名的是百度图片,就说明图片类的程序更加适合这种类型的网站.

第四章:怎样搭建一个完整的便于优化的网站--------------------&gt;&gt;转至(卧牛SEO/武汉SEO http://blog.sina.com.cn/zhengkangseo )

在网站搭建初期就完成所有便于优化的框架和内容能够缩短整个网站优化时间,一个完整的便于优化的网站包含:满足用户需求的程序和内容.便于优化的路径.优先层次的布局.附加价值的内容.长尾关键词布局.合理的内链设置.学习要点 一.符合用户需求的程序和内容 1.程序.在做网站之前要考察什么程序是符合这个网站的,比如养羊,搜索养羊出现在百度首页的是养羊吧,那么说明搜索养羊的用户有讨论需求,那么论坛类型更加适合网站.但是如果搜索婚纱摄影,出现在百度第一名的是百度图片,就说明图片类的dede程序更加适合这种类型的

一个完整的SEO优化方案

一个完整的SEO优化方案主要由四个小组组成: 一.前端/页编人员 二.内容编辑人员 三.推广人员 四.数据分析人员 接下来,我们就对这四个小组分配工作. 首先,前端/页编人员主要负责站内优化,主要从四个方面入手: 第一个,站内结构优化 合理规划站点结构(1.扁平化结构 2.辅助导航.面包屑导航.次导航) 内容页结构设置(最新文章.推荐文章.热门文章.增加相关性.方便自助根据链接抓取更多内容) 较快的加载速度 简洁的页面结构 第二个,代码优化 Robot.txt 次导航 404页面设置.301重定

Qt高级——Qt数据可视化性能优化

Qt高级--Qt数据可视化性能优化 一.数据可视化简介 1.数据可视化简介 数据可视化即采用图形图表等对采集的数据进行展示,可以非常直观的查看传感器采集到的数据.本文将使用Qt的标准组件QTableWidget.标准模型.自定义模型分别实现对数据的表格展示. 2.系统环境 个人PC:ThinkPad T450操作系统:RHEL7.3 WorkStation内存容量:8G磁盘容量:SSD 100GCPU:Intel(R) Core(TM) i5-5200U CPU @ 2.20GHz 二.标准界面

IHERB上待产包准备指南-妈妈篇

准妈妈怀孕期间会出现很多皮肤问题,比如皮肤长斑,黑色素沉积,脸色暗黄,颈纹加深,皮肤干燥或者皮肤出油等,因此这个特殊时期的皮肤护理是非常关键的.这时准妈妈们要放弃自己平时用的护肤品了,安全性很重要.准妈妈选择护肤品一定要选择天然不刺激的.因为在怀孕期间,皮肤会变得敏感,使用平时用的护肤品,可能会对宝宝造成影响,而且也容易造成孕妇皮肤不适应.孕妇使用的护肤品,应该是不含任何化学添加剂的,对人体和宝宝都没有任何伤害.今天我们来看看Iherb上有哪些适合宝宝妈妈使用的热卖产品.(点击对应产品链接可定位