Can’t make the #ChromeDevSummit this year? Catch all the content (and more!) on the livestream, or join your peers for a CDS Extended event at a hosted location nearby. To learn more, check out the Chrome Dev Summit 2019 website.

Utilisation des fonctionnalités de DevTools sans ouvrir

Powered by Google Translate

Je vois souvent des questions du type "J'aime beaucoup la fonctionnalité X de DevTools, mais elle cesse de fonctionner lorsque je ferme DevTools. Comment faire pour que la fonctionnalité X reste active même lorsque DevTools est fermé?"

La réponse courte est: vous ne pouvez probablement pas.

Cependant, vous * pouvez * pirater un script Puppeteer qui lance Chromium, ouvre un client de débogage distant, puis active la fonctionnalité DevTools que vous aimez (via Chrome DevTools Protocol ), sans jamais ouvrir explicitement DevTools.

Par exemple, le script ci-dessous me permet de superposer FPS Meter en haut à droite de la fenêtre d'affichage, même si DevTools ne s'ouvre jamais, comme le montre la vidéo ci-dessous.

// Node.js version: 8.9.4
const puppeteer = require('puppeteer'); // version 1.0.0

(async () => {
  // Prevent Puppeteer from showing the "Chrome is being controlled by automated test
  // software" prompt, but otherwise use Puppeteer's default args.
  const args = await puppeteer.defaultArgs().filter(flag => flag !== '--enable-automation');
  const browser = await puppeteer.launch({
    headless: false,
    ignoreDefaultArgs: true,
    args
  });
  const page = await browser.newPage();
  const devtoolsProtocolClient = await page.target().createCDPSession();
  await devtoolsProtocolClient.send('Overlay.setShowFPSCounter', { show: true });
  await page.goto('https://developers.google.com/web/tools/chrome-devtools');
})();

Il ne s'agit que de l'une des nombreuses fonctionnalités de DevTools auxquelles vous pouvez potentiellement accéder via le protocole Chrome DevTools.

Une suggestion générale: consultez Puppeteer API avant de créer un client de protocole DevTools. Puppeteer dispose déjà d’API dédiées à de nombreuses fonctionnalités de DevTools, telles que code coverage et intercepting Console messages .

Si vous avez besoin d’aide pour accéder à une fonctionnalité de DevTools via Puppeteer, ask a question on Stack Overflow .

Si vous voulez montrer un script Puppeteer qui utilise le protocole DevTools, @ChromeDevTools nous un tweet à l' @ChromeDevTools .

rss_feed Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!