javascript - 在开发工具 'Sources' 面板中以编程方式打开 JS/CSS 文件

Question

我知道可以将我自己的面板添加到 Chrome 开发人员工具中，但是是否可以单击我自己的面板中的按钮并让开发人员工具在“源”面板中打开特定的脚本或样式表(该面板是其一部分)他们正在检查的页面是什么？

如果您确切知道要查找的内容，则可以从左侧菜单中打开文件，但我基本上只想提供一个快捷方式来打开特定文件进行编辑。

Answer 1

现在有 openResource API:

chrome.devtools.panels.openResource(string url, integer lineNumber, function callback)

如 chrome.devtools docs 中所述.

您将要检查的文件的绝对 URL 传递给它，并带有可选的行号和回调。行号是从 0 开始的，而在 UI 中是从 1 开始的。因此，如果您想在 UI 中打开第 10 行，则需要在该函数调用中传递 9。

在撰写本文时，文档中有关回调函数的信息是错误的:回调函数在成功和失败时调用，并采用一个参数。该参数是一个描述结果的对象。

成功后，您将获得:

{
    code: "OK",
    description: "OK",
    details: []
}

出错时，您会得到:(可能还有其他错误情况)

{
    code: "E_NOTFOUND",
    description: "Object not found: %s",
    details: [
        "http://localhost/foo.js"
    ],
    isError: true
}