这里以vscode举例,首先我们需要打开终端,然后点击终端中的+号旁边的下拉箭头,在下拉中点击Javascript Debug Terminal就可以启动一个debug终端。 假如vue文件编译为js文件是一个毛线团,那么他的线头一定是vite.config.ts文件中使用@vitejs/plugin-vue的地方。通过这个线头开始debug我们就能够梳理清楚完整的工作流程。 vuePl...
这里以vscode举例,首先我们需要打开终端,然后点击终端中的+号旁边的下拉箭头,在下拉中点击Javascript Debug Terminal就可以启动一个debug终端。 假如vue文件编译为js文件是一个毛线团,那么他的线头一定是vite.config.ts文件中使用@vitejs/plugin-vue的地方。通过这个线头开始debug我们就能够梳理清楚完整的工作流程。 vuePl...
可以试一下点击的效果 接下来如果你要debug一下源码的时候你会发现代码是经过打包的无法直接在源码上打...
这里以vscode举例,首先我们需要打开终端,然后点击终端中的+号旁边的下拉箭头,在下拉中点击Javascript Debug Terminal就可以启动一个debug终端。 接着在debug终端中执行yarn dev(这里是以vite举例)。在浏览器中访问 http://localhost:5173/,此时断点就会走到transform函数中了。我们在debug终端中来看看调用transform函数时...
从上一篇文章我们知道了transform函数是在node端执行的,所以我们需要启动一个debug终端,才可以在node端打断点。这里以vscode举例,首先我们需要打开终端,然后点击终端中的+号旁边的下拉箭头,在下拉中点击Javascript Debug Terminal就可以启动一个debug终端。 接着在debug终端中执行yarn dev(这里是以vite举例)。在浏览器中...
从上一篇文章我们知道了transform函数是在node端执行的,所以我们需要启动一个debug终端,才可以在node端打断点。这里以vscode举例,首先我们需要打开终端,然后点击终端中的+号旁边的下拉箭头,在下拉中点击Javascript Debug Terminal就可以启动一个debug终端。 接着在debug终端中执行yarn dev(这里是以vite举例)。在浏览器中...
在Edge浏览器中安装vue-devtool插件,否则无法在vscode软件中进行打断点的操作 launch.json配置 按下F5,配置launch.json { "configurations": [ { "type": "pwa-msedge",//调试环境的具体类型 "name": "Launch Microsoft Edge",//调试任务的名称,用与在下拉列表中展示 ...
还是一样的套路，我们在vscode中启动一个debug终端。在之前的通过debug搞清楚.vue文件怎么变成.js文件文章...
编译实际发生于node环境，而不是浏览器端。通过调试工具如VSCode的Javascript Debug Terminal，我们可以在vite.config.ts中使用@vitejs/plugin-vue的地方设置断点。这里，关键的函数是vuePlugin，它包含了buildStart和transform钩子，分别在服务器启动和模块解析时被调用。当启动服务，会首先调用buildStart钩子，...
├─.vscode # VSCode 推荐配置 ├─ build # Vite 配置项 ├─public# 静态资源文件 ├─ docs # 项目的细化文档目录(可选) ├─ node_modules # 下载的依赖包 ├─ src # 源码目录 │ ├─ api # http 请求目录 │ │ ├─ config # http 配置项 ...