webstorm下debug调试react js程序

布满荆棘的人生 2023-09-29 09:16 1阅读 0赞

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

![img][]

image

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

yarn start

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

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

到下面这个页面。

![img][img 1]

image

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

![img][img 2]

image

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

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

![img][img 3]

image

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

![img][img 4]

image

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

![img][img 5]

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

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

![img][img 6]

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

> 参考链接：https://www.jianshu.com/p/87a5609c5f44

[img]: https://img-blog.csdnimg.cn/img_convert/5115fe091c09c2d3692335b47702c8ff.png
[img 1]: https://img-blog.csdnimg.cn/img_convert/97f7b31277603bdef495efced7ea0fed.png
[img 2]: https://img-blog.csdnimg.cn/img_convert/10ea72e0428a38fd600ff45448d4ceae.png
[img 3]: https://img-blog.csdnimg.cn/img_convert/14fa2c80e12cfb6ffced1fcd218968c8.png
[img 4]: https://img-blog.csdnimg.cn/img_convert/75e1cfbe858bf851b3fd18f48ba06b91.png
[img 5]: https://img-blog.csdnimg.cn/img_convert/d2272ec94ac97d96c882f0552598263b.png
[img 6]: https://img-blog.csdnimg.cn/img_convert/cf90cf4918f26e8ef96166ac4f96b656.png