Bagaimana cara men-debug Angular dengan VSCode?

127

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

angular debugging webpack visual-studio-code Asesjix
sumber

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

178

Diuji dengan Angular 5 / CLI 1.5.5

Pasang Ekstensi Chrome Debugger
Buat launch.json(di dalam folder .vscode)
Gunakan milik saya launch.json(lihat di bawah)
Buat tasks.json(di dalam folder .vscode)
Gunakan milik saya tasks.json(lihat di bawah)
Tekan CTRL+ SHIFT+B
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

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

Asesjix
sumber

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

Levi Fuller
sumber

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

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

Jalankan server pengembang Webpack dari CLI Angular dengan menjalankan npm start
Pergi ke VSCode debugger dan jalankan konfigurasi "Angular debugging session". Hasilnya, jendela browser baru dengan aplikasi Anda akan terbuka.

Lampirkan ke proses yang ada

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

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

Jalankan server pengembang Webpack dari CLI Angular dengan menjalankan npm start
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

skryvets
sumber

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

7

Ini dijelaskan secara rinci di situs Visual Studio Code: https://code.visualstudio.com/docs/nodejs/angular-tutorial

Victor Ionescu
sumber

maksud Anda code.visualstudio.com/docs/nodejs/… ? · # _debugging-angular menunjuk langsung ke poin yang menarik jika Anda ingin mengedit jawaban Anda ...

Pipo

@Pipo Tidak, saya tidak bermaksud nodejs, saya tidak menggunakan nodejs di sisi server, jadi saya tidak akan tahu.

Victor Ionescu

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

Ahmad Aghazadeh
sumber

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

Isak La Fleur
sumber

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

ubiquibacon
sumber

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:

Abu
sumber

Bagaimana cara men-debug Angular dengan VSCode?

Jawaban:

Diuji dengan Angular 5 / CLI 1.5.5

Diuji dengan Angular 2.4.8

Luncurkan sebuah proses

Lampirkan ke proses yang ada