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

更新时间:2022-04-14 194 来源:谷歌浏览器官网
正文介绍

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


  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下载站!

相关阅读
如何在 Windows上安装并行运行 Chrome 稳定版、测试版和开发版?

如何在 Windows上安装并行运行 Chrome 稳定版、测试版和开发版?

到目前为止,在 Windows 上使用的 Chrome 无法同时使用 Chrome 稳定版和浏览器的预发布版本之一。随着谷歌解除限制,这随着今天的公告而改变。这意味着现在可以在 Windows 上安装和运行 Chrome 稳定版和预发布版的 Chrome。

怎么为谷歌浏览器书签创建桌面快捷方式

怎么为谷歌浏览器书签创建桌面快捷方式

怎么为谷歌浏览器书签创建桌面快捷方式?不清楚如何设置的小伙伴可以看看下面这篇谷歌浏览器书签创建桌面快捷方式图文教程。

谷歌浏览器更新提示0x80040902错误代码怎么解决?

谷歌浏览器更新提示0x80040902错误代码怎么解决?

Google Chrome是谷歌(Google)公司研发的一个网页浏览器,该浏览器提供简单高效率的界面。其支持多标签浏览,方便用户根据需求随时打开已打开的页面进行浏览。

谷歌浏览器如何使用国内镜像下载?谷歌浏览器使用国内镜像方法一览

谷歌浏览器如何使用国内镜像下载?谷歌浏览器使用国内镜像方法一览

很多用户都需要使用谷歌搜索来查找一些英语学习资料,但是由于某些原因在国内无法使用。今天小编给大家分享另一种可以在国内使用Google搜索的方法,那就是使用Google镜像网站。

xp安装chrome无法找到入口怎么办?<解决方法>

xp安装chrome无法找到入口怎么办?<解决方法>

谷歌浏览器 Google Chrome完全免费,跨平台支持 Windows、Mac 和 Linux 桌面系统,同时也有 iOS、Android 的手机版 平板版,你几乎可以在任何智能设备上使用到它。

怎么创建谷歌浏览器书签

怎么创建谷歌浏览器书签

创建书签是为了快速访问网页内容,那么谷歌浏览器要怎么创建书签?下面教大家创建谷歌浏览器书签的方法。