在大型项目开发中，经常会遇到这样一个场景，QA 丢给你一个出问题的链接，但是你完全不知道这个页面 & 组件对应的文件位置。 react-dev-inspector 就是应此需求而生。 可以在 预览网站 体验一下。 需要加一个 webpack loader 去遍历编译前…

性能，是一个问题。 取决于我们对性能的理解深浅，以及是否有一套好的工具和方法。 介绍三步法之前，先来简单了解下Chrome开发者工具的Performance性能面板，以及性能分析报告的基本组成。 然后按F12打开Chrome的开发者工具，选择Performance性能面板。 指…

前端本地开发的场景中，我们需要频繁的改动代码，并需要实时看到效果，并且在一些开发场景中，我们需要将特定的请求代理到特定的IP、本地文件等，所以使用fiddler或whistle等本地、真机抓包调试工具是非常必要的。 在历史的长河中，我们是使用fiddler+willow再搭配小…

console相比大家一定不陌生，平时项目中用的最多的就是console.log()方法吧。但是console相关的方法有很多，涉及的调试面板的相关内容比较广泛，彻底弄清楚它们并在项目中合理使用，有助于我们更好的开发和调试。 如果没了解过console的，似不似惊呆了，cons…

你可以完全使用console.warn来代替console.log方法，但前提是该条打印信息是属于警告级别而不是普通信息级别，因此浏览器遇到一条警告级别的信息会区别对待，最明显的是它的左侧会有一个警告图标，并且背景色和文字颜色也会不一样。 相比于普通信息，警告信息会出现在上图左…

组合并且压缩你的JavaScript 和 CSS文件是提高性能最方便的方式之一。但是当你需要调试这些压缩后的代码的时候会发生什么呢？它可能是异常噩梦。不过不用怕，这里有一个通过source maps的name来解决的问题的方案。 source maps提供了一种将压缩后的文件代…

本文是作者 Tomek Sułkowski 发布在 medium 上的一个系列。 版权归原作者所有。 译者在翻译前已经和作者沟通得到了翻译整个系列的授权。 1. $0 在 Chrome 的 Elements 面板中，$0 是当前我们选中的 html 节点的引用。 理所当然，$1…

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