在 debug 时,通常的方式如下几种:
console.log
以 Chrome 浏览器为例,其他浏览器类似。
第一步: 首先确保 Chrome浏览器已正确安装,并在 vscode 中添加 vscode-chrome-debug 插件;
第二步: 修改 webpack 相关配置,输出 source-map。
以 Vue CLI 3.X 为例,vue.config.js
中增加如下配置:
module.exports = {
chainWebpack: (config) => {
if (isDev) {
config.devtool('source-map')
}
}
}
注意,也可以通过 configureWebpack: { devtool: 'source-map' }
进行配置,方式多种,不赘述。
第三步: 配置 launch.json
文件,具体配置 vscode-chrome-debug 插件有详细描述。
第四步: 增加断点,启动即可,会开启一个新的浏览器窗口。 其他: 如果 vue 文件中不能加断点,是由于 vscode 配置问题导致,如下修改:首选项 => 设置 => 搜索”debug“ => 功能/调试 => 勾选 Debug:Allow Breakpoints Everywhere
其他参考地址: