Bagaimana cara men-debug Angular dengan VSCode?


127

Bagaimana cara saya mengkonfigurasi Angular dan VSCode agar breakpoint saya berfungsi?


maksud kamu apa? Bagaimana mereka tidak bekerja?
TylerH

2
@TylerH, Ini harus menjadi panduan cara kerjanya. itu tidak berfungsi tanpa launch.json yang dimodifikasi.
Asesjix

Jawaban:


178

Diuji dengan Angular 5 / CLI 1.5.5

  1. Pasang Ekstensi Chrome Debugger
  2. Buat launch.json(di dalam folder .vscode)
  3. Gunakan milik saya launch.json(lihat di bawah)
  4. Buat tasks.json(di dalam folder .vscode)
  5. Gunakan milik saya tasks.json(lihat di bawah)
  6. Tekan CTRL+ SHIFT+B
  7. tekan 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
        }
      }
    ]
  }

Diuji dengan Angular 2.4.8

  1. Pasang Ekstensi Chrome Debugger
  2. Buat launch.json
  3. Gunakan milik saya launch.json(lihat di bawah)
  4. Mulai NG Live Development Server ( ng serve)
  5. tekan 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/*"
      }
    }
  ]
}

7
tahukah Anda cara memulai NG Live Development Serverdan meluncurkan Chromehanya dengan satu F5klik?
Merdan Gochmuradov

2
maaf itu tidak mungkin karena tugas "ng serve" harus dimulai di preLaunchTask. "ng serve" harus berjalan secara permanen dan dengan demikian "preLaunchTask" tidak selesai yang berarti bahwa kode vs tidak memulai proses debug. tetapi saya telah menambahkan konfigurasi baru yang seharusnya membuat pekerjaan sedikit lebih cepat ;-)
Asesjix

1
Jawaban yang jelas dan singkat. Akan lebih baik jika Anda dapat menjelaskan secara singkat tentang launch.jsondan tasks.jsonmelakukannya di sini. Seperti yang saya pahami launch.jsonadalah meluncurkan server node dan mendengarkan port 8080, dan tasks.jsonmenginstruksikan untuk menggunakan npmdan menjalankan perintah ng serveuntuk menjalankan aplikasi.
shaijut

@ Zachscs versi sudut mana yang Anda gunakan?
Asesjix

1
Saya mengalami masalah yang sama, breakpoints tidak diset, sampai akhirnya saya menyadari bahwa webroot saya salah. Saya memiliki nilai default untuk webRoot ("webRoot": "$ {workspaceFolder}") bukan $ {workspaceFolder} / my-app-folder
Joseph Simpson

48

Sepertinya tim VS Code sekarang menyimpan resep debugging.

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"]
    }      
  ]
}

10

Ada dua cara berbeda untuk melakukan itu. Anda dapat meluncurkan proses baru atau melampirkan ke yang sudah ada.

Poin utama dalam kedua proses ini adalah menjalankan server dev webpack dan debugger VSCode secara bersamaan .

Luncurkan sebuah proses

  1. Di launch.jsonfile Anda, tambahkan konfigurasi berikut:

    {
      "version": "0.2.0",
      "configurations": [
        {
          "name": "Angular debugging session",
          "type": "chrome",
          "request": "launch",
          "url": "http://localhost:4200",
          "webRoot": "${workspaceFolder}"
        }
      ]
    }
    
  2. Jalankan server pengembang Webpack dari CLI Angular dengan menjalankan npm start

  3. Pergi ke VSCode debugger dan jalankan konfigurasi "Angular debugging session". Hasilnya, jendela browser baru dengan aplikasi Anda akan terbuka.

Lampirkan ke proses yang ada

  1. Untuk itu Anda perlu menjalankan Chrome dalam mode debugger dengan port terbuka (dalam kasus saya itu akan 9222):

    Mac:

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

    Windows:

    chrome.exe --remote-debugging-port=9222
    
  2. launch.json file akan terlihat seperti berikut:

    {
      "version": "0.2.0",
      "configurations": [
        {
          "name": "Chrome Attach",
          "type": "chrome",
          "request": "attach",
          "port": 9222,
          "url": "http://localhost:4200/",
          "webRoot": "${workspaceFolder}"
        } 
      ]
    }
    
  3. Jalankan server pengembang Webpack dari CLI Angular dengan menjalankan npm start
  4. Pilih konfigurasi "Chrome Attach" dan jalankan.

Dalam kasus ini, debugger dilampirkan ke proses Chrome yang ada alih-alih meluncurkan jendela baru.

Saya menulis artikel saya sendiri, di mana saya menjelaskan pendekatan ini dengan ilustrasi.

Instruksi sederhana bagaimana mengkonfigurasi debugger untuk Angular di VSCode


Terima kasih, setiap kali memulai chrome saya harus menjalankan perintah ini. chrome.exe --remote-debugging-port=9222Apakah ada alternatif untuk konfigurasi sekali pakai
Saurabh47g

Bergantung pada kredensial Anda, Anda mungkin dapat mengklik kanan pada chrome di menu start windows, menekan properti, dan menambahkan bendera di sana. Ini tidak berfungsi untuk saya di komputer kerja saya, jadi saya menggunakan perintah alias di git bash untuk windows.
vitale232


3

Dapat menggunakan konfigurasi ini:

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

2

Ini solusi yang sedikit lebih ringan, bekerja dengan Angular 2+ (Saya menggunakan Angular 4)

Juga menambahkan pengaturan untuk Server Ekspres jika Anda menjalankan tumpukan MEAN.

{
  // 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"
      ]
    }
  ]
}

Dapatkah Anda men-debug / breakpoint kode sisi server Anda pada saat yang sama sebagai angular dengan konfigurasi ini?
Mika571

@ Mika571 tidak sayangnya ... Saya mencoba ini sekarang. Saya juga ingin men-debug server dan sisi klien pada saat yang bersamaan.
Leniel Maccaferri

1

Jawaban @Asesjix sangat menyeluruh, tetapi seperti yang ditunjukkan beberapa orang, masih membutuhkan banyak interaksi untuk memulai ng serve dan kemudian meluncurkan aplikasi Angular di Chrome. Saya mendapatkan ini bekerja dengan satu klik menggunakan konfigurasi berikut. Perbedaan utama dari jawaban @ Asesjix adalah tipe tugasnya sekarang shelldan panggilan perintah ditambahkan startsebelumnya ng servesehingga ng servebisa ada dalam prosesnya sendiri dan tidak memblokir debugger dari peluncuran:

task.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"
        }
    ]
}

0

Dalam kasus saya, saya tidak menggunakan pohon folder proyek Angular asli dan saya tahu ada yang salah dengan webRoot/{workspaceFolder} bit tetapi semua percobaan saya tidak membuahkan hasil. Mendapat tip dari jawaban SO lain yang akan saya tautkan jika saya menemukannya lagi.

Apa yang membantu saya adalah menemukan konten variabel {workspaceFolder}saat runtime dan kemudian memodifikasinya ke lokasi folder "src" di mana Anda memiliki "app / *". Untuk menemukannya, saya menambahkan a preLaunchTaskke file launch.json saya dan tugas untuk mengeluarkan nilai {workspaceFolder}.

launch.json , yang muncul setelah menginstal debugger Chrome

{
  "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 Tidak ada secara default. Tekan Ctrl + Shift + p dan saya pikir itu disebut 'buat tugas untuk perintah lain' atau yang serupa. Sepertinya tidak bisa melihatnya setelah task.json dibuat. Anda juga bisa membuat file di lokasi yang sama dengan launch.json

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

Setelah saya mengetahui nilai $ {workspaceFolder}, saya memperbaikinya agar mengarah ke folder src saya di pohon proyek baru saya dan semuanya berhasil. Debugging ng serveharus dijalankan sebagai tugas prapeluncuran atau sebagai bagian dari build (contoh di atas) atau dalam command prompt.

Berikut ini tautan ke semua variabel yang dapat Anda gunakan:

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.