利用webstrom调试Vue.js单页面程序的方法教程
更新时间：2017年06月06日 10:38:02 作者：Enda
这篇文章主要给大家介绍了利用webstrom调试Vue.js单页面程序的方法教程，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
前言
使用 webstrom 调试 Vue.js 单页面程序，理论上来说应该是支持所有用 webpack 构建的应用程序
webstrom 版本：2017.1
代码：使用 vue-cli 构建的基础单页面应用
修改 webpack 配置
由于 webpack 把所有文件全部打包到一起，所以我们需要 webpack 提供给我们一个源地图
修改 devtool 为 source-map 这是我的开发配置文件 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
设置好断点，点击右上角的小虫子
之后会打开游览器，当运行到你设置的断点位置时，会唤起 webstrom
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
作为一个vue初学者不得不了解的就是组件间的数据通信(暂且不谈vuex),通信方式根据组件之间的关系有不同之处,这篇文章主要给大家介绍了关于vue组件间通信的相关资料,需要的朋友可以参考下2021-07-07
Vue中的情侣属性$dispatch和$broadcast详解
这篇文章主要给大家介绍了关于Vue中情侣属性$dispatch和$broadcast的相关资料，文中通过示例代码以及图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
vue3+ts+vite打包后静态资源404无法加载js和css问题解决办法
这篇文章主要给大家介绍了关于vue3+ts+vite打包后静态资源404无法加载js和css问题的解决办法,文中通过代码以及图文介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-04-04
本篇文章主要介绍了vue中配置mint-ui报css错误问题的解决方法，非常具有实用价值，需要的朋友可以参考下2017-10-10
这篇文章主要介绍了vue 中 命名视图的用法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2019-08-08
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
这篇文章主要介绍了解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要为大家详细介绍了vue+element表格导出为Excel文件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
这篇文章主要介绍了解决webpack vue 项目打包生成的文件,资源文件报404问题的修复方法,需要的朋友可以参考下2018-01-01
Mixin，中文翻译为"混入"，在Vue中是一种非常有用的功能，可以解决许多开发中的常见问题,下面就让我们一起深入了解一下Mixin在Vue中解决了哪些问题吧2023-06-06
这篇文章主要介绍了vue 使用monaco实现代码高亮的方法，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
最新评论