EXAMPLE 03 • inlining.ts

Multi-Level Function Inlining & Virtual Call Stacks

Expand a single physical V8 stack frame into 4 authored call frames with per-frame scopes, call sites, and Debug Evaluate.

Multi-Level Inlined Ranges (processCustomerOrder -> calculateCartTotal -> computeTierDiscount -> clampPercentage)Call-Site Positions (callSite: { sourceIndex, line, column })isStackFrame: true (OriginalScope) vs isStackFrame: false (Inlined GeneratedRange)Inlined Argument & Parameter Expression Bindings (value -> y * 4, min -> 5, max -> 25)

OPEN CHROME DEVTOOLS (F12) FIRST, THEN TRIGGER:

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

How This Example Works

Modern bundlers and compilers aggressively inline small helper functions. Here, processCustomerOrder calls calculateCartTotal, which calls computeTierDiscount, which calls clampPercentage. In bundle.js, all three helpers are completely inlined into processCustomerOrder(n, s, y).

By nesting three GeneratedRange entries with isStackFrame: false and callSite coordinates inside processCustomerOrder's range, Chrome DevTools synthesizes the full 4-frame Call Stack. Clicking any inlined frame in the Call Stack pane switches the editor to that caller's call site and updates the Scope view, Autocomplete suggestions, and Console Debug Evaluate to that frame's lexical variables!

What to Try & Verify in DevTools

Inspect the 4-Frame Virtual Call Stack Call Stack

Try:Click "Run & Pause in Debugger" to pause at debugger; on line 5 of inlining.ts (clampPercentage).

4 Virtual Frames from 1 Physical Frame: Even though only processCustomerOrder exists in bundle.js, the Call Stack pane shows clampPercentage (line 5) → computeTierDiscount (line 11) → calculateCartTotal (line 20) → processCustomerOrder (line 30).

Navigate Up and Down the Inlined Call Stack Frames Scope View

Try:Click each frame in the Call Stack pane (clampPercentage, computeTierDiscount, calculateCartTotal, processCustomerOrder) and watch the editor and Scope pane.

clampPercentage Frame: Shows value: 32, min: 5, max: 25, clamped: 25.
computeTierDiscount Frame: Highlights the call site on line 11 (clampPercentage(rawPercent, 5, 25)) and switches Scope variables to baseAmount: 240, loyaltyYears: 8, rawPercent: 32, effectivePercent: 25.
calculateCartTotal Frame: Highlights line 20 and shows subtotal: 240, loyaltyYears: 8, couponFixed: 15. discountAmount and finalTotal are <unavailable> (not computed yet).
processCustomerOrder Frame: Highlights line 30 and shows customerName: "Grace Hopper", subtotal: 240, loyaltyYears: 8. payable is <unavailable>. The generated-only parameter pause must not show up.

Verify Frame-Contextual Console Autocomplete Autocomplete

Try:Select computeTierDiscount in the Call Stack and type rawP or eff in the Console; then switch to calculateCartTotal and type coup.

Per-Frame Suggestions: Autocomplete dynamically updates to suggest the lexical variables of whichever virtual inlined frame is currently selected.

Set a Conditional Breakpoint Inside an Inlined Helper Conditional Breakpoints

Try:Right-click line 12 (return baseAmount * (effectivePercent / 100); inside computeTierDiscount), set conditional breakpoint rawPercent > effectivePercent, resume (F8), and click "Run & Pause in Debugger" again.

Inlined Condition Evaluation: DevTools evaluates (y * 4) > pct (32 > 25 → true) and pauses directly inside the inlined computeTierDiscount frame.

Run Frame-Contextual Debug Evaluate in the Console Debug Evaluate

Try:Select different frames in the Call Stack and run the corresponding expressions below in the Console.

Frame-Relative Resolution: Identical variable names (like subtotal) or frame-specific parameters (rawPercent, couponFixed) resolve against the selected virtual frame's GeneratedRange.

Other things to try

Click Log Inlined Error Stack and check the Console stack trace lists all 4 authored functions.
Select an inlined frame (e.g. computeTierDiscount) and use Restart frame, or step with F10/Shift+F11.
Right-click the Call Stack › Copy stack trace.

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:

