EXAMPLE 01 • order-pricing.ts

Variable Renaming, Constant Folding & Binding Expressions

Reconstruct mangled identifiers, folded module constants, complex multi-variable expressions, and eliminated dead variables.

OriginalScope (Module, Function, Block)Simple Identifier Bindings (c -> customer)Constant Literal Bindings (0.085 -> TAX_RATE)Complex JS Expression Bindings (d * 0.085 -> taxAmount)Null / Eliminated Variable Bindings (null -> rawAuditToken)

OPEN CHROME DEVTOOLS (F12) FIRST, THEN TRIGGER:

Ready. Click "Run & Pause in Debugger" with DevTools open.

How This Example Works

Production minifiers rename identifiers (customer → c), fold module constants directly into arithmetic (TAX_RATE = 0.085 disappears), eliminate unused variables (rawAuditToken), and inline single-use variables like fullName, isVip, lineTotal, and taxAmount.

With the Scopes proposal, each GeneratedRange provides a values array mapping every variable in its OriginalScope to an arbitrary JavaScript binding expression (or null when optimized out). Chrome DevTools uses this information to reconstruct the Scope sidebar, render inline variable hints, populate autocomplete suggestions with original variable names, and evaluate Conditional Breakpoints and Console expressions via debug evaluate.

What to Try & Verify in DevTools

Inspect Reconstructed Variables & Eliminated Bindings Scope View

Try:Click "Run & Pause in Debugger" with DevTools open (Sources panel) to pause at debugger; in order-pricing.ts.

Local Scope (calculateInvoice): fullName ("Ada Lovelace"), isVip (true), subtotal (250), discountRate (0.15), discountedSubtotal (212.5), and taxAmount (18.0625) are all reconstructed from binding expressions.
Module Scope: Folded constants TAX_RATE (0.085), CURRENCY ("USD"), and FREE_SHIPPING_MIN (100) appear in the Module section.
Eliminated Variable: rawAuditToken (bound to null) displays cleanly as <unavailable>.

Check Editor Inline Hints & Hover Popovers Inline Hints & Popover

Try:While paused in order-pricing.ts, inspect the editor lines 19–34 and hover over variables in the source code.

Inline Value Hints: Authored variables (subtotal, discountedSubtotal, grandTotal) show live inline values at the end of their lines.
Hover Popovers: Hovering over customer, taxAmount, or TAX_RATE opens an interactive preview evaluated from the source map binding.

Test Scope-Aware Console Autocomplete Autocomplete

Try:Open the Console drawer (Esc) while paused and type prefixes like disc, tax, FREE_, or fullN.

Original Identifiers Suggested: Autocomplete offers discountRate, discountedSubtotal, taxAmount, FREE_SHIPPING_MIN, and fullName directly from the active OriginalScope chain.

Break Conditionally Inside the Loop Using Original Names Conditional Breakpoints

Try:Right-click line 26 (subtotal += lineTotal;), add a conditional breakpoint item.quantity > 1 && lineTotal < 100, resume (F8), and click "Run & Pause in Debugger" again.

Autocomplete in Condition Input: Typing item and lineTotal in the breakpoint dialog offers scope-aware suggestions.
Targeted Pause on Item #2: V8 skips item 1 (MECH-KB, qty: 1, lineTotal: 140), pauses inside the Block scope only on item 2 (USB-C-CABLE, qty: 2, lineTotal: 45), and skips item 3.

Evaluate Authored Expressions in the Console Debug Evaluate

Try:Copy and run the test expressions below in the DevTools Console while paused.

Transparent AST Rewriting: Expressions mixing fullName, taxAmount, shippingFee, and TAX_RATE are automatically rewritten to their underlying bundle.js bindings (c, d * 0.085, etc.) before evaluation.

Other things to try

Add a logpoint in the for loop that prints item.sku and lineTotal.
Add Watch expressions with folded constants (TAX_RATE, CURRENCY) and step through the loop.
Hover variables that were optimized away and check what the popover shows.
Toggle the source map scopes experiment and compare the Scope view.

