专栏首页编程技术分享chrome 开发者工具——前端实用功能总结

chrome 开发者工具——前端实用功能总结

. 查看元素伪类 css 样式

例如我想查看元素触发 hover 时的 css 样式。先选中该元素,然后按下图操作:

2. 临时增删元素 class

3. document.body.contentEditable="true"

在控制台输入 document.body.contentEditable="true",就可以对页面直接进行编辑。

4. 查看 placeholder 样式

现在可以查看元素的 placeholder 样式了:

5. 测试页面性能和 SEO

下面是测试报告:

参考资料:

6. Network 显示资源的其他信息

一般 Network 会显示加载资源的详细信息,但它默认只显示部分信息。如果我想查询网页资源是通过 HTTP1.1 还是 HTTP2 加载的,要怎么做呢?

从 GIF 中可以看出,除了 HTTP 协议版本外,还可以查看其他信息,例如 HTTP 请求的方法、域名等等。

7. 查看元素绑定事件

鼠标移到 handler 上,可查看具体的函数代码。

8. 全局搜索代码

打开开发者工具,点击 Console 标签,按 ESC 弹出:

点击左边竖形排列的三个小点,选择 Search

点击搜索结果,会跳到具体的源码文件。它会搜索该网页下所有引入的文件。

9. 利用 Performance 检查运行时性能

打开开发者工具,点击 Performance 标签:

点击左上角的 Record 按钮开始记录,然后你模拟正常用户使用网页。测试完毕后,点击 Stop

可以看到右上角分别有 FPS、CPU、NET、HEAP:

  1. FPS 对应的是帧率,红色代表帧率低,可能会降低用户体验;绿色代表帧率正常,绿色条越高,FPS 越高。
  2. CPU 部分上有黄色、紫色等色块,它们的释义请看图的左下角。谁的占比高,说明 CPU 主要的时间花在哪里。
  3. HEAP 就是堆内存占用。

NET 最好点击下面的 Network 查看,可以看到具体的加载资源等。

一般根据这些信息就能判断出网页性能问题出在哪。

如果想了解更多,请查看下面的参考资料,需要翻 qiang。或者用搜索引擎搜索 chrome performance,也有很多讲解使用方法的文章。

参考资料

10. Rendering 实时检测网页变化

打开开发者工具,点击 Console 标签,按 ESC 弹出:

点击左边竖形排列的三个小点,选择 Rendering

下面是比较实用的功能:

  1. Paint flashing,实时高亮重绘区域(绿色)。
  2. Layout Shift Regions,实时高亮重排(重新布局)区域(蓝色)。
  3. Layer borders,将合成层用边框标出来(橙色、橄榄色、青色)。
  4. Frame Rendering Stats,显示 GPU 的信息,旧版本还有实时 FPS 显示,但新版本不知道为何没有(chrome 86)。

11. Application 查看应用信息

从图中看到,在 Application 标签下可以查到本页面很多信息。拿 localStorage 举例,现在我执行代码 localStorage.setItem('token', '123'),然后打开 Application

不出意外,能看到新增的 localStorage 信息。

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:https://segmentfault.com/u/woai3c/articles复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 前端开发必备之Chrome开发者工具(上篇)

    本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介...

    laixiangran
  • 前端开发必备之Chrome开发者工具(下篇)

    本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 本文...

    laixiangran
  • chrome开发者工具-Timeline

    最近发现,许多前端开发人员(包括作者我哈),对chrome的开发者工具中的使用并不是特别深入,而本文时对chrome开发者工具Timeline的一个讲解。

    IMWeb前端团队
  • chrome开发者工具-Timeline

    最近发现,许多前端开发人员(包括作者我哈),对chrome的开发者工具中的使用并不是特别深入,而本文时对chrome开发者工具Timeline的一个...

    IMWeb前端团队
  • Chrome DevTools开发者工具

    Chrome DevTools是内嵌在Chrome浏览器里的一组用于网页制作和调试的工具。使用DevTools,可以在平时中的开发调试中极大的提高效率。

    Cloud-Cloudys
  • 爬虫必备工具 —— Chrome 开发者工具

    在《论语》中,孔子提倡“学而不思则罔,思而不学则殆”的学习方法。我们再往深层面挖掘,“思”究竟是在思考什么?个人理解是思考并总结出一些共性的东西,即“套路”。有...

    猴哥yuri
  • chrome开发者工具小技巧

    Chrome 开发者工具是一款Web开发者们公认的优秀的前端调试工具,本身功能强大,有了这个工具,你可以做很多有趣的事情。 快速编辑HTML元素 ? 在Ele...

    IMWeb前端团队
  • chrome开发者工具小技巧

    Chrome 开发者工具是一款Web开发者们公认的优秀的前端调试工具,本身功能强大,有了这个工具,你可以做很多有趣的事情。

    IMWeb前端团队
  • Chrome开发者工具Debug入门

    作为一个刚入门的开发者,找到 BUG 的根源并修复通常要花费不少功夫。往往会尝试在代码中随机用console.log打印变量值来寻找问题。

    Fundebug
  • Chrome 开发者工具的各种技巧

    崔庆才
  • CHROME开发者工具的小技巧

    Chrome的开发者工具是个很强大的东西,相信程序员们都不会陌生,不过有些小功能可能并不为大众所知,所以,写下这篇文章罗列一下可能你所不知道的功能,有的功能可能...

    wangxl
  • Chrome 开发者工具 workspace 的概念

    本教程提供设置和使用工作区的实践练习,以便您可以在自己的项目中使用工作区。 工作区使您能够将在 DevTools 中所做的更改保存到存储在计算机上的源代码中。

    Jerry Wang
  • Chrome开发者工具的小技巧

     Chrome的开发者工具是个很强大的东西,相信程序员们都不会陌生,不过有些小功能可能并不为大众所知,所以,写下这篇文章罗列一下可能你所不知道的功能,有的功能可...

    用户1289394
  • Chrome 开发者工具的小技巧

    Chrome的开发者工具是个很强大的东西,相信程序员们都不会陌生,不过有些小功能可能并不为大众所知,所以,写下这篇文章罗列一下可能你所不知道的功能,有的功能可能...

    happyJared
  • 新版 Chrome 65 开发者工具更新

    1. Local Overrides(本地覆盖加载) 2. New accessibility tools(可访问性工具) 3. The Changes t...

    上山打老虎了
  • Jerry和您聊聊Chrome开发者工具

    Chrome开发者工具是Jerry日常工作使用的三大调试器之一。虽然工具名称前面带了个"开发者", 但是它对非开发人员仍然有用。不信?

    Jerry Wang
  • Jerry和您聊聊Chrome开发者工具

    Chrome开发者工具是Jerry日常工作使用的三大调试器之一。虽然工具名称前面带了个”开发者”, 但是它对非开发人员仍然有用。不信?

    Jerry Wang

扫码关注腾讯云开发者

领取腾讯云代金券