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

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

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


  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 中禁用弹出窗口阻止程序?

如何在 Chrome 中禁用弹出窗口阻止程序?

尽管弹出窗口很烦人,但其中一些很有用。这是在 Chrome 中禁用弹出窗口阻止程序的方法。

如何在谷歌浏览器上阻止网站?

如何在谷歌浏览器上阻止网站?

信不信由你,但仍然没有内置的方法来阻止谷歌浏览器上的网站。为什么谷歌没有提出解决方案尚不清楚,但仍有一些方法可以阻止您的 Chrome 浏览器访问网站。

为什么谷歌浏览器使用这么多内存?<解决方法>

为什么谷歌浏览器使用这么多内存?<解决方法>

为什么谷歌浏览器使用这么多内存?你能做些什么来控制它?以下是如何让 Chrome 使用更少的RAM。如果您对不同的浏览器进行过任何研究,您就会熟悉 Chrome 可能会占用资源这一事实。看看你的任务管理器或活动监视器,你会经常在列表顶部看到 Chrome。

谷歌浏览器提示“此网站无法提供安全连接”怎么办?<解决方法>

谷歌浏览器提示“此网站无法提供安全连接”怎么办?<解决方法>

大家在使用google浏览器查资料的时候,有没有遇到网站弹出“您与此网站之间建立的连接不安全,请勿在网站上输入任何敏感信息(例如密码或信用卡信息),因为攻击者可能会盗取这些信息”的提示,遇到这种情况其实是有方法可以解决的,下面就一起来看看具体的解决方法吧。希望能对大家有所帮助!

更新Chrome的最佳方式有哪些?

更新Chrome的最佳方式有哪些?

更新Chrome可以保证你的安全,让你获得最新的功能。如果你定期重启应用程序,Chrome会自动更新。但如果你是一个让电脑一直开着,并且一直让Chrome运行的人,它就没有机会更新了。

谷歌浏览器如何设置安全锁屏功能

谷歌浏览器如何设置安全锁屏功能

谷歌浏览器如何设置安全锁屏功能?谷歌浏览器虽然没有内置锁屏功能,但我们也可以通过某些方法达到类似效果。