利用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中的正则表达式校验、验证方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要为大家详细为大家详细介绍了Vuejs实现带样式的单文件组件的新方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
vue使用vue-video-player无法播放本地视频的问题及解决
这篇文章主要介绍了vue使用vue-video-player无法播放本地视频的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
详解Vue webapp项目通过HBulider打包原生APP
这篇文章主要介绍了详解Vue webapp项目通过HBulider打包原生APP，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要为大家详细介绍了vue实现拖拽窗口功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了nginx配置域名后的二级目录访问不同项目的配置操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了Vue监控路由与路由参数, 刷新当前页面数据的几种方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-10-10
这篇文章主要介绍了vue如何实现Toast轻提示，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了在Vue当中同时配置多个路由文件的方法,包含具体代码，本文分步骤结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
vue-devtools 是一款基于chrome游览器的插件，用于调试vue应用，这篇文章分步骤给大家介绍了vue-devtools的安装方法，需要的朋友参考下吧2018-04-04
最新评论