React如何在Chrome上调试？

一、原理

首先我们要理解React的编译器是怎么工作的，我们的Chrome只能接受原生的JavaScript代码，但是React的代码是框架化的js代码，浏览器没办法直接解析，所以React需要利用自身的编译器把代码编译成原生js代码，然后存储到另外一个文件夹中。

二、实操

理解了原理，我们去浏览器中查找文件

• 一般情况下会把index.js当做我们的debug对象，但是这里的（index）代表的是我们的index.html。
  
  • 在下面的main文件里，发现代码很接近js源码，尝试下断点 ，结果直接跳转到上面的index.js下断点了，然而这个index.js代码属于编译前的样子，所以没有作用。然后我就打开了所有的文件夹，发现他编译后的文件目录是这样的
    
• 感觉下面的main文件是属于中间index.js到main.chunk.js的中间产物，所以以后调试的时候直接找[filename].chunk.js的文件