webstorm下调试react js程序(不是在chrome里)

和大家分享一下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...

推荐阅读更多精彩内容