EXAMPLE 07 • multi-callsite.ts

One Function Inlined at Two Call Sites

toCents() is inlined twice into compareOffers(). One authored breakpoint must resolve to both copies, each with its own call site and values.

Two Inlined Ranges Sharing One OriginalScopeDistinct callSite per Inlined CopyPer-Copy Bindings

OPEN CHROME DEVTOOLS (F12) FIRST, THEN TRIGGER:

Ready. Click "Run compareOffers()" with DevTools open.

How This Example Works

The compiler inlined toCents at both of its call sites, so every line of toCents exists twice in bundle.js. Both generated ranges reference the same toCents original scope, but each has its own callSite and binds the parameters to different generated variables.

What to Try & Verify in DevTools

1. One breakpoint, two inlined copies Call Stack

Try:Set a breakpoint on line 4 (const cents = ...) of multi-callsite.ts and click Run compareOffers(). Resume (F8) after the first pause.

Pauses twice. 1st: toCents → compareOffers (line 14). 2nd: toCents → compareOffers (line 15).
Scope: 1st amount: 20, currency: "GBP", rate: 1.25. 2nd amount: 24.5, currency: "USD", rate: 1. cents is <unavailable> both times.
At the 2nd pause, select compareOffers: centsA: 2500, centsB <unavailable>.
Breakpoints pane: a single breakpoint entry, not one per copy.

2. Conditional breakpoint & logpoint Conditional Breakpoints

Try:Edit the breakpoint to the condition currency === "USD" and re-run. Then turn it into a logpoint amount, currency, rate and re-run.

Condition: pauses only once, in the 2nd copy (amount: 24.5).
Logpoint: the Console logs two lines, one per copy: 20, GBP, 1.25 and 24.5, USD, 1.

Other things to try

From the 1st pause, press F10 or Shift+F11. compareOffers has no code of its own between the two copies: where should you land?
Also set a breakpoint on line 3 (const rate = ...): it should hit in both copies, too.
Disable and re-enable the breakpoint from the Breakpoints pane, or reload the page with the breakpoint set.

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:

amount * rate

Expected Result: 25 (1st pause), 24.5 (2nd pause)

Same expression, different generated variables (a * r1 vs. b * r2).

priceA + priceB

Expected Result: 44.5

With compareOffers selected in the Call Stack.

        
        // Authored TypeScript: multi-callsite.ts
      
        function toCents(amount: number, currency: string): number {
      
          const rate = currency === "GBP" ? 1.25 : 1;
      
          const cents = Math.round(amount * rate * 100);
      
          return cents;
      
        }
      
        export function compareOffers(
      
          priceA: number,
      
          currencyA: string,
      
          priceB: number,
      
          currencyB: string,
      
        ) {
      
          const centsA = toCents(priceA, currencyA);
      
          const centsB = toCents(priceB, currencyB);
      
          return { centsA, centsB, cheaper: centsA <= centsB ? "A" : "B" };
      
        }

        
        function compareOffers(a, x, b, y) {
      
          const r1 = x === "GBP" ? 1.25 : 1;
      
          const c1 = Math.round(a * r1 * 100);
      
          const r2 = y === "GBP" ? 1.25 : 1;
      
          const c2 = Math.round(b * r2 * 100);
      
          return { centsA: c1, centsB: c2, cheaper: c1 <= c2 ? "A" : "B" };
      
        }
      
        window.runExample07 = function() {
      
          return compareOffers(20, "GBP", 24.5, "USD");
      
        };
      
        //# sourceMappingURL=bundle.js.map

        
        const builder = new SafeScopeInfoBuilder();
      
        // 1. Original Scopes (abbreviated: positions come from TextLocator).
      
        builder
      
          .startSource()
      
          .startScope(0, 0, { kind: "Module", key: "module", variables: ["toCents", "compareOffers"] })
      
          .startScope(..., { name: "toCents", kind: "Function", isStackFrame: true, key: "toCents",
      
                             variables: ["amount", "currency", "rate", "cents"] }).endScope(...)
      
          .startScope(..., { name: "compareOffers", kind: "Function", isStackFrame: true, key: "compareOffers",
      
                             variables: ["priceA", "currencyA", "priceB", "currencyB", "centsA", "centsB"] })
      
          .endScope(...)
      
          .endScope(...)
      
          .endSource();
      
        // 2. Generated Ranges: TWO inlined ranges reference the SAME "toCents" scope,
      
        //    each with its own callSite and its own bindings.
      
        builder
      
          .startRange(0, 0, { scopeKey: "module", values: [null, "compareOffers"] })
      
          .startRange(..., { scopeKey: "compareOffers", isStackFrame: true, values: [
      
            "a", "x", "b", "y",
      
            availableFrom(start, afterC1, end, "c1"),
      
            availableFrom(start, afterC2, end, "c2"),
      
          ] })
      
            // const r1 = ...; const c1 = ...;
      
            .startRange(..., { scopeKey: "toCents", callSite: toCentsA,
      
                               values: ["a", "x", availableFrom(start, afterR1, end, "r1"), null] })
      
            .endRange(...)
      
            // const r2 = ...; const c2 = ...;
      
            .startRange(..., { scopeKey: "toCents", callSite: toCentsB,
      
                               values: ["b", "y", availableFrom(start, afterR2, end, "r2"), null] })
      
            .endRange(...)
      
          .endRange(...)
      
          // window.runExample07: generated-only glue.
      
          .startRange(..., { isStackFrame: true }).endRange(...)
      
          .endRange(...);
      
        // Note: 'cents' is null in both copies: c1/c2 are only assigned by the last
      
        // statement of each inlined range.

