javascript - 在 Dev Tools '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
}