利用webstrom調(diào)試Vue.js單頁面程序的方法教程
前言
使用 webstrom 調(diào)試 Vue.js 單頁面程序，理論上來說應(yīng)該是支持所有用 webpack 構(gòu)建的應(yīng)用程序
webstrom 版本：2017.1
代碼：使用 vue-cli 構(gòu)建的基礎(chǔ)單頁面應(yīng)用
修改 webpack 配置
由于 webpack 把所有文件全部打包到一起，所以我們需要 webpack 提供給我們一個源地圖
修改 devtool 為 source-map 這是我的開發(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ò)展
這里需要安裝一個 chrome 的擴(kuò)展程序，點擊鏈接進(jìn)去安裝即可
https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji/related
新建一個 debug
Run-> Edit Configurations
選擇 Javscript Debug
填上 URL 之后，下面的目錄映射就會顯示出來
運(yùn)行 debug
設(shè)置好斷點，點擊右上角的小蟲子
之后會打開游覽器，當(dāng)運(yùn)行到你設(shè)置的斷點位置時，會喚起 webstrom
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了vue中的正則表達(dá)式校驗、驗證方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要為大家詳細(xì)為大家詳細(xì)介紹了Vuejs實現(xiàn)帶樣式的單文件組件的新方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
vue使用vue-video-player無法播放本地視頻的問題及解決
這篇文章主要介紹了vue使用vue-video-player無法播放本地視頻的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
詳解Vue webapp項目通過HBulider打包原生APP
這篇文章主要介紹了詳解Vue webapp項目通過HBulider打包原生APP，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)拖拽窗口功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了nginx配置域名后的二級目錄訪問不同項目的配置操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue監(jiān)控路由與路由參數(shù), 刷新當(dāng)前頁面數(shù)據(jù)的方法匯總
這篇文章主要介紹了Vue監(jiān)控路由與路由參數(shù), 刷新當(dāng)前頁面數(shù)據(jù)的幾種方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10
這篇文章主要介紹了vue如何實現(xiàn)Toast輕提示，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了在Vue當(dāng)中同時配置多個路由文件的方法,包含具體代碼，本文分步驟結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
vue-devtools 是一款基于chrome游覽器的插件，用于調(diào)試vue應(yīng)用，這篇文章分步驟給大家介紹了vue-devtools的安裝方法，需要的朋友參考下吧2018-04-04