A chrome extension is seperated into a maximum of 4 parts:
Each part, since they are innately separate, require individual debugging.
Keep in mind that these pages are separate, meaning that variables are not directly shared between them and that a
console.log() in one of these pages will not be visible in any other part's logs.
Using the chrome devtools:
Chrome extensions are debugged similar as to other webapps and webpages. Debugging is most often done with the use of chrome's devtools inspector opened by using the keyboard shortcut for windows and macs respectively: ctrl+shift+i and cmd+shift+i or by right clicking on the page and selecting inspect.
console.log()s the developer(s) set up.
More information about the usage of the inspector can be found at Chrome Devtools.
Inspecting the popup, options page, and other pages accessible using chrome://.....yourExtensionId.../:
The popup page and options page can each be accessed simply by inspecting them when they are open.
Additional html pages that are part of the extension, but are neither the popup nor the options page are also debugged the same way.
Inspecting the background page:
To access your background page you must first navigate to the chrome extension page at chrome://extensions/. Make sure the 'Developer mode' checkmark is enabled.
Inspecting content scripts:
Content scripts run along-side the websites they were inserted into.
You can inspect the content script by first inspecting the website where the content script is inserted.
In the console you will be able to view any
console.log()s outputted by your extension, but you will not be able to change or inspect the content script's variables.
From there you will have access to the variables within your extension.