Decoded OriginalScope Tree (multi-callsite.ts)
      Module
      (anonymous)
      [0:0 → 17:0)
      
    
variables: [toCents, compareOffers]

      Function
      toCents
      [1:16 → 5:1)
      isStackFrame
    
variables: [amount, currency, rate, cents]

      Function
      compareOffers
      [7:29 → 16:1)
      isStackFrame
    
variables: [priceA, currencyA, priceB, currencyB, centsA, centsB]
Decoded GeneratedRange & Binding Tree (bundle.js)
      Range [0:0 → 11:0)
      → Module
      isStackFrame: false
      
      
    

          bindings: toCents → <unavailable>, compareOffers → compareOffers
        

      Range [0:22 → 6:1)
      → Function(compareOffers)
      isStackFrame
      
      
    

          bindings: priceA → a, currencyA → x, priceB → b, currencyB → y, centsA → SubRanges([0:22-2:38]: unavailable | [2:38-6:1]: c1), centsB → SubRanges([0:22-4:38]: unavailable | [4:38-6:1]: c2)
        

      Range [1:2 → 2:38)
      → Function(toCents)
      isStackFrame: false
      
      callSite @ 14:18
    

          bindings: amount → a, currency → x, rate → SubRanges([1:2-1:36]: unavailable | [1:36-2:38]: r1), cents → <unavailable>
        

      Range [3:2 → 4:38)
      → Function(toCents)
      isStackFrame: false
      
      callSite @ 15:18
    

          bindings: amount → b, currency → y, rate → SubRanges([3:2-3:36]: unavailable | [3:36-4:38]: r2), cents → <unavailable>
        

      Range [7:30 → 9:1)
      → unmapped range
      isStackFrame
      
      
    

              Raw Source Map JSON (bundle.js.map)
              {
  "version": 3,
  "file": "bundle.js",
  "sources": [
    "multi-callsite.ts"
  ],
  "sourcesContent": [
    "// Authored TypeScript: multi-callsite.ts\nfunction toCents(amount: number, currency: string): number {\n  const rate = currency === \"GBP\" ? 1.25 : 1;\n  const cents = Math.round(amount * rate * 100);\n  return cents;\n}\n\nexport function compareOffers(\n  priceA: number,\n  currencyA: string,\n  priceB: number,\n  currencyB: string,\n) {\n  const centsA = toCents(priceA, currencyA);\n  const centsB = toCents(priceB, currencyB);\n  return { centsA, centsB, cheaper: centsA <= centsB ? \"A\" : \"B\" };\n}\n"
  ],
  "names": [
    "compareOffers",
    "rate",
    "cents",
    "Module",
    "toCents",
    "Function",
    "amount",
    "currency",
    "priceA",
    "currencyA",
    "priceB",
    "currencyB",
    "centsA",
    "centsB",
    "a",
    "x",
    "b",
    "y",
    "c1",
    "c2",
    "r1",
    "r2"
  ],
  "mappings": "AAOAA;EALEC;EACAC;EADAD;EACAC;EAYA;;;;;;",
  "scopes": [
    "BCAAG,DIJ,BHBQIE,DMCNC,CEB,BHCdJA,DMCCCCC,CJB,CBA"
  ],
  "ranges": [
    "ECAAA,GAB,EGWAE,GPQRSAA,HECmBT,HFEmBU,EDBCAD,GPQAA,HCAiBV,IANR,FBmB,EDBCAA,GRSAA,HCAiBW,IAOR,FBmB,FCB,EFBe,FCB,FCA"
  ]
}
            

