如何通过VScode的debugger for chrome插件高效调试React项目源码？

本文共计817个文字，预计阅读时间需要4分钟。

代码调试，是我们前端日常工作中不可或缺的能力吧！在面向DOM开发的时代，我们开发时直接在Chrome里打断点是十分方便的。但当我们面向组件开发（React）时，浏览器获取到的却是我们编写的代码。

代码调试，是我们前端日常工作中不可或缺的能力了吧！

在面向dom开发的时代，我们开发时直接在chrome里打断点是很方便的。
但是，当我们面向组件开发时(react),浏览器拿到的是我们编译过后的代码，还想在浏览器里打断点几乎是不可能的了。

场景

那怎么办，方法总是比困难多！愚蠢的我想到了console/debugger！！一直在使用，虽然很不方便（打印太多实在太乱！上线还要配置删除掉），但是我竟然使用了很久（这真是一个糟糕的编码习惯吧）。直到今天，我想研究一下react源码，需要断点的地方有很多，不可能在手动console/debugger了！！我才想到我为什么不用浏览器debugger？

Debugger for Chrome

因为我使用的编译器是VS code，机智的我终于开窍了！找来了 Debugger for Chrome插件。

但是纯英文的文档不太友好，虽然我英语六级也是搞了很久才弄好，下面就介绍记录一下mac系统下的使用方法吧。