那些不需要你知道的Chrome DevTool-参考文献

参考文献：

1. 官方文档说明

   文档上有每一个面板是如何使用的，以及每个面板还有那一些你不知道的使用技巧，上面都记录的很清楚。而且官方文档上写的文章说明相对来说更加准确，所以为什么不读一下的。就好像看到某些问题的答案居然是：RTFM 。

2. 伦敦Umar小哥系列文章

   目前为止，该小哥总结了200条的开发调试的tips，涉及浏览器包括Chrome和 Chrome Canary，每个tip的文章很多都涵盖gif图片解说，你一定能学到你压根不知道的小tip。顺便问一句，你知道如何自定义Chrome的开发者工具吗？

3. Mastering Chrome Developer Tools v2

   官网给每个视频提供了逐字稿，很多时候我怀疑提供的逐字稿并非是完整的字幕，因为好奇一个workshop中间居然有10秒每人说话的。

   演讲者根据例子，讲述了每一个面板的使用情况同样讲述了遇见对应问题的解决方案。在写Network Panel那部分的时候，自己还是去翻了逐字稿，来确认自己写的是否正确。

4. 专题文章源头

   这个issue中记录了，自己查看文章的全过程。

结语

很早建立了这一个专题，但写了一篇废文后，发现后续文章已无从下手了，所以搁浅了近3个月的时间，期间可能「学业」较慢的原因，致使自己将之前查看的文章资料重新看了一遍。还是承认自己的拖延症又犯了。

第一次查看的时候，发现官网设置语言的按钮真心找不到，然后还蠢蠢的去官方提了issue，被人手把手教了一把。直到第二次看的途中发现，对应官网文章同时存在了另一个切换按钮，觉得还是对应维护团队还是很细心的。

幸好前两周遇见项目需要排查性能问题，所以自己又开始捯饬这系列文章。

编写文章整体的思路是：

1. 不会一步步的讲述如何去解决一个问题
2. 根据不同面板的功能，用如何性质问题进行引导讲述功能，大致提了21个问题。
3. 性能优化篇，真的更多是思路上的讲述，以及部分术语解释，想要掌握真的要自己实践一两个网站的数据，自己体验看看吧。

反思

写这专题的跨度很长，致使消耗的时长真的超多，光这个月的不完全统计，就花了12h38min。突然意识到自己的输出链路会不会太长了，是所有的参考文献读完才会慢慢梳理文章。

想想这样的行为很容易让自己产生拖延的想法，怪不得自己圈地运动调研作业迟迟没有写出来。看来需要反省一下了。

转载于:https://juejin.im/post/5cfe41636fb9a07edb393c28