如何优雅的调试你的vue项目

Vue 项目的创建有两种方式:

  • 用 @vue/cli 创建的 webpack 作为构建工具的项目
  • 用 create-vue 创建的 vite 作为构建工具的项目

用vue-cli创建

安装 @vue/cli:

javascript 复制代码
yarn global add @vue/cli

执行 vue create vue-demo1 创建 vue 项目: 选择 vue3 的模版。等待依赖安装完毕即为成功创建项目。 使用npm run serve启动项目 在浏览器访问:http://localhost:8080/

开始调试。 点击调试窗口的 create a launch.json file 来创建调试配置文件 把 Chrome 调试配置的 url 改成目标 url 就可以进行调试了 点击 debug 启动,在 vue 组件里打个断点,你会发现断点没生效: 我们加个debugger直接在浏览器调试看看 刷新一下浏览器 你会发现他从一个乱七八糟的路径,映射到了 webpack-internal://.../App.vue?...id=... 的路径下。 然后在 VSCode Debugger 里看看这个路径: 发现是 /Users/.../src/App.vue?91a0,而且我们本地映射的文件是只读的,不能修改。原因是hash不一致,导致本地找不到对应的正确文件。 vue cli 默认的 devtool 设置是 eval-cheap-module-source-map,每个模块用 eval 包裹,并且通过 sourceURL 指定文件路径,通过 sourceMappingURL 指定 sourcemap。 在 Chrome DevTools 里点击下面的 source map from 的 url: 这个是被 eval 包裹并指定了 sourceURL 的模块代码,会被 Chrome DevTools 当作文件加到 sources 里。 这里有两个 sourceURL,第一个 sourceURL 在 sourceMappingURL 之前,这样 sourcemap 映射到的就是这个 url,也就是被 Chrome DevTools 当作文件的路径。而第二个 sourceURL 在之后,它可以修改当前文件的 url,也就是在调试工具里展示的路径。 然后再点击,会跳转回 bundle 的代码: 这些被 eval 包裹的就是一个个的模块代码。第一个 sourceURL 的路径是通过 [module] 指定的,而模块名后默认会带 ?hash: 所以想要去掉 hash 就不能用 eval 的方式。 所以我们修改下 webpack 的 devtool 配置:

diff 复制代码
const { defineConfig } = require('@vue/cli-service')
	module.exports = defineConfig({
  transpileDependencies: true,
+ configureWebpack(config) {
+ 	config.devtool = 'source-map'
+ }
})

从 eval-cheap-module-source-map 变为 source-map。去掉 eval 是为了避免生成 ?hash 的路径,去掉 cheap 是为了保留列的映射,去掉 module 是因为这里不需要合并 loader 做的转换。 然后重启跑一下 dev server,再次调试: 这时你会发现之前不生效的断点现在能生效了: 这样我们就能在vacode中愉快的调试 vue3 的代码了。 如果你创建的是 vue2 项目,可能还要在 launch.json 的调试配置加这样一段映射(只保留这一条)

javascript 复制代码
"sourceMapPathOverrides": {
  "webpack://你的项目名/src/*": "${workspaceFolder}/src/*"
}

知道了 vue cli 创建的 webpack 项目怎么调试,我们再来看下 create vue 创建的 vite 项目:

用vite创建

create vue 是创建 vite 作为构建工具的 vue 项目的工具。 直接执行 npm init vue@3 即可: 进入项目目录,执行安装,启动开发服务器: 浏览器访问,可以看到渲染出的页面:

javascript 复制代码
{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:5173",
      "runtimeExecutable": "canary",
      "runtimeArgs": [
          "--auto-open-devtools-for-tabs"
      ],
      "userDataDir": false,
      "webRoot": "${workspaceFolder}"
    }
  ]
}

随便打个断点,启动断点调试,成功

相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨7 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL7 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1118 小时前
css实现div被图片撑开
前端·css