Selenium WebDriver — Start Chrome with DevTools open to Console panel

Question

I know how to start Chrome with the DevTools open so please don't tell me it is a duplicate of How to open Chrome Developer console in Selenium WebDriver using JAVA

---

I'm trying to have the DevTools open to a specific panel. By default it opens on the Elements panel but I want it to open on the Console panel instead:

I've seen this command line switch --devtools-flags but I haven't found any example usage of it. Essentially what I'm trying to achieve is something similar to that. Obviously that doesn't work but you get the gist:

const { Options } = require('selenium-webdriver/chrome');
// …
const options = new Options().addArguments([
  'auto-open-devtools-for-tabs',
  'devtools-flags="panel=console"' /* <- That doesn't work. What else would?  */
]);
// …

Abutter

Answer 1

I figured out how to do this for my Ruby on Rails app that uses RSpec and Capybara. Here's the code that I use to configure my Capybara driver to select the Console tab and dock the devtools to the bottom:

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

...

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

You should be able to call the setUserPreferences function to set user preferences: https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/chrome_exports_Options.html#setUserPreferences

const { Options } = require('selenium-webdriver/chrome');
// …
const options = new Options().addArguments([
  "auto-open-devtools-for-tabs"
]).setUserPreferences({
  "devtools": {
    "preferences": {
      "panel-selectedTab": "\"console\""
      // "currentDockState": "\"bottom\"" // Or "\"undocked\"", "\"right\"", etc.
    }
  }
});

(I haven't tested this for JS, so please try it out and let me know if it works.)

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, e.g. "\"console\"".

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.

Barogram

I found it was "panel-selected-tab" with a hyphen from chrome://prefs-internals/. the camelcase didn't work for me (mac chrome v126.0.6478.127) – Mindoro

Answer 2

I tried a ton of solutions and came up with a very simple solution by modifying the Perfences when initiating Chrome: You might find your Chrome preference file at %USERPROFILE%\AppData\Local\Google\Chrome\User Data\Default

So when initiating Chrome driver profile, try adding UserProfilePreference

ChromeOptions options = new ChromeOptions();
options.AddArgument("--force-devtools-available");
options.AddUserProfilePreference("devtools.preferences.panel-selectedTab", "\"network\"");
//options.AddUserProfilePreference("devtools.preferences.panel-tabOrder", "{\"network\":10,\"elements\":20,\"console\":30,\"sources\":40,\"timeline\":50,\"heap_profiler\":60,\"resources\":70,\"security\":80,\"lighthouse\":90,\"chrome_recorder\":100,\"performance_insights\":110}"); //this setting is optional
                        
Instance = new ChromeDriver(options);

Immingle