在調(diào)試時請?注意:

在WebStorm中啟動調(diào)試時，WebStorm會根據(jù)你設(shè)置的url，自動打開新的Chrome瀏覽器進程訪問這個設(shè)置的url，而且這個瀏覽器頁面和你平常看到的瀏覽器差異會比較大，看不到書簽欄，也看不到你先前所裝的所有插件。這是因為平常我們打開Chrome瀏覽器進程時，并不會添加–remote-debugging-port選項，而WebStorm無法讓已經(jīng)打開的Chrome實例支持調(diào)試，所以必須重新打開一個新的Chrome瀏覽器進程，而且不能和原來的Chrome瀏覽器進程使用相同的用戶數(shù)據(jù)文件夾，所以它會使用一個臨時的文件夾，因此當(dāng)它開始調(diào)試時看到的Chrome沒有任何標(biāo)簽，也沒有任何安裝的插件。我們可以在這個瀏覽器上登錄我們的google賬號，然后將所有數(shù)據(jù)同步過來，這樣下次調(diào)試時所有的書簽和安裝的應(yīng)用也就都會存在了。我們也就可以將原來瀏覽器的數(shù)據(jù)導(dǎo)出到新的文件夾，然后在WebStorm中設(shè)置Chrome的用戶數(shù)據(jù)文件夾為這個新的文件夾，這樣也能將所有的書簽和安裝的應(yīng)用導(dǎo)過來

另外一個?注意點:

Web項目的調(diào)試和我們平常調(diào)試Java項目，安卓項目并不同，因為我們開發(fā)Vue項目時，使用webpack-dev-server，也就是說不是WebStorm自帶的Server，此時需要先啟動Server(可以使用命令行?npm run dev?，也可以通過在ide的Npm Script管理器中雙擊啟動Server)，然后才能啟動調(diào)試器。 平常我們調(diào)試Java項目或者安卓項目時都是一鍵啟動的，而調(diào)試Web項目是需要兩步的，當(dāng)然我們可以在配置JavaScript Debug時，添加前置步驟來簡化操作步驟

WebStorm還支持調(diào)試異步代碼，Web Workers和 Service Workers

如何使用WebStorm + Chrome調(diào)試Vue應(yīng)用

準(zhǔn)備環(huán)境

創(chuàng)建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

測試222

name:'HelloWorld',//...

methods: {

test(params) {

console.log('hello bbb 222 33 ccc')

}

}

}

//...

在test函數(shù)中打好斷點

使用npm install安裝好所有依賴的組件

調(diào)試

編輯調(diào)試配置，新建JavaScript調(diào)試配置，名字起個vuedebug，并設(shè)置要訪問的url，以及Remote url配置，如下圖所示:

在URL處填寫: http://localhost:63342? 這里注意：端口號要和設(shè)置中調(diào)試器自帶的端口號63342一直，否則不能調(diào)試，如下圖：

在src的Remote url處填寫: webpack:///src

保存好調(diào)試配置

先啟動配置的正常server(run)，可以使用WebStorm npm scripts中單擊工具欄start圖標(biāo)啟動server， 也可以在命令行中執(zhí)行命令npm run start啟動server

再啟動配置的調(diào)試server(vuedebug)，單擊工具欄debug烏龜圖標(biāo)啟動，調(diào)試DebugTest，這時候會打開一個新的chrome，如下圖所示 ，將要調(diào)試頁面地址復(fù)制到新打開的瀏覽器中開始調(diào)試

當(dāng)我們在chrome中點擊測試按鈕，WebStorm就會響應(yīng)斷點狀態(tài)，可以直接在chrome瀏覽器中一步步調(diào)試，也可以去webstorm左下角的調(diào)試窗口中點擊一步步調(diào)試，瀏覽器調(diào)試和工具窗口調(diào)試都會相互同步的。

總結(jié)

以上是生活随笔為你收集整理的wenstorm设置谷歌_WebStorm+Chrome调试Vue步骤的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。