phpstorm, webstorm debug调试JS
第一步:给你的Chrome
添加JetBrains IDE Support
的插件,需要FQ,就是下图的这个。
![](https://upload-images.jianshu.io/upload_images/788601-405167f2d63cabe2.png?imageMogr2/auto-orient/strip|imageView2/2/w/408/format/webp)
第二步:我们把项目跑起来,也就是运行命令,我这边是
yarn run start
第三步:打开Webstorm(Phpstorm)
的运行窗口,点击Edite Connfigurations
添加一个JavaScript Debug
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
的启动脚本,一定要先启动项目,然后在点虫子按钮)
需要设置的话,配置如下,具体命令和package.json根据实际情况配置
浏览器的配置,点击后就后开启监控
点小虫虫开始debug,谷歌浏览器会弹出一个独立的浏览器页面用于调试
重点来了,有时候你在编辑器的代码可能断点不了,可以用console.log()打印,然后在浏览器点进源码进行断点,触发时会自动联动到编辑器