1	// Authored TypeScript: multi-callsite.ts
2	function toCents(amount: number, currency: string): number {
3	const rate = currency === "GBP" ? 1.25 : 1;
4	const cents = Math.round(amount * rate * 100);
5	return cents;
6	}
7
8	export function compareOffers(
9	priceA: number,
10	currencyA: string,
11	priceB: number,
12	currencyB: string,
13	) {
14	const centsA = toCents(priceA, currencyA);
15	const centsB = toCents(priceB, currencyB);
16	return { centsA, centsB, cheaper: centsA <= centsB ? "A" : "B" };
17	}

1	function compareOffers(a, x, b, y) {
2	const r1 = x === "GBP" ? 1.25 : 1;
3	const c1 = Math.round(a * r1 * 100);
4	const r2 = y === "GBP" ? 1.25 : 1;
5	const c2 = Math.round(b * r2 * 100);
6	return { centsA: c1, centsB: c2, cheaper: c1 <= c2 ? "A" : "B" };
7	}
8	window.runExample07 = function() {
9	return compareOffers(20, "GBP", 24.5, "USD");
10	};
11	//# sourceMappingURL=bundle.js.map

1	const builder = new SafeScopeInfoBuilder();
2
3	// 1. Original Scopes (abbreviated: positions come from TextLocator).
4	builder
5	.startSource()
6	.startScope(0, 0, { kind: "Module", key: "module", variables: ["toCents", "compareOffers"] })
7	.startScope(..., { name: "toCents", kind: "Function", isStackFrame: true, key: "toCents",
8	variables: ["amount", "currency", "rate", "cents"] }).endScope(...)
9	.startScope(..., { name: "compareOffers", kind: "Function", isStackFrame: true, key: "compareOffers",
10	variables: ["priceA", "currencyA", "priceB", "currencyB", "centsA", "centsB"] })
11	.endScope(...)
12	.endScope(...)
13	.endSource();
14
15	// 2. Generated Ranges: TWO inlined ranges reference the SAME "toCents" scope,
16	// each with its own callSite and its own bindings.
17	builder
18	.startRange(0, 0, { scopeKey: "module", values: [null, "compareOffers"] })
19	.startRange(..., { scopeKey: "compareOffers", isStackFrame: true, values: [
20	"a", "x", "b", "y",
21	availableFrom(start, afterC1, end, "c1"),
22	availableFrom(start, afterC2, end, "c2"),
23	] })
24	// const r1 = ...; const c1 = ...;
25	.startRange(..., { scopeKey: "toCents", callSite: toCentsA,
26	values: ["a", "x", availableFrom(start, afterR1, end, "r1"), null] })
27	.endRange(...)
28	// const r2 = ...; const c2 = ...;
29	.startRange(..., { scopeKey: "toCents", callSite: toCentsB,
30	values: ["b", "y", availableFrom(start, afterR2, end, "r2"), null] })
31	.endRange(...)
32	.endRange(...)
33	// window.runExample07: generated-only glue.
34	.startRange(..., { isStackFrame: true }).endRange(...)
35	.endRange(...);
36
37	// Note: 'cents' is null in both copies: c1/c2 are only assigned by the last
38	// statement of each inlined range.