{ value, min, max, clamped }

Expected Result: { value: 32, min: 5, max: 25, clamped: 25 } (when clampPercentage frame is selected)

Evaluates the inlined arguments (y * 4, 5, 25) and local variable (pct) of clampPercentage.

rawPercent - effectivePercent

Expected Result: 7 (when computeTierDiscount frame is selected)

In the caller frame computeTierDiscount, rawPercent (32) minus effectivePercent (25) equals 7.

subtotal - couponFixed

Expected Result: 225 (when calculateCartTotal frame is selected)

In calculateCartTotal, subtotal (240) and constant-inlined parameter couponFixed (15) evaluate to 225.

        
        // Authored TypeScript: inlining.ts
      
        function clampPercentage(value: number, min: number, max: number): number {
      
          const clamped = Math.min(max, Math.max(min, value));
      
          debugger; // Pause inside 3-level inlined call stack!
      
          return clamped;
      
        }
      
        function computeTierDiscount(baseAmount: number, loyaltyYears: number): number {
      
          const rawPercent = loyaltyYears * 4;
      
          const effectivePercent = clampPercentage(rawPercent, 5, 25);
      
          return baseAmount * (effectivePercent / 100);
      
        }
      
        function calculateCartTotal(
      
          subtotal: number,
      
          loyaltyYears: number,
      
          couponFixed: number,
      
        ): number {
      
          const discountAmount = computeTierDiscount(subtotal, loyaltyYears);
      
          const finalTotal = Math.max(0, subtotal - discountAmount - couponFixed);
      
          return finalTotal;
      
        }
      
        export function processCustomerOrder(
      
          customerName: string,
      
          subtotal: number,
      
          loyaltyYears: number,
      
        ) {
      
          const payable = calculateCartTotal(subtotal, loyaltyYears, 15);
      
          return {
      
            customer: customerName,
      
            originalSubtotal: subtotal,
      
            payableTotal: Number(payable.toFixed(2)),
      
          };
      
        }

        
        function processCustomerOrder(n, s, y, pause) {
      
          // Begin inlined calculateCartTotal -> computeTierDiscount -> clampPercentage
      
          const pct = Math.min(25, Math.max(5, y * 4));
      
          if (pause !== false) {
      
            debugger;
      
          } else {
      
            const err = new Error("Diagnostic trace from inlined clampPercentage()");
      
            console.error(err);
      
          }
      
          const d = s * (pct / 100);
      
          const p = Math.max(0, s - d - 15);
      
          // End inlined call chain
      
          return { customer: n, originalSubtotal: s, payableTotal: Number(p.toFixed(2)) };
      
        }
      
        window.runExample03 = function() {
      
          return processCustomerOrder("Grace Hopper", 240, 8, true);
      
        };
      
        window.logStackExample03 = function() {
      
          const res = processCustomerOrder("Grace Hopper", 240, 8, false);
      
          return "Logged Error from inlined clampPercentage() to DevTools Console! Result: " + JSON.stringify(res);
      
        };
      
        //# sourceMappingURL=bundle.js.map

        
        const builder = new SafeScopeInfoBuilder();
      
        // 1. Original Scopes: 4 distinct functions in inlining.ts
      
        builder
      
          .startSource()
      
          .startScope(0, 0, {
      
            kind: "Module",
      
            key: "module",
      
            variables: [
      
              "clampPercentage",
      
              "computeTierDiscount",
      
              "calculateCartTotal",
      
              "processCustomerOrder",
      
            ],
      
          })
      
          .startScope(clampStart.line, clampStart.column, {
      
            name: "clampPercentage",
      
            kind: "Function",
      
            isStackFrame: true,
      
            key: "clampPercentage",
      
            variables: ["value", "min", "max", "clamped"],
      
          })
      
          .endScope(clampEnd.line, clampEnd.column)
      
          .startScope(tierStart.line, tierStart.column, {
      
            name: "computeTierDiscount",
      
            kind: "Function",
      
            isStackFrame: true,
      
            key: "computeTierDiscount",
      
            variables: ["baseAmount", "loyaltyYears", "rawPercent", "effectivePercent"],
      
          })
      
          .endScope(tierEnd.line, tierEnd.column)
      
          .startScope(cartStart.line, cartStart.column, {
      
            name: "calculateCartTotal",
      
            kind: "Function",
      
            isStackFrame: true,
      
            key: "calculateCartTotal",
      
            variables: ["subtotal", "loyaltyYears", "couponFixed", "discountAmount", "finalTotal"],
      
          })
      
          .endScope(cartEnd.line, cartEnd.column)
      
          .startScope(orderStart.line, orderStart.column, {
      
            name: "processCustomerOrder",
      
            kind: "Function",
      
            isStackFrame: true,
      
            key: "processCustomerOrder",
      
            variables: ["customerName", "subtotal", "loyaltyYears", "payable"],
      
          })
      
          .endScope(orderEnd.line, orderEnd.column)
      
          .endScope(moduleEnd.line, moduleEnd.column)
      
          .endSource();
      
        // 2. Generated Ranges: 3 nested inlined ranges (isStackFrame: false + callSite)
      
        //    inside the single physical function processCustomerOrder (isStackFrame: true)
      
        // availableFrom(start, from, end, value) = unavailable in [start, from), bound to value in [from, end).
      
        // Used for generated const (pct, d, p) that are still in their TDZ before their declaration ran.
      
        builder
      
          .startRange(0, 0, {
      
            scopeKey: "module",
      
            values: [null, null, null, "processCustomerOrder"],
      
          })
      
          .startRange(genOrderStart.line, genOrderStart.column, {
      
            scopeKey: "processCustomerOrder",
      
            isStackFrame: true,
      
            values: ["n", "s", "y", availableFrom(genOrderStart, afterP, genOrderEnd, "p")],
      
          })
      
          .startRange(genCartStart.line, genCartStart.column, {
      
            scopeKey: "calculateCartTotal",
      
            isStackFrame: false,
      
            callSite: callSiteCalculateCartTotal, // calculateCartTotal(...) in processCustomerOrder
      
            values: [
      
              "s",
      
              "y",
      
              "15",
      
              availableFrom(genCartStart, afterD, genCartEnd, "d"), // discountAmount
      
              null, // finalTotal: 'p' is only assigned by the very last statement of this range
      
            ],
      
          })
      
          .startRange(genTierStart.line, genTierStart.column, {
      
            scopeKey: "computeTierDiscount",
      
            isStackFrame: false,
      
            callSite: callSiteComputeTierDiscount, // computeTierDiscount(...) in calculateCartTotal
      
            values: ["s", "y", "y * 4", availableFrom(genTierStart, afterPct, genTierEnd, "pct")],
      
          })
      
          .startRange(genClampStart.line, genClampStart.column, {
      
            scopeKey: "clampPercentage",
      
            isStackFrame: false,
      
            callSite: callSiteClampPercentage, // clampPercentage(...) in computeTierDiscount
      
            values: ["y * 4", "5", "25", availableFrom(genClampStart, afterPct, genClampEnd, "pct")],
      
          })
      
          .endRange(genClampEnd.line, genClampEnd.column)
      
          .endRange(genTierEnd.line, genTierEnd.column)
      
          .endRange(genCartEnd.line, genCartEnd.column)
      
          .endRange(genOrderEnd.line, genOrderEnd.column)
      
          // Generated-only entry helpers without corresponding authored code:
      
          .startRange(genRunStart.line, genRunStart.column, {
      
            isStackFrame: true,
      
          })
      
          .endRange(genRunEnd.line, genRunEnd.column)
      
          .startRange(genLogStart.line, genLogStart.column, {
      
            isStackFrame: true,
      
          })
      
          .endRange(genLogEnd.line, genLogEnd.column)
      
          .endRange(genModuleEnd.line, genModuleEnd.column);

