question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

File auto-detection doesn't work for inline sourcemaps

See original GitHub issue

Type: Bug

When the VS Code JS debugger loads a source-mapped file, language auto-detection only works if the source file shown in the IDE debugger is loaded from a source file in node_modules. However, if the source file shown in the IDE is loaded via code in an inline sourcemap, then the file will be detected as JS, even if the filename in the sourcemap has a .ts extension and would be detected as TS code if pasted into an empty file.

Repro:

  • npx create-react-app sourcemap-debug --template typescript
  • cd sourcemap-debug
  • File… Open Folder… and choose the new repo’s folder
  • Add the following code to App.tsx: (this library was written in TS and has its TS source inside its NPM package)
import { decode } from '@jridgewell/sourcemap-codec';
const ignore = decode('');
  • Set a breakpoint on the second line of code above
  • npm start
  • Debug using the Web App (Chrome) debugger
  • When the breakpoint stops, Step Into the library source. You’ll see the library’s source file correctly be auto-detected as TypeScript.
  • Now stop the debugger
  • Rename node_modules/@jridgewell/sourcemap-codec/src/sourcemap-codec.ts to something else, e.g. node_modules/@jridgewell/sourcemap-codec/src/sourcemap-codec.ts.hide. This will force VSCode to load the source from this package’s inline sourcemap instead.
  • Now start debugging again
  • When the debugger stops at the breakpoint, Step In again.

Expected: Library’s source file, like it was before, is detected as TS

Actual: Library’s source file sourcemap_codec.ts is detected as JS, and there’s a lot of errors shown in the Problems pane because TS code isn’t valid JS. image

You can easily validate that this isn’t a language auto-detector problem alone, because when you Select All on the source file and copy that code into a blank file, then it’s correctly detected as TypeScript.

VS Code version: Code 1.73.1 (Universal) (6261075646f055b99068d3688932416f2346dd3b, 2022-11-09T02:08:38.961Z) OS version: Darwin arm64 22.1.0 Modes: Sandboxed: No

System Info
Item Value
CPUs Apple M1 Max (10 x 24)
GPU Status 2d_canvas: enabled
canvas_oop_rasterization: disabled_off
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
metal: disabled_off
multiple_raster_threads: enabled_on
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
skia_renderer: enabled_on
video_decode: enabled
video_encode: enabled
vulkan: disabled_off
webgl: enabled
webgl2: enabled
webgpu: disabled_off
Load (avg) 12, 18, 15
Memory (System) 32.00GB (0.44GB free)
Process Argv –crash-reporter-id e32d4ffb-1630-4ccd-aaee-eaa6b19322ef
Screen Reader no
VM 0%
Extensions (23)
Extension Author (truncated) Version
vscode-color ans 0.4.5
gitstash art 5.1.0
vscode-tailwindcss bra 0.9.1
vscode-eslint dba 2.2.6
prettier-vscode esb 9.10.3
vscode-rpc-server hed 0.13.3
node-module-intellisense lei 1.5.0
template-string-converter meg 0.6.0
csharp ms- 1.25.2
hexeditor ms- 1.9.9
js-debug-nightly ms- 2022.12.217
sqltools mtx 0.26.0
sqltools-driver-pg mtx 0.4.0
convert-css-in-js pau 1.1.3
vscode-react-refactor pla 1.1.3
ecmarkup-vscode rbu 0.0.1
grammarkdown-language rbu 0.3.3
tsserver-live-reload rbu 1.0.1
html-to-jsx ria 0.0.1
rewrap stk 1.16.3
code-spell-checker str 2.11.1
vscode-status-bar-format-toggle tom 3.1.1
html-css-class-completion Zig 1.20.0
A/B Experiments
vsliv368:30146709
vsreu685:30147344
python383:30185418
vspor879:30202332
vspor708:30202333
vspor363:30204092
vswsl492cf:30256860
vstes627:30244334
vslsvsres303:30308271
pythonvspyl392:30443607
vserr242:30382549
pythontb:30283811
vsjup518:30340749
pythonptprofiler:30281270
vshan820:30294714
vstes263cf:30335440
vscorecescf:30445987
pythondataviewer:30285071
vscod805cf:30301675
binariesv615:30325510
bridge0708:30335490
bridge0723:30353136
cmake_vspar411:30581797
vsaa593cf:30376535
pythonvs932:30410667
cppdebug:30492333
vsclangdf:30486550
c4g48928:30535728
dsvsc012cf:30540253
azure-dev_surveyone:30548225
pyindex848:30577860
nodejswelcome1cf:30587006
282f8724:30602487
gswce1:30612156
iaj6b796:30613358
dbltrim-noruby:30604474
f6dab269:30613381

Issue Analytics

  • State:open
  • Created 10 months ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
TylerLeonhardtcommented, Dec 7, 2022

You can easily validate that this isn’t a language auto-detector problem alone, because when you Select All on the source file and copy that code into a blank file, then it’s correctly detected as TypeScript.

@connor4312 did you see this? Also, since there’s a .ts that shouldn’t trigger ML auto-detection… though that, plus the first line in the file may trigger our regular ol’ heuristic language detection.

Maybe we need @bpasero. @connor4312 how do you open this file?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Sourcemaps are detected in chrome but original source is not ...
Generated files with source maps won't automatically redirect to their original files, because there's potentially a 1-to-many relationship.
Read more >
What's New In DevTools (Chrome 99)
You can now debug Chrome extension with sourcemap files. Previously, DevTools only supported inline sourcemap for Chrome extension debugging ...
Read more >
css-loader | webpack - JS.ORG
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable...
Read more >
Tasks in Visual Studio Code
With autoDetect , paths are first tested as absolute paths, and if the file doesn't exist then the path is assumed to be...
Read more >
JavaScript Obfuscator Tool
JavaScript Obfuscator is a free online tool that obfuscates your source code, preventing it from being stolen and used without permission.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found