EXAMPLE 02 • register-reuse.ts

Register Reuse & Sub-Range Variable Bindings

Track variable liveness and register coalescing when a single minified variable 'r' is overwritten across multiple stages.

SubRangeBinding[] Contiguous IntervalsRegister Coalescing / Reuse (r -> calibratedMv, temperatureCelsius, statusBadge)Temporal Variable Liveness (unavailable before init & after overwrite)Reverse Algebraic Reconstruction across Sub-Ranges

OPEN CHROME DEVTOOLS (F12) FIRST, THEN TRIGGER:

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

How This Example Works

Optimizing compilers and minifiers perform register allocation / variable coalescing: if three authored variables (calibratedMv, temperatureCelsius, and statusBadge) have non-overlapping lifetimes, the compiler reuses a single JavaScript variable let r for all three!

Without sub-range bindings, mapping all three names to r would cause every variable to show the wrong value (e.g. statusBadge showing 1250 at Step 1). Using SubRangeBinding[], each variable specifies exact [from, to) positions in generated code where it is unavailable, bound directly to "r", or algebraically reconstructed (`r * 10 + 500`).

What to Try & Verify in DevTools

Step 1: Pause After Voltage Calibration Scope View

Try:Click "Run & Pause in Debugger" to stop at debugger; // Step 1 in register-reuse.ts (where let r = 1250).

Active Binding: calibratedMv displays 1250 (bound directly to r).
Pre-Initialization Liveness: temperatureCelsius and statusBadge both display <unavailable> instead of leaking r's current value.

Step 2: Resume to Celsius Conversion & Observe Register Reuse Scope View

Try:Press F8 (Resume) once to advance to debugger; // Step 2 (where r is overwritten with 75).

Reassigned Register: temperatureCelsius becomes live with value 75 (now bound to r).
Reverse Algebraic Binding: calibratedMv stays 1250 because its active sub-range [step2Pos, step3Pos) switches its binding expression to "r * 10 + 500".
Still Uninitialized: statusBadge remains <unavailable>.

Step 3: Resume to Status Badge Formatting Inline Hints & Popover

Try:Press F8 (Resume) once more to reach debugger; // Step 3 (where r is overwritten with the badge string).

New Register Owner: statusBadge becomes "[CORE-TEMP-04] 75.0°C (WARN)" (bound to r).
Clobbered Register: calibratedMv transitions to <unavailable> because r now holds a string.
Fallback Expression: temperatureCelsius (75) stays live via (e.rawMillivolts + e.calibrationOffset - 500) / 10.

Test Autocomplete & Sub-Range Conditional Breakpoints Conditional Breakpoints

Try:Type cal, temp, or statusB in the Console to check autocomplete, or set a conditional breakpoint on line 18 (const statusBadge = ...) with condition temperatureCelsius >= 70 && calibratedMv === 1250.

Autocomplete: All three coalesced variables appear in Console and breakpoint autocomplete.
Sub-Range Condition Evaluation: At line 18, DevTools simultaneously resolves temperatureCelsius (r) and calibratedMv (r * 10 + 500) to pause execution.

Evaluate Variables Across Different Program Counters Debug Evaluate

Try:Run the expressions below in the Console at Steps 1, 2, and 3.

PC-Sensitive Rewriting: DevTools picks the exact SubRangeBinding interval matching the current paused line:column in bundle.js.

Other things to try

Step with F10 instead of resuming, and watch when each variable switches between a value and <unavailable>.
Add calibratedMv, temperatureCelsius and statusBadge as Watch expressions before running.
Set a breakpoint on each const line (instead of using debugger;) and check 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:

calibratedMv

Expected Result: 1250 (at Step 1 & Step 2) | ReferenceError / unavailable (at Step 3)

Resolves to r at Step 1, r * 10 + 500 at Step 2, and is marked unavailable at Step 3.

temperatureCelsius * 1.8 + 32

Expected Result: 167 (at Step 2 & Step 3)

Converts Celsius (75) to Fahrenheit (167°F) using r at Step 2 and (e.rawMillivolts + e.calibrationOffset - 500) / 10 at Step 3.

