Take the MDN Browser Compatibility Survey and help us understand your issues, and what we and browser vendors can do to help make your life easier.


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 page.target().createCDPSession();
  await devtoolsProtocolClient.send('Overlay.setShowFPSCounter', { show: true });
  await page.goto('https://developers.google.com/web/tools/chrome-devtools');

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

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

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


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