VSCode ile Angular'da nasıl hata ayıklanır?

Kesme noktalarımın çalışması için Angular ve VSCode'u nasıl yapılandırabilirim?

Angular 5 / CLI 1.5.5 ile test edildi

1. Chrome Hata Ayıklayıcı Uzantısını yükleyin
2. Create launch.json(iç .vscode klasörü)
3. Benim kullan launch.json(aşağıya bakın)
4. Create tasks.json(iç .vscode klasörü)
5. Benim kullan tasks.json(aşağıya bakın)
6. CTRL+ SHIFT+ Tuşlarına basınB
7. Basın F5

launch.json for angular/cli >= 1.3

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch Chrome (Test)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch Chrome (E2E)",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceFolder}/protractor.conf.js"]
    }
  ]
}

tasks.json for angular/cli >= 1.3

{
    "version": "2.0.0",
    "tasks": [
      {
        "identifier": "ng serve",
        "type": "npm",
        "script": "start",
        "problemMatcher": [],
        "group": {
          "kind": "build",
          "isDefault": true
        }
      },
      {
        "identifier": "ng test",
        "type": "npm",
        "script": "test",
        "problemMatcher": [],
        "group": {
          "kind": "test",
          "isDefault": true
        }
      }
    ]
  }

Angular 2.4.8 ile test edildi

1. Chrome Hata Ayıklayıcı Uzantısını yükleyin
2. Oluştur launch.json
3. Benim kullan launch.json(aşağıya bakın)
4. NG Canlı Geliştirme Sunucusunu Başlatın ( ng serve)
5. Basın F5

launch.json for angular/cli >= 1.0.0-beta.32

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
      "runtimeArgs": [
        "--disable-session-crashed-bubble"
      ]
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200",
      "port": 9222,
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true
    }
  ]
}

launch.json for angular/cli < 1.0.0-beta.32

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Lunch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src/app",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./src/*": "${workspaceFolder}/src/*"
      },
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
      "runtimeArgs": [
        "--disable-session-crashed-bubble"
      ]
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200",
      "port": 9222,
      "webRoot": "${workspaceFolder}/src/app",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./src/*": "${workspaceFolder}/src/*"
      }
    }
  ]
}

Görünüşe göre VS Code ekibi şimdi hata ayıklama tariflerini depoluyor.

https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome with ng serve",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Launch Chrome with ng test",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Launch ng e2e",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceRoot}/protractor.conf.js"]
    }      
  ]
}

Bunu yapmanın iki farklı yolu var. Sen edebilirsiniz başlatmak yeni bir süreç ya da takmak mevcut bir.

Her iki süreçte de kilit nokta, web paketi dev sunucusunun ve VSCode hata ayıklayıcısının aynı anda çalıştırılmasıdır .

Bir süreç başlatın

1. Sizin de launch.jsondosyaya aşağıdaki yapılandırmayı ekleyin:

   {
     "version": "0.2.0",
     "configurations": [
       {
         "name": "Angular debugging session",
         "type": "chrome",
         "request": "launch",
         "url": "http://localhost:4200",
         "webRoot": "${workspaceFolder}"
       }
     ]
   }
   

2. Webpack dev sunucusunu Angular CLI'den çalıştırarak çalıştırın npm start

3. VSCode hata ayıklayıcıya gidin ve "Açısal hata ayıklama oturumu" yapılandırmasını çalıştırın. Sonuç olarak, uygulamanızın bulunduğu yeni bir tarayıcı penceresi açılacaktır.

Mevcut bir sürece ekleyin

1. Bunun için Chrome'u hata ayıklayıcı modunda açık bağlantı noktasıyla çalıştırmanız gerekir (benim durumumda olacak 9222):

   Mac:

   /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
   

   Pencereler:

   chrome.exe --remote-debugging-port=9222
   

2. launch.json dosya şu şekilde görünecektir:

   {
     "version": "0.2.0",
     "configurations": [
       {
         "name": "Chrome Attach",
         "type": "chrome",
         "request": "attach",
         "port": 9222,
         "url": "http://localhost:4200/",
         "webRoot": "${workspaceFolder}"
       } 
     ]
   }
   

3. Webpack dev sunucusunu Angular CLI'den çalıştırarak çalıştırın npm start
4. "Chrome Attach" yapılandırmasını seçin ve çalıştırın.

Bu durumda, hata ayıklayıcı yeni bir pencere açmak yerine mevcut Chrome işlemine eklenir.

Bu yaklaşımı resimlerle anlattığım kendi makalemi yazdım.

VSCode'da Angular için hata ayıklayıcının nasıl yapılandırılacağı basit talimat

Bu, Visual Studio Code sitesinde ayrıntılı olarak açıklanmıştır: https://code.visualstudio.com/docs/nodejs/angular-tutorial

Bu yapılandırmayı kullanabilir:

{
 "version": "0.2.0",
"configurations": [
{
        "name": "ng serve",
        "type": "chrome",
        "request": "launch",
        "preLaunchTask": "npm: start",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
      }
]
}

İşte biraz daha hafif bir çözüm, Angular 2+ ile çalışıyor (Angular 4 kullanıyorum)

MEAN yığınını çalıştırırsanız, Ekspres Sunucu için de ayarlar eklendi.

{
  // Use IntelliSense to learn about possible Node.js debug attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Angular Client",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "runtimeArgs": [
        "--user-data-dir",
        "--remote-debugging-port=9222"
        ],
        "sourceMaps": true,
        "trace": true,
        "webRoot": "${workspaceRoot}/client/",
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Express Server",
      "program": "${workspaceRoot}/server/bin/www",
      "outFiles": [
        "${workspaceRoot}/out/**/*.js"
      ]
    }
  ]
}