Decoded OriginalScope Tree (inlining.ts)
      Module
      (anonymous)
      [0:0 → 36:0)
      
    
variables: [clampPercentage, computeTierDiscount, calculateCartTotal, processCustomerOrder]

      Function
      clampPercentage
      [2:24 → 6:1)
      isStackFrame
    
variables: [value, min, max, clamped]

      Function
      computeTierDiscount
      [8:28 → 12:1)
      isStackFrame
    
variables: [baseAmount, loyaltyYears, rawPercent, effectivePercent]

      Function
      calculateCartTotal
      [14:27 → 22:1)
      isStackFrame
    
variables: [subtotal, loyaltyYears, couponFixed, discountAmount, finalTotal]

      Function
      processCustomerOrder
      [24:36 → 35:1)
      isStackFrame
    
variables: [customerName, subtotal, loyaltyYears, payable]
Decoded GeneratedRange & Binding Tree (bundle.js)
      Range [0:0 → 22:0)
      → Module
      isStackFrame: false
      
      
    

          bindings: clampPercentage → <unavailable>, computeTierDiscount → <unavailable>, calculateCartTotal → <unavailable>, processCustomerOrder → processCustomerOrder
        

      Range [0:29 → 13:1)
      → Function(processCustomerOrder)
      isStackFrame
      
      
    

          bindings: customerName → n, subtotal → s, loyaltyYears → y, payable → SubRanges([0:29-10:36]: unavailable | [10:36-13:1]: p)
        

      Range [2:2 → 10:36)
      → Function(calculateCartTotal)
      isStackFrame: false
      
      callSite @ 30:19
    

          bindings: subtotal → s, loyaltyYears → y, couponFixed → 15, discountAmount → SubRanges([2:2-9:28]: unavailable | [9:28-10:36]: d), finalTotal → <unavailable>
        

      Range [2:2 → 9:28)
      → Function(computeTierDiscount)
      isStackFrame: false
      
      callSite @ 20:26
    

          bindings: baseAmount → s, loyaltyYears → y, rawPercent → y * 4, effectivePercent → SubRanges([2:2-2:47]: unavailable | [2:47-9:28]: pct)
        

      Range [2:2 → 8:3)
      → Function(clampPercentage)
      isStackFrame: false
      
      callSite @ 11:28
    

          bindings: value → y * 4, min → 5, max → 25, clamped → SubRanges([2:2-2:47]: unavailable | [2:47-8:3]: pct)
        

      Range [14:30 → 16:1)
      → unmapped range
      isStackFrame
      
      
    

      Range [17:35 → 20:1)
      → unmapped range
      isStackFrame
      
      
    

              Raw Source Map JSON (bundle.js.map)
              {
  "version": 3,
  "file": "bundle.js",
  "sources": [
    "inlining.ts"
  ],
  "sourcesContent": [
    "// Authored TypeScript: inlining.ts\n\nfunction clampPercentage(value: number, min: number, max: number): number {\n  const clamped = Math.min(max, Math.max(min, value));\n  debugger; // Pause inside 3-level inlined call stack!\n  return clamped;\n}\n\nfunction computeTierDiscount(baseAmount: number, loyaltyYears: number): number {\n  const rawPercent = loyaltyYears * 4;\n  const effectivePercent = clampPercentage(rawPercent, 5, 25);\n  return baseAmount * (effectivePercent / 100);\n}\n\nfunction calculateCartTotal(\n  subtotal: number,\n  loyaltyYears: number,\n  couponFixed: number,\n): number {\n  const discountAmount = computeTierDiscount(subtotal, loyaltyYears);\n  const finalTotal = Math.max(0, subtotal - discountAmount - couponFixed);\n  return finalTotal;\n}\n\nexport function processCustomerOrder(\n  customerName: string,\n  subtotal: number,\n  loyaltyYears: number,\n) {\n  const payable = calculateCartTotal(subtotal, loyaltyYears, 15);\n  return {\n    customer: customerName,\n    originalSubtotal: subtotal,\n    payableTotal: Number(payable.toFixed(2)),\n  };\n}\n"
  ],
  "names": [
    "processCustomerOrder",
    "customerName",
    "clamped",
    "finalTotal",
    "Module",
    "clampPercentage",
    "computeTierDiscount",
    "calculateCartTotal",
    "Function",
    "value",
    "min",
    "max",
    "baseAmount",
    "loyaltyYears",
    "rawPercent",
    "effectivePercent",
    "subtotal",
    "couponFixed",
    "discountAmount",
    "payable",
    "n",
    "s",
    "y",
    "p",
    "15",
    "d",
    "y * 4",
    "pct",
    "5",
    "25"
  ],
  "mappings": "AAwBAA,8BACEC;;EAtBAC;;IACA;;IAAA;IACA;;EAMA;EASAC;;EAUA;;;;;;;;;;",
  "scopes": [
    "BCAAI,DKCCP,BHCYKI,DSCCT,CEB,BHCcCA,DUCCC,CEB,BHCbCA,DCHICf,CIB,BHCkBPA,DFeHM,CLB,CBA"
  ],
  "ranges": [
    "ECAAA,GAAAB,EGdAI,GVWXA,HDKkBY,EDCCAD,GWXZAA,HDHca,IAdS,ECAAD,GWXbA,HDAtBc,IATZ,ECAAD,GbdeA,HDAtBc,IAKb,FGD,FBc,FBkB,FDB,EFBe,FCB,EFBjB,FDB,FCA"
  ]
}
            

