前端调试太痛苦？这 6 个技巧直接解决 90% 问题！

大家好，我是 前端架构师 - 大卫。

更多优质内容请关注微信公众号 @程序员大卫。

初心为助前端人🚀，进阶路上共星辰✨，

您的点赞👍与关注❤️，是我笔耕不辍的灯💡。

背景

在前端开发和排查线上问题的过程中，我们经常会遇到调试受限的场景：无法直接修改线上代码、hover 和 select 样式难以定位、JS 报错追踪困难等。为了提高调试效率，我们可以借助 Proxyman、Chrome DevTools 等工具，掌握一些实用的小技巧，让复杂问题的排查变得更加简单高效。

1. 使用 Proxyman 的本地映射（Map Local）

我们可以通过本地映射功能随意修改线上代码，或插入自定义脚本来进行调试。假设我们要调试的页面是 https://www.baidu.com/，这里以插入 vConsole.js 为例说明。

首先打开 Proxyman 软件，加载百度首页，在首页使用快捷键 Command + F 搜索 www.baidu.com，以过滤相关请求。

右键选中该请求，点击 工具 - 本地映射：

在弹出的配置面板中，名称可以填写为 vConsole，然后在 <head></head> 标签中插入以下脚本：

html 复制代码

<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
<script>var vConsole = new VConsole();</script>

点击"保存"按钮。

刷新百度首页，就会看到右下角已经成功加载了 vConsole：

注：Charles 中也有类似的功能操作。

2. 使用 Proxyman 的远程映射（Map Remote）

远程映射与本地映射类似，首先同样选中百度的请求，右键点击 工具 - 远程映射：

在弹出的窗口中：

名称填写为 百度远程映射到本地
主机地址填写为你本地开启的服务地址，如 http://127.0.0.1:5501/index.html

失去焦点后，系统会自动填充协议、端口和路径等字段。

点击"完成"按钮即可。

刷新百度首页，此时你会看到内容已经成功映射为本地页面。

3. 手动添加 Source Map

当项目上线后，如果没有接入错误监控系统，前端报错往往很难追踪源头。

以一个 Vite 创建的 Vue 项目为例，App.vue 中代码如下：

html 复制代码

<script setup lang="ts">
const hanldeClick = () => {
  throw new Error("test error.");
};
</script>

<template>
  <h1 @click="hanldeClick">点击我报错!</h1>
</template>

使用以下命令构建并本地预览，然后点击页面上的文字 点击我报错!

bash 复制代码

pnpm build
pnpm preview

我们会发现报错信息无法定位到具体文件和位置。此时可以手动添加 sourcemap 文件。

在 Console 面板中点击报错的文件名：

它会自动在 Sources 面板中打开对应的 JS 文件，右键点击并选择 Add source map：

在弹出的输入框中填写 Source Map 地址，如：

perl 复制代码

http://127.0.0.1:5501/index-Dp1zXMZ4.js.map

点击 Add按钮 完成。

此时 Console 中的错误提示就可以定位到源文件了：

PS：这个 .map 文件怎么来的？只需在 vite.config.ts 中设置 build.sourcemap: true 即可生成 sourcemap 文件：

ts 复制代码

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  build: {
    sourcemap: true,
  },
});

4. Select 下拉框的样式调试

调试下拉框样式时常会遇到一个问题：点击 Select 展开内容后，一旦点击 DevTools 面板，下拉内容就会收起，导致无法选中。

解决方法是打开 DevTools 的 More tools 菜单，选择 Rendering：

在打开的 Rendering 面板中，勾选 Emulate a focused page：

此时就可以轻松调试 Select 下拉样式了：

5. Hover 样式调试 - CSS 实现

如果 Hover 效果是通过 CSS 实现的，例如：

html 复制代码

<h1>Hello</h1>
<style>
h1:hover {
  color: red;
}
</style>

可以在 DevTools 的 Styles 面板中点击 :hov 按钮：

勾选 :hover 选项，就能手动激活 Hover 样式效果：

6. Hover 样式调试 - JS 实现（方式一）

对于 Vue 项目来说，很多 Hover 效果是通过 JS 绑定 mouseout 事件实现的，这时我们可以临时移除这些事件来便于调试。

例如，在 Element Plus 的 ToolTip 组件页面中：

访问 https://element-plus.org/zh-CN/component/tooltip.html，在 DevTools 中选中对应元素：

切换到 Event Listeners 面板，展开 mouseleave，点击移除事件：

这样就能静态保留 Tooltip，方便修改样式：

7. Hover 样式调试 - JS 实现（方式二）

React 项目中的 Tooltip 通常事件绑定在 document 上，比较难移除，这时可以使用快捷键打断点的方式。

访问 Ant Design 的 Tooltip 组件页面：https://ant.design/components/tooltip-cn

首先得在 DevTools 中切换到 Sources 面板：

将鼠标移动到 Tooltip 上的文字，然后按下快捷键 fn + F8（Windows 用户直接按 F8），当鼠标移开时，断点会自动触发：

现在就可以在断点状态下轻松修改样式了：

总结

这篇文章分享了 6 个前端调试中非常实用的技巧，涵盖了网络层的本地/远程映射、source map 的手动添加，以及 select 和 hover 样式的调试方法。掌握这些技巧，不仅能提升你在实际项目中的问题排查效率，也能帮助你在和后端联调、线上问题定位时更加得心应手。

建议将这些技巧收藏并在项目中多加实践，你会发现前端调试其实可以非常丝滑！