Cara menyiapkan debugger untuk ekstensi Chrome di Visual Studio Code

Debugging aplikasi web Anda dengan Visual Studio Code membuat Anda lebih efisien. Ini membantu Anda menghemat banyak waktu dan menjaga kode Anda lebih bersih. Ini karena Anda tidak perlu menulis sekumpulan console.logs dan Anda dapat menelusuri eksekusi kode baris demi baris. Tetapi jika Anda berada di sini, Anda mungkin mengetahui manfaat dari men-debug aplikasi web. Jadi mari kita mulai…

Mempersiapkan

Hal pertama yang perlu Anda lakukan adalah memasang ekstensi Debugger untuk Chrome. Setelah Anda menginstalnya, Anda hampir siap untuk pergi. Hal berikutnya yang perlu Anda lakukan adalah membuat file peluncuran untuk Visual Studio Code Debugger. File ini berisi konfigurasi debugger yang berbeda untuk proyek Anda.

Anda dapat membuat file peluncuran dengan membuka bagian debug di Bilah Aktivitas dan mengklik ikon roda gigi.

Daftar opsi akan meminta Anda untuk memilih "Chrome".

Setelah Anda melakukan ini, Anda akan memiliki .vscodedirektori dengan launch.jsonfile.

Konfigurasi

Ada dua jenis konfigurasi debugging Chrome: launchdan attach. Anda dapat mengatur ini pada requestopsi di dalam setiap objek konfigurasi.

Meluncurkan

Konfigurasi peluncuran meluncurkan instance Chrome yang menjalankan file atau URL tertentu. Jika Anda menentukan URL, Anda harus mengatur webRootke direktori tempat file dilayani. Ini bisa berupa jalur absolut atau jalur menggunakan ${workspaceFolder}resolver. Ini adalah folder yang dibuka di ruang kerja Visual Studio Code Anda.

Catatan: Hati-hati saat menyetel webRoot, ini digunakan untuk menyelesaikan URL ke file di komputer Anda.

Anda dapat melihat contoh dari dua launchkonfigurasi: Satu diluncurkan terhadap server lokal dan yang lainnya diluncurkan pada file lokal.

Jika Anda menjalankan instance Chrome, yang diluncurkan oleh debugger akan menggunakan sesi sementara. Ini berarti Anda tidak akan memiliki ekstensi atau tab terbuka. Jika Anda ingin meluncurkan instance Chrome dengan pengguna dan ekstensi Anda, Anda harus menutup setiap instance yang berjalan terlebih dahulu.

Catatan: Jika Anda menghentikan debugger, jendela Chrome akan ditutup.

Melampirkan

Saya pribadi lebih suka menggunakan yang ini ... Konfigurasi ini melampirkan debugger ke instance Chrome yang sedang berjalan. Tetapi agar opsi ini berfungsi, Anda perlu meluncurkan Chrome dengan debugging jarak jauh diaktifkan. Peluncuran instance Chrome dengan debugging jarak jauh bervariasi bergantung pada OS Anda.

Windows

Ada dua cara untuk meluncurkan Chrome dengan debugging jarak jauh di Windows. Yang paling sederhana adalah dengan mengklik kanan pada shortcut Google Chrome. Pilih opsi properti dan tambahkan perintah berikut di bidang target .

--remote-debugging-port=9222

Catatan: Ini akan meluncurkan Chrome dengan debugging jarak jauh diaktifkan setiap kali Anda mengklik pintasan.

Cara lain adalah dengan membuka command prompt dan menjalankan perintah ini menggantikan th> with the actual location of your Chrome installation.

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

macOS

Open the terminal and execute the following command:

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

Linux

Launch your terminal and run this command:

google-chrome --remote-debugging-port=9222

What this does — no matter what OS — is open Chrome with a flag, in this case: --remote-debugging-port, and sets it to 9222. You can read more about this here.

Note: If you have other Chrome instances running with no remote debugging, make sure to close them before launching a new one.

Here’s a sample attach configuration.

Note: If you do not set the "url" option, a list will be prompted with your open tabs.

This extension have a lot of very useful options that you can use to adapt the configurations to your project. You can read the documentation of some of them here.

Summary

Congratulations! You’ve learned how to install and set up the debugger for Chrome in Visual Studio Code. You also learned how to launch Google Chrome with remote debugging enabled. Now it’s time for you to explore and expand your new knowledge… I highly recommend you to take a look at the extension’s repository.

I hope you enjoyed this post. You can find me on Twitter @_svictoreq. ?

Original text