Vue 3 前端调试与开发指南

Vue 3 前端调试与开发指南 | 极客日志

<!-- Elements 面板中会看到 -->
<div class="file-list-item" data-v-7a5b2c88>
  <!-- data-v-xxx 是 Vue 组件的作用域标识 -->
</div>

功能	说明	使用场景
Components	查看组件树结构	了解页面组件层级关系
Timeline	组件生命周期时间线	性能分析
Routes	路由信息	调试路由跳转问题
Vuex	状态管理	查看和修改全局状态
Events	事件追踪	调试事件触发问题

// 在 Console 中执行，查找所有可能有滚动的元素
Array.from(document.querySelectorAll('*')).filter(el => {
  const style = getComputedStyle(el);
  return style.overflow === 'auto' || 
         style.overflow === 'scroll' || 
         style.overflowY === 'auto' || 
         style.overflowY === 'scroll';
});

# 在 VSCode 中全局搜索
# Ctrl+Shift+F 搜索以下关键词：
# - overflow
# - scroll
# - 滚动
# - file-list (如果是文件列表的滚动条)

// frontend/src/assets/styles/main.scss
.file-list-wrapper {
  height: calc(100vh - 200px); // 固定高度
  overflow-y: auto; // 垂直滚动
  overflow-x: hidden; // 隐藏水平滚动
  // 自定义滚动条样式
  &::-webkit-scrollbar {
    width: 8px;
  }
  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
  }
}

<!-- 1. 检查元素看到 -->
<div class="el-dialog__wrapper" style="z-index: 2001;">
  <div class="el-dialog" style="margin-top: 15vh; width: 500px;">
    <!-- 对话框内容 -->
  </div>
</div>
<!-- 2. 识别这是 Element Plus 的 el-dialog 组件 -->

<!-- frontend/src/views/main/ShareFile.vue -->
<template>
  <el-dialog 
    v-model="dialogVisible" 
    title="分享文件" 
    :close-on-click-modal="false" 
    :center="true" <!-- 使对话框居中 -->
    :top="15vh" <!-- 距离顶部距离 -->
  >
    <!-- 对话框内容 -->
  </el-dialog>
</template>

/* 使用 !important 查看是否是优先级问题 */
.my-component {
  color: red !important; /* 临时测试用 */
}

/* 检查是否是 scoped 样式导致 */
/* 如果需要修改子组件样式，使用深度选择器 */
:deep(.child-component-class) {
  color: blue;
}

/* Vue 2 写法（兼容） */
::v-deep .child-component-class {
  color: blue;
}

frontend/
├── src/
│   ├── views/ # 页面级组件
│   │   ├── Login.vue # 登录页 (/login)
│   │   ├── Register.vue # 注册页 (/register)
│   │   └── main/ # 主界面相关页面
│   │       ├── Main.vue # 主框架容器
│   │       ├── FileList.vue # 文件列表
│   │       ├── Share.vue # 分享管理
│   │       ├── Recycle.vue # 回收站
│   │       └── Settings.vue # 设置页面
│   │
│   ├── components/ # 可复用组件
│   │   ├── Table.vue # 表格组件
│   │   ├── Dialog.vue # 对话框组件
│   │   ├── Upload.vue # 上传组件
│   │   ├── Icon.vue # 图标组件
│   │   └── NoData.vue # 空数据提示
│   │
│   ├── router/ # 路由配置
│   │   └── index.js # 路由定义和守卫
│   │
│   ├── store/ # Vuex 状态管理
│   │   ├── index.js # Store 主文件
│   │   └── modules/ # Store 模块
│   │       ├── user.js # 用户状态
│   │       └── file.js # 文件状态
│   │
│   ├── api/ # API 接口封装
│   │   ├── index.js # API 入口
│   │   ├── user.js # 用户相关 API
│   │   └── file.js # 文件相关 API
│   │
│   ├── utils/ # 工具函数
│   │   ├── request.js # Axios 封装
│   │   ├── validate.js # 表单验证
│   │   ├── crypto.js # 加密工具
│   │   └── common.js # 通用工具
│   │
│   └── assets/ # 静态资源
│       ├── styles/ # 样式文件
│       │   ├── variables.scss # SCSS 变量
│       │   ├── common.scss # 公共样式
│       │   └── reset.scss # 样式重置
│       └── images/ # 图片资源

路由路径	对应组件	说明
`/login`	`Login.vue`	登录页面
`/register`	`Register.vue`	注册页面
`/main`	`Main.vue`	主界面框架
`/main/all`	`FileList.vue`	全部文件
`/main/video`	`FileList.vue`	视频文件
`/main/music`	`FileList.vue`	音频文件
`/main/image`	`FileList.vue`	图片文件
`/main/doc`	`FileList.vue`	文档文件
`/main/share`	`Share.vue`	我的分享
`/main/recycle`	`Recycle.vue`	回收站

