脱发秘籍，快速了解前端Chrome调试工具，这里有你不知道的Chrome调试技巧：元素（Element）​、控制台（Console）页、​源代码（Sources）、网络（Network）、性能优化..

前端工作中，不仅编码很重要，重现bug，解决bug的能力同样重要。而这些都离不开代码调试。现就一些调试技巧做出总结。

今天介绍下 Chrome dev tools 家族的一个小兄弟，它在 Chrome 57 之前叫作「Timeline」，而现在换了个更长的马甲 —— 「Performance」，毕竟名字要「长～～～～～～～～～」更能吸引注意。 也许你曾不经意启动过这个工具，看见里面五颜六色的图…

一篇文章演示如何监测项目的性能问题，一步一步来解决发现的web性能问题。使用工具Lighthouse和performance

Performance 一个在前端开发领域中，无法被忽视的存在，如果我们的开发是一个满足需求就可以的产品，那么可能就用不到它；但是如果我们想对我们的这个产品，做一个极致的优化，那么 Performance 是一个很好的选择，也是一个不容忽视的选择。 大致的介绍了一下工具和api…

当您的代码没有按照预期执行的时候，您是否还在用 console.log 来进行调试？如果是，那这篇文章就是为您准备的。 我写这篇文章的目的是让您了解 Chrome 开发工具提供的高效工具，让您可以更好、更快地调试 Javascript 代码。 当代码出现 bug 或没有按照预期…

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

在VScode中有js引用的html源码中，Alt+B快捷键打开默认浏览器，我的是chrome浏览器。按F12或右键检查进入开发者模式。选择Source，再选择自己的html源码，点击需要设置的断点行数，F5刷新即可开始断点调试。 1表示继续脚本运行，直到遇到下一个断点或再次点…

$0、$1、$2、$3、$4五个指令相当于在Elements面板最近选择过的五个引用。 比如我在Elements面板上随意点击了掘金网站上的五个DOM节点。从时间线上，$4是我第一个点击的。而$0是我第五个，也即是最后一个点击的。利用此方法可以快速在Console面板调试你选中…