chore(debug): various debug mode improvements (#2561)

This commit is contained in:
Pavel Feldman 2020-06-13 13:17:12 -07:00 committed by GitHub
parent 2659910be8
commit 61b11252b4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 334 additions and 242 deletions

View file

@ -27,6 +27,7 @@ import { BrowserBase } from './browser';
import { InnerLogger, Logger } from './logger';
import { EventEmitter } from 'events';
import { ProgressController } from './progress';
import { DebugController } from './debug/debugController';
type CommonContextOptions = {
viewport?: types.Size | null,
@ -98,21 +99,8 @@ export abstract class BrowserContextBase extends EventEmitter implements Browser
}
async _initialize() {
if (!helper.isDebugMode())
return;
const installInFrame = async (frame: frames.Frame) => {
try {
const mainContext = await frame._mainContext();
await mainContext.debugScript();
} catch (e) {
}
};
this.on(Events.BrowserContext.Page, (page: Page) => {
for (const frame of page.frames())
installInFrame(frame);
page.on(Events.Page.FrameNavigated, installInFrame);
});
if (helper.isDebugMode())
new DebugController(this);
}
async waitForEvent(event: string, optionsOrPredicate: types.WaitForEventOptions = {}): Promise<any> {

View file

@ -0,0 +1,43 @@
/**
* Copyright (c) Microsoft Corporation.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { BrowserContextBase } from '../browserContext';
import { Events } from '../events';
import * as frames from '../frames';
import { Page } from '../page';
import { RecorderController } from './recorderController';
export class DebugController {
private _context: BrowserContextBase;
constructor(context: BrowserContextBase) {
this._context = context;
const installInFrame = async (frame: frames.Frame) => {
try {
const mainContext = await frame._mainContext();
await mainContext.debugScript();
} catch (e) {
}
};
context.on(Events.BrowserContext.Page, (page: Page) => {
for (const frame of page.frames())
installInFrame(frame);
page.on(Events.Page.FrameNavigated, installInFrame);
new RecorderController(page);
});
}
}

View file

@ -27,6 +27,6 @@ export default class DebugScript {
initialize(injectedScript: InjectedScript) {
this.consoleAPI = new ConsoleAPI(injectedScript);
this.recorder = new Recorder();
this.recorder = new Recorder(injectedScript);
}
}

View file

@ -15,24 +15,28 @@
*/
import type * as actions from '../recorderActions';
import InjectedScript from '../../injected/injectedScript';
import { parseSelector } from '../../common/selectorParser';
declare global {
interface Window {
recordPlaywrightAction?: (action: actions.Action) => void;
recordPlaywrightAction: (action: actions.Action) => void;
}
}
export class Recorder {
constructor() {
private _injectedScript: InjectedScript;
constructor(injectedScript: InjectedScript) {
this._injectedScript = injectedScript;
document.addEventListener('click', event => this._onClick(event), true);
document.addEventListener('input', event => this._onInput(event), true);
document.addEventListener('keydown', event => this._onKeyDown(event), true);
}
private _onClick(event: MouseEvent) {
if (!window.recordPlaywrightAction)
return;
const selector = this._buildSelector(event.target as Node);
const selector = this._buildSelector(event.target as Element);
if ((event.target as Element).nodeName === 'SELECT')
return;
window.recordPlaywrightAction({
@ -46,9 +50,7 @@ export class Recorder {
}
private _onInput(event: Event) {
if (!window.recordPlaywrightAction)
return;
const selector = this._buildSelector(event.target as Node);
const selector = this._buildSelector(event.target as Element);
if ((event.target as Element).nodeName === 'INPUT') {
const inputElement = event.target as HTMLInputElement;
if ((inputElement.type || '').toLowerCase() === 'checkbox') {
@ -78,11 +80,9 @@ export class Recorder {
}
private _onKeyDown(event: KeyboardEvent) {
if (!window.recordPlaywrightAction)
return;
if (event.key !== 'Tab' && event.key !== 'Enter' && event.key !== 'Escape')
return;
const selector = this._buildSelector(event.target as Node);
const selector = this._buildSelector(event.target as Element);
window.recordPlaywrightAction({
name: 'press',
selector,
@ -92,24 +92,73 @@ export class Recorder {
});
}
private _buildSelector(node: Node): string {
const element = node as Element;
for (const attribute of ['data-testid', 'aria-label', 'id', 'data-test-id', 'data-test']) {
private _buildSelector(targetElement: Element): string {
const path: string[] = [];
const root = document.documentElement;
for (let element: Element | null = targetElement; element && element !== root; element = element.parentElement) {
const selector = this._buildSelectorCandidate(element);
if (selector)
path.unshift(selector.selector);
const fullSelector = path.join(' ');
if (selector && selector.final)
return fullSelector;
if (targetElement === this._injectedScript.querySelector(parseSelector(fullSelector), root))
return fullSelector;
}
return '<selector>';
}
private _buildSelectorCandidate(element: Element): { final: boolean, selector: string } | null {
for (const attribute of ['data-testid', 'data-test-id', 'data-test']) {
if (element.hasAttribute(attribute))
return `[${attribute}=${element.getAttribute(attribute)}]`;
return { final: true, selector: `${element.nodeName.toLocaleLowerCase()}[${attribute}=${element.getAttribute(attribute)}]` };
}
for (const attribute of ['aria-label']) {
if (element.hasAttribute(attribute))
return { final: false, selector: `${element.nodeName.toLocaleLowerCase()}[${attribute}=${element.getAttribute(attribute)}]` };
}
if (element.nodeName === 'INPUT') {
if (element.hasAttribute('name'))
return `[input name=${element.getAttribute('name')}]`;
return { final: false, selector: `input[name=${element.getAttribute('name')}]` };
if (element.hasAttribute('type'))
return `[input type=${element.getAttribute('type')}]`;
return { final: false, selector: `input[type=${element.getAttribute('type')}]` };
} else if (element.nodeName === 'IMG') {
if (element.hasAttribute('alt'))
return { final: false, selector: `img[alt="${element.getAttribute('alt')}"]` };
}
if (element.firstChild && element.firstChild === element.lastChild && element.firstChild.nodeType === Node.TEXT_NODE)
return `text="${element.textContent}"`;
return '<selector>';
const textSelector = textSelectorForElement(element);
if (textSelector)
return { final: false, selector: textSelector };
// Depreoritize id, but still use it as a last resort.
if (element.hasAttribute('id'))
return { final: true, selector: `${element.nodeName.toLocaleLowerCase()}[id=${element.getAttribute('id')}]` };
return null;
}
}
function textSelectorForElement(node: Node): string | null {
let needsTrim = false;
let onlyText: string | null = null;
for (const child of node.childNodes) {
if (child.nodeType !== Node.TEXT_NODE)
continue;
if (child.textContent && child.textContent.trim()) {
if (onlyText)
return null;
onlyText = child.textContent.trim();
needsTrim = child.textContent !== child.textContent.trim();
} else {
needsTrim = true;
}
}
if (!onlyText)
return null;
return needsTrim ? `text=/\\s*${escapeForRegex(onlyText)}\\s*/` : `text="${onlyText}"`;
}
function modifiersForEvent(event: MouseEvent | KeyboardEvent): number {
return (event.altKey ? 1 : 0) | (event.ctrlKey ? 2 : 0) | (event.metaKey ? 4 : 0) | (event.shiftKey ? 8 : 0);
}
@ -122,3 +171,7 @@ function buttonForEvent(event: MouseEvent): 'left' | 'middle' | 'right' {
}
return 'left';
}
function escapeForRegex(text: string): string {
return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

View file

@ -18,42 +18,34 @@ import * as actions from './recorderActions';
import * as frames from '../frames';
import { Page } from '../page';
import { Events } from '../events';
import { Script } from './recorderScript';
import { TerminalOutput } from './terminalOutput';
export class RecorderController {
private _page: Page;
private _script = new Script();
private _output = new TerminalOutput();
constructor(page: Page) {
this._page = page;
}
start() {
this._script.addAction({
name: 'navigate',
url: this._page.url(),
signals: [],
});
this._printScript();
this._page.exposeBinding('recordPlaywrightAction', (source, action: actions.Action) => {
action.frameUrl = source.frame.url();
this._script.addAction(action);
this._printScript();
if (source.frame !== this._page.mainFrame())
action.frameUrl = source.frame.url();
this._output.addAction(action);
});
this._page.on(Events.Page.FrameNavigated, (frame: frames.Frame) => {
if (frame.parentFrame())
return;
const action = this._script.lastAction();
if (action)
action.signals.push({ name: 'navigation', url: frame.url() });
this._printScript();
const action = this._output.lastAction();
if (action) {
this._output.signal({ name: 'navigation', url: frame.url() });
} else {
this._output.addAction({
name: 'navigate',
url: this._page.url(),
signals: [],
});
}
});
}
_printScript() {
console.log('\x1Bc'); // eslint-disable-line no-console
console.log(this._script.generate('chromium')); // eslint-disable-line no-console
}
}

View file

@ -1,170 +0,0 @@
/**
* Copyright (c) Microsoft Corporation.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import * as dom from '../dom';
import { Formatter, formatColors } from '../utils/formatter';
import { Action, NavigationSignal, actionTitle } from './recorderActions';
export class Script {
private _actions: Action[] = [];
addAction(action: Action) {
this._actions.push(action);
}
lastAction(): Action | undefined {
return this._actions[this._actions.length - 1];
}
private _compact(): Action[] {
const result: Action[] = [];
let lastAction: Action | undefined;
for (const action of this._actions) {
if (lastAction && action.name === 'fill' && lastAction.name === 'fill') {
if (action.selector === lastAction.selector)
result.pop();
}
if (lastAction && action.name === 'click' && lastAction.name === 'click') {
if (action.selector === lastAction.selector && action.clickCount > lastAction.clickCount)
result.pop();
}
for (const name of ['check', 'uncheck']) {
if (lastAction && action.name === name && lastAction.name === 'click') {
if ((action as any).selector === (lastAction as any).selector)
result.pop();
}
}
lastAction = action;
result.push(action);
}
return result;
}
generate(browserType: string) {
const formatter = new Formatter();
const { cst, cmt, fnc, kwd, prp, str } = formatColors;
formatter.add(`
${kwd('const')} { ${cst('chromium')}. ${cst('firefox')}, ${cst('webkit')} } = ${fnc('require')}(${str('playwright')});
(${kwd('async')}() => {
${kwd('const')} ${cst('browser')} = ${kwd('await')} ${cst(`${browserType}`)}.${fnc('launch')}();
${kwd('const')} ${cst('page')} = ${kwd('await')} ${cst('browser')}.${fnc('newPage')}();
`);
for (const action of this._compact()) {
formatter.newLine();
formatter.add(cmt(actionTitle(action)));
let navigationSignal: NavigationSignal | undefined;
if (action.name !== 'navigate' && action.signals && action.signals.length)
navigationSignal = action.signals[action.signals.length - 1];
if (navigationSignal) {
formatter.add(`${kwd('await')} ${cst('Promise')}.${fnc('all')}([
${cst('page')}.${fnc('waitForNavigation')}({ ${prp('url')}: ${str(navigationSignal.url)} }),`);
}
const subject = action.frameUrl ?
`${cst('page')}.${fnc('frame')}(${formatObject({ url: action.frameUrl })})` : cst('page');
const prefix = navigationSignal ? '' : kwd('await') + ' ';
const suffix = navigationSignal ? '' : ';';
switch (action.name) {
case 'click': {
let method = 'click';
if (action.clickCount === 2)
method = 'dblclick';
const modifiers = toModifiers(action.modifiers);
const options: dom.ClickOptions = {};
if (action.button !== 'left')
options.button = action.button;
if (modifiers.length)
options.modifiers = modifiers;
if (action.clickCount > 2)
options.clickCount = action.clickCount;
const optionsString = formatOptions(options);
formatter.add(`${prefix}${subject}.${fnc(method)}(${str(action.selector)}${optionsString})${suffix}`);
break;
}
case 'check':
formatter.add(`${prefix}${subject}.${fnc('check')}(${str(action.selector)})${suffix}`);
break;
case 'uncheck':
formatter.add(`${prefix}${subject}.${fnc('uncheck')}(${str(action.selector)})${suffix}`);
break;
case 'fill':
formatter.add(`${prefix}${subject}.${fnc('fill')}(${str(action.selector)}, ${str(action.text)})${suffix}`);
break;
case 'press': {
const modifiers = toModifiers(action.modifiers);
const shortcut = [...modifiers, action.key].join('+');
formatter.add(`${prefix}${subject}.${fnc('press')}(${str(action.selector)}, ${str(shortcut)})${suffix}`);
break;
}
case 'navigate':
formatter.add(`${prefix}${subject}.${fnc('goto')}(${str(action.url)})${suffix}`);
break;
case 'select':
formatter.add(`${prefix}${subject}.${fnc('select')}(${str(action.selector)}, ${formatObject(action.options.length > 1 ? action.options : action.options[0])})${suffix}`);
break;
}
if (navigationSignal)
formatter.add(`]);`);
}
formatter.add(`
})();
`);
return formatter.format();
}
}
function formatOptions(value: any): string {
const keys = Object.keys(value);
if (!keys.length)
return '';
return ', ' + formatObject(value);
}
function formatObject(value: any): string {
const { prp, str } = formatColors;
if (typeof value === 'string')
return str(value);
if (Array.isArray(value))
return `[${value.map(o => formatObject(o)).join(', ')}]`;
if (typeof value === 'object') {
const keys = Object.keys(value);
if (!keys.length)
return '{}';
const tokens: string[] = [];
for (const key of keys)
tokens.push(`${prp(key)}: ${formatObject(value[key])}`);
return `{${tokens.join(', ')}}`;
}
return String(value);
}
function toModifiers(modifiers: number): ('Alt' | 'Control' | 'Meta' | 'Shift')[] {
const result: ('Alt' | 'Control' | 'Meta' | 'Shift')[] = [];
if (modifiers & 1)
result.push('Alt');
if (modifiers & 2)
result.push('Control');
if (modifiers & 4)
result.push('Meta');
if (modifiers & 8)
result.push('Shift');
return result;
}

183
src/debug/terminalOutput.ts Normal file
View file

@ -0,0 +1,183 @@
/**
* Copyright (c) Microsoft Corporation.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import * as dom from '../dom';
import { Formatter, formatColors } from '../utils/formatter';
import { Action, NavigationSignal, actionTitle } from './recorderActions';
export class TerminalOutput {
private _lastAction: Action | undefined;
private _lastActionText: string | undefined;
constructor() {
const formatter = new Formatter();
const { cst, fnc, kwd, str } = formatColors;
formatter.add(`
${kwd('const')} { ${cst('chromium')}, ${cst('firefox')}, ${cst('webkit')} } = ${fnc('require')}(${str('playwright')});
(${kwd('async')}() => {
${kwd('const')} ${cst('browser')} = ${kwd('await')} ${cst(`chromium`)}.${fnc('launch')}();
${kwd('const')} ${cst('page')} = ${kwd('await')} ${cst('browser')}.${fnc('newPage')}();
`);
process.stdout.write(formatter.format());
process.stdout.write(`\n})();`);
}
addAction(action: Action) {
let eraseLastAction = false;
if (this._lastAction && action.name === 'fill' && this._lastAction.name === 'fill') {
if (action.selector === this._lastAction.selector)
eraseLastAction = true;
}
if (this._lastAction && action.name === 'click' && this._lastAction.name === 'click') {
if (action.selector === this._lastAction.selector && action.clickCount > this._lastAction.clickCount)
eraseLastAction = true;
}
for (const name of ['check', 'uncheck']) {
if (this._lastAction && action.name === name && this._lastAction.name === 'click') {
if ((action as any).selector === (this._lastAction as any).selector)
eraseLastAction = true;
}
}
this._printAction(action, eraseLastAction);
}
_printAction(action: Action, eraseLastAction: boolean) {
let eraseLines = 1;
if (eraseLastAction && this._lastActionText)
eraseLines += this._lastActionText.split('\n').length;
for (let i = 0; i < eraseLines; ++i)
process.stdout.write('\u001B[F\u001B[2K');
this._lastAction = action;
this._lastActionText = this._generateAction(action);
console.log(this._lastActionText); // eslint-disable-line no-console
console.log(`})();`); // eslint-disable-line no-console
}
lastAction(): Action | undefined {
return this._lastAction;
}
signal(signal: NavigationSignal) {
if (this._lastAction) {
this._lastAction.signals.push(signal);
this._printAction(this._lastAction, true);
}
}
private _generateAction(action: Action): string {
const formatter = new Formatter(2);
const { cst, cmt, fnc, kwd, prp, str } = formatColors;
formatter.newLine();
formatter.add(cmt(actionTitle(action)));
let navigationSignal: NavigationSignal | undefined;
if (action.name !== 'navigate' && action.signals && action.signals.length)
navigationSignal = action.signals[action.signals.length - 1];
if (navigationSignal) {
formatter.add(`${kwd('await')} ${cst('Promise')}.${fnc('all')}([
${cst('page')}.${fnc('waitForNavigation')}({ ${prp('url')}: ${str(navigationSignal.url)} }),`);
}
const subject = action.frameUrl ?
`${cst('page')}.${fnc('frame')}(${formatObject({ url: action.frameUrl })})` : cst('page');
const prefix = navigationSignal ? '' : kwd('await') + ' ';
const suffix = navigationSignal ? '' : ';';
switch (action.name) {
case 'click': {
let method = 'click';
if (action.clickCount === 2)
method = 'dblclick';
const modifiers = toModifiers(action.modifiers);
const options: dom.ClickOptions = {};
if (action.button !== 'left')
options.button = action.button;
if (modifiers.length)
options.modifiers = modifiers;
if (action.clickCount > 2)
options.clickCount = action.clickCount;
const optionsString = formatOptions(options);
formatter.add(`${prefix}${subject}.${fnc(method)}(${str(action.selector)}${optionsString})${suffix}`);
break;
}
case 'check':
formatter.add(`${prefix}${subject}.${fnc('check')}(${str(action.selector)})${suffix}`);
break;
case 'uncheck':
formatter.add(`${prefix}${subject}.${fnc('uncheck')}(${str(action.selector)})${suffix}`);
break;
case 'fill':
formatter.add(`${prefix}${subject}.${fnc('fill')}(${str(action.selector)}, ${str(action.text)})${suffix}`);
break;
case 'press': {
const modifiers = toModifiers(action.modifiers);
const shortcut = [...modifiers, action.key].join('+');
formatter.add(`${prefix}${subject}.${fnc('press')}(${str(action.selector)}, ${str(shortcut)})${suffix}`);
break;
}
case 'navigate':
formatter.add(`${prefix}${subject}.${fnc('goto')}(${str(action.url)})${suffix}`);
break;
case 'select':
formatter.add(`${prefix}${subject}.${fnc('select')}(${str(action.selector)}, ${formatObject(action.options.length > 1 ? action.options : action.options[0])})${suffix}`);
break;
}
if (navigationSignal)
formatter.add(`]);`);
return formatter.format();
}
}
function formatOptions(value: any): string {
const keys = Object.keys(value);
if (!keys.length)
return '';
return ', ' + formatObject(value);
}
function formatObject(value: any): string {
const { prp, str } = formatColors;
if (typeof value === 'string')
return str(value);
if (Array.isArray(value))
return `[${value.map(o => formatObject(o)).join(', ')}]`;
if (typeof value === 'object') {
const keys = Object.keys(value);
if (!keys.length)
return '{}';
const tokens: string[] = [];
for (const key of keys)
tokens.push(`${prp(key)}: ${formatObject(value[key])}`);
return `{${tokens.join(', ')}}`;
}
return String(value);
}
function toModifiers(modifiers: number): ('Alt' | 'Control' | 'Meta' | 'Shift')[] {
const result: ('Alt' | 'Control' | 'Meta' | 'Shift')[] = [];
if (modifiers & 1)
result.push('Alt');
if (modifiers & 2)
result.push('Control');
if (modifiers & 4)
result.push('Meta');
if (modifiers & 8)
result.push('Shift');
return result;
}

View file

@ -32,7 +32,6 @@ import { EventEmitter } from 'events';
import { FileChooser } from './fileChooser';
import { logError, InnerLogger } from './logger';
import { ProgressController } from './progress';
import { RecorderController } from './debug/recorderController';
export interface PageDelegate {
readonly rawMouse: input.RawMouse;
@ -504,12 +503,6 @@ export class Page extends EventEmitter {
return this.mainFrame().uncheck(selector, options);
}
async _startRecordingUser() {
if (!helper.isDebugMode())
throw new Error('page._startRecordingUser is only available with PWDEBUG=1 environment variable');
new RecorderController(this).start();
}
async waitForTimeout(timeout: number) {
await this.mainFrame().waitForTimeout(timeout);
}

View file

@ -29,6 +29,12 @@ export interface Progress {
throwIfAborted(): void;
}
let runningTaskCount = 0;
export function isRunningTask(): boolean {
return !!runningTaskCount;
}
export async function runAbortableTask<T>(task: (progress: Progress) => Promise<T>, logger: InnerLogger, timeout: number, apiName?: string): Promise<T> {
const controller = new ProgressController(logger, timeout, apiName);
return controller.run(task);
@ -70,6 +76,7 @@ export class ProgressController {
async run<T>(task: (progress: Progress) => Promise<T>): Promise<T> {
assert(this._state === 'before');
this._state = 'running';
++runningTaskCount;
const progress: Progress = {
apiName: this._apiName,
@ -104,7 +111,6 @@ export class ProgressController {
const result = await Promise.race([promise, this._forceAbortPromise]);
clearTimeout(timer);
this._state = 'finished';
this._logRecording = [];
this._logger.log(apiLog, `<= ${this._apiName} succeeded`);
return result;
} catch (e) {
@ -112,10 +118,12 @@ export class ProgressController {
rewriteErrorMessage(e, e.message + formatLogRecording(this._logRecording, this._apiName) + kLoggingNote);
clearTimeout(timer);
this._state = 'aborted';
this._logRecording = [];
this._logger.log(apiLog, `<= ${this._apiName} failed`);
await Promise.all(this._cleanups.splice(0).map(cleanup => runCleanup(cleanup)));
throw e;
} finally {
this._logRecording = [];
--runningTaskCount;
}
}

View file

@ -16,10 +16,12 @@
export class Formatter {
private _baseIndent: string;
private _baseOffset: string;
private _lines: string[] = [];
constructor(indent: number = 2) {
this._baseIndent = ' '.repeat(indent);
constructor(offset = 0) {
this._baseIndent = ' '.repeat(2);
this._baseOffset = ' '.repeat(offset);
}
prepend(text: string) {
@ -49,7 +51,7 @@ export class Formatter {
line = spaces + extraSpaces + line;
if (line.endsWith('{') || line.endsWith('['))
spaces += this._baseIndent;
return line;
return this._baseOffset + line;
}).join('\n');
}
}
@ -62,7 +64,7 @@ export const formatColors: { cst: StringFormatter; kwd: StringFormatter; fnc: St
fnc: text => `\u001b[38;5;223m${text}\x1b[0m`,
prp: text => `\u001b[38;5;159m${text}\x1b[0m`,
str: text => `\u001b[38;5;130m${quote(text)}\x1b[0m`,
cmt: text => `// \u001b[38;5;23m${text}\x1b[0m`
cmt: text => `\u001b[38;5;23m// ${text}\x1b[0m`
};
function quote(text: string, char: string = '\'') {