diff --git a/__snapshots__/JSONUtils.test.ts.js b/__snapshots__/JSONUtils.test.ts.js
new file mode 100644
index 00000000..28bc1b7d
--- /dev/null
+++ b/__snapshots__/JSONUtils.test.ts.js
@@ -0,0 +1,46 @@
+exports['JSONUtils should format JSON as JS 1'] = `
+{
+  title: 'test',
+  test: true,
+  steps: [
+    {
+      type: 'click',
+      target: 'main',
+      selectors: [
+        'aria/Test',
+        [
+          '.cls',
+          '.cls'
+        ]
+      ],
+      offsetX: 1,
+      offsetY: 1,
+      assertedEvents: [
+        {
+          type: 'navigation'
+        }
+      ]
+    },
+    {
+      type: 'click',
+      target: 'main',
+      selectors: [
+        'aria/Test'
+      ],
+      offsetX: 1,
+      offsetY: 1,
+      assertedEvents: [
+        {
+          type: 'navigation'
+        }
+      ]
+    }
+  ],
+  otherTest: 1.234,
+  nullTest: null
+}
+`;
+
+exports['JSONUtils should properly escape <script> 1'] = `
+'\\x3Cscript>test\\x3C/script>\\x3Cscript>test\\x3C/script>\\x3Cscript>test\\x3C/script>'
+`;
diff --git a/__snapshots__/LighthouseStringifyExtension.test.ts.js b/__snapshots__/LighthouseStringifyExtension.test.ts.js
index b0bfe3ee..7596ceaa 100644
--- a/__snapshots__/LighthouseStringifyExtension.test.ts.js
+++ b/__snapshots__/LighthouseStringifyExtension.test.ts.js
@@ -8,28 +8,43 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
   const timeout = 5000;
   page.setDefaultTimeout(timeout);
 
-  const flags = {"screenEmulation":{"disabled":true}}
+  const flags = {
+    screenEmulation: {
+      disabled: true
+    }
+  }
   const config = undefined;
   const lhApi = await import('lighthouse/core/api.js');
