示例“自定义 DevTools 工具”是一个Microsoft Edge 扩展，可在 Microsoft Edge DevTools 中添加 自定义 工具，该工具在 活动栏中具有自己的选项卡。
简介
自定义 DevTools 工具在 Microsoft Edge 的 DevTools 中添加 “自定义 工具”选项卡和面板：
自定义工具显示内存信息，并在已检查的网页和 DevTools 中的面板之间发送消息。
自定义 DevTools 工具调用 DevTools API 以显示内存信息。
正在检查的网页和 自定义 DevTools 工具相互发送消息。
使用本文下载、安装和运行示例。 若要详细了解此示例中的代码，请参阅 在 Microsoft Edge DevTools 中添加自定义工具。
步骤 1：下载示例
如果尚未完成，请下载 Demos 存储库的“主”分支，或者克隆 (或分支，) 存储库进行克隆。 下载存储库非常简单，如下所述。
下载 Demos 存储库的“主”分支，如下所示：
在 Microsoft Edge 中，转到 MicrosoftEdge/Demos 存储库。
单击“ 代码 ”按钮中的向下箭头，然后选择“ 下载 ZIP”。
在 Microsoft Edge 中， “下载 ”对话框显示
Demos-main.zip。 添加了“-main”，表示存储库的“main”分支的静态快照。将鼠标悬停在 右侧
Demos-main.zip，然后单击“ 在文件夹中显示
按钮。文件资源管理器打开，显示“下载”文件夹。
右键单击 ，
Demos-main.zip然后选择“ 全部提取”。此时会打开 “提取压缩 (压缩) 文件夹 ”对话框。
单击“ 提取 ”按钮。
“ 完成百分比 ”对话框随即打开，然后完成。
将
Demos-main文件夹移动到 GitHub 存储库位置，例如C:\Users\localAccount\GitHub。
步骤 2：安装扩展以在 DevTools 中添加该工具
在 Microsoft Edge 中，打开一个新窗口或选项卡。
选择 “设置和更多 (
) ，将鼠标悬停在 ”扩展“上，然后选择” 管理扩展”。“ 扩展 ”选项卡和页面 ()
edge://extensions打开。打开 “开发人员模式 ”切换。
单击“
“已解压缩的加载”。此时 会打开“选择扩展目录 ”对话框。
导航到文件夹
/Demos-main/devtools-extension（如C:\Users\localAccount\GitHub\Demos-main\devtools-extension\），然后单击“ 选择文件夹 ”按钮。将显示自定义 DevTools 工具卡：
步骤 3：在 DevTools 中选择自定义工具
在 Microsoft Edge 中，转到新窗口或选项卡中的网页，例如 “To Do”应用。
自定义 DevTools 工具需要网页，而不是空选项卡。
右键单击网页，然后选择“ 检查”。
DevTools 随即打开。
在 DevTools 的活动栏中 ，单击“ 自定义 ” (“
) 工具选项卡。将显示 “自定义 工具”选项卡和面板：
如果 “自定义 (
) 工具选项卡不可见，请执行以下任一操作：单击“ 更多工具 (
) 按钮，然后选择“ “自定义”。使 DevTools 更宽，然后单击 工具选项卡) 自定义 (
。
自定义 DevTools 页包含多个部分：
内存显示信息。
一个按钮，用于将消息从 DevTools 发送到已检查的网页，使页面显示 JavaScript
alert对话框。坐标显示区域，用于将消息从检查的网页发送到 DevTools 控制台和自定义工具。
步骤 4：使用扩展 API 调用查看内存信息
在 “自定义 ”工具的 “可用内存容量”旁边，观察值的每秒更新一次：
步骤 5：将消息从 DevTools 发送到已检查页面
在 “自定义 ”工具中，单击“ Say Hello” 按钮。
将打开一个 JavaScript
alert对话框，其中显示消息：“Hello from the DevTools extension！”
DevTools 向检查的网页发送消息，导致 JavaScript 显示警报。
单击“ 确定” 按钮。
对话框将关闭。
步骤 6：将消息从检查页发送到 DevTools
在检查的网页中，单击各个位置。
在 “自定义 ”工具的 “坐标”旁边，单击周围时会显示并更新坐标：
在 DevTools 的 “活动栏”中，选择 “控制台 (
) 工具。在检查的网页中，单击各个位置。
单击的坐标显示在 控制台中：
步骤 7：修改自定义工具
如果尚未安装，请安装 Visual Studio Code。
打开 Visual Studio Code。
单击“ 文件 ”菜单，然后单击“ 打开文件夹”。
“ 打开文件夹 ”对话框随即打开。
导航到文件夹
/Demos-main/devtools-extension/（如C:\Users\localAccount\GitHub\Demos-main\devtools-extension\），然后单击“ 选择文件夹 ”按钮。在“ 资源管理器 ”窗格中，
/devtools-extension/显示文件夹。单击
panel.html。panel.html打开以编辑：
将“My”添加到标题;
<h2>更改自：<h2>Custom DevTools Tool</h2>更改为：
<h2>My Custom DevTools Tool</h2>保存
panel.html。在“资源管理器”窗格中，单击 。
manifest.jsonmanifest.json打开进行编辑。将“My”添加到 ;
name更改自："name": "Custom DevTools Tool",更改为：
"name": "My Custom DevTools Tool",保存
manifest.json。
步骤 8：重新加载修改后的自定义工具
在“Microsoft Edge”中，选择 “设置和更多” (
) ，将鼠标悬停在 “扩展”上，然后选择“ 管理扩展”。“ 扩展 ”选项卡和页面 ()
edge://extensions打开。在自定义 DevTools 工具卡中，单击“重载”链接。
卡现在将“我的自定义 DevTools 工具”显示为扩展的名称：
步骤 9：使用修改后的自定义工具
转到网页，如新窗口或选项卡中的 “To Do”应用。
自定义 DevTools 工具需要网页，而不是空选项卡。
右键单击网页，然后选择“ 检查”。
DevTools 随即打开。
在 DevTools 的活动栏中 ，单击“ 自定义 ” (“
) 工具选项卡。随即显示 “自定义” 工具，并在面板中的标题中添加了 “我 ”一词：
如果标题仍显示 “自定义 DevTools 工具” 而不是 “我的自定义 DevTools 工具”，请关闭并重新打开 DevTools。
如果 “自定义 (
) 工具选项卡不可见，请执行以下任一操作：单击“ 更多工具 (
) 按钮，然后选择“ “自定义”。使 DevTools 更宽，然后单击 工具选项卡) 自定义 (
。
这是使用和修改 DevTools 扩展示例的步骤的结束。
疑难解答
如果“ 自定义 ”选项卡在 DevTools 中不可见，或者它已过时且未显示最新的代码更改：
使 DevTools 变得很宽，以显示 活动栏中的许多工具。
关闭并重新打开 DevTools。
刷新或硬刷新检查的页面。
在 Microsoft Edge 的 “扩展 ”页中，单击扩展的“ 重载 ”。
如果未在此类扩展中提供图标，则未选择的选项卡在 活动栏右侧为窄且灰色。 单击窄灰色选项卡。
转到网页，而不是空选项卡。示例“自定义 DevTools 工具”中的代码需要网页。
活动栏较窄时，自定义开发工具将添加到活动栏上的“更多工具”菜单中。
“ 自定义 ”选项卡在右键单击菜单上没有 “从活动栏中删除” 命令。