前言 之前写过：前端项目负责人需要具有的能力，本篇写一下前端项目负责人在项目初期需要做什么？ 主要分四个方面 项目相关 ​ 这一部分可能看起来没那么重要，但是做项目对于项目的关键信息还是要了解的。因为

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

"命令"菜单应该是很常用的，MacCmd + shift + PWindowsCtrl + shift + P去打开命令菜单。 如果我们只想要截取我们页面中的一个Dom元素，我们可以直接选中那个节点，之后打开命令，使用节点截图Screenshot Capture node sc…

Chrome Dev Tools 是每一位前端工程师开发调试的必备利器，称之为FE的瑞士军刀也毫不为过。然而，每每当发现一些自己不知道的用法时，我们经常会觉得，自己只是掌握了其强大功能的九牛一毛。为了能够让她发挥出最大功效，首先，我们应当了解她更多的使用方法；然后，在开发中合适…

在4月，Chrome 暂时推迟了 SameSite Cookie 属性的推行，以确保在 COVID-19 响应的关键初始阶段提供基本服务的网站的稳定性。 这几个月，Chrome 一直在关注这些网站的准备情况，Chrome 84 会同时恢复对 SameSite cookie 的强…

默认读者已经具备了基本的Chrome DevTools 的知识，即了解Chrome开发者工具中每一个面板的基本用法。 如果尚未了解，请自助查看同事写的基本介绍。 当然，你也可以选择继续往下读。 Command+Option+C (Mac) 或 Control+Shift+C (…

Chrome Devtool Performance 是大家常用的页面性能分析工具，当你使用它来分析页面加载性能的时候会生成如下图所示的报告。 图中包含了以下几个重要的时间点：DCL, L, FP, FCP, FMP, LCP。这里我把前两个和后面几个分开来讲，因为它们分属于不…

文档上有每一个面板是如何使用的，以及每个面板还有那一些你不知道的使用技巧，上面都记录的很清楚。而且官方文档上写的文章说明相对来说更加准确，所以为什么不读一下的。就好像看到某些问题的答案居然是：RTFM 。 目前为止，该小哥总结了200条的开发调试的tips，涉及浏览器包括Chr…

第三栏是类型，标识该资源是document / stylesheet / script... 在network面板最上方有一个消摄像机的图标，点击后刷新页面devtool会记录下加载网页过程中的每一次重绘的时间点并截图，你可以从中看到整个网页加载的过程，你可以使用这个功能来测试…