Chrome DevTools作为一名前端开发工程师的赖以生存的工具，日 常的断点调试，抓包http数据都只是基本操作。那么，你还知道他的一些高级用法吗？开发人员不可避免的需要维护别人写的代码，当你面对几十万行代码的大项目的时候，码海啊，茫茫啊，随波逐流，崩崩溃溃，怎么快速查找…

工欲善其事，必先利其器。Chrome Devtools 是前端开发工程师不可或缺的开发工具，最近半年 Chrome 更新了 6 个版本，其中的 5 个版本里 Chrome Devtools 也更新了一些新功能，我们对最近的一些更新做了翻译整理，下面我们一起来看看近半年有哪些值得…

运行时性能表现（runtime performance）指的是当你的页面在浏览器运行时的性能表现，而不是在下载页面的时候的表现。这篇指南将会告诉你怎么用Chrome DevToos Performance功能去分析运行时性能表现。在RAIL性能评估模型下，你可以在这篇指南中可以…

作为前端开发者，免不了要和 DevTools 打交道,熟练的使用 DevTools 能够大大提高我们的工作效率。然而，开发者工具的使用并没有得到足够的重视。 工欲善其事必先利其器，更何况，工具的学习成本比专业技能的学习成本小的多。 Chrome 有不同版本，如果想第一时间体验一…

本人是一位没出实习期的前端小菜鸟一枚，这几个月发现了Google Chrome Devtools的易用性非常高的小功能和小细节 特意分享给大家。欢迎大家收藏+点赞。新人需要鼓励哈哈 1. styles内 悬浮样式名可以高亮符合样式名的所有元素（如图） 这个功能还是比较有用的。适…

1. 右键菜单 隐藏元素。这个必需说下，相信大家在看到广告或者去掉迅雷种子（#。#正经）的遮罩层的时候一定想起自己的专业技能，那么你是display:none还是Delete element？试试Hide element更好用 强制状态，其实就是添加伪类。这个功能在调试伪类样式…

共 1812 字，读完需 3 分钟。工欲善其事必先利其器，前端周刊本周起每周会加餐 1 篇工具技巧，里面辅以动图，让大家看完就能学会，并上手使用。本文会介绍 Chrome Canary 新增的代码覆盖率功能、如何收集数据、如何基于它收集的数据来改进 WEB 应用的性能。Chro…

当页面卡顿、慢时可以使用Performance来分析问题原因所在。 截图：默认勾选，每一帧都会截图。关闭后区域二下面部分会去除（下图红框标记那里） 1 . FPS 绿色越高越好，出现红色则表示FPS低（这就是你为啥觉得页面卡顿了），你可以在区域三Frames中看到具体的FPS值…

对于每个前端从业者来说，除了F5键之外，用的最多的另外一个键就是F12了。 今天，大神（@小鱼二）推荐我一个网站，才知道chrome还有各种骚姿势。 所有的我都看了，这里随便列举几个个人之前不了解，觉得挺有用的。 多的就不列举了，可以看看开头的网站。看了有几个功能我电脑（win…