CODEWITHSUNDEEP
google-chromegoogle-chrome-devtoolschrome-devtools-protocol
guzmonne
guzmonne

Reputation: 2540

Chrome command line flag to open devtools window undocked

I know that I can open Chrome with the devtools dock placed to the right using the flag:

--auto-open-devtools-for-tabs

What I would like is to be able to modify the placement of the dock from the command line.

Is there any flag or configuration that would allow me to place the dock on startup wherever I want?

Or, can it be done using the Chrome Devtools Protocol?

Upvotes: 5

Views: 1336

Answers (2)

Tom Auger
Tom Auger

Reputation: 20141

It's also possible via nodejs and puppeteer, but you have to install puppeteer-extra (https://www.npmjs.com/package/puppeteer-extra) and the puppeteer-extra-plugin-user-preferences as well.

The rest of the signature looks pretty similar to @ndbroadbent's answer

puppeteer.use(puppeteerPrefs({
    userPrefs: {
        devtools: {
        preferences: {
            currentDockState: '"bottom"', // Double quotes?!?
            'panel-selectedTab' : '"console"'
        },
        },
    },
}));

Then you can do something like:

browser = await puppeteer.launch({
    headless: "new",
    devtools: true,
    args: [ '--window-size=600,1260' ],
    defaultViewport: { width: 600, height: 1080 }
});

Upvotes: 0

ndbroadbent
ndbroadbent

Reputation: 13803

I've figured out how to do this for my Ruby on Rails app, which uses RSpec, Capybara, and Selenium WebDriver. Here's the code I use to set up my Capybara driver and place the dock at the bottom. I also configured the "Console" tab to be selected by default.

options = Selenium::WebDriver::Chrome::Options.new
options.add_preference(
  'devtools',
  'preferences' => {
    'currentDockState' => '"bottom"', # Or '"undocked"'
    'panel-selectedTab' => '"console"',
  }
)

...

Capybara::Selenium::Driver.new(
  app,
  browser: :chrome,
  options: options,
  desired_capabilities: capabilities,

I figured out how to set these preferences by looking at ~/Library/Application Support/Google/Chrome/Default/Preferences. This is where my main Google Chrome installation stores my user preferences.

You can view all of the possible settings under devtools => preferences. Note that all the values are strings that are parsed as JSON, so you need to "double-wrap" any strings in your code: '"bottom"'.

Upvotes: 3

Related Questions