Ya, anda boleh menyahpepijat laman web di Chrome secara langsung dari VSCode. Anda perlu memasang debugger untuk sambungan Chrome dan konfigurasi launch.json. 1. Pasang pelanjutan "Debugger for Chrome" dalam vscode; 2. Pastikan projek menjana peta sumber (seperti set webpack devtool dan typescript membolehkan sourcemap); 3. Buat fail konfigurasi launch.json dalam vscode dan nyatakan parameter permulaan krom seperti URL dan Webroot; 4. Selepas memulakan pelayan pembangunan tempatan, jalankan konfigurasi melalui panel Run dan Debug. Chrome akan membuka dan memukul titik putus yang ditetapkan dalam vscode untuk mencapai proses debugging lengkap.

Debugging laman web di Chrome secara langsung dari vscode mungkin menggunakan debugger untuk sambungan Chrome dan konfigurasi pelancaran yang betul. Persediaan ini membolehkan anda menetapkan titik putus dalam kod JavaScript/Typescript anda di VSCode dan memilikinya apabila kod berjalan di Chrome - semua tanpa meninggalkan editor anda.

Inilah cara untuk menetapkannya:

1. Pasang pelanjutan yang diperlukan

Pertama, pasang lanjutan "Debugger for Chrome" dalam vscode:

• Buka vscode.
• Pergi ke paparan sambungan ( Ctrl Shift X atau Cmd Shift X pada Mac).
• Cari "Debugger untuk Chrome" (oleh Microsoft).
• Pasangnya.

Nota: Pelanjutan ini melancarkan Chrome atau melekat pada contoh yang sedia ada dan membolehkan debugging dari VSCode.

2. Dayakan peta sumber dalam projek anda

Untuk debugging berfungsi dengan betul (terutamanya dengan rangka kerja, typescript, atau kod yang diterjemahkan), anda memerlukan peta sumber supaya titik pemecatan dalam fail sumber asal anda dengan betul ke kod yang berjalan di penyemak imbas.

Pastikan alat binaan anda (webpack, vite, dan lain -lain) Menjana peta sumber:

• Webpack : Tetapkan devtool: 'source-map' atau 'eval-source-map' dalam webpack.config.js .
• Vite : Peta sumber didayakan secara lalai dalam mod dev.
• TypeScript : Dalam tsconfig.json , pastikan:

   {
    "CompilerOptions": {
      "Sourcemap": Benar,
      "Outhir": "./dist"
    }
  }

3. Konfigurasikan launch.json dalam vscode

Buat konfigurasi debug yang memberitahu VSCode bagaimana untuk melancarkan fail Chrome dan peta.

• Di VSCode, pergi ke paparan larian dan debug ( Ctrl Shift D ).
• Klik "Buat Fail Launch.json" jika anda tidak mempunyai satu.
• Pilih "Chrome" sebagai persekitaran.
• Gantikan kandungan dengan konfigurasi kerja. Inilah contoh biasa:

 {
  "Versi": "0.2.0",
  "Konfigurasi": [
    {
      "Nama": "Lancarkan Chrome melawan Localhost",
      "Jenis": "Chrome",
      "Permintaan": "Pelancaran",
      "URL": "http: // localhost: 3000",
      "Webroot": "$ {WorkspaceFolder}",
      "SourceMappathoverRides": {
        "Webpack: ///./.*": "$ {Webroot}/*",
        "Webpack: ///*": "*",
        "Webpack: /// Src/*": "$ {Webroot}/src/*"
      }
    }
  ]
}

Pilihan utama dijelaskan:

• "url" : Alamat pelayan Dev Running anda (misalnya, http://localhost:3000 ).
• "webRoot" : Peta fail sumber dalam Chrome ke folder projek tempatan anda.
• "sourceMapPathOverrides" : Membantu VSCode Cari fail sumber asal anda apabila menggunakan bundlers seperti Webpack.

?? Pastikan pelayan dev anda (misalnya, npm start , vite , webpack serve ) sudah berjalan sebelum memulakan sesi debug.

4. Mula Debugging

1. Mulakan pelayan pembangunan anda (misalnya, npm run start ).
2. Di VSCode, pergi ke panel Run dan Debug .
3. Pilih konfigurasi "Pelancaran Chrome Against Localhost" .
4. Klik Run (F5).

Chrome akan membuka (atau menggunakan semula contoh, bergantung kepada tetapan), dan aplikasi anda akan dimuatkan.

Sekarang:

• Tetapkan titik putus dalam fail .js , .ts , atau .tsx anda dalam vscode.
• Apabila kod dijalankan di Chrome, pelaksanaan akan berhenti di titik putus tersebut.
• Anda boleh memeriksa pembolehubah, tumpukan panggilan, dan melangkah melalui kod - semua dalam vscode.

Petua & penyelesaian masalah

• Titik putus tidak memukul?

  • Generasi Peta Sumber Double-Check.
  • Sahkan laluan fail dalam sourceMapPathOverrides .
  • Cuba gunakan "trace": true dalam launch.json untuk melihat log pemetaan.

• Gunakan "request": "attach" untuk menyambung ke krom yang sudah terbuka

  • Mulakan Chrome dengan Debugging Jauh Diaktifkan:

     Chrome --Remote-debugging-port = 9222

  • Gunakan konfigurasi launch.json ini:

     {
      "Nama": "Lampirkan ke Chrome",
      "Jenis": "Chrome",
      "Permintaan": "Lampirkan",
      "Port": 9222,
      "Webroot": "$ {WorkspaceFolder}"
    }

• Bekerja terbaik dengan tetapan mudah atau buat aplikasi React, Vite, CLI sudut . Konfigurasi bundler kompleks mungkin memerlukan laluan adat.

---

Pada asasnya, ia adalah kombo lanjutan yang betul, peta sumber, dan launch.json pepejal.json. Setelah disediakan, debugging kod frontend dari vscode terasa lancar.

Atas ialah kandungan terperinci Cara Debug laman web di Chrome dari VSCode. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!