Have questions about images on the web? Tweet your questions to @ChromiumDev with #AskChrome and we'll answer the top questions in our next #AskChrome episode on YouTube.

Uso de las funciones de DevTools sin abrir DevTools

Powered by Google Translate

Normalmente veo preguntas en la línea de "Realmente me gusta la función X de DevTools, pero deja de funcionar cuando cierro DevTools. ¿Cómo mantengo la función X en funcionamiento incluso cuando DevTools está cerrado?"

La respuesta corta es: probablemente no puedas.

Sin embargo, usted * puede * hackear un script Puppeteer que Puppeteer Chromium, abra un cliente de depuración remoto y luego active la función DevTools que le guste (a través de Chrome DevTools Protocol ), sin tener que abrir DevTools explícitamente.

Por ejemplo, la siguiente secuencia de comandos me permite superponer FPS Meter en la parte superior derecha de la ventana gráfica, aunque DevTools nunca se abre, como puede ver en el video a continuación.

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

Esta es solo una de las muchas, muchas características de DevTools a las que potencialmente puede acceder a través del protocolo de Chrome DevTools.

Una sugerencia general: echa un vistazo a Puppeteer API antes de recurrir a la creación de un cliente de Protocolo DevTools. Puppeteer ya tiene API dedicadas para muchas funciones de DevTools, como code coverage y intercepting Console messages .

Si necesita ayuda para acceder a una función de DevTools a través de Puppeteer, ask a question on Stack Overflow .

Si desea mostrar un script de Puppeteer que utiliza el Protocolo de DevTools, envíenos un tweet a @ChromeDevTools .

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