Not sure if it's a DevTools bug? Tab 4. Decoded Scopes shows what the source map actually encodes.

Try in the Console While Paused

While paused, select a frame and evaluate these in the Console (Esc opens the drawer) using the authored names:

`${fullName} (${CURRENCY}): $${grandTotal.toFixed(2)}`

Expected Result: "Ada Lovelace (USD): $230.56"

Combines synthesized expression fullName (c.firstName + ' ' + c.lastName), folded constant CURRENCY ('USD'), and renamed local grandTotal (g).

discountedSubtotal + taxAmount + shippingFee

Expected Result: 230.5625

Evaluates arithmetic across renamed register d (discountedSubtotal) and two non-existent variables (taxAmount -> d * 0.085, shippingFee -> d >= 100 ? 0 : 12.99).

isVip && discountRate === 0.15 && TAX_RATE === 0.085

Expected Result: true

Verifies boolean and numeric expressions using synthesized isVip, discountRate, and module-scoped constant TAX_RATE.

        
        // Authored TypeScript: order-pricing.ts
      
        const TAX_RATE = 0.085;
      
        const CURRENCY = "USD";
      
        const FREE_SHIPPING_MIN = 100;
      
        export interface Customer {
      
          firstName: string;
      
          lastName: string;
      
          tier: "standard" | "vip";
      
        }
      
        export interface LineItem {
      
          sku: string;
      
          unitPrice: number;
      
          quantity: number;
      
        }
      
        export function calculateInvoice(customer: Customer, items: LineItem[]) {
      
          const fullName = `${customer.firstName} ${customer.lastName}`;
      
          const isVip = customer.tier === "vip";
      
          const rawAuditToken = Math.random().toString(36);
      
          let subtotal = 0;
      
          for (const item of items) {
      
            const lineTotal = item.unitPrice * item.quantity;
      
            subtotal += lineTotal; // Try a Conditional Breakpoint here: item.quantity > 1 && lineTotal < 100
      
          }
      
          const discountRate = isVip ? 0.15 : 0.0;
      
          const discountedSubtotal = subtotal * (1 - discountRate);
      
          const taxAmount = discountedSubtotal * TAX_RATE;
      
          const shippingFee = discountedSubtotal >= FREE_SHIPPING_MIN ? 0 : 12.99;
      
          const grandTotal = discountedSubtotal + taxAmount + shippingFee;
      
          debugger; // Pause: Inspect folded constants, autocomplete & synthesized expressions
      
          return {
      
            recipient: fullName,
      
            currency: CURRENCY,
      
            grandTotal: Number(grandTotal.toFixed(2)),
      
          };
      
        }

        
        function calculateInvoice(c, a) {
      
          let s = 0;
      
          for (const i of a) {
      
            s += i.unitPrice * i.quantity;
      
          }
      
          const d = s * (c.tier === "vip" ? 0.85 : 1);
      
          const g = d * 1.085 + (d >= 100 ? 0 : 12.99);
      
          debugger;
      
          return { recipient: c.firstName + " " + c.lastName, currency: "USD", grandTotal: Number(g.toFixed(2)) };
      
        }
      
        window.runExample01 = function() {
      
          return calculateInvoice(
      
            { firstName: "Ada", lastName: "Lovelace", tier: "vip" },
      
            [
      
              { sku: "MECH-KB", unitPrice: 140, quantity: 1 },
      
              { sku: "USB-C-CABLE", unitPrice: 22.5, quantity: 2 },
      
              { sku: "KEYCAP-SET", unitPrice: 65, quantity: 1 }
      
            ]
      
          );
      
        };
      
        //# sourceMappingURL=bundle.js.map

        
        const builder = new SafeScopeInfoBuilder();
      
        // 1. Original Scopes Tree (order-pricing.ts)
      
        builder
      
          .startSource()
      
          .startScope(0, 0, {
      
            kind: "Module",
      
            key: "module",
      
            variables: ["TAX_RATE", "CURRENCY", "FREE_SHIPPING_MIN", "calculateInvoice"],
      
          })
      
          .startScope(funcStart.line, funcStart.column, {
      
            name: "calculateInvoice",
      
            kind: "Function",
      
            isStackFrame: true,
      
            key: "calculateInvoice",
      
            variables: [
      
              "customer",
      
              "items",
      
              "fullName",
      
              "isVip",
      
              "rawAuditToken",
      
              "subtotal",
      
              "discountRate",
      
              "discountedSubtotal",
      
              "taxAmount",
      
              "shippingFee",
      
              "grandTotal",
      
            ],
      
          })
      
          .startScope(loopStart.line, loopStart.column, {
      
            kind: "Block",
      
            key: "forOfLoop",
      
            variables: ["item", "lineTotal"],
      
          })
      
          .endScope(loopEnd.line, loopEnd.column)
      
          .endScope(funcEnd.line, funcEnd.column)
      
          .endScope(moduleEnd.line, moduleEnd.column)
      
          .endSource();
      
        // 2. Generated Ranges & Binding Expressions (bundle.js)
      
        // availableFrom(start, from, end, value) = unavailable in [start, from), bound to value in [from, end).
      
        // Used for generated let/const that are still in their TDZ before their declaration ran.
      
        builder
      
          .startRange(0, 0, {
      
            scopeKey: "module",
      
            values: ["0.085", '"USD"', "100", "calculateInvoice"],
      
          })
      
          .startRange(genFuncStart.line, genFuncStart.column, {
      
            scopeKey: "calculateInvoice",
      
            isStackFrame: true,
      
            values: [
      
              "c",                              // customer
      
              "a",                              // items
      
              'c.firstName + " " + c.lastName', // fullName (synthesized!)
      
              'c.tier === "vip"',               // isVip (synthesized!)
      
              null,                             // rawAuditToken (dead-code eliminated -> <unavailable>)
      
              availableFrom(genFuncStart, afterS, genFuncEnd, "s"),                     // subtotal
      
              'c.tier === "vip" ? 0.15 : 0',    // discountRate (synthesized!)
      
              availableFrom(genFuncStart, afterD, genFuncEnd, "d"),                     // discountedSubtotal
      
              availableFrom(genFuncStart, afterD, genFuncEnd, "d * 0.085"),             // taxAmount (synthesized!)
      
              availableFrom(genFuncStart, afterD, genFuncEnd, "d >= 100 ? 0 : 12.99"),  // shippingFee (synthesized!)
      
              availableFrom(genFuncStart, afterG, genFuncEnd, "g"),                     // grandTotal
      
            ],
      
          })
      
          .startRange(genLoopStart.line, genLoopStart.column, {
      
            scopeKey: "forOfLoop",
      
            values: [
      
              // 'i' only exists once the loop body is entered
      
              availableFrom(genLoopStart, genLoopBody, genLoopEnd, "i"),                        // item
      
              availableFrom(genLoopStart, genLoopBody, genLoopEnd, "i.unitPrice * i.quantity"), // lineTotal (synthesized!)
      
            ],
      
          })
      
          .endRange(genLoopEnd.line, genLoopEnd.column)
      
          .endRange(genFuncEnd.line, genFuncEnd.column)
      
          // Generated-only entry helper without corresponding authored code:
      
          // emit a stack-frame range without a definition OriginalScope.
      
          .startRange(genRunStart.line, genRunStart.column, {
      
            isStackFrame: true,
      
          })
      
          .endRange(genRunEnd.line, genRunEnd.column)
      
          .endRange(genModuleEnd.line, genModuleEnd.column);