statusBadge

Expected Result: "[CORE-TEMP-04] 75.0°C (WARN)" (at Step 3)

Resolves to r only after execution reaches step3Pos.

        
        // Authored TypeScript: register-reuse.ts
      
        export interface TelemetryReading {
      
          sensorId: string;
      
          rawMillivolts: number;
      
          calibrationOffset: number;
      
        }
      
        export function processSensorReading(reading: TelemetryReading) {
      
          // Phase 1: Calibrate raw voltage
      
          const calibratedMv = reading.rawMillivolts + reading.calibrationOffset;
      
          debugger; // Step 1: 'r' holds 'calibratedMv' (1250)
      
          // Phase 2: Convert millivolts to Celsius
      
          const temperatureCelsius = (calibratedMv - 500) / 10;
      
          debugger; // Step 2: 'r' is reused for 'temperatureCelsius' (75)
      
          // Phase 3: Format status alert badge
      
          const statusBadge = `[${reading.sensorId}] ${temperatureCelsius.toFixed(1)}°C (${
      
            temperatureCelsius >= 70 ? "WARN" : "OK"
      
          })`;
      
          debugger; // Step 3: 'r' is reused for 'statusBadge'
      
          return {
      
            sensorId: reading.sensorId,
      
            badge: statusBadge,
      
          };
      
        }

        
        function processSensorReading(e) {
      
          let r = e.rawMillivolts + e.calibrationOffset;
      
          debugger;
      
          r = (r - 500) / 10;
      
          debugger;
      
          r = "[" + e.sensorId + "] " + r.toFixed(1) + "°C (" + (r >= 70 ? "WARN" : "OK") + ")";
      
          debugger;
      
          return { sensorId: e.sensorId, badge: r };
      
        }
      
        window.runExample02 = function() {
      
          return processSensorReading({
      
            sensorId: "CORE-TEMP-04",
      
            rawMillivolts: 1235,
      
            calibrationOffset: 15
      
          });
      
        };
      
        //# sourceMappingURL=bundle.js.map

        
        const builder = new SafeScopeInfoBuilder();
      
        builder
      
          .startSource()
      
          .startScope(0, 0, {
      
            kind: "Module",
      
            key: "module",
      
            variables: ["processSensorReading"],
      
          })
      
          .startScope(origFuncStart.line, origFuncStart.column, {
      
            name: "processSensorReading",
      
            kind: "Function",
      
            isStackFrame: true,
      
            key: "processSensorReading",
      
            variables: [
      
              "reading",
      
              "calibratedMv",
      
              "temperatureCelsius",
      
              "statusBadge",
      
            ],
      
          })
      
          .endScope(origFuncEnd.line, origFuncEnd.column)
      
          .endScope(origModuleEnd.line, origModuleEnd.column)
      
          .endSource();
      
        // SubRangeBinding[] tracks how the single generated variable 'r'
      
        // is reused across Phase 1, Phase 2, and Phase 3!
      
        builder
      
          .startRange(0, 0, {
      
            scopeKey: "module",
      
            values: ["processSensorReading"],
      
          })
      
          .startRange(genFuncStart.line, genFuncStart.column, {
      
            scopeKey: "processSensorReading",
      
            isStackFrame: true,
      
            values: [
      
              // 1. reading (valid for entire function)
      
              "e",
      
              // 2. calibratedMv (stored in 'r' at Step 1, reconstructed at Step 2, dead at Step 3)
      
              [
      
                { from: genFuncStart, to: step1Pos },
      
                { from: step1Pos, to: step2Pos, value: "r" },
      
                { from: step2Pos, to: step3Pos, value: "r * 10 + 500" },
      
                { from: step3Pos, to: genFuncEnd },
      
              ],
      
              // 3. temperatureCelsius (unavailable at Step 1, stored in 'r' at Step 2, reconstructed at Step 3)
      
              [
      
                { from: genFuncStart, to: step2Pos },
      
                { from: step2Pos, to: step3Pos, value: "r" },
      
                {
      
                  from: step3Pos,
      
                  to: genFuncEnd,
      
                  value: "(e.rawMillivolts + e.calibrationOffset - 500) / 10",
      
                },
      
              ],
      
              // 4. statusBadge (unavailable at Steps 1 & 2, stored in 'r' at Step 3)
      
              [
      
                { from: genFuncStart, to: step3Pos },
      
                { from: step3Pos, to: genFuncEnd, value: "r" },
      
              ],
      
            ],
      
          })
      
          .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 (register-reuse.ts)
      Module
      (anonymous)
      [0:0 → 27:0)
      
    
