如何为Atom编辑器开发模式添加DevTools扩展（如React DevTools）？

我之前也遇到过类似的问题——直接照搬Electron官方文档的代码在Atom里行不通，主要是因为Atom对Electron的API做了封装，而且开发模式下的权限限制需要注意。下面是亲测有效的步骤：

第一步：找到React DevTools的本地路径 #

如果你已经在Chrome里安装了React DevTools，可以找到它的本地存储路径：

• macOS：~/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/[具体版本号]
• Windows：%LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions\fmkadmapgofadopljbjfkapdkoienihi\[具体版本号]
• Linux：~/.config/google-chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi\[具体版本号]

找不到版本号的话，打开Chrome的扩展页面（chrome://extensions/），开启"开发者模式"，就能看到React DevTools的ID和版本号了。

第二步：修改Atom的init.coffee脚本 #

打开~/.atom/init.coffee，把下面的代码粘贴进去（记得替换成你自己的扩展路径）：

# 只在开发模式下执行，避免生产模式报错
if atom.inDevMode()
  try
    # 获取Atom窗口的session对象，这是加载扩展的关键
    mainWindow = atom.getCurrentWindow()
    # 替换成你找到的React DevTools扩展路径
    reactDevToolsPath = "/Users/你的用户名/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.28.0_0"
    
    # 加载扩展
    mainWindow.webContents.session.loadExtension(reactDevToolsPath)
    console.log("React DevTools 成功加载到Atom开发模式！")
  catch err
    console.error("加载React DevTools失败：", err)

如果你不想用路径，也可以尝试直接用扩展ID加载（部分Electron版本支持）：

if atom.inDevMode()
  try
    mainWindow = atom.getCurrentWindow()
    mainWindow.webContents.session.loadExtension('fmkadmapgofadopljbjfkapdkoienihi')
    console.log("React DevTools 加载成功！")
  catch err
    console.error("加载失败：", err)

第三步：验证效果 #

重启Atom，按下Cmd+Option+I（macOS）或Ctrl+Shift+I（Windows/Linux）打开DevTools面板，就能看到新增的React标签页了。

为什么之前的代码报错？ #

1. API过时：你可能用了Electron旧版的addDevToolsExtension，这个API已经被废弃，现在应该用session.loadExtension。
2. 未判断开发模式：Atom生产模式下会禁用这类扩展加载API，直接调用会提示"方法不存在"。
3. 对象获取错误：Atom里不能直接调用原生Electron的BrowserWindow，必须通过atom.getCurrentWindow()获取当前窗口实例。

内容的提问来源于stack exchange，提问作者Narrateur du chaos