Decoded OriginalScope Tree (order-pricing.ts)
      Module
      (anonymous)
      [0:0 → 42:0)
      
    
variables: [TAX_RATE, CURRENCY, FREE_SHIPPING_MIN, calculateInvoice]

      Function
      calculateInvoice
      [17:32 → 41:1)
      isStackFrame
    
variables: [customer, items, fullName, isVip, rawAuditToken, subtotal, discountRate, discountedSubtotal, taxAmount, shippingFee, grandTotal]

      Block
      (anonymous)
      [23:2 → 26:3)
      
    
variables: [item, lineTotal]
Decoded GeneratedRange & Binding Tree (bundle.js)
      Range [0:0 → 21:0)
      → Module
      isStackFrame: false
      
      
    

          bindings: TAX_RATE → 0.085, CURRENCY → "USD", FREE_SHIPPING_MIN → 100, calculateInvoice → calculateInvoice
        

      Range [0:25 → 9:1)
      → Function(calculateInvoice)
      isStackFrame
      
      
    

          bindings: customer → c, items → a, fullName → c.firstName + " " + c.lastName, isVip → c.tier === "vip", rawAuditToken → <unavailable>, subtotal → SubRanges([0:25-1:12]: unavailable | [1:12-9:1]: s), discountRate → c.tier === "vip" ? 0.15 : 0, discountedSubtotal → SubRanges([0:25-5:46]: unavailable | [5:46-9:1]: d), taxAmount → SubRanges([0:25-5:46]: unavailable | [5:46-9:1]: d * 0.085), shippingFee → SubRanges([0:25-5:46]: unavailable | [5:46-9:1]: d >= 100 ? 0 : 12.99), grandTotal → SubRanges([0:25-6:47]: unavailable | [6:47-9:1]: g)
        

      Range [2:2 → 4:3)
      → Block
      isStackFrame: false
      
      
    

          bindings: item → SubRanges([2:2-3:4]: unavailable | [3:4-4:3]: i), lineTotal → SubRanges([2:2-3:4]: unavailable | [3:4-4:3]: i.unitPrice * i.quantity)
        

      Range [10:30 → 19:1)
      → unmapped range
      isStackFrame
      
      
    

              Raw Source Map JSON (bundle.js.map)
              {
  "version": 3,
  "file": "bundle.js",
  "sources": [
    "order-pricing.ts"
  ],
  "sourcesContent": [
    "// Authored TypeScript: order-pricing.ts\nconst TAX_RATE = 0.085;\nconst CURRENCY = \"USD\";\nconst FREE_SHIPPING_MIN = 100;\n\nexport interface Customer {\n  firstName: string;\n  lastName: string;\n  tier: \"standard\" | \"vip\";\n}\n\nexport interface LineItem {\n  sku: string;\n  unitPrice: number;\n  quantity: number;\n}\n\nexport function calculateInvoice(customer: Customer, items: LineItem[]) {\n  const fullName = `${customer.firstName} ${customer.lastName}`;\n  const isVip = customer.tier === \"vip\";\n  const rawAuditToken = Math.random().toString(36);\n\n  let subtotal = 0;\n  for (const item of items) {\n    const lineTotal = item.unitPrice * item.quantity;\n    subtotal += lineTotal; // Try a Conditional Breakpoint here: item.quantity > 1 && lineTotal < 100\n  }\n\n  const discountRate = isVip ? 0.15 : 0.0;\n  const discountedSubtotal = subtotal * (1 - discountRate);\n  const taxAmount = discountedSubtotal * TAX_RATE;\n  const shippingFee = discountedSubtotal >= FREE_SHIPPING_MIN ? 0 : 12.99;\n  const grandTotal = discountedSubtotal + taxAmount + shippingFee;\n\n  debugger; // Pause: Inspect folded constants, autocomplete & synthesized expressions\n\n  return {\n    recipient: fullName,\n    currency: CURRENCY,\n    grandTotal: Number(grandTotal.toFixed(2)),\n  };\n}\n"
  ],
  "names": [
    "calculateInvoice",
    "customer",
    "items",
    "subtotal",
    "item",
    "discountedSubtotal",
    "grandTotal",
    "Module",
    "TAX_RATE",
    "CURRENCY",
    "FREE_SHIPPING_MIN",
    "Function",
    "fullName",
    "isVip",
    "rawAuditToken",
    "discountRate",
    "taxAmount",
    "shippingFee",
    "Block",
    "lineTotal",
    "0.085",
    "\"USD\"",
    "100",
    "c",
    "a",
    "c.firstName + \" \" + c.lastName",
    "c.tier === \"vip\"",
    "c.tier === \"vip\" ? 0.15 : 0",
    "s",
    "d",
    "d * 0.085",
    "d >= 100 ? 0 : 12.99",
    "g",
    "i",
    "i.unitPrice * i.quantity"
  ],
  "mappings": "AAiBAA,0BAAiCC,GAAoBC;EAKnDC;EACA,WAAWC;IAET;;EAIFC;EAGAC;EAEA;EAEA;;;;;;;;;;;;;",
  "scopes": [
    "BCAAO,DQCCV,BHRgBAI,DCCUCCXYVWCX,BCGCO,DFe,CDD,CPB,CBA"
  ],
  "ranges": [
    "ECAAA,GVWXB,EGZAC,GYZabAAcAAAA,HFBMd,HHFuBe,HIFuBf,HJFuBgB,HKGvBhB,EDCCAC,GAA,HABEiB,HBBEjB,FCD,FFB,EFBe,FJB,FCA"
  ]
}
            