variables: [processSensorReading]

      Function
      processSensorReading
      [7:36 → 26:1)
      isStackFrame
    
variables: [reading, calibratedMv, temperatureCelsius, statusBadge]
Decoded GeneratedRange & Binding Tree (bundle.js)
      Range [0:0 → 17:0)
      → Module
      isStackFrame: false
      
      
    

          bindings: processSensorReading → processSensorReading
        

      Range [0:29 → 8:1)
      → Function(processSensorReading)
      isStackFrame
      
      
    

          bindings: reading → e, calibratedMv → SubRanges([0:29-2:2]: unavailable | [2:2-4:2]: r | [4:2-6:2]: r * 10 + 500 | [6:2-8:1]: unavailable), temperatureCelsius → SubRanges([0:29-4:2]: unavailable | [4:2-6:2]: r | [6:2-8:1]: (e.rawMillivolts + e.calibrationOffset - 500) / 10), statusBadge → SubRanges([0:29-6:2]: unavailable | [6:2-8:1]: r)
        

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

              Raw Source Map JSON (bundle.js.map)
              {
  "version": 3,
  "file": "bundle.js",
  "sources": [
    "register-reuse.ts"
  ],
  "sourcesContent": [
    "// Authored TypeScript: register-reuse.ts\nexport interface TelemetryReading {\n  sensorId: string;\n  rawMillivolts: number;\n  calibrationOffset: number;\n}\n\nexport function processSensorReading(reading: TelemetryReading) {\n  // Phase 1: Calibrate raw voltage\n  const calibratedMv = reading.rawMillivolts + reading.calibrationOffset;\n  debugger; // Step 1: 'r' holds 'calibratedMv' (1250)\n\n  // Phase 2: Convert millivolts to Celsius\n  const temperatureCelsius = (calibratedMv - 500) / 10;\n  debugger; // Step 2: 'r' is reused for 'temperatureCelsius' (75)\n\n  // Phase 3: Format status alert badge\n  const statusBadge = `[${reading.sensorId}] ${temperatureCelsius.toFixed(1)}°C (${\n    temperatureCelsius >= 70 ? \"WARN\" : \"OK\"\n  })`;\n  debugger; // Step 3: 'r' is reused for 'statusBadge'\n\n  return {\n    sensorId: reading.sensorId,\n    badge: statusBadge,\n  };\n}\n"
  ],
  "names": [
    "processSensorReading",
    "reading",
    "calibratedMv",
    "temperatureCelsius",
    "statusBadge",
    "Module",
    "Function",
    "e",
    "r",
    "r * 10 + 500",
    "(e.rawMillivolts + e.calibrationOffset - 500) / 10"
  ],
  "mappings": "AAOAA,8BAAqCC;EAEnCC;EACA;EAGAC;EACA;EAGAC;EAGA;EAEA;;;;;;;;;;",
  "scopes": [
    "BCAAK,DA,BHHkBAC,DCCCC,CTB,CBA"
  ],
  "ranges": [
    "ECAAA,GB,EGdAC,GIAAA,HBCCJCCKCCA,HCECJCCL,HDGCJ,FIB,EFBe,FGB,FCA"
  ]
}
            

