Передать текущий выбранный элемент в devtools в javascript в электронном виде

Question

Я хочу, чтобы пользователь мог выбрать элемент HTML через devtools в электронном. Я знаю, что вы можете получить это с переменной $ 0. Проблема в том, что он доступен только в консоли инструментов разработчика.

Я заглянул в Chrome DevTools Protocol и обнаружил Runtime.evaluate, в котором есть параметр для включения командной строки api. Это, кажется, работает со всем, кроме $ 0, хотя. Я могу вызвать clear (), $ () и другие вещи. Но $ 0 не определено.

let debug = mainWindow.webContents.debugger;
debug.attach();

mainWindow.webContents.on("devtools-opened", () => {
    devToolsOpen = true;
    myEmitter.emit("devtoolsready");
});

mainWindow.webContents.on("devtools-closed", () => {
    devToolsOpen = false;
});

//coords from renderer mouse event
ipcMain.on("inspectelement", (event, pageX, pageY) => {
    mainWindow.webContents.inspectElement(pageX, pageY);
    //if the devtools are not ready yet, wait for the event before executing the function
    if (devToolsOpen === false) {
        myEmitter.once("devtoolsready", devToolsFunction)
    }
    else {
        devToolsFunction();
    }

    async function devToolsFunction() {

        let backendNodeId = (await debug.sendCommand("DOM.getNodeForLocation", { x: pageX, y: pageY })).backendNodeId;
        let resolvedNode = (await debug.sendCommand("DOM.resolveNode", { backendNodeId: backendNodeId }));
        let js$0False = (await debug.sendCommand("Runtime.evaluate", { expression: "alert($0)", includeCommandLineAPI: false }));
        let js$0True = (await debug.sendCommand("Runtime.evaluate", { expression: "alert($0)", includeCommandLineAPI: true }));

        console.log(backendNodeId);
        console.log(resolvedNode);
        //Fails because $0 is not defined, does not alert
        console.log(js$0False);
        //$0 is set to undefined
        console.log(js$0True);
    }
});

Я также пытался добраться до элемента через внутренние представления dom с помощью Dom.getNodeForLocation, но я не знаю, как мне получить фактический элемент с этим.

$ 0, будучи неопределеннымМне кажется, это ошибка, но я не уверен.

Answer 1

После еще нескольких экспериментов кажется, что devtools и протокол devtools не разделяют $ 0. Обходной путь должен выдвинуть выбранный узел во внешний интерфейс и затем вызвать setInspectedNodeПосле этого переменная будет установлена ​​и доступна.

//required for subsequent calls. Not sure if it is needed for every call but maybe 
//it does not update automaticly so it stays here
let doc = (await debug.sendCommand("DOM.getDocument"));

//backend id of the node at mouse position
let backendNodeId = (await debug.sendCommand("DOM.getNodeForLocation", { x: pageX, y: pageY })).backendNodeId;

//needed to push the backend node to the fron
let front = (await debug.sendCommand("DOM.pushNodesByBackendIdsToFrontend", { backendNodeIds: [backendNodeId] }));

//it seems like the devtools context and this one do not share $0.
//Because of this you need to call setInspectedNode, after which it will be set and accessible
let inspect = (await debug.sendCommand("DOM.setInspectedNode", { nodeId: front.nodeIds[0] }));

//write $0 to another var accessable from a normal js context
let js$0True = (await debug.sendCommand("Runtime.evaluate", { expression: "selectedNode = $0", includeCommandLineAPI: true }));