Didn't make the #ChromeDevSummit this year? Catch all the content (and more!) in the Chrome Dev Summit 2019 playlist on our Chrome Developers YouTube Channel.

Verwenden von DevTools-Funktionen ohne Öffnen von DevTools

Powered by Google Translate

Ich sehe häufig Fragen in der Art von "Ich mag Feature X von DevTools wirklich, aber es funktioniert nicht mehr, wenn ich DevTools schließe. Wie kann ich Feature X laufen lassen, selbst wenn DevTools geschlossen ist?"

Die kurze Antwort ist: Sie können wahrscheinlich nicht.

Sie können * jedoch * ein Puppeteer Skript zusammenhacken, das Chromium startet, einen Remote-Debugging-Client öffnet und anschließend die DevTools-Funktion aktiviert, die Ihnen gefällt (über Chrome DevTools Protocol ), ohne DevTools explizit zu öffnen.

Mit dem unten stehenden Skript kann ich zum Beispiel die FPS Meter über der rechten oberen FPS Meter des Ansichtsfensters überlagern, obwohl DevTools niemals geöffnet wird, wie Sie im folgenden Video sehen können.

// 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');
})();

Dies ist nur eine von vielen, vielen DevTools-Funktionen, auf die Sie möglicherweise über das Chrome DevTools-Protokoll zugreifen können.

Ein allgemeiner Vorschlag: Überprüfen Sie die Puppeteer API bevor Sie einen DevTools-Protokoll-Client erstellen. Puppenspieler verfügt bereits über dedizierte APIs für viele DevTools-Funktionen wie code coverage und intercepting Console messages .

Wenn Sie Hilfe benötigen, um eine DevTools-Funktion über Puppeteer, ask a question on Stack Overflow , zu ask a question on Stack Overflow .

Wenn Sie ein Puppenspieler-Skript, das das DevTools-Protokoll verwendet, zeigen möchten, twittern Sie uns unter @ChromeDevTools .

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