Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

About debugging chrome extension

I am learning chrome extension by example. Here is the example I currently learning: http://www.chrome-extensions.net/extensions/mappy/

There are three JavaScript files in this sample project: background.js mappy_content_script.js popup.js.

"mappy_content_script.js" is shown in the Combo box of Scripts tab of Developer Tools.
"popup.js" can be found if I right click the extension icon and choose "Inspect popup".

The problem is I can't debug "background.js" or find it in the Developer Tools. I tried insert "debugger;" in this JavaScript file. I also tried use profiling tool to record the script execution. However, when I click the link of "background.js", a blank page shows up. Profile Tool

Is this a bug of chrome or did I miss something? Thanks

like image 439
Xiong Avatar asked Apr 02 '12 03:04

Xiong


People also ask

How do I use Chrome debugger extension?

Navigate 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.

What is debug extension?

Visual Studio Code's debugging architecture allows extension authors to easily integrate existing debuggers into VS Code, while having a common user interface with all of them.

What is debugger in Chrome?

Google Chrome's Debug console is a powerful tool that can help us identify the cause of the errors (displayed in red) and speed up finding the solution.

How do I check debugging in Chrome?

The Chrome Web Inspector and Debugger are conveniently built-in with Chrome. You can launch it by hitting F12 while in your browser or by right clicking on a web page and selecting the Inspect menu item. The images below show a few different views that you'll see in the Chrome DevTools browser.


1 Answers

background.js is loaded in the background. To inspect it visit chrome://extensions, find the loaded extension, and "inspect active views" for the background script.

Edit

Below is a screenshot of the chrome extensions page. A click on the link background page opens the background page for this extension.

Chrome Extensions page

Additional information

EDIT 2020

Here is how you can see the content scripts and debug,

enter image description here

like image 72
abraham Avatar answered Sep 24 '22 05:09

abraham