Search code examples
javascripttypescriptdebuggingmicrosoft-edgechromium

How to use map filesystem folder to debug original sources in Chromium Developer Tools


I have a website running at https://somewebsite.com/.

  • It references a compiled javascript file: /js/site.js
  • mapping file is also available on the server /js/site.js.map
  • typescript file is not available - I'm getting 404 for /js/site.ts which is correct!

I have the original typescript file available locally at C:/projects/myapp/wwwroot/js/site.ts

How do I map my source file in Edge's/Chrome developer tools so that I can debug it?

When I add C:/projects/myapp/wwwroot/ local folder to workspace, the files are not linked.

However, when the same website is running on localhost, and I add the local folder to workspace, it works!


Solution

  • As @YouZhou answered, I cannot map a local folder, but I can use overrides:

    1. Right click the typescript file and choose Save for overrides

      enter image description here

    2. Then paste the content of local file to the overriden file