Bagaimana cara debug javascript di google chrome dari vscode?
Oct 16, 2025 pm 12:29 PMJawapan: Dengan memasang debugger untuk sambungan Chrome dan mengkonfigurasi launch.json, anda boleh secara langsung debug JavaScript front-end yang berjalan di Chrome di VSCode. Langkah -langkah khusus termasuk: memasang pelanjutan, membuat fail launch.json yang mengandungi URL dan webroot yang betul, memulakan pelayan tempatan dan menekan F5 untuk memulakan debugging, dan memastikan bahawa SourceMappathoverRides menyesuaikan diri dengan struktur projek untuk menyokong debugging breakpoint.
Untuk debug JavaScript di Google Chrome secara langsung dari VSCode, anda boleh menggunakan debugger untuk sambungan Chrome bersama -sama dengan konfigurasi pelancaran yang betul. Ini membolehkan anda menetapkan titik putus, memeriksa pembolehubah, dan melangkah melalui kod dalam javascript frontend anda semasa berjalan di Chrome - semua dikawal dari dalam VSCode.
Pasang pelanjutan yang diperlukan
Buka VSCODE dan pergi ke Paparan Sambungan dengan mengklik ikon Sambungan di bar aktiviti atau menekan CTRL SHIFT X. Cari:
- Debugger untuk Chrome oleh Microsoft
Pasangnya. Pelanjutan ini membolehkan VSCode berkomunikasi dengan contoh Chrome untuk tujuan debugging.
Buat konfigurasi pelancaran
Sediakan bagaimana vscode harus melancarkan Chrome dan lampirkan debugger:
- Di VSCode, buka Paparan Run dan Debug: Klik ikon Run di bar aktiviti atau tekan CTRL Shift d .
- Klik Buat fail launch.json jika anda tidak mempunyai satu, kemudian pilih Chrome sebagai persekitaran.
- VSCode menjana fail launch.json di dalam folder .vscode dalam root projek anda.
Contoh Launch.json Konfigurasi:
{"versi": "0.2.0", "konfigurasi": [{"name": "melancarkan Chrome terhadap localhost", "type": "chrome", "request": "launch", "url": "http: // localhost: 3000", "webroot" "Webpack: ///./.*": "$ {webroot}/*", "webpack: /// src/*": "$ {webroot}/*", "webpack: ///*": "*", " webpack: ///./": "$ {webroot}/"}}}}Laraskan URL untuk memadankan alamat pelayan tempatan anda (misalnya, http: // localhost: 8080 ).
Mula debugging
Pastikan pelayan web anda berjalan (misalnya, NPM Start , Vue Dev Server , dll). Kemudian:
- Di VSCode, pergi ke paparan larian.
- Pilih krom pelancaran terhadap konfigurasi localhost .
- Tekan F5 atau klik butang Debugging Mula.
Chrome akan membuka tetingkap baru yang disambungkan ke debugger. Tetapkan titik putus dalam fail JavaScript anda di VSCode - mereka akan dipukul apabila kod berjalan.
Sahkan peta dan laluan sumber
Sekiranya titik putus tidak dipukul, pastikan bahawa:
- Pelayan pembangunan anda menjana peta sumber (paling banyak dilakukan secara lalai dalam mod dev).
- Webroot dalam launch.json menunjuk ke folder yang betul yang mengandungi fail sumber anda.
- Anda menggunakan SourceMappathoverRides yang betul jika aplikasi anda menggunakan bundlers seperti Webpack.
Untuk membuat aplikasi React, Vue CLI, atau alat yang serupa, Contoh Config di atas biasanya berfungsi sebagai.
Pada asasnya, pasangkan pelanjutan debugger, konfigurasi launch.json , jalankan pelayan anda, dan tekan F5. Anda akan menyahpepijat klien JavaScript dari VSCode dalam masa yang singkat.
Atas ialah kandungan terperinci Bagaimana cara debug javascript di google chrome dari vscode?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undress AI Tool
Gambar buka pakaian secara percuma

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Stock Market GPT
Penyelidikan pelaburan dikuasakan AI untuk keputusan yang lebih bijak

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Mod mudah alih VSCode membolehkan berjalan dari pemacu USB atau mana -mana folder tanpa memasang, semua data disimpan dalam folder tempatan. 1. Muat turun versi ZIP dan mengurangkannya ke lokasi sasaran; 2. Buat folder yang dinamakan data dalam direktori yang sama dengan fail yang boleh dilaksanakan; 3. Selepas VSCode mengesan folder data, ia secara automatik membolehkan mod mudah alih, dan menjimatkan tetapan, sambungan, cache, dan sebagainya; 4. Simpan persekitaran yang konsisten apabila digunakan di seluruh peranti, tetapi berhati -hati bahawa sambungan yang bergantung pada alat sistem mungkin tidak berfungsi, dan versi perlu dikemas kini secara manual untuk akhirnya merealisasikan persekitaran pembangunan mudah alih yang lengkap.

Konfigurasikan fail launch.json untuk menubuhkan persekitaran debugging untuk memastikan medan program menunjuk ke fail masuk utama; 2. Gunakan mod pelancaran untuk memulakan skrip secara langsung dan lulus parameter ARGS dan ENV; 3. Gunakan mod Lampiran untuk menyambung ke proses berjalan yang telah dimulakan melalui nod-Inspektasi; 4. Apabila menyahpepijat skrip NPM, tetapkan RuntimeExecutable kepada NPM dan membolehkan integratedTerminal; 5. Meningkatkan kecekapan debug dengan menetapkan titik putus, titik putus bersyarat, pemeriksaan berubah -ubah, penilaian ekspresi dan membolehkan autoattach; 6. Sekiranya anda menghadapi masalah, periksa laluan, parameter permulaan, padanan pelabuhan, konfigurasi sourcemaps dan mulakan semula debugging

Usemulti-rootworkspacestogrouprelatedprojectsbyaddingfoldersandsavingasa.code-workspacefileforsharedsettings.2.OpenunrelatedprojectsinseparateVSCodewindowsandswitchusingCmd ~orAlt Tabtoisolatecontext.3.InstalltheProjectManagerextensiontosave,access,a

IntelliSenseisenablyDefaultInvsCodeforLanguageSlikeJavascript, typescript, python, andhtml, providingcodecompletion, parameteri NFO, QuickInfo, danMemberListSasyoutype.2.ensurethefileHastTheCorrectextension (mis., Py, .js) danThattheOfficialLanguageXtension (

VscodeAllowseaseasygranchmanagementDirectlywithintheeditor.youcanviewandswitchbranchesbyclickingTheBranchNameInthebottom-leftcornelecting

Selepas memasang sambungan VSCodeDocker, cari dan pasang sambungan Docker yang diterbitkan oleh Microsoft dengan mengklik ikon pelanjutan. Selepas pemasangan selesai, ikon paus akan muncul di bar aktiviti kiri; 2. Pastikan DockerDesktop atau DockerEngine dipasang dan dijalankan secara tempatan, dan sahkan sama ada persekitaran siap dengan melaksanakan Docker-versi dan dockerps; 3. Gunakan panel Docker untuk melihat bekas, cermin dan sumber lain, dan anda boleh memulakan dan berhenti, melihat log, masukkan terminal dan operasi lain melalui menu klik kanan; 4. Klik kanan "Docker: AddDockerFileStoworkspace" dalam projek

Pasang pelanjutan jauh-SSH; 2. Gunakan CTRL Shift P untuk memasukkan jauh-SSH: ConnecttoHost ... tambah sambungan SSH; 3. Simpan konfigurasi ke fail konfigurasi SSH untuk digunakan semula; 4. Log masuk dengan kata laluan atau pengesahan kunci SSH; 5. Buka folder jauh selepas sambungan dan editnya. Semua operasi dilaksanakan dari jauh. Selepas penetapan selesai, vscode boleh digunakan sebagai IDE jauh dengan fungsi lengkap.

Dalam vscode, pintasan untuk menukar teks ke huruf besar adalah menggunakan pintasan terbina dalam. CTRL Shift U pada Windows/Linux, CMD Shift U pada MACOS. Selepas memilih teks sasaran, tekan kekunci pintasan yang sepadan untuk menukar ke huruf besar satu klik; Operasi ini tidak akan menjejaskan kandungan papan klip, dan boleh menukar kes mengikut status semasa teks; Senario biasa termasuk penamaan pembolehubah bersatu, memproses data CSV, mengedit fail konfigurasi yang memerlukan nama kunci huruf besar, dan sebagainya; Jika kekunci pintasan tidak sah, susun atur papan kekunci, konflik pemalam atau isu fokus editor perlu diperiksa, dan ia dapat diselesaikan melalui panel arahan atau kekunci pintasan tersuai; Di samping itu, vscode juga menyokong huruf kecil (ctrl/cmd shift l) dan fungsi lain, yang diperlukan