// 1. 在组件中打印数据
export default {
  mounted() {
    // 打印所有数据
    console.log('组件 data:', this.$data);
    console.log('Props:', this.$props);
    console.log('Computed:', this.$options.computed);
    // 打印路由信息
    console.log('当前路由:', this.$route);
    console.log('路由参数:', this.$route.params);
    console.log('查询参数:', this.$route.query);
    // 打印 Vuex 状态
    console.log('Vuex state:', this.$store.state);
  },
  watch: {
    // 监听数据变化
    'someData': {
      handler(newVal, oldVal) {
        console.log('数据变化:', oldVal, '->', newVal);
      },
      deep: true, // 深度监听
      immediate: true // 立即执行
    }
  }
};

/* 1. 显示所有元素边界（用于布局调试） */
* {
  outline: 1px solid red !important;
}

/* 2. 显示特定组件边界 */
.debug-border {
  border: 2px solid #409eff !important;
  background: rgba(64, 158, 255, 0.1) !important;
}

/* 3. 检查 z-index 层级 */
.debug-z-index::after {
  content: attr(style);
  position: absolute;
  top: 0;
  left: 0;
  background: yellow;
  color: black;
  padding: 2px 5px;
  font-size: 12px;
}

// 1. 查看元素上的所有事件
function getEventListeners(element) {
  const listeners = getEventListeners(element);
  console.table(listeners);
  return listeners;
}

// 2. 在模板中调试事件
<template>
  <button @click="handleClick($event, 'extra data')"> 点击测试 </button>
</template>
<script>
export default {
  methods: {
    handleClick(event, data) {
      console.group('点击事件调试');
      console.log('事件对象:', event);
      console.log('目标元素:', event.target);
      console.log('当前元素:', event.currentTarget);
      console.log('额外数据:', data);
      console.log('组件实例:', this);
      console.trace('调用栈');
      console.groupEnd();
      // 添加断点
      debugger;
    }
  }
};
</script>

// frontend/src/utils/request.js
import axios from 'axios';

// 请求拦截器
axios.interceptors.request.use(config => {
  console.group(`API Request: ${config.method.toUpperCase()}${config.url}`);
  console.log('Headers:', config.headers);
  console.log('Params:', config.params);
  console.log('Data:', config.data);
  console.groupEnd();
  return config;
}, error => {
  console.error('Request Error:', error);
  return Promise.reject(error);
});

// 响应拦截器
axios.interceptors.response.use(response => {
  console.group(`API Response: ${response.config.url}`);
  console.log('Status:', response.status);
  console.log('Data:', response.data);
  console.groupEnd();
  return response;
}, error => {
  console.error('Response Error:', error.response);
  return Promise.reject(error);
});

## 问题描述
在 [文件路径] 文件的第 [行号] 行，[组件/元素] 出现了 [问题描述]

## 当前代码
```vue
[粘贴相关代码]

[控制台错误信息]

## 问题描述
在 frontend/src/views/main/FileList.vue 文件的第 85-90 行，.file-list-wrapper 容器的滚动条在内容超出时没有出现

## 当前代码
```vue
<template>
  <div>
    <el-table :data="fileList">
      <!-- 表格内容 -->
    </el-table>
  </div>
</template>
<style scoped>
.file-list-wrapper {
  height: 100%;
  overflow: auto;
}
</style>


### 六、样式问题快速定位

#### 6.1 CSS 优先级调试

