利用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()
]
})
安裝游覽器擴展
這里需要安裝一個 chrome 的擴展程序，點擊鏈接進去安裝即可
https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji/related
新建一個 debug
Run-> Edit Configurations
選擇 Javscript Debug
填上 URL 之后，下面的目錄映射就會顯示出來
運行 debug
設(shè)置好斷點，點擊右上角的小蟲子
之后會打開游覽器，當運行到你設(shè)置的斷點位置時，會喚起 webstrom
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
作為一個vue初學(xué)者不得不了解的就是組件間的數(shù)據(jù)通信(暫且不談vuex),通信方式根據(jù)組件之間的關(guān)系有不同之處,這篇文章主要給大家介紹了關(guān)于vue組件間通信的相關(guān)資料,需要的朋友可以參考下2021-07-07
Vue中的情侶屬性$dispatch和$broadcast詳解
這篇文章主要給大家介紹了關(guān)于Vue中情侶屬性$dispatch和$broadcast的相關(guān)資料，文中通過示例代碼以及圖文介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
vue3+ts+vite打包后靜態(tài)資源404無法加載js和css問題解決辦法
這篇文章主要給大家介紹了關(guān)于vue3+ts+vite打包后靜態(tài)資源404無法加載js和css問題的解決辦法,文中通過代碼以及圖文介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-04-04
本篇文章主要介紹了vue中配置mint-ui報css錯誤問題的解決方法，非常具有實用價值，需要的朋友可以參考下2017-10-10
這篇文章主要介紹了vue 中 命名視圖的用法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2019-08-08
解決echarts vue數(shù)據(jù)更新,視圖不更新問題(echarts嵌在vue彈框中)
這篇文章主要介紹了解決echarts vue數(shù)據(jù)更新,視圖不更新問題(echarts嵌在vue彈框中)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家詳細介紹了vue+element表格導(dǎo)出為Excel文件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
webpack vue 項目打包生成的文件,資源文件報404問題的修復(fù)方法(總結(jié)篇)
這篇文章主要介紹了解決webpack vue 項目打包生成的文件,資源文件報404問題的修復(fù)方法,需要的朋友可以參考下2018-01-01
Mixin，中文翻譯為"混入"，在Vue中是一種非常有用的功能，可以解決許多開發(fā)中的常見問題,下面就讓我們一起深入了解一下Mixin在Vue中解決了哪些問題吧2023-06-06
這篇文章主要介紹了vue 使用monaco實現(xiàn)代碼高亮的方法，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03