CODEWITHSUNDEEP
javascripttypescriptjavascript-debuggermap-files
Terry
Terry

Reputation: 1998

VS Code Debug Dynamically Inserted JS with mapping file

I have a typescript project in VS code (obviously running on Node and using Debugger for Chrome extension). My html file references a static javascript file, but then that javascript file dynamically injects the contents of a javascript resource.

const body = document.querySelector('body');
const script = document.createElement('script');
script.setAttribute("rbl-script", "true");
script.innerHTML = content;
body.appendChild(script);

In the code above, content is the return data from a call using $.ajax( ajaxConfig ) with ajaxConfig.url set to 'http://localhost:8887/js/KatAppProvider.js' and that is the generated javascript file from tsc --build. (Note, I can't just statically link this file, because in production, the $.ajax request is going to a content management web service.)

If I try to set breakpoints in VS Code in the corresponding KatAppProvider.ts file, they are never hit. The problem seems to be the //# sourceMappingURL=KatAppProvider.js.map generated line. I think everything used to work fine and possibly a VS Code or extension update changed the behavior, but I can't confirm. The only way I can get this to work, is to manually modify that mapping url line in the generated file after building to //# sourceMappingURL=js/KatAppProvider.js.map (to include the js/).

  1. Am I remembering wrong in my thinking that this worked as is (without the js/ prefix)?
  2. Is this the expected behavior with my scenario? And if so, is there a way to change only this files compilation to include the js/ prefix (but no other files - i.e. the statically linked ones in the project)

Upvotes: 1

Views: 389

Answers (0)

Related Questions