```css
/* CSS 优先级计算规则 */
/* 内联样式：1000 ID 选择器：100 类选择器：10 标签选择器：1 */
/* 示例 */
#app .content .file-list-item {
  /* 优先级：100 + 10 + 10 = 120 */
  color: blue;
}
.file-list-item {
  /* 优先级：10 */
  color: red; /* 会被覆盖 */
}

/* 提高优先级的方法 */
.file-list-item.active {
  /* 优先级：10 + 10 = 20 */
  color: green;
}

/* 最后手段 */
.file-list-item {
  color: yellow !important; /* 最高优先级 */
}

// 在 Console 中执行
// 查找影响特定元素的所有样式表
function findStyleSheets(element) {
  const computed = window.getComputedStyle(element);
  const sheets = Array.from(document.styleSheets);
  const affecting = [];
  sheets.forEach(sheet => {
    try {
      const rules = Array.from(sheet.cssRules || sheet.rules);
      rules.forEach(rule => {
        if (element.matches(rule.selectorText)) {
          affecting.push({
            selector: rule.selectorText,
            styles: rule.style.cssText,
            source: sheet.href || 'inline'
          });
        }
      });
    } catch (e) {
      console.warn('Cannot access stylesheet:', sheet.href);
    }
  });
  return affecting;
}

// 使用方法
const element = document.querySelector('.file-list-item');
console.table(findStyleSheets(element));

// frontend/src/assets/styles/element-variables.scss
// 覆盖 Element Plus 默认变量
:root {
  --el-color-primary: #409eff;
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
  --el-color-info: #909399;
  // 覆盖组件样式
  --el-dialog-padding-primary: 20px;
  --el-dialog-border-radius: 8px;
  // 自定义滚动条
  --el-table-border-color: #ebeef5;
}

// 或在组件中局部覆盖
.my-dialog {
  :deep(.el-dialog) {
    border-radius: 12px;
  }
  :deep(.el-dialog__header) {
    background: linear-gradient(to right, #409eff, #66b1ff);
    color: white;
  }
}

// 1. Chrome DevTools 设备模拟
// F12 -> Ctrl+Shift+M (Toggle device toolbar)

// 2. 常用断点
const breakpoints = {
  xs: 0, // 手机竖屏
  sm: 768, // 手机横屏/平板竖屏
  md: 992, // 平板横屏
  lg: 1200, // 笔记本
  xl: 1920 // 桌面显示器
};

// 3. 在 Vue 组件中响应屏幕变化
export default {
  data() {
    return {
      screenWidth: window.innerWidth,
      isMobile: false
    };
  },
  mounted() {
    this.handleResize();
    window.addEventListener('resize', this.handleResize);
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.screenWidth = window.innerWidth;
      this.isMobile = this.screenWidth < 768;
      console.log('屏幕宽度:', this.screenWidth, '移动端:', this.isMobile);
    }
  }
};

<template>
  <!-- Element Plus 栅格系统 -->
  <el-row :gutter="20">
    <el-col 
      :xs="24" <!-- 手机：占满 24 格 -->
      :sm="12" <!-- 平板：占 12 格 (50%) -->
      :md="8" <!-- 中屏：占 8 格 (33.3%) -->
      :lg="6" <!-- 大屏：占 6 格 (25%) -->
      :xl="4" <!-- 超大屏：占 4 格 (16.7%) -->
    >
      <div>响应式内容</div>
    </el-col>
  </el-row>
</template>
<style lang="scss">
// 媒体查询示例
.grid-content {
  padding: 20px;
  background: #f0f0f0;
  // 手机端样式
  @media (max-width: 767px) {
    padding: 10px;
    font-size: 14px;
  }
  // 平板样式
  @media (min-width: 768px) and (max-width: 991px) {
    padding: 15px;
    font-size: 15px;
  }
  // 桌面样式
  @media (min-width: 992px) {
    padding: 20px;
    font-size: 16px;
  }
}
</style>

// 1. 开启性能监控
// Vue DevTools -> Settings -> Performance monitoring

// 2. 组件渲染优化
export default {
  // 使用 computed 缓存计算结果
  computed: {
    expensiveComputed() {
      console.time('expensive computation');
      const result = this.largeArray
        .filter(item => item.active)
        .map(item => item.value * 2)
        .reduce((sum, val) => sum + val, 0);
      console.timeEnd('expensive computation');
      return result;
    }
  },
  // 使用 v-memo 优化列表渲染 (Vue 3.2+)
  template: `
    <div v-for="item in list" :key="item.id" v-memo="[item.id, item.updated]">
      {{ item.name }}
    </div>
  `
};

// 标记性能测量点
performance.mark('myFeature:start');
// 执行操作
doSomethingExpensive();
performance.mark('myFeature:end');
performance.measure('myFeature', 'myFeature:start', 'myFeature:end');

// 获取测量结果
const measures = performance.getEntriesByType('measure');
console.table(measures);

// 监控不必要的重渲染
export default {
  renderTracked(e) {
    console.log('Render tracked:', e);
  },
  renderTriggered(e) {
    console.log('Render triggered:', e);
    console.log('Key:', e.key);
    console.log('Old value:', e.oldValue);
    console.log('New value:', e.newValue);
  }
};

# 1. 对比目录结构
diff -rq frontend/src front/src | grep "Only in"

# 2. 查找相似文件
find front/src -name "*.vue" -exec grep -l "文件列表" {} \;

# 3. 对比特定文件
diff frontend/src/views/main/FileList.vue front/src/views/FileManager.vue

# 4. 使用 VSCode 对比
# 选中两个文件 -> 右键 -> Select for Compare -> Compare with Selected

// 1. 识别依赖
// 查看 front 项目的 package.json
// 对比需要新增的依赖

// 2. 复制组件时的检查清单
const migrationChecklist = {
  imports: '检查并更新 import 路径',
  api: '替换 API 接口调用',
  router: '更新路由名称',
  store: '适配 Vuex 状态结构',
  styles: '检查样式变量是否存在',
  assets: '复制相关图片资源',
  i18n: '如果有国际化，更新语言文件'
};

// 3. 适配数据结构
// front 项目的数据结构
const frontData = {
  fileId: 'xxx',
  fileName: 'xxx'
};

// 转换为 frontend 项目的结构
const frontendData = {
  id: frontData.fileId,
  name: frontData.fileName
};

// 1. 检查变量定义
// front/src/styles/variables.scss
$primary-color: #1890ff; // Ant Design 蓝

// frontend/src/assets/styles/variables.scss
$primary-color: #409eff; // Element Plus 蓝

// 2. 替换时需要调整颜色值
.button {
  // background: $primary-color; // 直接复制会用错颜色
  background: #409eff; // 使用 frontend 的主色
}

// 3. 组件库差异
// front 可能用 Ant Design Vue
<a-button type="primary">按钮</a-button>

// frontend 使用 Element Plus
<el-button type="primary">按钮</el-button>

<script setup>
import { ref, reactive, computed, watch, onMounted } from 'vue';

// 响应式数据
const count = ref(0);
const user = reactive({
  name: 'John',
  age: 30
});

// 计算属性
const doubleCount = computed(() => count.value * 2);

// 监听器
watch(count, (newVal, oldVal) => {
  console.log(`Count changed: ${oldVal} -> ${newVal}`);
});

// 生命周期
onMounted(() => {
  console.log('Component mounted');
});

// 方法
const increment = () => {
  count.value++;
};
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double: {{ doubleCount }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<template>
  <!-- 条件渲染 -->
  <div v-if="isVisible">Visible</div>
  <div v-else-if="isHidden">Hidden</div>
  <div v-else>Default</div>

  <!-- 列表渲染 -->
  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      {{ index }}: {{ item.name }}
    </li>
  </ul>

  <!-- 事件处理 -->
  <button @click="handleClick">Click</button>
  <input @keyup.enter="handleEnter" />

  <!-- 双向绑定 -->
  <input v-model="inputValue" />
  <input v-model.number="numberValue" />
  <input v-model.trim="trimmedValue" />

  <!-- 动态属性 -->
  <div :class="{ active: isActive, 'text-danger': hasError }"></div>
  <div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>

  <!-- 插槽 -->
  <slot name="header" :data="slotData"></slot>
</template>

<!-- 父组件 -->
<template>
  <ChildComponent :prop-data="parentData" @custom-event="handleChildEvent" />
</template>
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const parentData = ref('Hello from parent');

const handleChildEvent = (data) => {
  console.log('Received from child:', data);
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ propData }}</p>
    <button @click="emitEvent">Send to Parent</button>
  </div>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  propData: String
});

const emit = defineEmits(['custom-event']);

const emitEvent = () => {
  emit('custom-event', 'Hello from child');
};
</script>

功能	Windows/Linux	Mac
打开开发者工具	F12	Cmd+Option+I
元素选择器	Ctrl+Shift+C	Cmd+Shift+C
控制台	Ctrl+Shift+J	Cmd+Option+J
全局搜索	Ctrl+Shift+F	Cmd+Shift+F
查找文件	Ctrl+P	Cmd+P
刷新页面	F5	Cmd+R
强制刷新	Ctrl+F5	Cmd+Shift+R

Vue 3 前端调试与开发指南

Vue 3 前端调试与开发指南

一、浏览器开发者工具使用

1.1 基础定位方法

快速定位元素对应的代码

1.2 Vue DevTools 安装与使用

安装步骤

Vue DevTools 主要功能

二、具体问题定位示例

2.1 滚动条问题定位

场景：文件列表滚动条不显示或样式异常

2.2 布局框架问题定位

场景：对话框位置不正确

2.3 样式覆盖问题定位

三、Vue 3 项目结构速查

3.1 frontend 项目结构

3.2 路由与组件对应关系

四、常见调试技巧

4.1 数据调试

4.2 样式调试技巧

4.3 事件调试

4.4 网络请求调试

五、与 AI 沟通的技巧

5.1 问题描述模板

期望效果

已尝试的方案

错误信息（如果有）

环境信息

5.2 实际示例

期望效果

已尝试的方案

浏览器控制台无错误信息

6.2 查找样式来源

6.3 Element Plus 主题变量覆盖

七、响应式布局调试

7.1 设备模拟器使用

7.2 Element Plus 响应式栅格

八、性能问题定位

8.1 Vue DevTools Performance

8.2 Chrome Performance 分析

8.3 监控组件更新

九、学习 front 项目的方法

9.1 对比分析工具

9.2 功能迁移步骤

9.3 样式迁移注意事项

十、常用 Vue 3 语法速查

10.1 Composition API 基础

10.2 常用指令

10.3 组件通信

调试技巧总结

快速定位问题的流程

常用快捷键

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具