How to use puppeteer to turn Chromium on in mobile debug mode?

Question

I want to start Chrome with puppeteer, and in mobile debug mode, It means to click the 'toggle device toolbar' button in devtools.

Sorry, I don't have enough prestige to upload pictures.

I tried the following code but it didn't work:

const browser = await puppeteer.launch({
    devtools: true,
    ignoreHTTPSErrors: true,
    isMobile:true //I thought it would be fine to set isMobile: true, but not
  });

So what should I do?

Answer 1

To fully emulate a mobile device, you also have to specify other values like width, height, deviceScaleFactor, hasTouch and maybe also the user agent to make the website believe your browser is a mobile device. You can either set them manually (see the answer by Yevhen) or use one of the default device descriptors puppeteer provides via puppeteer.devices and apply them by calling page.emulate.

Code Sample

const puppeteer = require('puppeteer');
const iPhone = puppeteer.devices['iPhone 6'];

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.emulate(iPhone);
  await page.goto(url);
  // ...
})();

Answer 2

The isMobile property is a part of the defaultViewport object, it means that you should put isMobile property inside the defaultViewport object.

Like this:

defaultViewport: {
  width: 375,
  height: 667,
  isMobile: true,
}

Full:

const browser = await puppeteer.launch({
  devtools: true,
  ignoreHTTPSErrors: true,
  defaultViewport: {
    width: 375,
    height: 667,
    isMobile: true,
  }
});