一、Vue 调试技巧

（一）安装 Vue Devtools 插件

Vue Devtools 是一款强大的浏览器扩展，专门用于调试 Vue.js 应用程序。在 Chrome 浏览器中，访问 Chrome Web Store（https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd），在搜索框中输入 “Vue Devtools”，找到 Vue.js devtools 并点击 “添加至 Chrome” 按钮，在弹出的确认对话框中点击 “添加扩展程序”，即可完成安装。

（二）启动 Vue 应用程序

通常使用 npm 命令来启动 Vue 应用程序。在项目目录下打开终端，执行 npm run serve 命令（前提是已经安装了相关依赖）。如果是使用其他工具或脚手架创建的 Vue 项目，也可以使用相应的启动命令。例如，若使用 Vue CLI 创建的项目，该命令会自动在本地启动一个开发服务器，运行你的 Vue 应用程序。

（三）打开 Chrome 开发者工具

可以通过以下几种方式打开 Chrome 开发者工具：按下 F12 键；或者右键点击页面，在快捷菜单中选择 “检查” 选项；也可以点击 Chrome 浏览器右上角的自定义图标，展开菜单后选择 “更多工具”→“开发者工具” 命令。打开后，会看到包含多个选项卡的面板，如 “元素”“控制台”“源代码”“网络” 等，每个选项卡都提供了不同的调试功能。

（四）进入 Vue Devtools 面板

在 Chrome 开发者工具中，点击右上角的 Vue 图标（如果 Vue Devtools 安装成功且当前页面是 Vue 应用程序，该图标会显示），即可进入 Vue Devtools 面板。在这个面板中，可以查看 Vue 应用的组件树、组件的数据、事件等信息，方便对 Vue 应用进行调试和分析。

（五）调试 Vue 组件

在 Vue Devtools 面板的组件树中，选择要调试的 Vue 组件。此时，可以查看该组件的状态、属性、方法等详细信息。还可以直接在面板中修改组件的数据，观察页面上相应部分的实时变化，这有助于快速定位和解决组件相关的问题。例如，若发现某个组件没有正确渲染数据，可以在这里检查数据是否正确绑定，以及组件的计算属性和方法是否按预期工作。

（六）监听 Vue 事件

Vue Devtools 可以方便地查看 Vue 应用程序中触发的事件。在面板中，切换到 “事件” 选项卡，这里会列出所有被触发的事件。点击某个具体事件，可以查看该事件的详细信息，包括事件的名称、触发的参数、触发的次数以及事件的来源组件等。这对于理解应用程序中的数据流和用户交互逻辑非常有帮助，比如在处理表单提交事件时，可以通过查看事件参数来确保数据的正确性和完整性。

（七）性能分析 Vue 应用

Vue Devtools 提供了性能分析功能，帮助找出应用中的性能瓶颈。在面板中，点击 “性能” 选项卡，然后点击 “开始记录” 按钮，接着在页面上进行一些操作，如切换页面、加载数据等。操作完成后，点击 “停止记录”，Vue Devtools 会显示出组件渲染时间、更新时间等详细信息，帮助开发者分析哪些组件可能存在性能问题，以便进行针对性的优化。例如，如果某个组件的渲染时间过长，可能需要检查其模板是否过于复杂，或者是否存在不必要的计算属性和监听器。

二、React 调试技巧

（一）关联工作区源码

在 Chrome 中调试 React 项目时，关联工作区源码是很关键的第一步。它能让 Chrome 准确找到项目的原始代码位置，为后续调试搭建好基础环境。操作方法通常是在开发工具的相关设置选项中，指定项目所在的本地工作区路径，使得浏览器可以对应到实际编写的代码文件，方便在调试过程中精准定位和查看代码逻辑。

（二）安装 React 的 Chrome 插件

我们可以安装 React Developer Tools 这款 Chrome 插件来辅助调试。以 Windows 系统为例，安装步骤如下：首先，去 git 中下载 react-devtools 文件并解压（可从https://github.com/facebook/react-devtools/tree/v3获取）；接着打开 cmd 窗口，使用 cd 命令进入 react-devtools 目录；之后使用 npm 工具安装依赖并打包扩展程序，命令为 “npm --registry https://registry.npm.taobao.org install” 以及 “npm run build:extension:chrome”；最后在 chrome 的 “扩展程序” 页面（可通过在地址栏输入 chrome://extensions/ 进入）中添加扩展程序，即将生成的 unpacked 文件夹添加进去即可。安装完成后，浏览器右上角会出现 react 标志，表示插件安装成功。

