question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

DevTools location / placement - opening devtools on the bottom instead of side

See original GitHub issue

I have this which works:

 const browser = await puppeteer.launch({
    headless: false,
    devtools: true,
    ignoreDefaultArgs: true,
    args: args.concat([
        '--remote-debugging-port=9223',
        '--load-extension=/some/local/path/to/your/extension'
      ]
    )
  });

however this opens DevTools on the right hand side, instead of the bottom of the browser. See:

screenshot 2018-01-13 15 09 40

Is there a flag we can use to tell Chrome to open DevTools on the bottom of the page?

I looked through the issues and don’t see a related question, thanks, sorry if it’s a dumb question but was hard to find an answer with Google.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:4
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

20reactions
zahharcommented, May 16, 2020

@chriscalo I will leave it here in case someone is still looking how to launch Puppeteer with DevTools stacked to bottom:

const puppeteer = require('puppeteer-extra');
const puppeteerPrefs = require('puppeteer-extra-plugin-user-preferences');

(async () => {

    puppeteer.use(puppeteerPrefs({
      userPrefs: {
        devtools: {
          preferences: {
            currentDockState: '"bottom"'
          },
        },
      },
    }));

    const browser = await puppeteer.launch({
        headless: false,
        devtools: true
    });

})();
5reactions
skyieacommented, Jan 20, 2018

@aslushnikov Where did you get devtools.currentDockState = 'bottom'? Can’t find such a pref in the list.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Change placement: undock, dock to bottom, dock to left
Run one of the following commands: Dock to left , Dock to right , Dock to bottom , Undock into separate window or...
Read more >
opening devtools on the bottom instead of side · Issue #1797
I have this which works: const browser = await puppeteer.launch({ headless: false, devtools: true, ignoreDefaultArgs: true, ...
Read more >
How to reposition Chrome Developer Tools - Stack Overflow
To change the split between the HTML and CSS panels, go in DevTools to Settings (F1) > General > Appearance > Panel Layout....
Read more >
Chrome DevTools - 20+ Tips and Tricks - KeyCDN
Open from browser menu#. You can open Chrome DevTools from the Chrome menu. Go to More Tools and then click Developer Tools ....
Read more >
Undock and Move the Developer Tools
In the Chrome Developer Tools, the bottom left icon allows you to change the dock settings of your Developer Tools. A quick click...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found