DevTools 页面

article/2025/10/8 10:40:31

DevTools基础内容

DevTools 扩展为 Chrome DevTools 添加了功能。它可以添加新的 UI 面板和侧边栏，与检查的页面交互，获取有关网络请求的信息等等。 DevTools 扩展可以访问一组额外的 DevTools 特定的扩展 API：

  • devtools.inspectedWindow
  • devtools.network
  • devtools.panels

DevTools 扩展的结构与任何其他扩展一样：它可以有一个背景页面、内容脚本和其他项目。此外，每个 DevTools 扩展都有一个 DevTools 页面，可以访问 DevTools API。

创建 DevTools 扩展

  • 要为您的扩展创建 DevTools 页面，请在扩展清单中添加 devtools_page 字段：
{"name": ..."version": "1.0","minimum_chrome_version": "10.0","devtools_page": "devtools.html",...
}
  • 添加devtools_page对应的html页面并引入对应的js
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="./devtools.js"></script></head><body>我的工具台</body>
</html>

chrome.devtools.network.onRequestFinished.addListener(function (request) {//request 包含请求响应数据，如：url,响应内容等//request.request.url 接口 的url//request.getContent 接口返回的内容}
);

chrome.devtools.network

描述
使用 chrome.devtools.network API 检索有关网络面板中开发者工具显示的网络请求的信息。

getHAR： 返回包含所有已知网络请求的 HAR 日志。

chrome.devtools.network.getHAR(callback:(harLog) => {}
)

onNavigated： 当被检查的窗口导航到新页面时触发

chrome.devtools.network.onNavigated.addListener(callback:(url) => {}
)

onRequestFinished： 当网络请求完成且所有请求数据可用时触发。

chrome.devtools.network.onRequestFinished.addListener(callback: (request) => {},
)

chrome.devtools.panels

描述
使用 chrome.devtools.panels API 将您的扩展程序集成到开发人员工具窗口 UI：创建您自己的面板、访问现有面板并添加侧边栏。

chrome.devtools.panels.create： 创建面板

chrome.devtools.panels.create("名称","图标","页面",function(panel) { ... });

在devtools.js里添加如下代码：

chrome.devtools.panels.create("abcd","hello_extensions.png","hello-panel.html",function (panel) {console.log("创建完成：", panel)});

打开控制台可以看到自己创建的面板
在这里插入图片描述
chrome.devtools.panels.elements.createSidebarPane： 在面板中创建侧边栏

在devtools.js里添加如下代码：

chrome.devtools.panels.elements.createSidebarPane("自定义属性",function (sidebar) {sidebar.setPage("hello-panel-sidebar.html");sidebar.setHeight("30px");}
);

在这里插入图片描述
其他内容略

chrome.devtools.inspectedWindow

描述
使用 chrome.devtools.inspectedWindow API 与被检查窗口交互：获取被检查页面的标签 ID、在被检查窗口的上下文中评估代码、重新加载页面或获取页面内的资源列表。

在检查窗口中执行代码
eval 方法为扩展提供了在被检查页面的上下文中执行 JavaScript 代码的能力。这种方法在正确的上下文中使用时很强大，但在使用不当时很危险。除非您需要 eval 方法提供的特定功能，否则请使用 tabs.executeScript 方法。

demo：检查页面中 jQuery 版本

chrome.devtools.inspectedWindow.eval("jQuery.fn.jquery",function(result, isException) {if (isException) {console.log("the page is not using jQuery");} else {console.log("The page is using jQuery v" + result);}}
);

getResources： 从检查的页面检索资源列表。

chrome.devtools.inspectedWindow.getResources(callback: resources => {},
)

reload： 重新加载检查过的页面。

chrome.devtools.inspectedWindow.reload(reloadOptions?: object,
)
  • object
    • ignoreCache：当为 true 时，加载器将绕过加载事件触发之前加载load的所有检查页面资源的缓存。效果类似于在检查窗口或开发人员工具窗口中按 Ctrl+Shift+R。
    • injectedScript：如果指定，脚本将在加载后立即注入到检查页面的每个框架中，在任何框架的脚本之前。在后续重新加载后不会注入脚本——例如，如果用户按下 Ctrl+R。

chrome.devtools.inspectedWindow.onResourceAdded.addListener： 当新资源添加到检查页面时触发。

chrome.devtools.inspectedWindow.onResourceAdded.addListener(callback: function,
)

chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener： 提交资源的新修订时触发（例如，用户在开发者工具中保存资源的编辑版本）。

chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener(callback: function,
)

控制台向内容脚本发消息

DevTools 页面不能直接调用 scripting.executeScript。要从 DevTools 页面注入内容脚本，您必须使用 inspectedWindow.tabId 属性检索被检查窗口选项卡的 ID，并向后台页面发送消息。从后台页面调用 scripting.executeScript 注入脚本。

注： 如果已注入内容脚本，则可以使用 eval 方法添加其他上下文脚本。

demo1

devtools.js

//定义一个端口
var port = chrome.runtime.connect({name: "devtools-page"
});
//监听回复的消息
port.onMessage.addListener(function (message) {if (message.state == 'ok') {alert("对面回复消息了")}
});
//发送消息，发送一个脚本
port.postMessage({tabId: chrome.devtools.inspectedWindow.tabId,scriptToInject: "content_script.js",  //消息内容 alert(document.getElementsByTagName('h1')[0].innerText)
});

注入页面的脚本里
这里就用上一篇文章：扩展实现：Content Scripts、跨越请求、国际化、NPAPI 插件、消息传递、可选权限
中的a.js

chrome.runtime.onConnect.addListener(function (devToolsConnection) {var devToolsListener = function (message, sender, sendResponse) {// 将脚本注入到页面chrome.scripting.executeScript({target: { tabId: message.tabId },files: [message.scriptToInject]})}// 消息监听devToolsConnection.onMessage.addListener(devToolsListener);//发送消息devToolsConnection.postMessage({state: "ok"});//当连接断开后移出监听devToolsConnection.onDisconnect.addListener(function () {devToolsConnection.onMessage.removeListener(devToolsListener);});
})

background.js

chrome.runtime.onConnect.addListener(function (devToolsConnection) {var devToolsListener = function (message, sender, sendResponse) {// 将脚本注入到页面chrome.scripting.executeScript({target: { tabId: message.tabId },files: [message.scriptToInject]})}// 消息监听devToolsConnection.onMessage.addListener(devToolsListener);//发送消息devToolsConnection.postMessage({state: "ok"});//当连接断开后移出监听devToolsConnection.onDisconnect.addListener(function () {devToolsConnection.onMessage.removeListener(devToolsListener);});
})

问题点：

  • 因为是控制台向内容脚本发消息，所以必须当打开控制台时才会发送消息。这个研究了好久才发现了触发机制
  • 一开始没在background.js 里写代码，但是一直报错。后来在background.js里加入一样的代码后才可以正常执行。个人觉得应为background.js是常驻的，因此充当了一个中转站的角色

效果
在这里插入图片描述

demo2

相对于demo1，使用eval方法时直接在devtools.js添加如下代码即可。当打开页面的控制台后，代码将会执行

chrome.devtools.inspectedWindow.eval("alert(document.getElementsByTagName('h1')[0].innerText)");

从内容脚本到 DevTools 页面的消息传递

DevTools 页面和内容脚本之间的消息传递是间接的，通过后台页面的方式。
向内容脚本发送消息时，后台页面可以使用 tabs.sendMessage 方法，该方法将消息定向到特定选项卡中的内容脚本。

这种方式其实更加常用，上面那种要打开控制台才能执行，一般情况下使用不到。

从内容脚本发送消息时，没有现成的方法可以将消息传送到与当前选项卡关联的正确 DevTools 页面实例。作为一种解决方法，您可以让 DevTools 页面与后台页面建立长期连接，并让后台页面保留一个选项卡 ID 到连接的映射，以便它可以将每条消息路由到正确的连接。

background.js

var connections = {};//添加连接监听
chrome.runtime.onConnect.addListener(function (port) {var extensionListener = function (message, sender, sendResponse) {if (message.name == "init") {connections[message.tabId] = port;}// 下面可以处理其他的消息if (message.info == '哈哈哈') {console.log('收到了哈哈哈')}}// 监听控制台发送的消息port.onMessage.addListener(extensionListener);//当监听端口后移出监听，删除存储的页面port.onDisconnect.addListener(function (port) {port.onMessage.removeListener(extensionListener);var tabs = Object.keys(connections);for (var i = 0, len = tabs.length; i < len; i++) {if (connections[tabs[i]] == port) {delete connections[tabs[i]]break;}}});
});//接收并回复消息
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {// Messages from content scripts should have sender.tab setif (sender.tab) {var tabId = sender.tab.id;if (tabId in connections) {connections[tabId].postMessage(request);} else {alert("Tab not found in connection list.")}} else {alert("sender.tab not defined.")}return true;
});

DevTools 页面（或面板或侧边栏面板）建立这样的连接

// 创建一个关联后台页面的连接
var backgroundPageConnection = chrome.runtime.connect({name: "panel"
});backgroundPageConnection.postMessage({name: 'init',tabId: chrome.devtools.inspectedWindow.tabId
});
backgroundPageConnection.postMessage({info: '哈哈哈'
});

效果
打开背景页的控制台可以看到如下内容
在这里插入图片描述


http://chatgpt.dhexx.cn/article/moRpU1th.shtml

相关文章

vue devtools调试工具安装（详细）

vue devtools调试工具安装（详细）

Vue调试工具安装&#xff08;vue devtools&#xff09; 第一步&#xff1a;下载vue-devtools 创建一个空的文件夹&#xff0c;命名最好可以见名知意&#xff0c;复制目录后打开命令行 在cmd中进入此文件夹目录下&#xff0c;输入npm install vue-devtools命令开始下载&#xff…
阅读更多...
浏览器 DevTools使用

浏览器 DevTools使用

原文地址 Start 本文将会介绍浏览器devtool的一些常用工具方法&#xff0c;这些工具能够以可视化的方式展现当前网页情况&#xff0c;我们也能快速定位代码问题&#xff0c;如果我们能很好的利用起来&#xff0c;那就能写出高质量代码。 Performance(重点) 强大的性能监控工具…
阅读更多...
热部署Devtools

热部署Devtools

热部署Devtools 1.添加devtools到项目中 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><scope>runtime</scope><optional>true</optional> </dependenc…
阅读更多...
React-DevTools开发者工具安装

React-DevTools开发者工具安装

React开发者工具最简单的安装方式自然是科学上网&#xff0c;通过Google Chrome浏览器访问应用商店安装了。以下介绍另一种安装方式&#xff1a;基于 react-devtools的GitHub项目源码编译进行插件安装。 目录 React-DevTools&#xff1a;GitHub项目地址 React-DevTools&#x…
阅读更多...
react-devtools安装教程

react-devtools安装教程

有时候看网上各路大神&#xff0c;写如何安装react-devtools&#xff0c;大神就是大神&#xff0c;好多步骤一笔带过&#xff0c;导致一些学习者看的一脸懵逼&#xff0c;今天我给大家讲超级简单的react-devtools安装步骤&#xff0c;相信看过的小伙伴儿不存在懵逼状态&#xf…
阅读更多...
VUE3 VUE-DEVTOOLS 安装

VUE3 VUE-DEVTOOLS 安装

VUE3 Vue-Devtools 正确安装&#xff0c;亲测有效 写在前面正确的安装方式下载源码编译安装 写在前面 最近在学习Vue3。学习Vue自然离不开debug。Vue官方发布了调试工具Vue-Devtools。 官方网址&#xff1a;Vue-Devtools。 对于Vue3&#xff0c;Vue-Devtools没有正式的发布&a…
阅读更多...
如何在生产环境使用devtools？

如何在生产环境使用devtools？

经常会有在生产环境使用devtools插件的需求&#xff0c;但是看别人操作之后自己就老是忘记&#xff0c;在这儿记录一下在生产环境使用devtools的整个过程。 1、原理 其实是否使用devtools是根据Vue.config.devtools这个配置来决定的&#xff0c;这个配置在开发环境下会被设为t…
阅读更多...
mac安装vue-devtools

mac安装vue-devtools

一.先查看电脑是否安装了node 没有安装node则需要安装node mac 安装node.js 第一步&#xff1a;官网下载 访问nodejs官网&#xff0c;链接: https://nodejs.org/en/&#xff0c;选择红色选框内的点击安装。 LTS是稳定版。 Current是最新版本&#xff0c;最新的功能特性都在这…
阅读更多...
devtool使用介绍(1)

devtool使用介绍(1)

devtool使用介绍1 SDK中devtool的工作流程2.4.1 使用 devtool add添加应用程序 SDK中devtool的工作流程 可扩展SDK的核心要件是一个命令行工具&#xff0c;称为devtool。该工具提供了许多功能&#xff0c;可以帮助你在可扩展的SDK中构建&#xff0c;测试和打包软件&#xff0c…
阅读更多...
vue-devtools-简介、下载、安装、配置、使用

vue-devtools-简介、下载、安装、配置、使用

一、简介 vue-devtools是一款基于chrome游览器的插件&#xff0c;可以用于调试vue应用&#xff0c;也可以用来辅助我们找到各页面对应的Vue.js文件路径&#xff0c;这将极大地提高我们的开发和调试效率。 二、下载 下载路径&#xff1a;https://github.com/vuejs/vue-devtoo…
阅读更多...
DevTools使用

DevTools使用

Chrome DevTools是内嵌在Chrome浏览器里的一组用于网页制作和调试的工具。使用DevTools&#xff0c;可以在平时中的开发调试中极大的提高效率。 使用快捷键ctrlshifti或者f12可以直接打开开发者工具。 在DevTools开发者工具一共有九个部分。 Element 在这张图中&#xff0c;右…
阅读更多...
下载、编译、安装、使用 vue-devtools

下载、编译、安装、使用 vue-devtools

不少人都想下载 vue-devtools插件&#xff0c;但又不会做&#xff0c;今天我做个比较详细的笔记 查看当前的devtools的版本可以去这个网站看右侧的个v几点几的&#xff0c;就是版本号 github/vuejs/devtools 目录 第一个方法&#xff1a;使用极简插件 第一步&#xff1a;查…
阅读更多...
Vue调试工具vue-devtools的安装与使用

Vue调试工具vue-devtools的安装与使用

目录 前言 一、vue-devtools是什么&#xff1f; 二、vue-devtools安装 1.下载vue-devtools工具 2.安装vue-devtools工具 三、vue-devtools的使用 总结 前言 主要介绍vue-devtools的安装与使用。 一、vue-devtools是什么&#xff1f; vue-devtools是一款基于chrome游览器…
阅读更多...
devTools最新安装方法

devTools最新安装方法

VUE DevTools 最新安装方法 啊头疼&#xff01;最近学习vue&#xff0c;要用到devtools&#xff0c;网上搜索资料&#xff0c;发现都不行&#xff0c;然后就试了好久好久&#xff0c;终于&#xff0c;成功了&#xff0c;接下来划重点&#xff01;仔细看&#xff01;&#xff0…
阅读更多...
Devtools的简单使用

Devtools的简单使用

一.Devtools作用 方便我们实时地观察自己写的数据和组件的状况等。 二.安装 极简插件_Chrome扩展插件商店_优质crx应用 <template><div class""></div> </template><script> export default {data() {return {name:芜湖, //单项数据…
阅读更多...
devtools安装

devtools安装

文章目录 一、devtools安装二、参考、推荐、补充 一、devtools安装 vue官网上找到vue-devtools的GitHub项目 https://github.com/vuejs/devtools 我选择放在E盘中新建的devtools文件中&#xff0c;解压 进入解压好的devtools-main文件夹中 这里默认已经下载了node 然后在…
阅读更多...
使用浏览器这么多年，你真的了解DevTools吗？

使用浏览器这么多年，你真的了解DevTools吗？

Devtools是Web测试时每天都要用的工具&#xff0c;它提供了很多调试功能&#xff0c;可以帮助我们更好的定位问题。而我们平时使用的功能只是它全部功能的子集&#xff0c;很多功能并没用到过。 作为高频使用的工具&#xff0c;还是有必要好好掌握的。测试时在日常工作中提BUG…
阅读更多...
前端开发工具DevTools的详细知识点总结（一）

前端开发工具DevTools的详细知识点总结（一）

文章目录 打开DevTools元素面板Style面板Computed面板devtools取色器 控制台面板基本功能介绍控制台应用 网络面板功能区介绍分析请求 结语 打开DevTools devtools,即Chrome 开发者工具&#xff0c;Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具&#xff…
阅读更多...
最新版的配置热加载工具DevTools

最新版的配置热加载工具DevTools

最新版的配置热加载工具 DevTools 在SpringBoot开发调试中&#xff0c;如果我每行代码的修改都需要重启再调试&#xff0c;可能比较费时间&#xff1b;SpringBoot团队针对此问题提供了spring-boot-devtools&#xff08;简称devtools&#xff09;插件&#xff0c;用此插件提升开…
阅读更多...
（十七）Spring Boot devtools

（十七）Spring Boot devtools

1、devtools简介 Spring Boot 提供了一组开发工具 spring-boot-devtools 可以提高开发者的工作效率&#xff0c;开发者可以将该模块包含在任何项目中&#xff0c;spring-boot-devtools 最方便的地方莫过于热部署了。 2、devtools 实战 2.1 基本用法 要想在项目中加入 devtoo…
阅读更多...
推荐文章

Copyright @ 2022~2023