Chrome dev tools not mapping ts source - angularjs

My chrome dev tools suddenly stopped mapping the .ts sources hence causing issues with debugging. When I load a js file I am getting a hint saying "Source Map detected". Further down the message says "Associated files are available via file tree or Ctrl+P". However, i dont see these files in the tree nor by Ctrl+P. For clarity the "Enable Javasript source maps" in the settings is Enabled. Same exactly codeset on another machine working properly. What could be an issue?

You can use Debugging Typescript in Visual Studio Code and Chrome as a debugging tool with sourceMaps.

Related

VS code Editor cannot open and developer tools pops up with an error message

When i open my VS code, it shows that "The Editor could not be opened due to unexpected error; try again. Unable to write folder settings because no resource is provided and check Developer tools also pops up showing this error:
DevTools failed to load source map: Could not load content for https://ticino.blob.core.windows.net/sourcemaps/e18005f%E2%80%A6/core/vs/workbench/workbench.desktop.main.js.map: Load canceled due to load timeout
I tried googling but a whole page of script pops up of which i know nothing
I can't exactly know what the issue was since I can't tell if you were making something before-hand or if you just installed but I'll give you a few helpful tips
1: If you were working on a web app, you need to enable CSS & Javascript sourcemaps in whatever browser you are using. There are many tutorials to teach you how to do this.
2: If VSCode gives you the error but still opens, try to open a folder or a workspace file, as this link says that opening a workspace should fix the issue.
3: If you just installed VSCode, uninstall it and try again. It's more than likely that VSCode didn't install correctly or are missing dependencies.
If none of those work, please give more detail about the issue. The link you provided doesn't load properly, and I can't tell what you were doing beforehand that could have possibly caused this issue

VS Code React app closes/crashes using Chrome debugger

I am troubleshooting an issue I am having debugging a React application using VS Code with the Chrome debugger extension. I am using Windows 10 x64.
When I try to log into the application from the app's login page, the debug browser closes without any error (see screenshot below of break-point in code where the browser closes/crashes). I've tried debugging with both Chrome and Edge and I see the same issue with both browsers.
I do not have the same issue running the application without debugger from npm start. Nor do I see the issue when running the application from Chrome debugger on a different computer. Also my friend who is working on the same code does not see the issue on his computer when debugging or running the code.
I cloned an extra copy of the application code onto a different directory on my computer and that did not fix the issue.
I see a file is created \src\debug.log which seems like it could be related to the issue, but not sure what this is used for. The log file just shows the below error over and over.
ERROR:crash_report_database_win.cc(469)] failed to stat report
Any ideas on how I can fix this or what might be happening here?
I faced with the same issue in the Chrome version 85, I've updated to version 86.0.4240.75 and now is working for me
Here you'll find the Chrome Bug Report: https://bugs.chromium.org/p/chromium/issues/detail?id=1123329
The solution for now is to disable the new Javascript Debugger
"debug.javascript.usePreview": false

Webpack bundles and source React files after deployment

I have the following query. When deploying a React app, what is being deployed is the .js and .css bundles produced By Webpack. However, by using Chrome dev tools under Sources tab, I am able to see all the source code - every single file being used during development. So, the question is how is that possible and who is responsible for that?
Moreover, it seems Chrome debugger has some issues with these source files e.g. skips lines when debugging using F10, cannot recognize some variables in watch window etc. At the same time, everything works fine locally during development. I suspect the second question has to do with the first one. Do I miss something?
Webpack uses plugins which "map" your JS for the devtools, you can read more about it here.

Error while trying to debug demandware pipeline code using eclipse

After setting up the configuration for pipeline and clicking on debug in eclipse, I get this error.
Errors occurred during the build.
Errors running builder 'Digital Server Upload' on project 'DigitalServer'.
Tree element '/' not found.
If you don’t need to edit Pipelines, I recommend VS Code with the Prophet plugin. Check it out on the VS Code plugin marketplace.
https://marketplace.visualstudio.com/items?itemName=SqrTT.prophet
Check the project references (right click > Properties > Project References) of your connection to the instance. You likely have a closed or missing cartridge project referenced there. Once you remove this reference, the error will be gone.

Visual Studio Debug Mode Typescript files in Script Documents

I can't for the life of me work out why multiple TS files appear associated with my JS file when debugging my website in IE?
Is this normal?
e.g.

Resources