1	// Authored TypeScript: inlining.ts
2
3	function clampPercentage(value: number, min: number, max: number): number {
4	const clamped = Math.min(max, Math.max(min, value));
5	debugger; // Pause inside 3-level inlined call stack!
6	return clamped;
7	}
8
9	function computeTierDiscount(baseAmount: number, loyaltyYears: number): number {
10	const rawPercent = loyaltyYears * 4;
11	const effectivePercent = clampPercentage(rawPercent, 5, 25);
12	return baseAmount * (effectivePercent / 100);
13	}
14
15	function calculateCartTotal(
16	subtotal: number,
17	loyaltyYears: number,
18	couponFixed: number,
19	): number {
20	const discountAmount = computeTierDiscount(subtotal, loyaltyYears);
21	const finalTotal = Math.max(0, subtotal - discountAmount - couponFixed);
22	return finalTotal;
23	}
24
25	export function processCustomerOrder(
26	customerName: string,
27	subtotal: number,
28	loyaltyYears: number,
29	) {
30	const payable = calculateCartTotal(subtotal, loyaltyYears, 15);
31	return {
32	customer: customerName,
33	originalSubtotal: subtotal,
34	payableTotal: Number(payable.toFixed(2)),
35	};
36	}

1	function processCustomerOrder(n, s, y, pause) {
2	// Begin inlined calculateCartTotal -> computeTierDiscount -> clampPercentage
3	const pct = Math.min(25, Math.max(5, y * 4));
4	if (pause !== false) {
5	debugger;
6	} else {
7	const err = new Error("Diagnostic trace from inlined clampPercentage()");
8	console.error(err);
9	}
10	const d = s * (pct / 100);
11	const p = Math.max(0, s - d - 15);
12	// End inlined call chain
13	return { customer: n, originalSubtotal: s, payableTotal: Number(p.toFixed(2)) };
14	}
15	window.runExample03 = function() {
16	return processCustomerOrder("Grace Hopper", 240, 8, true);
17	};
18	window.logStackExample03 = function() {
19	const res = processCustomerOrder("Grace Hopper", 240, 8, false);
20	return "Logged Error from inlined clampPercentage() to DevTools Console! Result: " + JSON.stringify(res);
21	};
22	//# sourceMappingURL=bundle.js.map

