如何从扩展程序中获取Chrome DevTools源代码编辑器中的光标位置?

27

我为Google Chrome DevTools开发了Open in Editor扩展程序,它允许使用上下文菜单在外部编辑器中打开源文件。

当UI中的文件位置包含行号(如jquery.js:2191)时,在大多数情况下(网络面板性能面板样式检查器等),它可以完美地工作。唯一的例外是资源面板。在chrome.devtools.panels.setOpenResourceHandler回调函数中没有接收到行号。

DevTools是否有一些API可以从setOpenResourceHandler()回调函数中获取源编辑器中光标位置的信息?

输入图像描述


6
也许你可以查看这个链接 https://developers.google.com/web/tools/chrome-devtools/inspect-styles/ 和这个链接 https://developers.google.com/web/updates/2015/05/go-to-a-line-number-at-a-specific-column,但仍然没有提到类似的方法。也许现在还不支持这种方法。 - Mr.Rebot
@Mr.Rebot,感谢您的建议。我已经提出了这个问题 https://bugs.chromium.org/p/chromium/issues/detail?id=747888。 - Evgeniy Generalov
请[编辑]问题以便符合主题:包括[duplicate the problem]。对于Chrome扩展或Firefox WebExtensions,您几乎总是需要包含您的manifest.json和一些背景、内容和/或弹出式脚本/ HTML,以及网页HTML /脚本。寻求调试帮助的问题(“为什么我的代码不能按照我想要的方式工作?”)必须包括:(1)所需的行为,(2)具体问题或错误和(3)在问题中重现它所需的最短代码。 请还参见:我可以在这里询问哪些主题? 和 [提问]. - Makyen
1个回答

2
这是根据报告Chrome Issue 747888解释的:

首先,setOpenResourceHandle() 是针对用户单击链接(例如控制台中的 linkified 位置)通常会导致在 DevTools 中打开源选项卡的情况,它不是在显式打开源面板中的文件时触发。对于源选项卡中文件/位置的更改,我们有 chrome.devtools.panels.sources.onSelectionChanged(请参见 布局测试 以获取示例用法),最近由 @jacobr 恢复)。

这是提到的代码示例:
function extension_testElementsOnSelectionChanged(nextTest)
{
    function onSelectionChanged()
    {
        webInspector.panels.elements.onSelectionChanged.removeListener(onSelectionChanged);
        output("onSelectionChanged fired");
        nextTest();
    }
    webInspector.panels.elements.onSelectionChanged.addListener(onSelectionChanged);
    webInspector.inspectedWindow.eval("inspect(document.body.children[0]), 0");
}

function extension_testSourcesOnSelectionChangedShowFile(nextTest)
{
    function onSelectionChanged(selectionInfo)
    {
        webInspector.panels.sources.onSelectionChanged.removeListener(onSelectionChanged);
        output("sources onSelectionChanged fired, selectionInfo:");
        dumpObject(selectionInfo, {url: "url"});
        nextTest();
    }
    webInspector.panels.sources.onSelectionChanged.addListener(onSelectionChanged);
    evaluateOnFrontend("InspectorTest.showScriptSource(\"test-script.js\")");
}

function extension_testSourcesOnSelectionChangedShowFileAndLine(nextTest)
{
    webInspector.inspectedWindow.eval("location.href", function(inspectedPageURL) {
        function onSelectionChanged(selectionInfo)
        {
            webInspector.panels.sources.onSelectionChanged.removeListener(onSelectionChanged);
            output("sources onSelectionChanged fired, selectionInfo:");
            dumpObject(selectionInfo, {url: "url"});
            nextTest();
        }
        webInspector.panels.sources.onSelectionChanged.addListener(onSelectionChanged);

        var basePath = inspectedPageURL.replace(/\/[^/]*$/, "/");
        webInspector.panels.openResource(basePath + "resources/test-script.js", 2);
    });
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接