Programmatically Open JS/CSS File in Dev Tools 'Sources' Panel

Question

I know it's possible to add my own Panel to the Chrome Developer Tools, but is it possible to click a button in my own panel and have the Developer Tools open a specific script or stylesheet in the 'Sources' panel that is part of the page they are inspecting?

It's possible to open the file from the menu on the left if you know exactly what you are looking for, but I want to basically just provide a shortcut to open a specific file for editing.

I don't mind getting my hands dirty with an _unofficial_ way of doing it :) — wlindner, Aug 03 '13 at 21:55
well, that kind of stinks that it requires such a hack, but I appreciate you pointing me in the right direction so I don't waste too much time trying to get it to work. — wlindner, Aug 04 '13 at 03:14

score 3 · Answer 1 · edited Feb 15 '16 at 15:14

There is now the openResource API:

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

as described in the chrome.devtools docs.

You pass it the absolute URL of the file to inspect, with optional line number and callback. The line number is 0-based while it's 1-based in the UI. So if you want to open line 10 in the UI, you need to pass 9 in that function call.

At time of writing, the documentation is wrong on the callback function: it is called on success and failure and takes one argument. That argument is an object describing the result.

On success, you get:

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

On error, you get: (there might be other error cases)

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

Programmatically Open JS/CSS File in Dev Tools 'Sources' Panel

1 Answers1