React项目调试---WebStorm+Chrome调试

React项目其实是可以调试的。并且WebStorm+chrome也可以调试React项目。

1种调试方式

WebStorm + Chrome

WebStorm + Chrome
WebStorm是我最喜欢的前端开发IDE，只是比较重量级，启动速度较慢。

而在调试方面WebStorm + Chrome进行调试时，可以在WebStorm中源代码处加断点，当代码执行到断点处时，系统会让WebStorm显示在最前面，并且显示代码已运行到断点处，可以直接在代码处显示各个变量的值，也可以使用表达式计算值，能看到函数调用堆栈，通过这些操作可以快速定位到问题本质原因

此时如果修改代码，React应用会自动重新构建，但是此时断点和chrome中的代码就对应不上了，必须在Chrome中刷新页面才能对应上，然后可以尝试上次出问题的操作，继续定位问题，直至问题解决

但是在调试时请 注意 :

在WebStorm中启动调试时，WebStorm会根据你设置的url，自动打开新的Chrome浏览器进程访问这个设置的url，而且这个浏览器页面和你平常看到的浏览器差异会比较大，看不到书签栏，也看不到你先前所装的所有插件。这是因为平常我们打开Chrome浏览器进程时，并不会添加–remote-debugging-port选项，而WebStorm无法让已经打开的Chrome实例支持调试，所以必须重新打开一个新的Chrome浏览器进程，而且不能和原来的Chrome浏览器进程使用相同的用户数据文件夹，所以它会使用一个临时的文件夹，因此当它开始调试时看到的Chrome没有任何标签，也没有任何安装的