Chrome DevTools会在“元素"面板中侦听同一元素的多个选择 [英] Chrome DevTools listen to multiple selections of the same element in the elements panel

问题描述

在我的Google Chrome DevTools扩展程序中，我尝试收听DevTools面板元素"中的选择.特别是，应该可以听取已选择元素的选择.

In my Google Chrome DevTools Extension I try to listen to the selections in the DevTools panel "Elements". In particular, it should be possible to listen to the selection of the already selected element.

我当前的实现方法围绕函数chrome.devtools.panels.elements.onSelectionChanged.函数名称已经暗示只能对当前未选择的元素做出反应. 因此，我尝试使用帮助变量$0重置或删除当前选择，以便能够再次收听同一元素-不幸的是没有成功.

My current implementation method revolves around the function chrome.devtools.panels.elements.onSelectionChanged. The function name already suggests that it is only possible to react to elements that are not currently selected. Therefore I tried to reset or remove the current selection with the help variable $0, to be able to listen to the same element again - unfortunately without success.

我的目标是以某种方式听取元素面板中的每次单击/选择.总之，我正在寻找一个onSelection侦听器，而不是一个onSelectonChange侦听器.

My goal is to somehow listen to every click/selection in the elements panel. In summary, I am looking for an onSelection listener instead of an onSelectonChange listener.

编辑#1

这是我尝试过的代码:

chrome.devtools.panels.elements.createSidebarPane(
    "Selector",
    function(sidebar) {
        // It fires if I'm selecting a specific DOM element via the elements panel the first time
        // It won't fire if I'm selecting the same DOM element again
        chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
            chrome.devtools.inspectedWindow.eval(`(${getSelector})()`,
            selector => {
                console.log(selector)
                // Here I tried to reset the current selection...
                // I've already debugged it: I can assign a value to $0, 
                // but this implies that the value remains constant even 
                // after a new selection.
                chrome.devtools.inspectedWindow.eval('$0 = undefined')
            })
        })
    }
)

我想知道是否可以通过编程方式更改选择器...

I am wondering if there is a way to change the selector programmatically...

推荐答案

我实际上找到了解决方案.

I found a solution actually.

似乎我忽略了Chrome DevTools文档中的功能inspect(<domElement>).使用此功能可以以编程方式更改辅助变量$0.我在每个chrome.devtools.panels.elements.onSelectionChanged.addListener()函数调用的末尾调用inspect(document.body)，因此所有其他DOM元素都可以再次选择(几次).

It looks like I overlooked the function inspect(<domElement>) in the Chrome DevTools documentation. With this function it is possible to programmatically change the auxiliary variable $0. I call inspect(document.body) at the end of each chrome.devtools.panels.elements.onSelectionChanged.addListener() function call, thus all other DOM elements become selectable again (several times).

注意:理想情况下，您应该在不想多次选择的DOM元素上调用inspect(<domElement>).

Note: Ideally you should call inspect(<domElement>) on that DOM element where you know you don't want to select it multiple times.

我希望我可以帮助遇到同样问题的人.

I hope that I could help someone with the same problem.

这篇关于Chrome DevTools会在“元素"面板中侦听同一元素的多个选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！