57 webstorm 中调试 vue 项目
前言
妈的, 我还以为是直接 打个断点, 然后 页面上触发一下 就能够调试了, 哪知道 还踩了一些坑
参照了如下 的两篇文章
Vue项目调试总结-WebStorm+Chrome调试
webstrom 调试 Vue.js 单页面程序
当然 本来参照 第一篇 文章应该能够调试成功的, 但是 由于 少看了一个 修改 devtool: 'source-map', 走了不少弯路
后面 又去乱起八糟 的找了很多方式, 呵呵 这里整理一下吧, 大体上来说 和文章 Vue项目调试总结-WebStorm+Chrome调试 的节奏 是差不多的
HelloWorld调试
然后 实际操作了一下
1. 通过工具创建项目的基础骨架
master:HelloVue jerry$ vue init webpack hello-vue
? Project name hello-vue
? Project description A Vue.js project
? Author jerry.x.he <[email protected]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "hello-vue".
2. 调整项目 增加测试按钮, 回调
3. config/index.js 下面修改了一下 服务监听的端口
我这里是改成了 18080
4. console 里面 npm run dev 启动项目
5. 增加 java debug 配置
6. debug 调试启动
7 . 页面点击 click
8. webstorm 停留在断点的位置
一些tips
关于 devtool 选项
配置成 默认的 cheap-module-eval-source-map, 或者 source-map 是可以进入调试的
配置成 cheap-source-map 是不能进入调试的
Devtool 上面有一些 关于 devtool 的配置的一些说明, 以及开发 和生产 推荐怎么配置, 有什么优势
以上的操作确保没有启用 JetBrains IDE Support
关于浏览器
在外面的浏览器 点击 testClick 按钮 不会进入调试
需要在 步骤六 debug 启动的 chrome 里面点击 才能进入 断点, 似乎是 默认打开的 chrome 缺少什么调试配置吧
关于JetBrains IDE Support
呵呵 chrome 插件 JetBrains IDE Support, 来调试的方式 没有尝试成功
webstorm, JetBrains IDE Support, javascript debug 配置都是配置的 端口 63342, 但是 就是不行 哎 麻烦
解决WebStorm使用Chrome调试时无法连接的问题
关于 build-in server
这个知识点 算是见识到了, idea, webstorm, clion 都会启动一个 服务, 默认监听 63342, 如果被占用 尝试 +1, goto 如果
完
参考
Vue项目调试总结-WebStorm+Chrome调试
webstrom 调试 Vue.js 单页面程序
Devtool
解决WebStorm使用Chrome调试时无法连接的问题