-  const lhFlow = await lhApi.startFlow(page, {name: "Test Flow", config, flags});
+  const lhFlow = await lhApi.startFlow(page, {name: 'Test Flow', config, flags});
   {
     const targetPage = page;
-    await targetPage.setViewport({"width":757,"height":988})
+    await targetPage.setViewport({
+      width: 757,
+      height: 988
+    })
   }
   await lhFlow.startNavigation();
   {
     const targetPage = page;
     const promises = [];
     promises.push(targetPage.waitForNavigation());
-    await targetPage.goto("https://example.com");
+    await targetPage.goto('https://example.com');
     await Promise.all(promises);
   }
   await lhFlow.endNavigation();
   await lhFlow.startTimespan();
   {
     const targetPage = page;
-    await scrollIntoViewIfNeeded([["#button"]], targetPage, timeout);
-    const element = await waitForSelectors([["#button"]], targetPage, { timeout, visible: true });
+    await scrollIntoViewIfNeeded([
+      [
+        '#button'
+      ]
+    ], targetPage, timeout);
+    const element = await waitForSelectors([
+      [
+        '#button'
+      ]
+    ], targetPage, { timeout, visible: true });
     await element.click({
       offset: {
         x: 61,
@@ -54,28 +69,43 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
   const timeout = 5000;
   page.setDefaultTimeout(timeout);
 
-  const flags = {"screenEmulation":{"disabled":true}}
+  const flags = {
+    screenEmulation: {
+      disabled: true
+    }
+  }
   const config = undefined;
   const lhApi = await import('lighthouse/core/api.js');
-  const lhFlow = await lhApi.startFlow(page, {name: "Test Flow", config, flags});
+  const lhFlow = await lhApi.startFlow(page, {name: 'Test Flow', config, flags});
   {
     const targetPage = page;
-    await targetPage.setViewport({"width":757,"height":988})
+    await targetPage.setViewport({
+      width: 757,
+      height: 988
+    })
   }
   await lhFlow.startNavigation();
   {
     const targetPage = page;
     const promises = [];
     promises.push(targetPage.waitForNavigation());
-    await targetPage.goto("https://example.com");
+    await targetPage.goto('https://example.com');
     await Promise.all(promises);
   }
   await lhFlow.endNavigation();
   await lhFlow.startTimespan();
   {
     const targetPage = page;
-    await scrollIntoViewIfNeeded([["#button"]], targetPage, timeout);
-    const element = await waitForSelectors([["#button"]], targetPage, { timeout, visible: true });
+    await scrollIntoViewIfNeeded([
+      [
+        '#button'
+      ]
+    ], targetPage, timeout);
+    const element = await waitForSelectors([
+      [
+        '#button'
+      ]
+    ], targetPage, { timeout, visible: true });
     await element.click({
       offset: {
         x: 61,
@@ -89,7 +119,7 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
     const targetPage = page;
     const promises = [];
     promises.push(targetPage.waitForNavigation());
-    await targetPage.goto("https://example.com/page/");
+    await targetPage.goto('https://example.com/page/');
     await Promise.all(promises);
   }
   await lhFlow.endNavigation();
@@ -111,20 +141,27 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
   const timeout = 5000;
   page.setDefaultTimeout(timeout);
 
-  const flags = {"screenEmulation":{"disabled":true}}
+  const flags = {
+    screenEmulation: {
+      disabled: true
+    }
+  }
   const config = undefined;
   const lhApi = await import('lighthouse/core/api.js');
-  const lhFlow = await lhApi.startFlow(page, {name: "Test Flow", config, flags});
+  const lhFlow = await lhApi.startFlow(page, {name: 'Test Flow', config, flags});
   {
     const targetPage = page;
-    await targetPage.setViewport({"width":757,"height":988})
+    await targetPage.setViewport({
+      width: 757,
+      height: 988
+    })
   }
   await lhFlow.startNavigation();
   {
     const targetPage = page;
     const promises = [];
     promises.push(targetPage.waitForNavigation());
-    await targetPage.goto("https://example.com");
+    await targetPage.goto('https://example.com');
     await Promise.all(promises);
   }
   await lhFlow.endNavigation();
@@ -133,8 +170,16 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
     const targetPage = page;
     const promises = [];
     promises.push(targetPage.waitForNavigation());
-    await scrollIntoViewIfNeeded([["#link"]], targetPage, timeout);
-    const element = await waitForSelectors([["#link"]], targetPage, { timeout, visible: true });
+    await scrollIntoViewIfNeeded([
+      [
+        '#link'
+      ]
+    ], targetPage, timeout);
+    const element = await waitForSelectors([
+      [
+        '#link'
+      ]
+    ], targetPage, { timeout, visible: true });
     await element.click({
       offset: {
         x: 61,
diff --git a/__snapshots__/PuppeteerReplayStringifyExtension.test.ts.js b/__snapshots__/PuppeteerReplayStringifyExtension.test.ts.js
index 58accb63..431fc2bc 100644
--- a/__snapshots__/PuppeteerReplayStringifyExtension.test.ts.js
+++ b/__snapshots__/PuppeteerReplayStringifyExtension.test.ts.js
@@ -2,16 +2,16 @@ exports[
   'PuppeteerReplayStringifyExtension should print the script for a click step 1'
 ] = `
 await runner.runStep({
-  "type": "click",
-  "target": "main",
-  "selectors": [
-    "aria/Test"
+  type: 'click',
+  target: 'main',
+  selectors: [
+    'aria/Test'
   ],
-  "offsetX": 1,
-  "offsetY": 1,
-  "assertedEvents": [
+  offsetX: 1,
+  offsetY: 1,
+  assertedEvents: [
     {
-      "type": "navigation"
+      type: 'navigation'
     }
   ]
 });
@@ -28,16 +28,16 @@ export async function run(extension) {
   await runner.runBeforeAllSteps();
 
   await runner.runStep({
-    "type": "click",
-    "target": "main",
-    "selectors": [
-      "aria/Test"
+    type: 'click',
+    target: 'main',
+    selectors: [
+      'aria/Test'
     ],
-    "offsetX": 1,
-    "offsetY": 1,
-    "assertedEvents": [
+    offsetX: 1,
+    offsetY: 1,
+    assertedEvents: [
       {
-        "type": "navigation"
+        type: 'navigation'
       }
     ]
   });
diff --git a/__snapshots__/PuppeteerStringifyExtension.test.ts.js b/__snapshots__/PuppeteerStringifyExtension.test.ts.js
index 1543aedb..cf86603d 100644
--- a/__snapshots__/PuppeteerStringifyExtension.test.ts.js
+++ b/__snapshots__/PuppeteerStringifyExtension.test.ts.js
@@ -3,8 +3,12 @@ exports[
 ] = `
 {
   const targetPage = page;
-  await scrollIntoViewIfNeeded(["aria/Test"], targetPage, timeout);
-  const element = await waitForSelectors(["aria/Test"], targetPage, { timeout, visible: true });
+  await scrollIntoViewIfNeeded([
+    'aria/Test'
+  ], targetPage, timeout);
+  const element = await waitForSelectors([
+    'aria/Test'
+  ], targetPage, { timeout, visible: true });
   await element.click({
     offset: {
       x: 1,
@@ -22,8 +26,12 @@ exports[
   const targetPage = page;
   const promises = [];
   promises.push(targetPage.waitForNavigation());
-  await scrollIntoViewIfNeeded(["aria/Test"], targetPage, timeout);
-  const element = await waitForSelectors(["aria/Test"], targetPage, { timeout, visible: true });
+  await scrollIntoViewIfNeeded([
+    'aria/Test'
+  ], targetPage, timeout);
+  const element = await waitForSelectors([
+    'aria/Test'
+  ], targetPage, { timeout, visible: true });
   await element.click({
     offset: {
       x: 1,
@@ -40,8 +48,18 @@ exports[
 ] = `
 {
   const targetPage = page;
-  await scrollIntoViewIfNeeded([["aria/Test","aria/Test2"]], targetPage, timeout);
-  const element = await waitForSelectors([["aria/Test","aria/Test2"]], targetPage, { timeout, visible: true });
+  await scrollIntoViewIfNeeded([
+    [
+      'aria/Test',
+      'aria/Test2'
+    ]
+  ], targetPage, timeout);
+  const element = await waitForSelectors([
+    [
+      'aria/Test',
+      'aria/Test2'
+    ]
+  ], targetPage, { timeout, visible: true });
   await element.click({
     offset: {
       x: 1,
@@ -57,15 +75,28 @@ exports[
 ] = `
 {
   const targetPage = page;
-  await scrollIntoViewIfNeeded(["aria/Test"], targetPage, timeout);
-  const element = await waitForSelectors(["aria/Test"], targetPage, { timeout, visible: true });
+  await scrollIntoViewIfNeeded([
+    'aria/Test'
+  ], targetPage, timeout);
+  const element = await waitForSelectors([
+    'aria/Test'
+  ], targetPage, { timeout, visible: true });
   const inputType = await element.evaluate(el => el.type);
   if (inputType === 'select-one') {
-    await changeSelectElement(element, "Hello World")
-  } else if (["textarea","text","url","tel","search","password","number","email"].includes(inputType)) {
-    await typeIntoElement(element, "Hello World");
+    await changeSelectElement(element, 'Hello World')
+  } else if ([
+    'textarea',
+    'text',
+    'url',
+    'tel',
+    'search',
+    'password',
+    'number',
+    'email'
+  ].includes(inputType)) {
+    await typeIntoElement(element, 'Hello World');
   } else {
-    await changeElementValue(element, "Hello World");
+    await changeElementValue(element, 'Hello World');
   }
 }
 
@@ -76,15 +107,28 @@ exports[
 ] = `
 {
   const targetPage = page;
-  await scrollIntoViewIfNeeded(["aria/Test"], targetPage, timeout);
-  const element = await waitForSelectors(["aria/Test"], targetPage, { timeout, visible: true });
+  await scrollIntoViewIfNeeded([
+    'aria/Test'
+  ], targetPage, timeout);
+  const element = await waitForSelectors([
+    'aria/Test'
+  ], targetPage, { timeout, visible: true });
   const inputType = await element.evaluate(el => el.type);
   if (inputType === 'select-one') {
-    await changeSelectElement(element, "#333333")
-  } else if (["textarea","text","url","tel","search","password","number","email"].includes(inputType)) {
-    await typeIntoElement(element, "#333333");
+    await changeSelectElement(element, '#333333')
+  } else if ([
+    'textarea',
+    'text',
+    'url',
+    'tel',
+    'search',
+    'password',
+    'number',
+    'email'
+  ].includes(inputType)) {
+    await typeIntoElement(element, '#333333');
   } else {
-    await changeElementValue(element, "#333333");
+    await changeElementValue(element, '#333333');
   }
 }
 
diff --git a/__snapshots__/lighthouse.test.ts.js b/__snapshots__/lighthouse.test.ts.js
index 1ee0a9b3..8542a330 100644
--- a/__snapshots__/lighthouse.test.ts.js
+++ b/__snapshots__/lighthouse.test.ts.js
@@ -10,25 +10,36 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
   const timeout = 5000;
   page.setDefaultTimeout(timeout);
 
-  const flags = {"screenEmulation":{"disabled":true}}
+  const flags = {
+    screenEmulation: {
+      disabled: true
+    }
+  }
   const config = (await import('lighthouse/core/config/desktop-config.js')).default;
   const lhApi = await import('lighthouse/core/api.js');
-  const lhFlow = await lhApi.startFlow(page, {name: "Test desktop", config, flags});
+  const lhFlow = await lhApi.startFlow(page, {name: 'Test desktop', config, flags});
   {
     const targetPage = page;
-    await targetPage.setViewport({"width":757,"height":988})
+    await targetPage.setViewport({
+      width: 757,
+      height: 988
+    })
   }
   await lhFlow.startNavigation();
   {
     const targetPage = page;
-    await targetPage.goto("http://localhost:8907/main.html");
+    await targetPage.goto('http://localhost:8907/main.html');
   }
   await lhFlow.endNavigation();
   await lhFlow.startTimespan();
   {
     const targetPage = page;
-    await scrollIntoViewIfNeeded(["#test"], targetPage, timeout);
-    const element = await waitForSelectors(["#test"], targetPage, { timeout, visible: true });
+    await scrollIntoViewIfNeeded([
+      '#test'
+    ], targetPage, timeout);
+    const element = await waitForSelectors([
+      '#test'
+    ], targetPage, { timeout, visible: true });
     await element.click({
       button: 'left',
       offset: {
@@ -39,8 +50,12 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
   }
   {
     const targetPage = page;
-    await scrollIntoViewIfNeeded(["#test"], targetPage, timeout);
-    const element = await waitForSelectors(["#test"], targetPage, { timeout, visible: true });
+    await scrollIntoViewIfNeeded([
+      '#test'
+    ], targetPage, timeout);
+    const element = await waitForSelectors([
+      '#test'
+    ], targetPage, { timeout, visible: true });
     await element.click({
       button: 'middle',
       offset: {
@@ -55,8 +70,12 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
     const targetPage = page;
     const promises = [];
     promises.push(targetPage.waitForNavigation());
-    await scrollIntoViewIfNeeded(["a[href=\\"main2.html\\"]"], targetPage, timeout);
-    const element = await waitForSelectors(["a[href=\\"main2.html\\"]"], targetPage, { timeout, visible: true });
+    await scrollIntoViewIfNeeded([
+      'a[href="main2.html"]'
+    ], targetPage, timeout);
+    const element = await waitForSelectors([
+      'a[href="main2.html"]'
+    ], targetPage, { timeout, visible: true });
     await element.click({
       offset: {
         x: 1,
@@ -258,6 +277,6 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
   console.error(err);
   process.exit(1);
 });
-//# recorderSourceMap=BNERGXNkBMwBR
+//# recorderSourceMap=BRHYGeRvBQ/BV
 
 `;
diff --git a/__snapshots__/stringify.test.ts.js b/__snapshots__/stringify.test.ts.js
index 3f5cc926..91639696 100644
--- a/__snapshots__/stringify.test.ts.js
+++ b/__snapshots__/stringify.test.ts.js
@@ -9,7 +9,7 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
 
   {
     const targetPage = page;
-    await targetPage.goto("https://localhost/");
+    await targetPage.goto('https://localhost/');
   }
 
   await browser.close();
@@ -431,11 +431,15 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
   page.setDefaultTimeout(timeout);
 
   {
-    const target = await browser.waitForTarget(t => t.url() === "https://localhost/test", { timeout });
+    const target = await browser.waitForTarget(t => t.url() === 'https://localhost/test', { timeout });
     const targetPage = await target.page();
     targetPage.setDefaultTimeout(timeout);
-    await scrollIntoViewIfNeeded(["aria/Test"], targetPage, timeout);
-    const element = await waitForSelectors(["aria/Test"], targetPage, { timeout, visible: true });
+    await scrollIntoViewIfNeeded([
+      'aria/Test'
+    ], targetPage, timeout);
+    const element = await waitForSelectors([
+      'aria/Test'
+    ], targetPage, { timeout, visible: true });
     await element.click({
       offset: {
         x: 1,
@@ -633,7 +637,7 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
   console.error(err);
   process.exit(1);
 });
-//# recorderSourceMap=BIN
+//# recorderSourceMap=BIR
 
 `;
 
@@ -648,11 +652,15 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
 
   {
     const timeout = 20000;
-    const target = await browser.waitForTarget(t => t.url() === "https://localhost/test", { timeout });
+    const target = await browser.waitForTarget(t => t.url() === 'https://localhost/test', { timeout });
     const targetPage = await target.page();
     targetPage.setDefaultTimeout(timeout);
-    await scrollIntoViewIfNeeded(["aria/Test"], targetPage, timeout);
-    const element = await waitForSelectors(["aria/Test"], targetPage, { timeout, visible: true });
+    await scrollIntoViewIfNeeded([
+      'aria/Test'
+    ], targetPage, timeout);
+    const element = await waitForSelectors([
+      'aria/Test'
+    ], targetPage, { timeout, visible: true });
     await element.click({
       offset: {
         x: 1,
@@ -850,7 +858,7 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
   console.error(err);
   process.exit(1);
 });
-//# recorderSourceMap=BIO
+//# recorderSourceMap=BIS
 
 `;
 
@@ -870,8 +878,12 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
     let frame = targetPage.mainFrame();
     frame = frame.childFrames()[1];
     frame = frame.childFrames()[1];
-    await scrollIntoViewIfNeeded(["aria/Test"], frame, timeout);
-    const element = await waitForSelectors(["aria/Test"], frame, { timeout, visible: true });
+    await scrollIntoViewIfNeeded([
+      'aria/Test'
+    ], frame, timeout);
+    const element = await waitForSelectors([
+      'aria/Test'
+    ], frame, { timeout, visible: true });
     await element.click({
       offset: {
         x: 1,
@@ -1069,7 +1081,7 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
   console.error(err);
   process.exit(1);
 });
-//# recorderSourceMap=BIO
+//# recorderSourceMap=BIS
 
 `;
 
@@ -1084,7 +1096,7 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
 
   {
     const targetPage = page;
-    await targetPage.keyboard.down("E");
+    await targetPage.keyboard.down('E');
   }
 
   await browser.close();
@@ -1291,7 +1303,7 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
 
   {
     const targetPage = page;
-    await targetPage.keyboard.up("E");
+    await targetPage.keyboard.up('E');
   }
 
   await browser.close();
@@ -1498,8 +1510,12 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
 
   {
     const targetPage = page;
-    await scrollIntoViewIfNeeded(["body > div:nth-child(1)"], targetPage, timeout);
-    const element = await waitForSelectors(["body > div:nth-child(1)"], targetPage, { timeout, visible: true });
+    await scrollIntoViewIfNeeded([
+      'body > div:nth-child(1)'
+    ], targetPage, timeout);
+    const element = await waitForSelectors([
+      'body > div:nth-child(1)'
+    ], targetPage, { timeout, visible: true });
     await element.evaluate((el, x, y) => { el.scrollTop = y; el.scrollLeft = x; }, 0, 40);
   }
   {
@@ -1696,7 +1712,7 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
   console.error(err);
   process.exit(1);
 });
-//# recorderSourceMap=BIGOE
+//# recorderSourceMap=BIKSE
 
 `;
 
@@ -1713,7 +1729,12 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
 
   {
     const targetPage = page;
-    await waitForElement({"type":"waitForElement","selectors":["body > div:nth-child(1)"]}, targetPage, timeout);
+    await waitForElement({
+      type: 'waitForElement',
+      selectors: [
+        'body > div:nth-child(1)'
+      ]
+    }, targetPage, timeout);
   }
 
   await browser.close();
@@ -1905,7 +1926,7 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
   console.error(err);
   process.exit(1);
 });
-//# recorderSourceMap=BIE
+//# recorderSourceMap=BIJ
 
 `;
 
@@ -1922,7 +1943,7 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
 
   {
     const targetPage = page;
-    await targetPage.waitForFunction("1 + 2", { timeout });
+    await targetPage.waitForFunction('1 + 2', { timeout });
   }
 
   await browser.close();
@@ -2118,4 +2139,4 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
 
 `;
 
-exports['stringify should produce a source map 1'] = [1, 8, 4];
+exports['stringify should produce a source map 1'] = [1, 8, 9];
diff --git a/__snapshots__/stringifyStep.test.ts.js b/__snapshots__/stringifyStep.test.ts.js
index e05eede8..a2c9207b 100644
--- a/__snapshots__/stringifyStep.test.ts.js
+++ b/__snapshots__/stringifyStep.test.ts.js
@@ -1,7 +1,7 @@
 exports['stringifyStep should stringify a single step 1'] = `
 {
   const targetPage = page;
-  await targetPage.goto("https://localhost/");
+  await targetPage.goto('https://localhost/');
 }
 
 `;
diff --git a/src/JSONUtils.ts b/src/JSONUtils.ts
new file mode 100644
index 00000000..c0cdc2b2
--- /dev/null
+++ b/src/JSONUtils.ts
@@ -0,0 +1,159 @@
+/**
+    Copyright 2022 Google LLC
+
+    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
+
+        https://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.
+ */
+
+/**
+ * Copyright (c) 2020 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+export function formatJSONAsJS(json: unknown, indent: string): string {
+  const buffer: string[] = [];
+  format(json, buffer, 1, indent);
+  return buffer.join('');
+}
+
+function format(
+  json: unknown,
+  buffer: string[] = [],
+  level = 1,
+  indent = '  '
+) {
+  switch (typeof json) {
+    case 'bigint':
+    case 'symbol':
+    case 'function':
+    case 'undefined':
+      throw new Error('Invalid JSON');
+    case 'number':
+    case 'boolean':
+      buffer.push(String(json));
+      break;
+    case 'string':
+      buffer.push(formatAsJSLiteral(json));
+      break;
+    case 'object': {
+      if (json === null) {
+        buffer.push('null');
+      } else if (Array.isArray(json)) {
+        buffer.push('[\n');
+        for (let i = 0; i < json.length; i++) {
+          buffer.push(indent.repeat(level));
+          format(json[i], buffer, level + 1, indent);
+          if (i !== json.length - 1) {
+            buffer.push(',');
+          }
+          buffer.push('\n');
+        }
+        buffer.push(indent.repeat(level - 1) + ']');
+      } else {
+        buffer.push('{\n');
+        const keys = Object.keys(json);
+        for (let i = 0; i < keys.length; i++) {
+          const key = keys[i] as string;
+          const value = (json as any)[key];
+          if (value === undefined) {
+            continue;
+          }
+          buffer.push(indent.repeat(level));
+          buffer.push(key);
+          buffer.push(': ');
+          format(value, buffer, level + 1, indent);
+          if (i !== keys.length - 1) {
+            buffer.push(',');
+          }
+          buffer.push('\n');
+        }
+        buffer.push(indent.repeat(level - 1) + '}');
+      }
+      break;
+    }
+    default:
+      throw new Error('Unknown object type');
+  }
+  return buffer;
+}
+
+// Taken from https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/core/platform/string-utilities.ts;l=29;drc=111134437ee51d74433829bed0088f7239e18867.
+const toHexadecimal = (charCode: number, padToLength: number): string => {
+  return charCode.toString(16).toUpperCase().padStart(padToLength, '0');
+};
+
+// Remember to update the third group in the regexps patternsToEscape and
+// patternsToEscapePlusSingleQuote when adding new entries in this map.
+const escapedReplacements = new Map([
+  ['\b', '\\b'],
+  ['\f', '\\f'],
+  ['\n', '\\n'],
+  ['\r', '\\r'],
+  ['\t', '\\t'],
+  ['\v', '\\v'],
+  ["'", "\\'"],
+  ['\\', '\\\\'],
+  ['<!--', '\\x3C!--'],
+  ['<script', '\\x3Cscript'],
+  ['</script', '\\x3C/script'],
+]);
+
+export const formatAsJSLiteral = (content: string): string => {
+  const patternsToEscape =
+    /(\\|<(?:!--|\/?script))|(\p{Control})|(\p{Surrogate})/gu;
+  const patternsToEscapePlusSingleQuote =
+    /(\\|'|<(?:!--|\/?script))|(\p{Control})|(\p{Surrogate})/gu;
+  const escapePattern = (
+    match: string,
+    pattern: string,
+    controlChar: string,
+    loneSurrogate: string
+  ): string => {
+    if (controlChar) {
+      if (escapedReplacements.has(controlChar)) {
+        // @ts-ignore https://github.com/microsoft/TypeScript/issues/13086
+        return escapedReplacements.get(controlChar);
+      }
+      const twoDigitHex = toHexadecimal(controlChar.charCodeAt(0), 2);
+      return '\\x' + twoDigitHex;
+    }
+    if (loneSurrogate) {
+      const fourDigitHex = toHexadecimal(loneSurrogate.charCodeAt(0), 4);
+      return '\\u' + fourDigitHex;
+    }
+    if (pattern) {
+      return escapedReplacements.get(pattern) || '';
+    }
+    return match;
+  };
+
+  let escapedContent = '';
+  let quote = '';
+  if (!content.includes("'")) {
+    quote = "'";
+    escapedContent = content.replace(patternsToEscape, escapePattern);
+  } else if (!content.includes('"')) {
+    quote = '"';
+    escapedContent = content.replace(patternsToEscape, escapePattern);
+  } else if (!content.includes('`') && !content.includes('${')) {
+    quote = '`';
+    escapedContent = content.replace(patternsToEscape, escapePattern);
+  } else {
+    quote = "'";
+    escapedContent = content.replace(
+      patternsToEscapePlusSingleQuote,
+      escapePattern
+    );
+  }
+  return `${quote}${escapedContent}${quote}`;
+};
diff --git a/src/PuppeteerReplayStringifyExtension.ts b/src/PuppeteerReplayStringifyExtension.ts
index 01e1b4fa..1eb98a03 100644
--- a/src/PuppeteerReplayStringifyExtension.ts
+++ b/src/PuppeteerReplayStringifyExtension.ts
@@ -17,6 +17,7 @@
 import type { LineWriter } from './LineWriter.js';
 import type { Step } from './Schema.js';
 import { StringifyExtension } from './StringifyExtension.js';
+import { formatJSONAsJS } from './JSONUtils.js';
 
 /**
  * Stringifies a user flow to a script that uses \@puppeteer/replay's own API.
@@ -52,7 +53,7 @@ export class PuppeteerReplayStringifyExtension extends StringifyExtension {
 
   override async stringifyStep(out: LineWriter, step: Step) {
     out.appendLine(
-      `await runner.runStep(${JSON.stringify(step, null, out.getIndent())});`
+      `await runner.runStep(${formatJSONAsJS(step, out.getIndent())});`
     );
   }
 }
diff --git a/src/PuppeteerStringifyExtension.ts b/src/PuppeteerStringifyExtension.ts
index 83a91dfc..48cc7d90 100644
--- a/src/PuppeteerStringifyExtension.ts
+++ b/src/PuppeteerStringifyExtension.ts
@@ -42,6 +42,7 @@ import {
   mouseButtonMap,
   typeableInputTypes,
 } from './SchemaUtils.js';
+import { formatJSONAsJS } from './JSONUtils.js';
 
 export class PuppeteerStringifyExtension extends StringifyExtension {
   override async beforeAllSteps(out: LineWriter, flow: UserFlow) {
@@ -108,8 +109,9 @@ export class PuppeteerStringifyExtension extends StringifyExtension {
       out.appendLine('const targetPage = page;');
     } else {
       out.appendLine(
-        `const target = await browser.waitForTarget(t => t.url() === ${formatAsJSLiteral(
-          target
+        `const target = await browser.waitForTarget(t => t.url() === ${formatJSONAsJS(
+          target,
+          out.getIndent()
         )}, { timeout });`
       );
       out.appendLine('const targetPage = await target.page();');
@@ -135,13 +137,15 @@ export class PuppeteerStringifyExtension extends StringifyExtension {
 
   #appendWaitForSelector(out: LineWriter, step: StepWithSelectors): void {
     out.appendLine(
-      `await scrollIntoViewIfNeeded(${JSON.stringify(step.selectors)}, ${
-        step.frame ? 'frame' : 'targetPage'
-      }, timeout);`
+      `await scrollIntoViewIfNeeded(${formatJSONAsJS(
+        step.selectors,
+        out.getIndent()
+      )}, ${step.frame ? 'frame' : 'targetPage'}, timeout);`
     );
     out.appendLine(
-      `const element = await waitForSelectors(${JSON.stringify(
-        step.selectors
+      `const element = await waitForSelectors(${formatJSONAsJS(
+        step.selectors,
+        out.getIndent()
       )}, ${step.frame ? 'frame' : 'targetPage'}, { timeout, visible: true });`
     );
   }
@@ -186,19 +190,29 @@ export class PuppeteerStringifyExtension extends StringifyExtension {
     out.appendLine('const inputType = await element.evaluate(el => el.type);');
     out.appendLine(`if (inputType === 'select-one') {`);
     out.appendLine(
-      `  await changeSelectElement(element, ${formatAsJSLiteral(step.value)})`
+      `  await changeSelectElement(element, ${formatJSONAsJS(
+        step.value,
+        out.getIndent()
+      )})`
     );
     out.appendLine(
-      `} else if (${JSON.stringify(
-        Array.from(typeableInputTypes)
+      `} else if (${formatJSONAsJS(
+        Array.from(typeableInputTypes),
+        out.getIndent()
       )}.includes(inputType)) {`
     );
     out.appendLine(
-      `  await typeIntoElement(element, ${formatAsJSLiteral(step.value)});`
+      `  await typeIntoElement(element, ${formatJSONAsJS(
+        step.value,
+        out.getIndent()
+      )});`
     );
     out.appendLine('} else {');
     out.appendLine(
-      `  await changeElementValue(element, ${formatAsJSLiteral(step.value)});`
+      `  await changeElementValue(element, ${formatJSONAsJS(
+        step.value,
+        out.getIndent()
+      )});`
     );
     out.appendLine('}');
   }
@@ -217,13 +231,19 @@ export class PuppeteerStringifyExtension extends StringifyExtension {
 
   #appendKeyDownStep(out: LineWriter, step: KeyDownStep): void {
     out.appendLine(
-      `await targetPage.keyboard.down(${JSON.stringify(step.key)});`
+      `await targetPage.keyboard.down(${formatJSONAsJS(
+        step.key,
+        out.getIndent()
+      )});`
     );
   }
 
   #appendKeyUpStep(out: LineWriter, step: KeyUpStep): void {
     out.appendLine(
-      `await targetPage.keyboard.up(${JSON.stringify(step.key)});`
+      `await targetPage.keyboard.up(${formatJSONAsJS(
+        step.key,
+        out.getIndent()
+      )});`
     );
   }
 
@@ -233,10 +253,13 @@ export class PuppeteerStringifyExtension extends StringifyExtension {
 
   #appendViewportStep(out: LineWriter, step: SetViewportStep): void {
     out.appendLine(
-      `await targetPage.setViewport(${JSON.stringify({
-        width: step.width,
-        height: step.height,
-      })})`
+      `await targetPage.setViewport(${formatJSONAsJS(
+        {
+          width: step.width,
+          height: step.height,
+        },
+        out.getIndent()
+      )})`
     );
   }
 
@@ -289,7 +312,9 @@ export class PuppeteerStringifyExtension extends StringifyExtension {
   }
 
   #appendNavigationStep(out: LineWriter, step: NavigateStep): void {
-    out.appendLine(`await targetPage.goto(${formatAsJSLiteral(step.url)});`);
+    out.appendLine(
+      `await targetPage.goto(${formatJSONAsJS(step.url, out.getIndent())});`
+    );
   }
 
   #appendWaitExpressionStep(
@@ -299,13 +324,16 @@ export class PuppeteerStringifyExtension extends StringifyExtension {
     out.appendLine(
       `await ${
         step.frame ? 'frame' : 'targetPage'
-      }.waitForFunction(${formatAsJSLiteral(step.expression)}, { timeout });`
+      }.waitForFunction(${formatJSONAsJS(
+        step.expression,
+        out.getIndent()
+      )}, { timeout });`
     );
   }
 
   #appendWaitForElementStep(out: LineWriter, step: WaitForElementStep): void {
     out.appendLine(
-      `await waitForElement(${JSON.stringify(step)}, ${
+      `await waitForElement(${formatJSONAsJS(step, out.getIndent())}, ${
         step.frame ? 'frame' : 'targetPage'
       }, timeout);`
     );
@@ -314,12 +342,6 @@ export class PuppeteerStringifyExtension extends StringifyExtension {
 
 const defaultTimeout = 5000;
 
-function formatAsJSLiteral(value: unknown): string {
-  // TODO: replace JSON.stringify with a better looking JSLiteral implementation
-  // that formats using '', "", `` depending on the content of the value.
-  return JSON.stringify(value);
-}
-
 const helpers = `async function waitForSelectors(selectors, frame, options) {
   for (const selector of selectors) {
     try {
diff --git a/src/lighthouse/LighthouseStringifyExtension.ts b/src/lighthouse/LighthouseStringifyExtension.ts
index f7bbe1ba..07dd81a7 100644
--- a/src/lighthouse/LighthouseStringifyExtension.ts
+++ b/src/lighthouse/LighthouseStringifyExtension.ts
@@ -20,6 +20,7 @@ import type { LineWriter } from '../LineWriter.js';
 import { Step, StepType, UserFlow } from '../Schema.js';
 
 import { isNavigationStep, isMobileFlow } from './helpers.js';
+import { formatJSONAsJS } from '../JSONUtils.js';
 
 export class LighthouseStringifyExtension extends PuppeteerStringifyExtension {
   #isProcessingTimespan = false;
@@ -34,7 +35,7 @@ export class LighthouseStringifyExtension extends PuppeteerStringifyExtension {
         disabled: true,
       },
     };
-    out.appendLine(`const flags = ${JSON.stringify(flags)}`);
+    out.appendLine(`const flags = ${formatJSONAsJS(flags, out.getIndent())}`);
     if (isMobileFlow(flow)) {
       out.appendLine(`const config = undefined;`);
     } else {
@@ -47,8 +48,9 @@ export class LighthouseStringifyExtension extends PuppeteerStringifyExtension {
     out.appendLine(`const lhApi = await import('lighthouse/core/api.js');`);
     // eslint-disable-next-line max-len
     out.appendLine(
-      `const lhFlow = await lhApi.startFlow(page, {name: ${JSON.stringify(
-        flow.title
+      `const lhFlow = await lhApi.startFlow(page, {name: ${formatJSONAsJS(
+        flow.title,
+        out.getIndent()
       )}, config, flags});`
     );
   }
diff --git a/src/main.ts b/src/main.ts
index ad5140c4..c94d8589 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -38,3 +38,4 @@ export { PuppeteerRunnerOwningBrowserExtension } from './PuppeteerRunnerExtensio
 export { PuppeteerStringifyExtension } from './PuppeteerStringifyExtension.js';
 export { PuppeteerReplayStringifyExtension } from './PuppeteerReplayStringifyExtension.js';
 export { LighthouseStringifyExtension } from './lighthouse/LighthouseStringifyExtension.js';
+export * from './JSONUtils.js';
diff --git a/test/JSONUtils.test.ts b/test/JSONUtils.test.ts
new file mode 100644
index 00000000..c764dd96
--- /dev/null
+++ b/test/JSONUtils.test.ts
@@ -0,0 +1,63 @@
+/**
+    Copyright 2022 Google LLC
+
+    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
+
+        https://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 snapshot from 'snap-shot-it';
+import { assert } from 'chai';
+import { formatJSONAsJS } from '../src/JSONUtils.js';
+import { StepType, AssertedEventType } from '../src/Schema.js';
+
+describe('JSONUtils', () => {
+  it('should format JSON as JS', async () => {
+    const json = {
+      title: 'test',
+      test: true,
+      steps: [
+        {
+          type: StepType.Click as const,
+          target: 'main',
+          selectors: ['aria/Test', ['.cls', '.cls']],
+          offsetX: 1,
+          offsetY: 1,
+          assertedEvents: [{ type: AssertedEventType.Navigation as const }],
+        },
+        {
+          type: StepType.Click as const,
+          target: 'main',
+          selectors: ['aria/Test'],
+          offsetX: 1,
+          offsetY: 1,
+          assertedEvents: [{ type: AssertedEventType.Navigation as const }],
+        },
+      ],
+      otherTest: 1.234,
+      undefinedTest: undefined,
+      nullTest: null,
+    };
+    const str = formatJSONAsJS(json, '  ');
+    snapshot(str);
+    delete json['undefinedTest'];
+    assert.deepStrictEqual(Function(`'use strict';return (${str})`)(), json);
+  });
+
+  it('should properly escape <script>', async () => {
+    snapshot(
+      formatJSONAsJS(
+        '<script>test</script><script>test</script><script>test</script>',
+        ''
+      )
+    );
+  });
+});
diff --git a/test/benchmark.ts b/test/benchmark.test.ts
similarity index 100%
rename from test/benchmark.ts
rename to test/benchmark.test.ts