Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

Использование функций DevTools без открытия DevTools

Powered by Google Translate

Я часто встречаю вопросы по строкам «Мне очень нравится функция X DevTools, но она перестает работать, когда я закрываю DevTools. Как мне сохранить функцию X, даже когда DevTools закрыт?»

Короткий ответ: вы, вероятно, не можете.

Однако вы можете * взломать скрипт Puppeteer который запускает Chromium, открывает удаленный отладочный клиент, а затем включает функцию DevTools, которая вам нравится (через Chrome DevTools Protocol ), без явного открытия DevTools.

Например, приведенный ниже сценарий позволяет мне накладывать FPS Meter поверх правого окна просмотра, хотя DevTools никогда не открывается, как вы можете видеть в видео ниже.

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

Это всего лишь одна из многих функций DevTools, доступ к которой вы можете получить через протокол Chrome DevTools.

Общее предложение: ознакомьтесь с Puppeteer API прежде чем Puppeteer API к созданию клиента протокола DevTools. Puppeteer уже имеет специальные API для многих функций DevTools, таких как code coverage и intercepting Console messages .

Если вам нужна помощь в доступе к функции DevTools через Puppeteer, ask a question on Stack Overflow .

Если вы хотите показать сценарий Puppeteer, который использует протокол DevTools, @ChromeDevTools нам на @ChromeDevTools .

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