在調試時請 注意 :
在WebStorm中啟動調試時，WebStorm會根據你設置的url，自動打開新的Chrome瀏覽器進程訪問這個設置的url，而且這個瀏覽器頁面和你平常看到的瀏覽器差異會比較大，看不到書簽欄，也看不到你先前所裝的所有插件。這是因為平常我們打開Chrome瀏覽器進程時，並不會添加–remote-debugging-port選項，而WebStorm無法讓已經打開的Chrome實例支持調試，所以必須重新打開一個新的Chrome瀏覽器進程，而且不能和原來的Chrome瀏覽器進程使用相同的用戶數據文件夾，所以它會使用一個臨時的文件夾，因此當它開始調試時看到的Chrome沒有任何標簽，也沒有任何安裝的插件。我們可以在這個瀏覽器上登錄我們的google賬號，然后將所有數據同步過來，這樣下次調試時所有的書簽和安裝的應用也就都會存在了。我們也就可以將原來瀏覽器的數據導出到新的文件夾，然后在WebStorm中設置Chrome的用戶數據文件夾為這個新的文件夾，這樣也能將所有的書簽和安裝的應用導過來
另外一個 注意點 :
Web項目的調試和我們平常調試Java項目，安卓項目並不同，因為我們開發Vue項目時，使用webpack-dev-server，也就是說不是WebStorm自帶的Server，此時需要先啟動Server(可以使用命令行 npm run dev ，也可以通過在ide的Npm Script管理器中雙擊啟動Server)，然后才能啟動調試器。 平常我們調試Java項目或者安卓項目時都是一鍵啟動的，而調試Web項目是需要兩步的，當然我們可以在配置JavaScript Debug時，添加前置步驟來簡化操作步驟
WebStorm還支持調試異步代碼，Web Workers和 Service Workers
如何使用WebStorm + Chrome調試Vue應用
准備環境
- 在chrome中安裝插件 JetBrains IDE Support
- 創建demo項目 vue init webpack vuejs-webpack-project
- 修改source map
進入項目打開config/index.js文件, 修改source map屬性，從cheap-module-eval-source-map改為source-map
'use strict' module.exports = { dev: { /** * Source Maps */ // https://webpack.js.org/configuration/devtool/#development // devtool: 'cheap-module-eval-source-map', devtool: 'source-map', // ... }, build: { //... } }
- 添加測試代碼 修改src/components/HelloWorld.vue
<template> <div class="hello"> <!-- .... --> <br/> <button @click="test">測試222</button> </div> </template> <script> export default { name: 'HelloWorld', //... methods: { test(params) { console.log('hello bbb 222 33 ccc') } } } </script> // ...
- 在test函數中打好斷點
- 使用npm install安裝好所有依賴的組件
調試
- 編輯調試配置，新建JavaScript調試配置，名字起個vuedebug，並設置要訪問的url，以及Remote url配置，如下圖所示:
在URL處填寫: http://localhost:63342 這里注意：端口號要和設置中調試器自帶的端口號63342一直，否則不能調試，如下圖：
在src的Remote url處填寫: webpack:///src
保存好調試配置
- 先啟動配置的正常server（run），可以使用WebStorm npm scripts中單擊工具欄start圖標啟動server， 也可以在命令行中執行命令npm run start啟動server
- 再啟動配置的調試server（vuedebug），單擊工具欄debug烏龜圖標啟動，調試DebugTest，這時候會打開一個新的chrome，如下圖所示 ，將要調試頁面地址復制到新打開的瀏覽器中開始調試
當我們在chrome中點擊測試按鈕，WebStorm就會響應斷點狀態，可以直接在chrome瀏覽器中一步步調試，也可以去webstorm左下角的調試窗口中點擊一步步調試，瀏覽器調試和工具窗口調試都會相互同步的。