使用 React Devtools 调试浏览器扩展程序里的 React 代码

[lmk123]

最近正在用 React 开发新版划词翻译，在调试上遇到了不小的麻烦。

普通的网站项目可以直接安装 React Devtools 提供的浏览器扩展进行调试，但是划词翻译本身就是一个扩展程序，而扩展程序相互之间是访问不到执行环境的，所以我自然也没法用 React Devtools 扩展程序调试划词翻译里的 React 代码。

我本来以为这是没办法解决的，所以只好用 Chrome 开发者工具调试代码，但随着代码逻辑越来越复杂，这样的调试方式就越来越痛苦了——

直到我无意中发现，CodeSandbox 这个网站把 React Devtools 嵌入到网页中去了（见 https://codesandbox.io/s/dk9gj），也就是说，我应该也可以把 React Devtools 嵌入到我的扩展程序中来调试代码！

本来以为我可以造个小轮子了，但没想到官方早就解决了这个问题 :joy:

React Devtools 其实有三种使用形式：

• 浏览器扩展程序，这是最常用的形式了，它的源码在 https://github.com/facebook/react/tree/master/packages/react-devtools-extensions
• inline 使用形式，CodeSandbox 就是用了这种形式将 React DevTools 内嵌到了网页当中，源码在 https://github.com/facebook/react/tree/master/packages/react-devtools-inline
• Electron App 形式，我用的就是这种，源码在：https://github.com/facebook/react/tree/master/packages/react-devtools

Electron App 形式很适合给浏览器扩展程序来用，简单记录一下使用步骤：

首先，运行 yarn add --dev react-devtools。安装过程中会下载 Electron，国内用户可以在 .npmrc 文件中加一行 electron_mirror=https://npm.taobao.org/mirrors/electron/ 加速下载过程。

然后，在想要调试的代码文件最前面加上 import 'react-devtools'。比如我想调试我的内容脚本的代码，那么改动如下：

import 'react-devtools' // <- 一定要加在最前面

import * as React from 'react'
import * as ReactDOM from 'react-dom'
...

最后开两个终端窗口，一个运行 yarn run dev 启动项目的开发环境，另一个运行 yarn run react-devtools 打开用于调试的 Electron App，过一会儿之后，Electron App 就会显示内容脚本里 React 的组件树了，如果很长时间都没显示，那么可以试一下重新运行 yarn run dev。

一些注意事项：

• Electron App 只能处理一个调试任务，它会显示最近一次连接到它的调试信息，但是 react-devtools 会使用轮询的形式时不时连接一下，所以就导致了多个标签页轮流连接到 Electron App 的情况。建议开发的时候限制一下内容脚本的应用范围，比如让内容脚本只应用到一个特定的网页；如果要调试设置页，那么可以暂时删掉内容脚本等其它页面中的 import 'react-devtools'

大功告成。