這篇文章將為大家詳細(xì)講解有關(guān)如何使用webstrom調(diào)試Vue.js單頁(yè)面程序，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
前言
使用 webstrom 調(diào)試 Vue.js 單頁(yè)面程序，理論上來(lái)說(shuō)應(yīng)該是支持所有用 webpack 構(gòu)建的應(yīng)用程序
webstrom 版本：2017.1
代碼：使用 vue-cli 構(gòu)建的基礎(chǔ)單頁(yè)面應(yīng)用
修改 webpack 配置
由于 webpack 把所有文件全部打包到一起，所以我們需要 webpack 提供給我們一個(gè)源地圖
修改 devtool 為 source-map 這是我的開(kāi)發(fā)配置文件 webpack.dev.conf.js
重慶分公司
重慶分公司
module.exports = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
// cheap-module-eval-source-map is faster for development
devtool: 'source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new FriendlyErrorsPlugin()
]
})安裝游覽器擴(kuò)展
這里需要安裝一個(gè) chrome 的擴(kuò)展程序，點(diǎn)擊鏈接進(jìn)去安裝即可
https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji/related
新建一個(gè) debug
Run-> Edit Configurations
選擇 Javscript Debug
填上 URL 之后，下面的目錄映射就會(huì)顯示出來(lái)
運(yùn)行 debug
設(shè)置好斷點(diǎn)，點(diǎn)擊右上角的小蟲(chóng)子
之后會(huì)打開(kāi)游覽器，當(dāng)運(yùn)行到你設(shè)置的斷點(diǎn)位置時(shí)，會(huì)喚起 webstrom
關(guān)于“如何使用webstrom調(diào)試Vue.js單頁(yè)面程序”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。
