Webstorm中配置react.js和vue的断点调试

简介:此前在调试web项目时,都是在Chrome中调试,现在使用WebStrom对js项目进行调试。

在Chrome中调试Web项目也很方便,但是用惯了Xcode后,就总是想在Ide中调试代码。偶尔使用WebStorm构建React.js或者Vue等JavaScript项目,所以还是想尝试用WbStorm进行相关调试。

其实WebStorm是支持调试JavaSccript,不过这需要借助Chrome,另外还需要在Chrome中安装JetBrains IDE Support插件,之后就可以直接在WebStorm里面进行调试了,这种感觉就像回到了Pycharm或Xcode中。

依赖工具

在WebStorm中配置调试

  • 打开Webstorm的运行窗口,点击Edit Connfigurations
  • 点绿色的+号,然后选择JavaScript Debug

屏幕快照 2019-08-14 上午11.00.31.png
按照上图填写相关配置,然后保存。

开始调试

需要先启动项目,然后在选择配置好的JavaScript Debug也是那个绿色虫子按钮启动。
- npm start或者yarn start启动项目
- 启动jsdebugger
屏幕快照 2019-08-14 上午11.12.04.png

  • 开始调试
    屏幕快照 2019-08-14 上午11.14.54.png

推荐阅读

目录