🎉 Announcing the new Puppeteer debugging site!

// Setup the environment for typescript/javascript support
self.MonacoEnvironment = {
  getWorkerUrl: (_moduleId: any, label: string) => {
    if (label === 'typescript' || label === 'javascript') {
      return './ts.worker.bundle.js';
    }
    return './editor.worker.bundle.js';
  }
};

// Instantiate the editor
const editor = monaco.editor.create(document.getElementById('code'), {
  value: initialCode,
  language: 'typescript',
  theme: 'vs-dark',
  fontSize: 14,
  wordWrap: 'on',
  scrollBeyondLastLine: false,
  automaticLayout: true,
  minimap: {
    enabled: false
  }
});

// Specify that this is a node-like environment
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
  allowNonTsExtensions: true,
  target: monaco.languages.typescript.ScriptTarget.ES2020,
  moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
  module: monaco.languages.typescript.ModuleKind.CommonJS,
});

// First load the types as a plain string
const puppeteerTypes = require('!!raw-loader!puppeteer-core/lib/types.d.ts');

// ... later, add the puppeteer types into the editor
monaco.languages.typescript.typescriptDefaults.addExtraLib(
  puppeteerTypes.default,
  'node_modules/@types/puppeteer/index.d.ts',
);

const browser = await puppeteer.connect({ browserWSEndpoint })
  .catch((error) => {
    console.error(error);
    throw error;
  });

const page = await browser.newPage();

// Use the page's client to start the screencast
const client = (page as any)._client as CDPSession;

await client.send('Page.startScreencast', { format: 'jpeg', quality: 100 });

// Wire up the screencast...
client.on('Page.screencastFrame', () => console.log("TODO"));

const $canvas = document.querySelector('#screencast')
const ctx = $canvas.getContext('2d');
const img = new Image();

onScreencastFrame(({ data }) => {
  img.onload = () => ctx.drawImage(img, 0, 0, $canvas.width, $canvas.height);
  img.src = 'data:image/png;base64,' + data;
});

const $canvas = document.querySelector('#screencast')
const ctx = $canvas.getContext('2d');
const img = new Image();
const browser = await puppeteer.connect({ browserWSEndpoint })
  .catch((error) => {
    console.error(error);
    throw error;
  });

const page = await browser.newPage();
const client = (page as any)._client as CDPSession;
await client.send('Page.startScreencast', { format: 'jpeg', quality: 100});

client.on('Page.screencastFrame', onScreencastFrame);

onScreencastFrame(({ data }) => {
  img.onload = () => ctx.drawImage(img, 0, 0, $canvas.width, $canvas.height);
  img.src = 'data:image/png;base64,' + data;
});

const browser = await puppeteer.connect({ browserWSEndpoint });
const page = await browser.newPage();

// Code is written in an encapsulated function, so we invoke it with the
// proper arguments in order for it to run.
eval(code)({ page })
  .then(async (res: any) => {
    // Need to handle res here as it could be anything the function returns...
  })
  .catch((e: Error) => {
    // Inject errors into the page so that they show up in the cloud browser's devtools... neat!
    page && page.evaluate((err) => console.error(err), e.toString());
  });

import FileType from 'file-type/browser';

async function makeDownload(response?: string | Uint8Array): Promise < {
  type: string,
  payload: any,
} | null > {
  // Nothing being returned triggers no actions
  if (!response) {
    return null;
  }

  // PDF/PNG are Uint8Arrays in the browser
  // If no type is determined, don't do anything
  if (response instanceof Uint8Array) {
    const type = (await FileType.fromBuffer(response) || { mime: undefined }).mime;
    if (!type) {
      return null;
    }
    return { type, payload: response};
  }

  // Here we check for page.content responses (html) via a simple check that it starts with the "< " character
  if (typeof response === 'string') {
    return {
      type: response.startsWith('< ') ? 'text/html' : 'text/plain',
      payload: response,
    }
  }

  // Check if it's a JSON blob that we should download instead
  if (typeof response === 'object') {
    return {
      type: 'application/json',
      payload: JSON.stringify(response, null, '  '),
    };
  }

  return {
    type: 'text/plain',
    payload: response,
  };
}

import FileType from 'file-type/browser';
import pupeteer from 'puppeteer';

const browser = await puppeteer.connect({ browserWSEndpoint });
const page = await browser.newPage();

async function makeDownload(response?: string | Uint8Array): Promise< { type: string, payload: any} | null> {
  if (!response) {
    return null;
  }

  if (response instanceof Uint8Array) {
    const type = (await FileType.fromBuffer(response) || { mime: undefined }).mime;
    if (!type) {
      return null;
    }
    return { type, payload: response};
  }

  if (typeof response === 'string') {
    return {
      type: response.startsWith('< ') ? 'text/html' : 'text/plain',
      payload: response,
    }
  }

  if (typeof response === 'object') {
    return {
      type: 'application/json',
      payload: JSON.stringify(response, null, '  '),
    };
  }

  return {
    type: 'text/plain',
    payload: response,
  };
}

const downloadFile = (download) => {
  const fileName = 'my-download';
  const blob = new Blob([download.payload], { type: download.type });
  const link = document.createElement('a');

  link.href = window.URL.createObjectURL(blob);
  link.download = fileName;

  return link.click();
};

eval(code)({ page })
  .then(async (res: any) => {
    const payload = makeDownload(res);
    if (payload) {
      downloadFile(payload);
    }
  })
  .catch((e: Error) => {
    page && page.evaluate((err) => console.error(err), e.toString());
  });