1	const builder = new SafeScopeInfoBuilder();
2
3	// 1. Original Scopes: 4 distinct functions in inlining.ts
4	builder
5	.startSource()
6	.startScope(0, 0, {
7	kind: "Module",
8	key: "module",
9	variables: [
10	"clampPercentage",
11	"computeTierDiscount",
12	"calculateCartTotal",
13	"processCustomerOrder",
14	],
15	})
16	.startScope(clampStart.line, clampStart.column, {
17	name: "clampPercentage",
18	kind: "Function",
19	isStackFrame: true,
20	key: "clampPercentage",
21	variables: ["value", "min", "max", "clamped"],
22	})
23	.endScope(clampEnd.line, clampEnd.column)
24	.startScope(tierStart.line, tierStart.column, {
25	name: "computeTierDiscount",
26	kind: "Function",
27	isStackFrame: true,
28	key: "computeTierDiscount",
29	variables: ["baseAmount", "loyaltyYears", "rawPercent", "effectivePercent"],
30	})
31	.endScope(tierEnd.line, tierEnd.column)
32	.startScope(cartStart.line, cartStart.column, {
33	name: "calculateCartTotal",
34	kind: "Function",
35	isStackFrame: true,
36	key: "calculateCartTotal",
37	variables: ["subtotal", "loyaltyYears", "couponFixed", "discountAmount", "finalTotal"],
38	})
39	.endScope(cartEnd.line, cartEnd.column)
40	.startScope(orderStart.line, orderStart.column, {
41	name: "processCustomerOrder",
42	kind: "Function",
43	isStackFrame: true,
44	key: "processCustomerOrder",
45	variables: ["customerName", "subtotal", "loyaltyYears", "payable"],
46	})
47	.endScope(orderEnd.line, orderEnd.column)
48	.endScope(moduleEnd.line, moduleEnd.column)
49	.endSource();
50
51	// 2. Generated Ranges: 3 nested inlined ranges (isStackFrame: false + callSite)
52	// inside the single physical function processCustomerOrder (isStackFrame: true)
53	// availableFrom(start, from, end, value) = unavailable in [start, from), bound to value in [from, end).
54	// Used for generated const (pct, d, p) that are still in their TDZ before their declaration ran.
55	builder
56	.startRange(0, 0, {
57	scopeKey: "module",
58	values: [null, null, null, "processCustomerOrder"],
59	})
60	.startRange(genOrderStart.line, genOrderStart.column, {
61	scopeKey: "processCustomerOrder",
62	isStackFrame: true,
63	values: ["n", "s", "y", availableFrom(genOrderStart, afterP, genOrderEnd, "p")],
64	})
65	.startRange(genCartStart.line, genCartStart.column, {
66	scopeKey: "calculateCartTotal",
67	isStackFrame: false,
68	callSite: callSiteCalculateCartTotal, // calculateCartTotal(...) in processCustomerOrder
69	values: [
70	"s",
71	"y",
72	"15",
73	availableFrom(genCartStart, afterD, genCartEnd, "d"), // discountAmount
74	null, // finalTotal: 'p' is only assigned by the very last statement of this range
75	],
76	})
77	.startRange(genTierStart.line, genTierStart.column, {
78	scopeKey: "computeTierDiscount",
79	isStackFrame: false,
80	callSite: callSiteComputeTierDiscount, // computeTierDiscount(...) in calculateCartTotal
81	values: ["s", "y", "y * 4", availableFrom(genTierStart, afterPct, genTierEnd, "pct")],
82	})
83	.startRange(genClampStart.line, genClampStart.column, {
84	scopeKey: "clampPercentage",
85	isStackFrame: false,
86	callSite: callSiteClampPercentage, // clampPercentage(...) in computeTierDiscount
87	values: ["y * 4", "5", "25", availableFrom(genClampStart, afterPct, genClampEnd, "pct")],
88	})
89	.endRange(genClampEnd.line, genClampEnd.column)
90	.endRange(genTierEnd.line, genTierEnd.column)
91	.endRange(genCartEnd.line, genCartEnd.column)
92	.endRange(genOrderEnd.line, genOrderEnd.column)
93	// Generated-only entry helpers without corresponding authored code:
94	.startRange(genRunStart.line, genRunStart.column, {
95	isStackFrame: true,
96	})
97	.endRange(genRunEnd.line, genRunEnd.column)
98	.startRange(genLogStart.line, genLogStart.column, {
99	isStackFrame: true,
100	})
101	.endRange(genLogEnd.line, genLogEnd.column)
102	.endRange(genModuleEnd.line, genModuleEnd.column);