CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extensiongoogle-chrome-devtools
wlindner
wlindner

Reputation: 850

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

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.

Upvotes: 2

Views: 1210

Answers (1)

Timothée Boucher
Timothée Boucher

Reputation: 1565

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
}

Upvotes: 3

Related Questions