When comparing Chrome DevTools vs Puppeteer, the Slant community recommends Chrome DevTools for most people. In the question“What are the best test automation tools for web apps?” Chrome DevTools is ranked 7th while Puppeteer is ranked 10th. The most important reason people chose Chrome DevTools is:
Chrome comes with DevTools baked in. So if Chrome is used for development and it fills the need, there's no need for a separate tool.
Ranked in these QuestionsQuestion Ranking
Pros
Pro No need for a separate tool
Chrome comes with DevTools baked in. So if Chrome is used for development and it fills the need, there's no need for a separate tool.
Pro Works great with modern node.js features
Pro Runs a real browser
Unlike the other options here, this is a real browser, just without the GUI parts. This means the quality of the test is much higher, and lets you do things like save to PDF or images.
Pro Actively developed and promoted by Google
Pro Complete API for Chromium included
Chromium tests depend on the same API that Puppeteer gives you access to, so all the features are included
Cons
Con Limited to the box model of elements
DevTools only displays measurements of the HTML element's box that means that it can't measure, for example, relative to text's baseline or objects within a canvas element.
Con Does not measure distance between elements
DevTools measure dimensions of HTML elements only.
Con Not good for Cross Browser Tests
Since it only tests via Chromium, it won't help you test inconsistencies between browsers like Edge or Safari. There are projects to get around this, but they aren't mature.