第一步:给你的Chrome
添加JetBrains IDE Support
的插件,需要FQ,就是下图的这个。
![](https://img-blog.csdnimg.cn/img_convert/109d8b54fc0185369d3a2aa6c0ca9e1e.webp?x-oss-process=image/format,png)
第二步:我们把项目跑起来,也就是运行命令,我这边是
yarn run start
第三步:打开Webstorm(Phpstorm)
的运行窗口,点击Edite Connfigurations
![](https://i-blog.csdnimg.cn/blog_migrate/0830473c7679a95d52415e171fa0ca7d.png)
添加一个JavaScript Debug
![](https://i-blog.csdnimg.cn/blog_migrate/8ee4bc0d18f886acc0bb779d8dc33153.png)
name可以自定义,URL根据自己实际情况,(我这边没有在下面的Before launch:Show this page,Activate tool window
这一栏里添加这个项目npm start
或者yarn start
的启动脚本,一定要先启动项目,然后在点虫子按钮)
Before launch:Show this page,Activate tool window
这一栏里添加这个项目npm start
或者yarn start
的启动脚本,一定要先启动项目,然后在点虫子按钮)
![](https://i-blog.csdnimg.cn/blog_migrate/907ab8aad969efac6a6a820a865e7b90.png)
需要设置的话,配置如下,具体命令和package.json根据实际情况配置
![](https://i-blog.csdnimg.cn/blog_migrate/c93163d7b09fcda72a5b2cb21daecb0d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/044b59b4c997620cf0f77613f489b4f4.png)
浏览器的配置,点击后就后开启监控
![](https://i-blog.csdnimg.cn/blog_migrate/63fafb7cff5b0b4b5804fe5195739bc9.png)
点小虫虫开始debug,谷歌浏览器会弹出一个独立的浏览器页面用于调试
![](https://i-blog.csdnimg.cn/blog_migrate/5f22ad8b3073bd8e9eaf2cf2fb51f2ff.png)
重点来了,有时候你在编辑器的代码可能断点不了,可以用console.log()打印,然后在浏览器点进源码进行断点,触发时会自动联动到编辑器
![](https://i-blog.csdnimg.cn/blog_migrate/b00862b609fa757c532058c5f37e082e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/329eb43078dab6342d511c9f77d6cbe1.png)