It's a wrap for Chrome Dev Summit 2020! Watch all the sessions at now!


Powered by Google Translate



ただし、Chromiumを起動し、リモートデバッグクライアントを開き、 Chrome DevTools Protocol明示的に開くことなく( Chrome DevTools Protocol経由で)好きなDevTools機能をオンにするPuppeteerスクリプトを一緒にハックすることができます。

たとえば、以下のスクリプトでは、 FPS Meterが開かない場合でも、ビューポートの右上にFPS Meterをオーバーレイすることができます。

// 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,
  const page = await browser.newPage();
  const devtoolsProtocolClient = await;
  await devtoolsProtocolClient.send('Overlay.setShowFPSCounter', { show: true });
  await page.goto('');

これは、DevToolsの多くの機能のうちの1つで、Chrome DevToolsプロトコル経由でアクセスすることができます。

一般的な提案:DevToolsプロトコルクライアントの作成に頼る前に、 Puppeteer APIチェックしてください。 Puppeteerはすでに、 code coverageintercepting Console messagesなどのDevToolsの多くの機能に専用のAPIを備えています。

Puppeteer、 ask a question on Stack Overflow介してDevTools機能にアクセスするための助けが必要な場合。


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