setting chrome 'devtools.open_docked' to false in selenium webdriver

I am want the chrome devtools to open detached from the window when using selenium with capybara.

Currently devtools is attached to the right side (default.)

I am using the following code:

Capybara.register_driver :chrome do |app|
  capabilities = Selenium::WebDriver::Remote::Capabilities.chrome(
    chromeOptions: { 
      args: %w[auto-open-devtools-for-tabs], # <- this works!
      prefs: {'devtools.open_docked' => false} # <- has no effect!
      # also tried {devtools: {open_docked: false}}
      }
  )
  Capybara::Selenium::Driver.new(
    app, browser: :chrome, desired_capabilities: capabilities
  )
end

Here's how you can configure the Chrome preferences for Capybara so that the dev tools are undocked by default. You can also configure the default tab that you would like to select (I wanted the "Console" tab to be active by default.)

options = Selenium::WebDriver::Chrome::Options.new
options.add_preference(
  'devtools',
  'preferences' => {
    'currentDockState' => '"undocked"', # Or '"bottom"', '"right"', etc.
    '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, and it's JSON data.

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: '"undocked"'.

You can open your main Google Chrome browser and change the settings in the UI, and then re-open your Preferences file to see what JSON you need to set.