Devtools resize viewport dimensions overlay included in screenshots

Steps to reproduce

Tell us about your environment:

• Puppeteer version: 7.0.0
• Platform / OS version: MacOS Big Sur
• URLs (if applicable): -
• Node.js version: 14.13.0

What steps will reproduce the problem?

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        headless: false,
        devtools: true,
    });
    const page = await browser.newPage();
    await page.goto('https://example.com');

    await page.screenshot({ path: 'example.png', fullPage: true });

    await browser.close();
})();

1. Run the above script
2. open example.png

What is the expected result?

What happens instead?

Notice the viewport dimensions in the top right corner of the screenshot. I expect them not to be there. They are seemingly injected by the devtools somehow. They are not present when the devtools panel isn’t open. Doesn’t seem to be injected into the pages HTML either, otherwise I’d be able to hide it via CSS or something.

[sadym-chromium]

The issue can be solved by rolling back to previous behaviour. To do so, you should pass argument captureBeyondViewport: false to screenshot, implemented in the PR #7063

[sadym-chromium]

Feel free to reopen the issue if the approach doesn’t work for you.