2

I don't know why it doesn't work anymore. I used to be able to open developer tools, place a breakpoint in my angular code, then it would pause. But recently, it's failing to recognize how to map the network files to my local files. Please see my video explanation here (3 minutes long).

Edit:

Some more details: The problem is that when an error is thrown and is logged in the console log, and I click on the line number so chrome developer tools can take me to exactly where the error was thrown, it takes me to the network file which isn't being mapped to my local file that I'm editing. It's treating them like they're not related. For this reason, if I put a debug point in the network file, it breaks fine. If I put a debug point in the local file, it doesn't break. How do I tell Chrome how to establish the mapping? It's like they removed this feature.

AskYous
  • 4,332
  • 9
  • 46
  • 82
  • I think that I speak for most here when I state that I will not be watching this (or really any) video. Please update the question with the necessary details and include a screen shot (or 2) if necessary. See [mcve] as well as [ask] a good question. – Igor Jan 04 '18 at 22:09
  • @Igor it was really complicated and I didn't know hot to elaborate except through a video. Regardless, I put more information. – AskYous Jan 05 '18 at 01:51
  • Why are you not using separate editor instead of modifying the files in the browser? Try adding `debugger;` in the code and then reload the page to see if it breaks. – planet_hunter Jan 05 '18 at 02:13
  • 1
    @ManojChalode, because almost all the features I want to use is available in chrome dev tools, and it makes debugging a lot easier. I tried adding `debugger;`. It paused the code on the network version of the file but not the local version. I think I found the problem here: https://stackoverflow.com/questions/48032249/chromes-map-to-file-system-resource-not-working-after-update/48097798#48097798 – AskYous Jan 05 '18 at 02:36
  • Did the linked answer solve your problem? – gillesB Mar 16 '18 at 17:57

3 Answers3

2

This solution worked for me in angular 9. In angular.json file there was a property "optimization" which was set to true and for some reason it was creating optimized files without debugger. I set it to false "optimization": false.

Reshu
  • 21
  • 2
0

I recently had a similar issue. For me, having active chrome overrides on any files (even for sites different than the one I was debugging) appears to have been screwing with source mapping and rendering me unable to debug my application. Deleting all of my overrides restored normal debugging functionality.

Evan Kleiner
  • 329
  • 3
  • 12
0

Works with:

    // Use o IntelliSense para saber mais sobre os atributos possíveis.
    // Focalizar para exibir as descrições dos atributos existentes.
    // Para obter mais informações, acesse: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://127.0.0.1:4200/",
            "webRoot": "${workspaceFolder}/"
       
        }
    ]
Sergio Souza Novak
  • 103
  • 5