（三）切换到插件标签及操作

当安装好插件并且打开了要调试的 React 页面后，先打开 Chrome 开发者工具（可以按下 F12 键，或者右键点击页面选择 “检查” 选项，也可通过点击 Chrome 浏览器右上角的自定义图标，展开菜单后选择 “更多工具”→“开发者工具” 命令来打开）。在开发者工具的上方工具栏找到并切换到 React 插件对应的标签。然后选中你要调试的页面元素，再点击右边的按钮，就能切换到对应的源码位置，这样就可以查看该元素相关的 React 组件代码及状态等信息了。

（四）打断点运行调试

在切换到对应的源码后，可以在源码的任意位置打断点运行。比如在怀疑可能出现逻辑问题或者数据处理异常的代码行处点击设置断点（一般在代码行号旁边点击即可添加断点）。之后刷新页面或者进行相应操作触发代码执行，当执行到断点处时，代码就会暂停，此时可以查看当前的变量值、调用堆栈等信息，通过分析这些内容来排查问题、观察代码实际的执行情况，从而定位和解决代码中的错误。

（五）理解调试原理

React 编译器工作原理对于理解 Chrome 调试很重要。React 代码（例如 JSX 语法的代码）在运行前，会通过诸如 babel 等编译器将其编译成原生 js 代码。因为浏览器本身只能解析原生的 js 代码，像 JSX 这样的语法浏览器是无法直接读懂的，所以需要先进行编译转换。Chrome 进行调试时，实际解析和调试的也是编译后的原生 js 代码，只有代码被正确编译成符合要求的 js 代码形式，我们才能顺利在 Chrome 里利用断点、查看变量等调试手段去排查问题，观察 React 应用各个组件以及业务逻辑的执行是否符合预期。

三、Chrome 常规调试技巧

（一）DOM 元素操作调试

在 Chrome 进行常规调试时，针对 DOM 元素有不少实用的操作技巧。比如，当我们想要改变某个 DOM 元素的位置时，可以直接在元素面板中选中该 dom 元素，然后通过鼠标拖动就能轻松改变其位置，操作起来非常直观便捷。另外，如果想要删除某个 DOM 元素，只需右键点击该元素，在弹出的菜单中选择 “删除” 选项即可，菜单中通常还会有隐藏等其他功能选项供我们按需选用。这些简单的操作能帮助我们快速调整页面布局，进行初步的调试查看效果。

（二）控制台引用及操作

控制台有一些便捷的引用操作方法值得掌握。例如，在元素面板中选中某个元素后，在控制台可以通过 “ ” 这个操作符，它能引用上一次在控制台执行结果，比如我们先执行了一个计算表达式，得到了一个结果，后续若想再次使用这个结果参与其他运算或者查看，直接使用 “$” 就能快速获取，无需重新输入之前的表达式，大大提高了调试效率。

（三）样式相关调试

在样式调试方面，有两个很实用的技巧。一是当我们在查看某个元素的样式时，若想知道该样式具体在源文件中的位置，只需要按下 “ctrl + 点击” 对应的样式，就会自动跳转到该样式代码所在的源文件，方便我们查看样式具体是在哪里定义以及修改等情况。二是如果对页面上某个元素修改后的样式比较满意，想要保存下来以便后续使用或者参考，可以使用 “saveAs” 功能来保存修改后的样式源文件，便于后续进一步的样式调整和复用。

（四）查找元素与文本

查找元素和文本在调试过程中也很关键。我们可以通过按下 “ctrl + f” 快捷键，根据 css 选择器、关键字等在相应的范围内查找某个元素，比如在元素面板或者代码文件中查找特定的 DOM 元素，操作后会弹出搜索框，输入相关信息就能快速定位。此外，在控制台的任何地方按下 “ctrl+shift+f”，就能进行全局搜索字符串，可搜索本页用到的所有文本资源中的字符串，这在查找页面中特定文本内容或者排查相关问题时非常有用。

（五）网络请求调试

