heymp / scratchpad

Run javascript snippets in a Playwright browser.

@heymp/scratchpad

A super fast way of debugging javascript snippets in a Playwright browser. If you love Chrome snippets but hate that they aren't portable then give Scratchpad a try!

scratchpad-demo.mp4

Usage

npx @heymp/scratchpad@next ./my-test-file.js

Options

Usage: @heymp/scratchpad@next <file> [options] 

Arguments:
  file                  file to execute in the browser.

Options:
  --headless [boolean]  specify running the browser in headless mode.
  --url [string]        specify a specific url to execute the code in.
  -V, --version         output the version number
  -h, --help            display help for command

Logging

To send log information from the Chromium browser to node.js we expose two logging helpers, log() & clear().

Method	Description	Example
log	Log data to the stdnout of our terminal and to the Chromium Console it's running. Supports logging advanced types like Arrays, Generators, Iteratiors, Maps, Sets, and Functions.	log(new Map([[1,2]])
clear	Clear the previous console output results.	clear()

Example

clear();
function* generator(limit) {
  for (let i = 0; i < limit; i++) {
    yield i;
  }
}

const set = new Set([1,2]);
const map = new Map([[1,2]]);

const gen = generator(10);
log([1,3]);
log(gen);
log(gen.next());
log([...gen]);
log(set);
log(map);
log(set.values());
log([...set.values()]);
log([...set.entries()]);
log(new Promise(res => res()));
log(function hello() { return 'world' });

Typescript

Scratchpad also has out of the box support for Typescript. Any file that ends with .ts will be first transpiled by esbuild command. While you can execute typescript files using the npx @heymp/scratchpad command, it is reccommended to install the package locally so you can import the library typings.

Example:

npm install @heymp/scratchpad

Recommended tsconfig.json settings. NOTE: your local tsconfig.json file is only used to for your local Typescript LSP. The tsc commnand built in to the Scratchpad ignores your local tsconfig.json file. If you need to add custom rules to the compiled output that is executed in the chromium browser then you will need hand the ts -> js compile step yourself.

{
  "target": "esnext",
  "compilerOptions": {
    "types": ["./node_modules/@heymp/scratchpad/types.d.ts"]
  }
}

An alternatice to the tsconfig.json file is to use the following triple-slash comment in your .ts files:

/// <reference path="./node_modules/@heymp/scratchpad/types.d.ts" />

Development

npm install

./bin/cli.js -h