[debug][typescript] ReferenceError while referencing a valid parameter

[Deilan]

Issue Type: Bug

Repro steps:

1. Clone Repo with a sample
2. npm install
3. npm start
4. Launch Launch Chrome against localhost debug configuration
5. Set a breakpoint at src/main.ts on line 26
6. Hover over err function parameter - no tooltip
7. Add err to Watch - not available
8. Type err in Debug Console - ReferenceError

If one put a console.log(err) into the function, then everything will work as expected.

See screenshots below.

VS Code version: Code 1.24.1 (24f6262, 2018-06-13T17:41:50.128Z)
OS version: Darwin x64 17.6.0

System Info

Item	Value
CPUs	Intel(R) Core(TM) i7-4650U CPU @ 1.70GHz (4 x 1700)
GPU Status	2d_canvas: enabled flash_3d: enabled flash_stage3d: enabled flash_stage3d_baseline: enabled gpu_compositing: enabled multiple_raster_threads: enabled_on native_gpu_memory_buffers: enabled rasterization: enabled video_decode: enabled video_encode: enabled vpx_decode: enabled webgl: enabled webgl2: enabled
Load (avg)	4, 8, 10
Memory (System)	8.00GB (0.03GB free)
Process Argv	/Applications/Visual Studio Code.app/Contents/MacOS/Electron .
Screen Reader	no
VM	0%

Extensions (28)

Extension	Author (truncated)	Version
vscode-markdownlint	Dav	0.18.0
EditorConfig	Edi	0.12.4
vscode-docker	Pet	0.0.27
code-settings-sync	Sha	2.9.2
htmltagwrap	bra	0.0.7
npm-intellisense	chr	1.3.0
path-intellisense	chr	1.4.2
language-postcss	cpy	1.0.5
vscode-svgviewer	css	1.4.4
vscode-eslint	dba	1.4.12
gitlens	eam	8.4.1
tslint	eg2	1.0.33
vscode-npm-script	eg2	0.3.4
auto-close-tag	for	0.5.6
auto-rename-tag	for	0.0.15
beautify	Hoo	1.3.2
vscode-nuget-package-manager	jmr	1.1.6
docomment	k--	0.1.0
csharpfixformat	Leo	0.0.71
HTMLHint	mka	0.5.0
vscode-stylefmt	mrm	2.5.0
csharp	ms-	1.15.2
debugger-for-chrome	msj	4.6.0
angular2-inline	nat	0.0.17
vscode-yaml	red	0.0.13
vscode-icons	rob	7.24.0
vscode-nginx	sha	0.5.0
vscode-hexdump	sle	1.6.0

[roblourens]

Not sure I can fix this one. Webpack evals transpiled code and calls it "main.ts". There is no sourcemap. So the line numbers are off and you aren't actually on that line.

The code in the runtime looks like

    
Object.defineProperty(exports, "__esModule", { value: true });
var rxjs_1 = __webpack_require__(/*! rxjs */ "./node_modules/rxjs/Rx.js");
function loadUsers() {
    return rxjs_1.Observable.create(function (o) {
        var xhr = new XMLHttpRequest();
        xhr.addEventListener('load', function () {
            if (xhr.status !== 200) {
                o.error(xhr.statusText);
                return;
            }
            try {
                var data = JSON.parse(xhr.responseText);
                o.next(data);
                o.complete();
            }
            catch (err) {
                o.error(err);
            }
        });
        xhr.open('GET', 'https://api.github.com/users3');
        xhr.send();
    }).retryWhen(retryStrategy());
}
function retryStrategy() {
    return function (err) {
        return err.delay(1000);
    };
}
loadUsers().subscribe(function (data) { return console.log("next: " + data); }, function (err) { return console.log("error: " + err); }, function () { return console.log('complete'); });


//# sourceURL=webpack:///./src/main.ts?

If you compare it to the source, it's obviously different. You'll have to change the setup to produce a sourcemap.

[Deilan]

Thanks!

Got resolved by using devtool: 'cheap-module-eval-source-map' or higher values closer to the original source.

Reference: https://webpack.js.org/configuration/devtool/