@Asesjix cevabı çok kapsamlı, ancak bazılarının da belirttiği gibi ng serve, Angular uygulamasını Chrome'da başlatmak ve ardından başlatmak için yine de birden fazla etkileşim gerektiriyor . Aşağıdaki yapılandırmayı kullanarak bunu tek bir tıklama ile çalıştırdım. @ Asesjix'in cevabından temel fark, görev türünün şimdi olmasıdır shellve komut çağrıları daha startönce eklenir, ng serveböylece ng servekendi sürecinde var olabilir ve hata ayıklayıcının başlatılmasını engellemez:

tasks.json:

{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "ng serve",
        "type": "shell",
        "command": "\"start ng serve\""
      },
      {
        "label": "ng test",
        "type": "shell",
        "command": "\"start ng test\"",
      }
    ]
  }

launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch in Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "ng serve"
        }
    ]
}

Benim durumumda, orijinal Angular proje klasör ağacını kullanmadım ve webRoot/ {workspaceFolder}bit ile ilgili bir sorun olduğunu biliyordum ancak tüm deneylerim sonuç vermedi. Tekrar bulursam bağlayacağım başka bir SO cevabından bir ipucu var.

Bana yardımcı olan, {workspaceFolder}çalışma zamanında değişkenin içeriğini bulmak ve ardından onu, altında "app / *" bulunan "src" klasörümün konumuna değiştirmekti. Bulmak için preLaunchTasklaunch.json dosyama bir ve değerini çıktı olarak vermek için bir görev ekledim {workspaceFolder}.

launch.json , Chrome hata ayıklayıcıyı yükledikten sonra görünür

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src/newProjectRoot/",
      "preLaunchTask": "Echo values" //Just to see what the cryptic vs code variables actually are https://code.visualstudio.com/docs/editor/variables-reference
    }
  ]
}

Tasks.json Varsayılan olarak mevcut değildir. Ctrl + Shift + p'ye basın ve bence buna 'başka bir komut için görev oluştur' veya benzer bir şey deniyor. Tasks.json oluşturulduktan sonra göremiyorum. Dosyayı, launch.json ile aynı konumda da oluşturabilirsiniz.

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Echo values",
      "command": "echo",
      "args": ["${env:USERNAME}", "workspaceFolder = ${workspaceFolder}"],
      "type": "shell"
    }
  ]
}

$ {WorkspaceFolder} değerini öğrendikten sonra, onu yeni proje ağacımdaki src klasörümü gösterecek şekilde düzelttim ve hepsi çalıştı. Hata ayıklama, ng servebaşlatma öncesi görev olarak veya yapının bir parçası olarak (yukarıdaki örnekler) veya bir komut isteminde çalıştırılmış olmasını gerektirir .

İşte kullanabileceğiniz tüm değişkenlere bir bağlantı: