浏览器调试实战：从前端开发到线上问题定位的高效技巧全解析

引言

在前端开发过程中，浏览器调试是一项不可或缺的技能。无论是寻找代码中的错误，优化性能，还是理解页面渲染过程，掌握有效的调试方法都能大大提高开发效率。本文将以Google Chrome（129.0.6668.101）介绍一些常用的浏览器调试技巧，帮助开发者快速定位问题并解决。

1.浏览器控制台设置成中文

个人还是喜欢中文控制台，所以，接下来，就以中文来进行讲解

方法一

1. 右键点击页面任意位置，选择"检查"或按 F12 键打开控制台面板
2. crtl+shirt+p
3. 打开运行命令，再输入中文 (如果想切换回英文，输入English)
4. 点击到 Reload Devtools 选或手动重启控制台后中文配置才会生效

方法二

1. 点击控制台中的设置图标，如图所示
2. 找到 Language 选项，并点开
3. 一直下拉到最底部，选择Chinese - 中文即可
4. 点击到 Reload Devtools 选或手动重启控制台后中文配置才会生效

2.保存浏览器请求信息的日志文件

在浏览器中，HAR（HTTP Archive）文件是一种日志格式，用于记录网页加载过程中的网络请求详情。

导出 HAR 文件可以帮助开发者分析和调试网页性能、排查问题，尤其是在不同环境中遇到的问题（笔者所开发的项目生产环境就是内网的，想要看请求日志，就得去现场查看，而带会实施导出har，就可以快速让你看到现场的日志文件，把问题复现出来进行排查），下面是一些指导，帮助你实现这个功能。

HAR文件是一个非常强大的工具，对于前端开发者来说尤其如此。以下是详细的步骤，以帮助您正确地导出HAR文件并用于分析和调试：

导出HAR文件和使用步骤：

打开浏览器控制台：

对于大多数现代浏览器（如Chrome、Firefox、Edge等），您可以通过以下方式打开控制台：

- 右键点击页面上的任何地方，选择"检查"（Inspect）或"检查元素"（Inspect Element）。
- 或者使用快捷键：在Chrome中是Ctrl + Shift + I（Windows）或 Cmd + Option + I（Mac），在Firefox中是Ctrl + Shift + C。

2. 打开 Network(网络) 面板：

在控制台中，您会看到一个标签页式的界面。点击"Network"标签，这会打开网络面板。
在网络面板中，您可以看到所有由当前页面发起的网络请求。

3.重现问题：

执行您想要记录的操作，比如点击文章、提交表单等。
确保所有的相关网络请求都已经被捕获。您可以通过观察网络面板中的请求列表来确认。

4. 以 HAR 格式保存所有内容：

以下是如何保存HAR文件的步骤：

在Chrome中：

- 点击网络面板左上角的三个垂直点（菜单按钮）。
- 选择"导出为HAR with content"（如果您需要请求和响应的正文）或"导出为HAR"（如果您只需要请求和响应的头部信息）。
- 浏览到您想要保存文件的位置，输入文件名，然后保存。

在Firefox中：

- 点击网络面板左上角的"箭头"按钮，选择"另存为"。
- 选择保存位置，为文件命名，并确保文件扩展名为.har。

在其他浏览器中：

- 大多数现代浏览器都提供了类似的导出功能，您可以在网络面板中寻找相应的选项。

5. 使用HAR文件：

保存HAR文件后，您可以使用各种工具来分析它，例如：

- 使用浏览器内置的控制台。
- 使用第三方工具如Wireshark。
- 使用在线HAR分析工具。

这边演示下通过浏览器控制台进行分析。操作很简单，直接将文件拖动到浏览器Network (网络)里，便可以查看保存的日志文件

通过这些步骤，您应该能够有效地导出HAR文件，并且使用它来帮助您分析和调试网页性能问题。

将HAR文件中的请求和响应转换为本地Node.js服务

导出的har文件，是可以解析的，并且可以转换成本地Node服务，可以参考下这篇文章，因为不属于浏览器调试技巧，就不写在这里了

3.如何在生产环境检查 Vue 应用程序

在工作中，不知道有没有遇到过这种问题，本地好好的，赋值没问题，怎么上了线上就不行了，响应式丢失，怎么调用的方法，没有生效，这边分享两个方法获取vue实例，然后去定位问题。

方法一：使用`$0.vue`

步骤：

首先需要在"元素"中选中你要看的vue组件的最外层div，像我以element-ui的table组件为例，选中它；

然后在控制台中打出$0.__vue__；（在 Chrome 的 Elements 面板中， $0 是对我们当前选中的 html 节点的引用。理所当然，$1 是对上一次我们选择的节点的引用，$2 是对在那之前选择的节点的引用，等等）

$0拿到当前节点， .__vue__拿到当前节点的vue实例

这时就会打印出该组件中的一些数据信息（data、computed、methods都可以看到）；
还可以通过拿到的el-tabel实例，调用其组件方法（比如获取到el-table的vue实例后，调用组件的清空选中的方法clearSelection）

vue2获取vue实例用$0.__vue__
vue3获取vue实例用$0.__vue_app，不过在生产环境中，不修改代码的情况下获取 Vue 3 实例并进行调试是比较困难的，因为 Vue 3 的架构变化使得直接通过 DOM 元素访问实例变得复杂。

方法二：线上环境开启vue devtool

这也是我最近才学到的好方法：把线上的vue devtool临时开启。

步骤：

下载vue devtool插件并安装使用，具体怎么安装使用，请看官方文档，不会科学上网下载插件的，可以在插件小屋，下载插件并使用
复杂下面这段代码到控制台执行，并重启控制台，vue devtool控制台就会出现了，可以在上边查看相关的数据，还支持修改

ini 复制代码

var Vue, walker, node;
walker = document.createTreeWalker(document.body,1);
while ((node = walker.nextNode())) {
  if (node.__vue__) {
    Vue = node.__vue__.$options._base;
    if (!Vue.config.devtools) {
      Vue.config.devtools = true;
      if (window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
        window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("init", Vue);
        console.log("==> vue devtools now is enabled");
      }
    }
    break;
  }
}