以編程方式在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 
}