网络编程
位置：首页>> 网络编程>> JavaScript>> 利用webstrom调试Vue.js单页面程序的方法教程

利用webstrom调试Vue.js单页面程序的方法教程

作者：Enda　　发布时间：2023-06-27 01:21:25　

标签：webstorm,调试,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 之后，下面的目录映射就会显示出来

利用webstrom调试Vue.js单页面程序的方法教程

运行 debug

设置好断点，点击右上角的小虫子

利用webstrom调试Vue.js单页面程序的方法教程

之后会打开游览器，当运行到你设置的断点位置时，会唤起 webstrom

利用webstrom调试Vue.js单页面程序的方法教程

来源：http://www.phpyc.com/webstrom-diao-shi-vue-js-dan-ye-mian-cheng-xu/

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com