How to dock the debug window of an extension's background script in main window?

Question

I have a Google Chrome extension that runs a background.js file. When I open its debug console via chrome://extensions/ and clicking on Inspect views: _generated_background_page.html, I get a window instance of the dev tools with all the debug information.

I would prefer for that window to be docked within the main window and there indeed is a "Dock to main window" in the bottom left corner mocking me yet pressing it does absolutely nothing.

So I wonder, is this a bug/feature on Chrome's end or have I set up my extension incorrectly event though it works?

manifest.json:

{
    "manifest_version": 2,
    "name": "Name",
    "version": "0.4",
    "description": "some description",
    "permissions": [
        "tabs", "*://www.somesite.com/*"
    ],
    "background": {
        "persistent": false,
        "scripts": ["background.js"]
    },
    "content_scripts": [
        {
            "matches": ["*://www.somesite.com/*"],
            "js": ["components/jquery/jquery.min.js", "main.js"],
            "run_at": "document_end",
            "all_frames": true
        }
    ]
}

What's the "main" window? The chrome://extensions/ page? What if you want to inspect multiple extensions? Or if you want to inspect chrome://extensions/ itself? It's not possible by default, though it is possible to have the inspector for the background in a tab. — Rob W
– Rob W, Commented Jun 21, 2013 at 7:56
@RobW I do not mean the extension page. I mean for it to dock on the "normal" current tab window or chrome instance of you will. (In fact, the way I use chrome, I always only have one window) I want it to behave like the standard dev tools, and not for it to be in a seperate window. — k0pernikus
– k0pernikus, Commented Jun 21, 2013 at 7:59

Rob W · Accepted Answer · 2013-06-21 08:18:46Z

3

The easiest way to get the inspector for the background page in a tab is to use the remote debugging protocol. If you're adventurous, you can write and implement the front-end yourself, using the chrome.debugger API.

If you're sane, just start Chromium with the --remote-debugging-port flag. This creates a local server (only accessibly from within your own machine), accessible via http://localhost:<port>. You can then use this page to inspect and interact with your background page.

Here's a screenshot, showing the feature in action:

Note: Only one debugging instance can be active for every page. If you open the built-in devtools, then the inspector on localhost will be disabled until you refresh the devtools page, and show the following message:

Remote debugging has been terminated with reason: replaced_with_devtools
Please re-attach to the new target.

answered Jun 21, 2013 at 8:18

Rob W

350k87 gold badges811 silver badges683 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

k0pernikus Over a year ago

It seems I have still stated the question not clearly enough and for that I apologize. I am building an extension that alters things of existing sites via content scripts. Yet this extension will also feature a background script for different tasks, and those I want to see in the same dev tool panel as the content script as I am mostly there anyway. I do not want a new window and I do not want a new tab. I want a certain tab. It seems I will have to pass the log messages around from the background script to the content script.

Collectives™ on Stack Overflow

How to dock the debug window of an extension's background script in main window?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related