Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use console.log() to debug a Chrome extension?

Tags:

I'm trying to debug my Chrome extension using

console.log("message"); 

My extension works fine (for the most part), I'm clicking buttons that call function which perform something. Every function as a consloe.log() debug line.

If I open the chrome console (ctrl + shift + i) after chrome loads, it remains empty, no matter what I do. Chrome is set to developer mode.

like image 872
Casady Avatar asked May 30 '13 21:05

Casady


People also ask

How do I debug Chrome extensions?

# Background scriptNavigate to the chrome extensions management page at chrome://extensions and ensure developer mode is on. Click the Load Unpacked button and select the broken extension directory. After the extension is loaded, it should have three buttons: Details, Remove and Errors in red letters.

How do I inspect a Google extension?

To view the Chrome Developer Tools for a pop-up, right-click the extension icon to the right of the browser address bar, and select Inspect Element. (In earlier versions of Chrome, this was done by selecting Inspect pop-up.)

How do I open debug console in Chrome?

To open the developer console in Google Chrome, open the Chrome Menu in the upper-right-hand corner of the browser window and select More Tools > Developer Tools. You can also use Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux).


1 Answers

Make sure that you are opening the correct dev console. You need to go to the generated background page for the background page console and right click -> inspect popup for the popup console. There was an answer to a similar question with a nice gif, I will link it if I can find it.

like image 196
BeardFist Avatar answered Oct 23 '22 09:10

BeardFist