网络请求调试是常规调试中的重要部分。首先，在 Chrome 开发者工具的 “网络” 选项卡下，我们能够查看各种网络请求，包括 ajax 和非 ajax 请求等，像查看 XHR（XMLHttpRequest）请求就可以清晰看到网络状态，不同的状态码代表着不同的情况，例如常见的 200 表示交互正常，302 表示重定向，304 代表缓存，403 意味着没权限，404 是没找到路径，5xx 则表示服务器端代码出现问题等。同时，还能看到网络请求是采用 post、get 等哪种请求方式，像 get 请求其参数会拼接在 url 上，而 post 请求的参数可以在最下面的 form data 或者是 pay load 中查看，另外也能查看请求的响应内容，例如通过 preview/response 可以查看返回的 json 数据等，帮助我们排查网络相关的问题以及验证接口返回是否符合预期。

（六）其他实用调试技巧

除了上述常见的调试技巧外，还有一些相对不那么常用但很实用的技巧。比如可以将选中的 dom 节点添加为全局变量，方便后续在控制台或者代码中对其进行多次引用和操作。另外，还有 “force node state” 这种调试 dom 状态的方法，通过选中 Dom 节点右键 “强制状态”，可以强制激活元素的伪类效果等，有助于我们查看一些特定状态下元素的样式和表现，辅助定位问题所在，尤其是在调试页面交互和样式变化相关的情况时会起到很好的作用。

四、Chrome ws 调试技巧

（一）网络连接相关调试

在 Chrome 进行调试时，“Network”（网络）面板是查看和搜索网络连接的关键所在。我们可以在 Network 标签下查看各种网络请求，对于 ws 连接这种特殊连接，同样能在此处进行调试查看。

在 Network 面板中，能够看到诸如 ws 连接发起的时间、当前状态等基本信息。通过筛选功能（摁住 Cmd（Mac）或者 Ctrl（Window）键，可以同时选择多个筛选条件），可以快速定位到 ws 连接相关的记录，便于重点关注其请求详情。例如，当排查 ws 连接是否正常建立、数据传输是否存在问题时，查看请求的详细信息，像请求头、响应状态等都是很重要的切入点。而且在列表头上右击，还可以添加或者删除要显示的列，按需定制展示内容，更精准地对 ws 连接进行调试分析，帮助我们及时发现和解决网络连接方面可能出现的问题。

（二）控制台快捷操作

在 Chrome 调试过程中，控制台有不少能提升效率的快捷操作技巧。

比如，我们可以在控制台快速发起请求。当需要重新发送某个已经执行过的 XHR 请求时，只需右击该请求，选择 “Replay XHR” 就可以快速再次发送请求，无需重复之前的操作步骤，这在反复验证接口返回数据等场景下非常实用。

复制 JavaScript 变量也很便捷，右键点击相应的变量，即可选择复制操作，若想在后续操作中方便地引用该变量，还可以选择将其设置为全局变量，方便多次使用。

另外，获取 Elements 面板选中元素同样有快捷方式，在元素面板中选中某个元素后，在控制台可以通过 “$0” 来引用这个选中的元素，进而可以方便地查看它的各种属性、进行相关样式修改或者调用其绑定的方法等，极大地提高了调试时对页面元素操作的便利性。

（三）其他进阶调试技巧

除了基础的调试操作，还有一些进阶技巧可以帮助我们更高效地在 Chrome 中进行 ws 调试。
一键重新发起请求功能非常实用，有时候我们修改了 ws 相关的配置或者代码逻辑后，无需重新刷新整个页面，直接利用上述提到的在 Network 面板中右击请求选择 “Replay XHR”（针对基于 XHR 的相关 ws 连接请求场景），就能快速重新发起请求验证修改是否生效。

一键展开所有 DOM 元素在查看页面结构时能节省大量时间，若面对 DOM 结构复杂，有众多子节点需要展开查看的情况，只需按住 ALT 再点击元素前的右三角符号，就可以一次性展开所有子节点，快速定位到我们关注的元素位置。

快速切换主题也是个贴心的功能，当长时间调试眼睛感到疲劳时，可以通过快捷键 CTRL + SHIFT + P 执行 “theme”（中文版本直接输入 “主题”），在弹出的选项中选择亮或暗主题进行切换，改善视觉体验。

使用条件断点则有助于更精准地定位问题，比如在怀疑 ws 连接在特定数据条件下出现异常的代码位置处，右键点击设置的断点，选择 “Edit breakpoint…”，输入执行断点的条件表达式，当表达式为 true 时断点调试才会生效，这样就能在满足特定条件时暂停代码执行，便于观察变量、分析调用堆栈等信息来排查 ws 连接相关的逻辑错误。

更多技巧，可以多搜一搜。以上仅作者所知道的一些。