谷歌浏览器开发者工具有哪些?<超详细!>

更新时间:2022-04-14 195 来源:克罗米部落
正文介绍

你认识多少个谷歌的开发者工具,谷歌浏览器作为前端开发者们的首选软件,一直广受好评,从使用人数就能看的出来了,这次小编就带大家认识谷歌浏览器的开发者工具


  1. Performance(旧版浏览器为Timeline):

  时间表可以记录和运行分析应用程序所有的活动,为了使的记录页面的交互,打开时间轴面板,然后按开始录制录制按钮(),或者通过键入键盘快捷键Cmd的 +E(Mac)或按Ctrl +E(Windows / Linux版)。这个记录按钮会从灰色变成红色,而Timeline将开始从你的页面获取时间线(timeline)。在你的应用中完成一些操作,记录到一些数据之后,再一次点击按钮来停止记录。

  红色的点旁边是清除记录。后面的选项可以选择需要capture捕获的项。分别是网络,JS简介,截图,存储,描绘。

  下图是一个任选的一个网页打开的时间表:

1

  第一个框里是概述,这里可以大致看到页面的性能。

  第二个框里是event,即是事件监控。这是CPU的堆栈跟踪的可视化,绿色表示媒体时间,红色表示负载事件,蓝色表示DOM事件。

  第三个框里表示存储

  第四个框里是详细信息,这里会显示事件的详细信息。

  CPU。CPU资源。此区域图指明了事件的类型消耗的CPU资源。

  上图可见加载时间0.02s,脚本15.68s,渲染时间11.28s,绘制时间46.06s,其他时间49.06s,空闲1.27s时间。

2

  上图是总表。下图是详细汇总表。 

 

3

       2. Memory(旧版为Profiles):

  会列出所有的资源,以及HTML5的Database和LocalStore等,你可以对存储的内容编辑和删除 不做过多介绍


  3. Security

  可以告诉你这个网站的安全性,查看有效的证书等


  4. Application(旧版为Resources)

  会列出所有的资源,以及HTML5的Database和LocalStore等,你可以对存储的内容编辑和删除 不做过多介绍


  5. Audits

  可以帮你分析页面性能,有助于优化前端页面,分析后得到的报告


这下你对这些开发者工具都有了简单的认识,更多谷歌浏览器相关知识都在chrome下载站!

相关阅读
chrome安装失败错误代码0x80070057怎么解决

chrome安装失败错误代码0x80070057怎么解决

chrome安装失败错误代码0x80070057怎么解决?虽然电脑中会自带浏览器,但很多用户都习惯使用自己熟悉的第三方浏览器。

电脑xp系统打不开谷歌浏览器怎么办?<解决方法>

电脑xp系统打不开谷歌浏览器怎么办?<解决方法>

谷歌浏览器是一款大家都很喜欢使用的网页浏览器,已经成为我们生活中不可或缺的软件。有时候,在xp系统中,我们会遇到打不开Google浏览器的故障。试了几次还是一样。不用太担心。这里有一个解决xp系统打不开Google浏览器的方法,有需要的小伙伴们一起来看看吧!

在 Chrome 中怎么撤销删除下载

在 Chrome 中怎么撤销删除下载

每当您使用 Google Chrome 网络浏览器下载文件时,它都会自动添加到下载历史记录中,您可以通过在地址栏中加载 chrome: downloads 来访问它。它还会保存到您选择的本地存储位置,前提是在此之前它没有被标记为恶意。

电脑版xp怎么下载并安装google chrome?

电脑版xp怎么下载并安装google chrome?

Google chrome是一款快速、安全且免费的网络浏览器,能很好地满足新型网站对浏览器的要求。Google Chrome的特点是简洁、快速。

谷歌浏览器字体模糊不清怎么办

谷歌浏览器字体模糊不清怎么办

本篇文章给大家带来谷歌浏览器解决字体模糊不清问题详细方法教程,有需要的朋友快来了解一下吧。

如何解决 Win10 下谷歌浏览器升级失败提示错误代码0x00000的问题?

如何解决 Win10 下谷歌浏览器升级失败提示错误代码0x00000的问题?

Windows S10正式版自带edge浏览器,但很多用户更喜欢使用功能更强大的第三方浏览器,比如谷歌Chrome。

让谷歌浏览器下载加速该怎么做_谷歌浏览器加速下载方法

让谷歌浏览器下载加速该怎么做_谷歌浏览器加速下载方法

你觉得谷歌浏览器下载文件不如其他浏览器快?那是你不会谷歌浏览器的多线程下载!来和小编一起学习如何打开多线程加速吧!

如何在 Chrome 上固定扩展

如何在 Chrome 上固定扩展

谷歌浏览器是一个多平台和广泛使用的网络浏览器。它提供了几个功能来增强其功能,扩展就是其中之一。Chrome 允许您下载特定扩展并将其固定到浏览器工具栏,以避免混乱。它还允许您从扩展菜单中固定和取消固定扩展。

谷歌浏览器的五大隐藏技能_谷歌技巧教学

谷歌浏览器的五大隐藏技能_谷歌技巧教学

谷歌浏览器的隐藏功能你了解吗,想让你的谷歌浏览器变得更好用吗?快来和小编一起了解谷歌浏览器好用的隐藏功能

如何摆脱 Chrome 新标签页上的“建议”?

如何摆脱 Chrome 新标签页上的“建议”?

多年来,适用于 Android 和 iOS 的 Chrome 一直在向您显示文章建议,作为其在新标签页上的发现提要的一部分,现在,桌面版 Chrome 也进行了类似的处理。

谷歌浏览器的实用小技巧<详细教学!>

谷歌浏览器的实用小技巧<详细教学!>

谷歌浏览器的使用技巧数不胜数,小编为你带来了日常中很常用很好用的谷歌浏览器技巧,快来学习一下吧!

如何在 Chrome 中获取真正的 Google 搜索框?

如何在 Chrome 中获取真正的 Google 搜索框?

您可能认为您在 chrome 中的真实搜索栏上进行搜索,但您错了,因为它不是真实的,而是假的。 它只会将您重定向到您正在使用的不同浏览器。如何获得真正的搜索栏?它隐藏在您的设置中。但在这篇文章中,我将告诉你如何获得它的几个简单步骤。打开真正的搜索栏图标非常容易。