1	// Authored TypeScript: order-pricing.ts
2	const TAX_RATE = 0.085;
3	const CURRENCY = "USD";
4	const FREE_SHIPPING_MIN = 100;
5
6	export interface Customer {
7	firstName: string;
8	lastName: string;
9	tier: "standard" \| "vip";
10	}
11
12	export interface LineItem {
13	sku: string;
14	unitPrice: number;
15	quantity: number;
16	}
17
18	export function calculateInvoice(customer: Customer, items: LineItem[]) {
19	const fullName = `${customer.firstName} ${customer.lastName}`;
20	const isVip = customer.tier === "vip";
21	const rawAuditToken = Math.random().toString(36);
22
23	let subtotal = 0;
24	for (const item of items) {
25	const lineTotal = item.unitPrice * item.quantity;
26	subtotal += lineTotal; // Try a Conditional Breakpoint here: item.quantity > 1 && lineTotal < 100
27	}
28
29	const discountRate = isVip ? 0.15 : 0.0;
30	const discountedSubtotal = subtotal * (1 - discountRate);
31	const taxAmount = discountedSubtotal * TAX_RATE;
32	const shippingFee = discountedSubtotal >= FREE_SHIPPING_MIN ? 0 : 12.99;
33	const grandTotal = discountedSubtotal + taxAmount + shippingFee;
34
35	debugger; // Pause: Inspect folded constants, autocomplete & synthesized expressions
36
37	return {
38	recipient: fullName,
39	currency: CURRENCY,
40	grandTotal: Number(grandTotal.toFixed(2)),
41	};
42	}

