八、 Vue3+vite源码设置断点调试

最新推荐文章于 2025-01-08 15:40:11 发布

bbill

最新推荐文章于 2025-01-08 15:40:11 发布

阅读量1.4k

点赞数 8

分类专栏： vue，jeecgboot，vben前端源码学习前端源码分析文章标签： node.js vue css 前端 npm

本文链接：https://blog.youkuaiyun.com/bbill/article/details/135693032

版权

本文详细解释了VSCode中的launch.json配置，用于启动Chrome和Edge，vite.config.ts中的构建设置，以及package.json中scripts部分的项目构建命令。重点介绍了如何在开发过程中管理和启动浏览器以进行调试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1， .vscode\launch.json文件配置

"configurations": [
        
        {
   
            "name": "Launch Chrome",
            "request": "launch",
            "type": "chrome",

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

bbill

关注关注

8
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

用webstorm和vscode断点调试vue

12-04

为了提高开发效率和代码质量，开发者需要掌握如何在WebStorm和VSCode中进行断点调试Vue项目。本文将详细阐述这两种主流IDE的Vue断点调试技术。首先，我们来了解什么是断点调试。断点调试是一种强大的开发工具，它...

VSCode+Vite+Vue3断点调试

m0_55956769的博客

06-06

1084

VSCode+Vite+Vue3断点调试

1 条评论您还未登录，请先登录后发表或查看评论

Vue3.x源码调试的实现方法

01-19

几句话说下我看源码的方式断点调试根据demo小例子或者api的使用姿势进行调试，每个小例子只关心其走过的逻辑分支。如何调试vue3.x的ts源码官网说使用 yarn dev 命令就可以对其进行调试，可是运行该命令后，是生成过后的代码，不能对其编写的ts源码进行调试。其实再生成对应的sourcemap文件，便可以原汁原味的调试。先看下几个截图：如果这是你想要的调试效果，下面请看下如何生成sourcemap文件。生成sourcemap文件 rollup.js中文文档 // rollup.config.js export default { // 核心选项

VSCode 中的 launch.json 配置使用

Bonway的博客

01-08

3669

launch.json 用于配置调试设置，在 VS Code 中选择如何启动和调试 Flutter 应用。你可以通过 flutterMode 设置不同的模式（调试、发布、性能）。noDebug 让你选择是否附加调试器来运行应用，适合用于 “Run Without Debugging” 场景。你可以通过 env 设置环境变量，在应用中访问不同的配置。这些设置让你能够灵活配置调试和非调试模式，帮助更好地进行开发和性能调优。

设置 VSCode+Vite+Vue3+ts 的断点调试

weixin_41245990的博客

06-21

3341

当前，Vite+Vue3+ts再结合一些优秀的UI框架，如Element plus，Ant design，Naive UI，移动端的Vant UI，是比较流行的前端技术之一。如何在vscode中调试 Vite+Vue3+ts 的代码呢，今天我们一起来进行配置。首先，我们先配置ts的调试环境，再来配置Vue3的调试环境。

vue3 vite vscode断点调试

Yangliwei的博客

06-14

7292

vue3 vite vscode断点调试

VSCode + vite + vue3断点调试配置

sayUonly的博客

12-29

5354

首先需要在.vscode文件夹下面创建launch.json配置文件。没想到这个配置我搞了一上午，网上很多的配置方案都没有效果。总算搞定了，特此记录一下。会启动一个chrome测试浏览器，这个浏览器不要关闭，监听仅在这个浏览器上有效。现在可以愉快的进行断点调试了！

vscode开始调试步骤(本人实践过)

qq_42288851的博客

06-17

3316

1.安装 Debugger for Chrome 2.配置launch.json参数 { // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "...

【从入门到提桶】vue3.2 + vite + vant + pinia + ts 移动端 h5 项目实践

xxxzzzqqq_的博客

03-15

2808

预览图片旋转就讲完了。不过，扩展名里加 .vue 的话会报错，一般来说 .vue 文件编译之后会是 js，但是 .vue 里面如果包含了样式，会单独提取出来作为一个虚拟的文件，通过查询参数 type=style 来读取，这里以 babel 来转译样式文件当然报错。别急，你以为就这样完事了吗，并没有。与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。

Vue3.x源码调试

weixin_45566319的博客

10-18

1440

断点调试根据demo小例子或者api的使用姿势进行调试，每个小例子只关心其走过的逻辑分支。如何调试vue3.x的ts源码官网说使用 yarn dev 命令就可以对其进行调试，可是运行该命令后，是生成过后的代码，不能对其编写的ts源码进行调试。其实再生成对应的sourcemap文件，便可以原汁原味的调试。先看下几个截图：如果这是你想要的调试效果，下面请看下如何生成sourcemap文...

你可能从未使用过的调试 Vue3 (开源项目) 源码的方式

u012384510的博客

03-21

1798

1. 前言大家好，我是若川。我倾力持续组织了一年多源码共读，感兴趣的可以加我微信 lxchuan12 参与。另外，想学源码，极力推荐关注我写的专栏《学习源码整体架构系列》，目前是掘金关注人数（4.7k+人）第一的专栏，写有20余篇源码文章。2. 看开源项目学习是怎样的步骤？看一个开源仓库，第一步一般是看 README.md 和 contributing.md 贡献指南文档。README.m...

vue3+vite浏览器无法手动打断点

weixin_45621877的博客

02-06

1394

安装了vue3+vite，代码中使用了ts，这时候在scrip中也加了 lang=“ts” ，在调试的时候发现无法手动打断点，代码添加debugger可以正常，手动还是点击不起作用，看了很多文章，有说版本问题的，本人确定安装的都是最新的，所以想是不是ts没安装的缘故，安装成功，重启，发现断点可以正常使用了。

vue3+vite 解决debugger断点调试定位不准确问题

qq_34309219的博客

12-14

1189

Microsoft Edge浏览器F12打开开发者工具调试页面,取消勾选Enable JavaScript source maps即可。

vue3项目使用VS CODE进行断点调试

qq_45763682的博客

06-01

5939

vue3项目断点调试

Vue3源码学习笔记——从启动项目到一步步断点调试

小帅的编程笔记

02-05

1721

Vue3自alpha第一个版本发布到现在已经有两年多了，从一年前项目也都陆续使用Vue3作为主要框架。现在网上Vue3源码分析的文章也不少，但别人的文章写的再好，也要自己动手去实践，去尝试修改代码，查看效果，这是最好的学习方式。今天分享一个我阅读Vue3源码的方式 1、拉源码到本地之前的Vue3代码在：https://github.com/vuejs/vue-next 现在已经修改为：https://github.com/vuejs/core git clone https://github.com/v

vue 源码断点调试

weixin_34309543的博客

11-20

4702

1、添加sourceMap sourceMap: true 2、npm run dev 会生成vue.js.map 3、断点调试 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>vue源码测...

如何使用WebStorm打断点调试Vue项目

qq_46614863的博客

07-27

2491

在开发 Vue 项目时，定位错误往往是一个令人头痛的问题。为了提升调试效率，我们可以利用 WebStorm 的强大调试功能，通过设置断点来逐步检查代码，找出问题所在。下面是具体的操作步骤：注意：这里要启动两个，如果只启动一个是访问不到了

vs code 调试vue3 。解决无法击中断点的问题。

z475299765的专栏

03-27

4458

VS Code 调试Vue项目，并解决无法击中断点问题。

在Vite的Vue3+TypeScript项目中，Axios的请求拦截器和响应拦截器既不打印日志，也不进入调试断点，但是请求正常发送，config添加token也正常

最新发布

04-01

<think>好，我现在需要解决用户在Vite的Vue3+TypeScript项目中遇到的Axios拦截器问题。用户说请求拦截器和响应拦截器既不打印日志，也不进入调试断点，但请求正常发送，config添加token也正常。首先，我得分析可能的原因，然后给出解决方案。首先，用户提到请求正常发送且token添加正常，说明拦截器的基本配置是正确的，可能的问题出在日志和调试部分。可能的原因有几个： 1. **拦截器注册顺序问题**：如果多个拦截器存在，可能后面的拦截器覆盖了前面的，导致日志部分没执行。需要检查是否在注册日志拦截器之后又注册了其他拦截器，导致后者覆盖了前者。 2. **生产环境代码压缩**：在构建生产环境时，代码可能被压缩或混淆，导致console.log被移除，或者断点位置偏移。需要确认问题是否出现在生产环境，如果是，可能需要调整构建配置或使用sourcemap。 3. **异步拦截器未返回**：如果在拦截器中进行了异步操作，但没有正确返回Promise链，可能导致后续拦截器或请求无法正常执行。例如，在请求拦截器中使用了async函数但未正确返回config，或者在响应拦截器中未返回response。 4. **浏览器控制台设置**：有时候浏览器的控制台设置可能被修改，比如过滤掉了日志，或者用户意外关闭了控制台输出，导致日志不可见。 5. **代码被Tree-shaking移除**：如果拦截器的相关代码在模块导入或导出时被误认为未使用，可能会被构建工具优化掉。需要检查代码是否存在未正确导出的情况。接下来，我需要针对这些可能的原因，逐一给出排查步骤和解决方案：首先，检查拦截器的注册顺序。用户可能在注册日志拦截器后又注册了其他拦截器，导致后者覆盖了前者。例如，如果使用axios.create创建了实例，然后多次调用interceptors.request.use，后面的use可能会覆盖前面的。但Axios的拦截器其实是按顺序添加的，先添加的先执行，所以可能不是覆盖的问题，而是后续的拦截器没有正确传递config或response。需要确保在拦截器中返回了config或response。其次，查看环境。如果是生产环境，检查vite.config.js中的配置，是否启用了代码压缩（minify），以及是否去除了console语句。可以通过配置build.minify和build.terserOptions来保留console输出。例如： ```javascript // vite.config.js export default defineConfig({ build: { minify: 'terser', terserOptions: { compress: { drop_console: false, // 保留console语句 }, }, }, }); ``` 第三，检查异步拦截器的实现。例如，请求拦截器中如果有异步操作，必须确保返回Promise。例如： ```typescript axiosInstance.interceptors.request.use(async (config) => { console.log('请求拦截器'); config.headers.Authorization = `Bearer ${token}`; return config; // 正确返回config }, (error) => { return Promise.reject(error); }); ``` 如果使用async函数，即使没有await，也需要确保返回config，否则可能中断Promise链。第四，检查浏览器控制台设置，确认没有过滤掉日志，或者尝试不同的浏览器测试。第五，确认代码没有被Tree-shaking移除。如果拦截器的相关代码位于某个模块中，确保该模块被正确导入并使用。例如，在main.ts或api模块中正确初始化axios实例，并导出供其他部分使用。另外，调试断点的问题可能需要检查sourcemap是否生成。在vite.config.js中，确保sourcemap启用： ```javascript // vite.config.js export default defineConfig({ build: { sourcemap: true, // 生成sourcemap }, }); ``` 这样在浏览器中调试时，可以正确映射到源代码中的断点位置。如果以上步骤都检查过，问题仍未解决，可能需要更详细的代码分析，比如查看拦截器的具体实现，是否有条件判断跳过了日志部分，或者是否有语法错误导致代码未执行。最后，建议用户提供拦截器的相关代码片段，以便更准确地定位问题。</think>在Vite+Vue3+TypeScript项目中，Axios拦截器未触发日志和断点的排查思路如下： $$ \text{问题定位} = \begin{cases} 注册顺序异常 \\ 生产环境优化干扰 \\ 异步逻辑断裂 \\ 调试配置问题 \end{cases} $$ **分步解决方案：** 1. **拦截器注册验证** ```typescript // 确认拦截器注册在axios实例创建后立即执行 const api = axios.create({ baseURL: import.meta.env.VITE_API_URL }) // 先注册日志拦截器 api.interceptors.request.use(config => { console.log('Request Interceptor Triggered') // 测试基础日志 debugger // 测试断点 return config }) // 后注册业务拦截器（确保不影响日志拦截器） api.interceptors.request.use(config => { config.headers.Authorization = `Bearer ${token}` return config // 必须返回config }) ``` 2. **构建配置检查** ```javascript // vite.config.js 生产环境配置 export default defineConfig({ build: { sourcemap: true, // 确保生成sourcemap terserOptions: { compress: { drop_console: false, // 保留console语句 pure_funcs: [] // 避免移除特定函数 } } } }) ``` 3. **异步处理验证** ```typescript // 正确的异步拦截器模式 api.interceptors.response.use( async response => { await new Promise(r => setTimeout(r, 100)) // 模拟异步操作 console.log('响应数据:', response.data) return response // 必须返回response对象 }, error => { console.error('响应错误:', error) return Promise.reject(error) } ) ``` 4. **浏览器调试配置** - 在开发者工具中确认： - 未启用「Hide network」过滤 - Console面板未设置日志过滤 - 使用`Ctrl + P`搜索确保持续映射到源码文件 5. **TypeScript配置检查** ```json // tsconfig.json 需包含调试支持 { "compilerOptions": { "sourceMap": true, "inlineSources": true } } ``` **典型问题案例：** ```typescript // 错误示例：拦截器未返回正确值 api.interceptors.request.use(config => { console.log('无效日志') // 不会执行 // 缺少return语句 }) // 正确应返回config或Promise ``` **验证流程：** 1. 在拦截器最前添加基础日志 2. 在浏览器Network面板确认请求确实携带token 3. 在终端执行`npx vite build --mode development`测试开发构建 4. 使用`debugger`语句替代断点测试若仍不生效，建议提供具体的拦截器实现代码片段，以便进一步分析异步操作或响应处理中的潜在问题。