1	// Authored TypeScript: register-reuse.ts
2	export interface TelemetryReading {
3	sensorId: string;
4	rawMillivolts: number;
5	calibrationOffset: number;
6	}
7
8	export function processSensorReading(reading: TelemetryReading) {
9	// Phase 1: Calibrate raw voltage
10	const calibratedMv = reading.rawMillivolts + reading.calibrationOffset;
11	debugger; // Step 1: 'r' holds 'calibratedMv' (1250)
12
13	// Phase 2: Convert millivolts to Celsius
14	const temperatureCelsius = (calibratedMv - 500) / 10;
15	debugger; // Step 2: 'r' is reused for 'temperatureCelsius' (75)
16
17	// Phase 3: Format status alert badge
18	const statusBadge = `[${reading.sensorId}] ${temperatureCelsius.toFixed(1)}°C (${
19	temperatureCelsius >= 70 ? "WARN" : "OK"
20	})`;
21	debugger; // Step 3: 'r' is reused for 'statusBadge'
22
23	return {
24	sensorId: reading.sensorId,
25	badge: statusBadge,
26	};
27	}

1	function processSensorReading(e) {
2	let r = e.rawMillivolts + e.calibrationOffset;
3	debugger;
4	r = (r - 500) / 10;
5	debugger;
6	r = "[" + e.sensorId + "] " + r.toFixed(1) + "°C (" + (r >= 70 ? "WARN" : "OK") + ")";
7	debugger;
8	return { sensorId: e.sensorId, badge: r };
9	}
10	window.runExample02 = function() {
11	return processSensorReading({
12	sensorId: "CORE-TEMP-04",
13	rawMillivolts: 1235,
14	calibrationOffset: 15
15	});
16	};
17	//# sourceMappingURL=bundle.js.map

1	const builder = new SafeScopeInfoBuilder();
2
3	builder
4	.startSource()
5	.startScope(0, 0, {
6	kind: "Module",
7	key: "module",
8	variables: ["processSensorReading"],
9	})
10	.startScope(origFuncStart.line, origFuncStart.column, {
11	name: "processSensorReading",
12	kind: "Function",
13	isStackFrame: true,
14	key: "processSensorReading",
15	variables: [
16	"reading",
17	"calibratedMv",
18	"temperatureCelsius",
19	"statusBadge",
20	],
21	})
22	.endScope(origFuncEnd.line, origFuncEnd.column)
23	.endScope(origModuleEnd.line, origModuleEnd.column)
24	.endSource();
25
26	// SubRangeBinding[] tracks how the single generated variable 'r'
27	// is reused across Phase 1, Phase 2, and Phase 3!
28	builder
29	.startRange(0, 0, {
30	scopeKey: "module",
31	values: ["processSensorReading"],
32	})
33	.startRange(genFuncStart.line, genFuncStart.column, {
34	scopeKey: "processSensorReading",
35	isStackFrame: true,
36	values: [
37	// 1. reading (valid for entire function)
38	"e",
39
40	// 2. calibratedMv (stored in 'r' at Step 1, reconstructed at Step 2, dead at Step 3)
41	[
42	{ from: genFuncStart, to: step1Pos },
43	{ from: step1Pos, to: step2Pos, value: "r" },
44	{ from: step2Pos, to: step3Pos, value: "r * 10 + 500" },
45	{ from: step3Pos, to: genFuncEnd },
46	],
47
48	// 3. temperatureCelsius (unavailable at Step 1, stored in 'r' at Step 2, reconstructed at Step 3)
49	[
50	{ from: genFuncStart, to: step2Pos },
51	{ from: step2Pos, to: step3Pos, value: "r" },
52	{
53	from: step3Pos,
54	to: genFuncEnd,
55	value: "(e.rawMillivolts + e.calibrationOffset - 500) / 10",
56	},
57	],
58
59	// 4. statusBadge (unavailable at Steps 1 & 2, stored in 'r' at Step 3)
60	[
61	{ from: genFuncStart, to: step3Pos },
62	{ from: step3Pos, to: genFuncEnd, value: "r" },
63	],
64	],
65	})
66	.endRange(genFuncEnd.line, genFuncEnd.column)
67	// Generated-only entry helper without corresponding authored code:
68	// emit a stack-frame range without a definition OriginalScope.
69	.startRange(genRunStart.line, genRunStart.column, {
70	isStackFrame: true,
71	})
72	.endRange(genRunEnd.line, genRunEnd.column)
73	.endRange(genModuleEnd.line, genModuleEnd.column);