和大家分享一下webstorm下面调试react js 程序，这个攻略参照了webstorm官网弄的，如果有梯子可以直接去看。
网址：调试使用WebStorm中的Create React App创建的React应用程序，我们这里也是以create-react-app创建的快捷react项目为例。
步骤非常简单，只有有一些误区。
第一步：添加给你的Chrome添加JetBrains IDE Support的插件，需要翻墙，就是下图的这个。
image
第二步：我们把项目create-react-app创建的app跑起来，也就是运行命令
yarn start
它会自动打开一个页面，我们把它的url地址复制下来。
第三步：打开Webstorm的运行窗口，点击Edite Connfigurations。
到下面这个页面。
image
点选左上角的+号，选择JavaScript Debug，出现下面的界面。我们把复制的URL链接复制到下面的方框里。
image
然后在File/Directory中找到你的项目的地址，定位到src位置，在它的右边Remote URL部分设置webpack:///src，以让webstorm可以定位你的项目，建立映射关系。
第四步：运行，不过我们这里的运行需要你点运行右边的那个虫子按钮，入下图：
image
它会谈出下图的框，点击右下角DEBUG按钮。
image
第五步：如果你已经打了断点了，那么相比已经过来了吧。
F4CDA2EC-7553-4D93-9B04-09D5E2C3CA22.png
需要注意的是，我们在第三步设置
URL的时候，不要在下面的Before launch:Show this page,Activate tool window这一栏里添加这个项目npm start或者yarn start的启动脚本，一定要先启动项目，然后在点虫子按钮。
91214BB4-5473-4D5F-A7E6-3425A64D1C24.png
Over...
网友评论