1	function calculateInvoice(c, a) {
2	let s = 0;
3	for (const i of a) {
4	s += i.unitPrice * i.quantity;
5	}
6	const d = s * (c.tier === "vip" ? 0.85 : 1);
7	const g = d * 1.085 + (d >= 100 ? 0 : 12.99);
8	debugger;
9	return { recipient: c.firstName + " " + c.lastName, currency: "USD", grandTotal: Number(g.toFixed(2)) };
10	}
11	window.runExample01 = function() {
12	return calculateInvoice(
13	{ firstName: "Ada", lastName: "Lovelace", tier: "vip" },
14	[
15	{ sku: "MECH-KB", unitPrice: 140, quantity: 1 },
16	{ sku: "USB-C-CABLE", unitPrice: 22.5, quantity: 2 },
17	{ sku: "KEYCAP-SET", unitPrice: 65, quantity: 1 }
18	]
19	);
20	};
21	//# sourceMappingURL=bundle.js.map

1	const builder = new SafeScopeInfoBuilder();
2
3	// 1. Original Scopes Tree (order-pricing.ts)
4	builder
5	.startSource()
6	.startScope(0, 0, {
7	kind: "Module",
8	key: "module",
9	variables: ["TAX_RATE", "CURRENCY", "FREE_SHIPPING_MIN", "calculateInvoice"],
10	})
11	.startScope(funcStart.line, funcStart.column, {
12	name: "calculateInvoice",
13	kind: "Function",
14	isStackFrame: true,
15	key: "calculateInvoice",
16	variables: [
17	"customer",
18	"items",
19	"fullName",
20	"isVip",
21	"rawAuditToken",
22	"subtotal",
23	"discountRate",
24	"discountedSubtotal",
25	"taxAmount",
26	"shippingFee",
27	"grandTotal",
28	],
29	})
30	.startScope(loopStart.line, loopStart.column, {
31	kind: "Block",
32	key: "forOfLoop",
33	variables: ["item", "lineTotal"],
34	})
35	.endScope(loopEnd.line, loopEnd.column)
36	.endScope(funcEnd.line, funcEnd.column)
37	.endScope(moduleEnd.line, moduleEnd.column)
38	.endSource();
39
40	// 2. Generated Ranges & Binding Expressions (bundle.js)
41	// availableFrom(start, from, end, value) = unavailable in [start, from), bound to value in [from, end).
42	// Used for generated let/const that are still in their TDZ before their declaration ran.
43	builder
44	.startRange(0, 0, {
45	scopeKey: "module",
46	values: ["0.085", '"USD"', "100", "calculateInvoice"],
47	})
48	.startRange(genFuncStart.line, genFuncStart.column, {
49	scopeKey: "calculateInvoice",
50	isStackFrame: true,
51	values: [
52	"c", // customer
53	"a", // items
54	'c.firstName + " " + c.lastName', // fullName (synthesized!)
55	'c.tier === "vip"', // isVip (synthesized!)
56	null, // rawAuditToken (dead-code eliminated -> <unavailable>)
57	availableFrom(genFuncStart, afterS, genFuncEnd, "s"), // subtotal
58	'c.tier === "vip" ? 0.15 : 0', // discountRate (synthesized!)
59	availableFrom(genFuncStart, afterD, genFuncEnd, "d"), // discountedSubtotal
60	availableFrom(genFuncStart, afterD, genFuncEnd, "d * 0.085"), // taxAmount (synthesized!)
61	availableFrom(genFuncStart, afterD, genFuncEnd, "d >= 100 ? 0 : 12.99"), // shippingFee (synthesized!)
62	availableFrom(genFuncStart, afterG, genFuncEnd, "g"), // grandTotal
63	],
64	})
65	.startRange(genLoopStart.line, genLoopStart.column, {
66	scopeKey: "forOfLoop",
67	values: [
68	// 'i' only exists once the loop body is entered
69	availableFrom(genLoopStart, genLoopBody, genLoopEnd, "i"), // item
70	availableFrom(genLoopStart, genLoopBody, genLoopEnd, "i.unitPrice * i.quantity"), // lineTotal (synthesized!)
71	],
72	})
73	.endRange(genLoopEnd.line, genLoopEnd.column)
74	.endRange(genFuncEnd.line, genFuncEnd.column)
75	// Generated-only entry helper without corresponding authored code:
76	// emit a stack-frame range without a definition OriginalScope.
77	.startRange(genRunStart.line, genRunStart.column, {
78	isStackFrame: true,
79	})
80	.endRange(genRunEnd.line, genRunEnd.column)
81	.endRange(genModuleEnd.line, genModuleEnd.column);