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

 发布时间:2022-04-14  173 来源:谷歌浏览器官网
谷歌浏览器电脑版 谷歌浏览器电脑版

硬件:Windows系统 版本:122.0.6261.6 大小:101.14MB 语言:简体中文 评分: 发布:2023-07-23 更新:2024-04-12 厂商:谷歌信息技术(中国)有限公司

谷歌浏览器安卓版 谷歌浏览器安卓版

硬件:安卓系统 版本:107.0.5304.105 大小:218.98MB 语言:简体中文 评分: 发布:2022-08-18 更新:2024-03-12 厂商:Google Inc.

谷歌浏览器苹果版 谷歌浏览器苹果版

硬件:苹果系统 版本:122.0.6261.89 大小:198.4 MB 语言:简体中文 评分: 发布:2022-01-23 更新:2024-03-12 厂商:Google LLC

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


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

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

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

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

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

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

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

  第三个框里表示存储

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

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

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

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

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

 

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

       2. Memory(旧版为Profiles):

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


  3. Security

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


  4. Application(旧版为Resources)

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


  5. Audits

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


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

相关阅读
如何在谷歌浏览器中设置HTTPS域名系统?

如何在谷歌浏览器中设置HTTPS域名系统?

域名系统(DNS)有助于将数字IP地址映射到人类容易记忆的网站地址。有了这种映射,您可以很容易地记住域名,而不是它们的数字等价物。默认情况下,您的操作系统(桌面和移动)将提供配置的设置DNS服务器。

如何使用Chrome远程桌面获得虚拟技术支持?

如何使用Chrome远程桌面获得虚拟技术支持?

由于许多人在家工作,远离他们的IT团队,因此很难通过一条消息或视频电话来解决问题。有时,最好的选择是虚拟技术支持,但这些系统中的许多都很昂贵,需要您是企业用户或管理员才能访问它们。进入Chrome Remote Desktop,这是一个免费的基于网络的应用程序,旨在通过谷歌帐户提供和接受虚拟技术支持。以下是如何访问和使用该功能来给予和接受技术支持。

谷歌浏览器怎么才能自定义你的新标签页

谷歌浏览器怎么才能自定义你的新标签页

你会不会觉得谷歌浏览器的新标签页不和你的胃口?来学此一招,让你的新标签页变成你喜欢的样子!

如何将Chrome 浏览历史导出为 HTML、CSV 或 TXT?

如何将Chrome 浏览历史导出为 HTML、CSV 或 TXT?

我们通常谈论清除我们的浏览器历史记录,以免它成为窥探的牺牲品,但在擦除之前存储您的历史记录也是一个好主意。

Chrome 远程桌面:如何接管某人的计算机

Chrome 远程桌面:如何接管某人的计算机

Chrome 远程桌面可让您控制计算机。它通过 Chrome 浏览器运行,适用于所有操作系统,并让您完全控制。在这篇文章中,我们将看看你可以用它做什么,你为什么想要,以及如何设置它。

如何创建自己的 Google Chrome 扩展程序?

如何创建自己的 Google Chrome 扩展程序?

你有没有发现自己对网络浏览器附带的功能不满意?即使花费数小时在 Google Web Store 上搜索,点击“下载”来增强您的网上冲浪体验并不总是一件简单的事情。这就是浏览器扩展的用武之地。