如何在 Firefox 控制台中訪問附加內容腳本？

Question

我為 Firefox 和 Chrome 開發了一個附加組件。 它有內容腳本。 我想在瀏覽器選項卡的控制台中訪問它們（在 Firefox 上的Web 控制台）。 例如，我想在控制台的內容腳本中輸入一個定義的全局變量，它會輸出它的值。

在 Chrome 中，我可以通過按F12打開控制台，然后導航到開發人員工具中的控制台選項卡。 它有一個下拉框，就在過濾器按鈕之后，用於選擇我所在的上下文（頁面/內容腳本）：

在 Firefox 中，如何做同樣的事情？

Answer 1

似乎不存在將Web 控制台的上下文/范圍（使用Ctrl - Shift - K或F12直接打開並選擇控制台選項卡）更改為擴展內容腳本的上下文/范圍的能力。 此外，在 Firefox 中查看控制台的任何其他方式都不存在此功能。 應在 Bugzilla上提交請求此功能的錯誤/RFE ； 這將是非常有用的。 您將希望 RFE 清楚地說明應該能夠切換到選項卡中每個框架（即頂部框架和每個子框架）的內容腳本上下文/范圍。 控制台和調試器都應該是這種情況。

注意：您可以通過從框架選擇器下拉菜單中打開的下拉菜單中選擇框架，將控制台更改為 iframe 頁面腳本的上下文/范圍：

如果此下拉圖標沒有出現，請轉到 DevTools 設置並選中“選擇 iframe 作為當前目標文檔”。 但是，這樣做 A) 不會切換到內容腳本上下文/范圍，並且 B) 不能與 Web 調試器一起正常工作（在當前版本的 Firefox 和 Nightly (54.0a1) 中進行測試）。

網頁調試器

您可以將 Web 調試器（ Ctrl - Shift - S或F12並選擇調試器選項卡）與 WebExtension 內容腳本一起使用。 擴展的內容腳本列在moz-extension:// URL 下的“來源”中。 您需要確定用於擴展的 UUID 。 您可以查看變量的內容、設置斷點等。但是，這不會使您能夠顯式切換到子框架的上下文。 放置debugger; 在子 iframe 中運行的 JavaScript 中的指令無效。

Web Debugger 調試內容腳本（在頂部框架中）：

后台腳本上下文中的控制台

如果您想打開位於 WebExtensions 后台腳本上下文中的控制台，您可以通過單擊about:debugging擴展程序的Debug按鈕來實現。 但是，這不會讓您訪問內容腳本上下文中的控制台。

在 iframe 中查看變量值的解決方法

對於您需要的：明確指出值在 iframe 上下文中，而不是在頂部框架中； 我看到這樣做的兩種方法：

• 使用帶有信息的console.log()清楚地表明腳本相信它正在 iframe 中運行。 例如：

   console.log('In iframe', 'foo=', foo);

  因此，您不必在每次調用console.log()都使用'In iframe' ，您可以創建一個函數，將該文本添加到對該函數的所有調用之前。 您甚至可以覆蓋console.log()函數，這樣您的代碼仍然只調用console.log() 。

  但是，這只會告訴您您的代碼認為它正在 iframe 中運行。 您可能正在調試的部分內容是您的內容腳本代碼檢測到它在 iframe 中。

  此方法並不能確定報告的值實際上在 iframe 中。

• 使用Element.dataset或其他 DOM 元素屬性將值存儲到 DOM 中，然后檢查 DOM 中的這些值。 為了查看這些屬性，我發現DOM Inspector非常清楚地顯示了這些：

  

  該方法可用於明確顯示值是 iframe 中的值，以及確切顯示是哪個 iframe，而無需依賴 iframe 中運行的代碼來准確確定它在 iframe 中以及它在哪個 iframe 中。

Answer 2

一個簡單的解決方案是在內容腳本中使用console.log()然后單擊源映射鏈接以查看腳本。 如下所示：

Answer 3

這還不可能。 有一個錯誤實現 UI，用於將上下文切換到為此打開的內容腳本（自 2017 年 11 月起）。

Answer 4

在 Firefox Developer Edition 中，進入“about:debugging”頁面並單擊附加組件旁邊的“Debug”按鈕以打開開發工具。