首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

DevTools扩展 | DevTools Extension

Electron支持Chrome DevTools Extension,该扩展可用于扩展devtools调试流行Web框架的能力。

如何加载DevTools扩展

本文档概述了手动加载扩展的过程。您也可以尝试一下第三方工具electron-devtools-installer,它可以直接从Chrome WebStore下载扩展程序。

要在Electron中加载扩展,您需要在Chrome浏览器中下载它,找到它的文件系统路径,然后通过调用BrowserWindow.addDevToolsExtension(extension)API 加载它。

  1. 在Chrome浏览器中安装它。
  2. 导航到chrome://extensions,并找到它的扩展ID,这是一个哈希字符串fmkadmapgofadopljbjfkapdkoienihi
  3. 查找Chrome用于存储扩展名的文件系统位置:
    • 在Windows上它是%LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions;
    • 在Linux上它可能是:
      • ~/.config/google-chrome/Default/Extensions/
      • ~/.config/google-chrome-beta/Default/Extensions/
      • ~/.config/google-chrome-canary/Default/Extensions/
      • ~/.config/chromium/Default/Extensions/
代码语言:txt
复制
- on macOS it is `~/Library/Application Support/Google/Chrome/Default/Extensions`.
  1. 将扩展的位置传递给BrowserWindow.addDevToolsExtensionAPI,对于React Developer Tools来说,它就像这样:~/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/0.15.0_0

注:BrowserWindow.addDevToolsExtension发射应用模块的准备事件之前API不能叫。

扩展名由返回BrowserWindow.addDevToolsExtension,您可以将扩展的名称传递给BrowserWindow.removeDevToolsExtensionAPI以将其卸载。

支持的DevTools扩展

Electron仅支持一组有限的chrome.*API,因此一些使用不支持chrome.*的Chrome扩展功能的扩展可能无法使用。以下Devtools扩展程序经过测试并保证可以在Electron中工作:

如果DevTools Extension无法正常工作,我应该怎么做?

首先请确保扩展程序仍在维护中,一些扩展程序甚至无法用于最新版本的Chrome浏览器,我们无法为它们做任何事情。

然后在Electron的问题列表中提交错误,并描述扩展的哪一部分没有按预期工作。

扫码关注腾讯云开发者

领取腾讯云代金券