使用 Developer 工具除錯擴充套件

鍍 Chrome 延伸部分最多分為 4 個部分：

• 背景頁面
• 彈出頁面
• 一個或多個內容指令碼
• 選項頁面

每個部分由於它們天生獨立，因此需要單獨除錯。

請記住，這些頁面是分開的，這意味著它們之間不直接共享變數，並且其中一個頁面中的 console.log() 在任何其他部分的日誌中都不可見。

使用 chrome devtools：

Chrome 擴充套件程式的除錯類似於其他網路應用程式和網頁。除錯通常是使用 chrome 的 devtools 檢查器完成的，分別使用 windows 和 mac 的鍵盤快捷鍵開啟： ctrl + shift + i 和 cmd + shift + i 或右鍵單擊頁面並選擇 inspect。

從檢查器開發人員可以檢查 html 元素以及 css 如何影響它們，或者使用控制檯檢查 javascript 變數的值並從開發人員設定的任何資訊中讀取輸出。

有關檢查員使用情況的更多資訊，請訪問 Chrome Devtools 。

使用 chrome：//…..yourExtensionId … /檢查彈出視窗，選項頁面和其他可訪問的頁面：

在彈出頁面和選項頁面可以分別通過檢查他們時，他們是開放的簡單訪問。

作為擴充套件的一部分的其他 html 頁面，既不是彈出頁面也不是選項頁面也以相同的方式除錯。

檢查背景頁面：

要訪問你的*背景頁面，*你必須首先導航到 chrome：// extensions / 的 chrome 擴充套件頁面。確保已啟用 開發者模式複選標記。

然後單擊 檢查檢視 旁邊的後臺指令碼以檢查後臺頁面。

檢查內容指令碼：

內容指令碼與插入的網站一起執行。你可以通過首先檢查插入內容指令碼的網站來檢查內容指令碼。在控制檯中，你將能夠檢視擴充套件程式輸出的任何 console.log()，但你將無法更改或檢查內容指令碼的變數。

要解決此問題，你必須單擊通常設定為'top'的下拉選單，然後從副檔名列表中選擇你的副檔名。

從那裡，你可以訪問擴充套件程式中的變數。