前言
媽的, 我還以爲是直接 打個斷點, 然後 頁面上觸發一下 就能夠調試了, 哪知道 還踩了一些坑
參照瞭如下 的兩篇文章
當然 本來參照 第一篇 文章應該能夠調試成功的, 但是 由於 少看了一個 修改 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 如果
完
參考