第一步：添加给你的​​Chrome​​​添加​​JetBrains IDE Support​​的插件，需要翻墙，就是下图的这个。

webstorm下debug调试react js程序_启动脚本

image

第二步：我们把项目​​create-react-app​​​创建的​​app​​跑起来，也就是运行命令

yarn start

它会自动打开一个页面，我们把它的​​url​​地址复制下来。

第三步：打开​​Webstorm​​​的运行窗口，点击​​Edite Connfigurations​​。

到下面这个页面。

webstorm下debug调试react js程序_chrome_02

image

点选左上角的​​+​​​号，选择​​JavaScript Debug​​​，出现下面的界面。我们把复制的​​URL​​链接复制到下面的方框里。

webstorm下debug调试react js程序_chrome_03

image

然后在​​File/Directory​​​中找到你的项目的地址，定位到​​src​​​位置，在它的右边​​Remote URL​​​部分设置​​webpack:///src​​​，以让​​webstorm​​可以定位你的项目，建立映射关系。

第四步：运行，不过我们这里的运行需要你点运行右边的那个虫子按钮，入下图：

webstorm下debug调试react js程序_目的地址_04

image

它会谈出下图的框，点击右下角​​DEBUG​​按钮。

webstorm下debug调试react js程序_react.js_05

image

第五步：如果你已经打了断点了，那么相比已经过来了吧。

webstorm下debug调试react js程序_chrome_06

F4CDA2EC-7553-4D93-9B04-09D5E2C3CA22.png


需要注意的是，我们在第三步设置​​URL​​​的时候，不要在下面的​​Before launch:Show this page,Activate tool window​​​这一栏里添加这个项目​​npm start​​​或者​​yarn start​​的启动脚本，一定要先启动项目，然后在点虫子按钮。


webstorm下debug调试react js程序_目的地址_07

91214BB4-5473-4D5F-A7E6-3425A64D1C24.png