Cara menggunakan VSCode untuk nyahpepijat kod JS pada penyemak imbas

Bagaimana untuk menggunakan VSCode untuk nyahpepijat kod JS pada penyemak imbas? Artikel berikut akan memperkenalkan kepada anda cara menggunakan VSCode untuk menyahpepijat kod JS halaman web saya harap ia akan membantu anda!

Berbanding dengan melihat kod semata-mata, saya mengesyorkan melihatnya bersama-sama dengan penyahpepijat, yang membolehkan kita melihat laluan pelaksanaan sebenar kod dan perubahan dalam setiap pembolehubah. Anda boleh melompat melalui bahagian besar kod, atau anda boleh melaksanakan sekeping logik tertentu langkah demi langkah. [Pembelajaran yang disyorkan: "tutorial vscode"]

Kod JavaScript terutamanya mempunyai dua persekitaran berjalan, satu ialah Node.js dan satu lagi ialah penyemak imbas. Secara umumnya, saya akan menggunakan penyahpepijat VSCode untuk menyahpepijat kod JS yang dijalankan pada Node.js, dan saya akan menggunakan chrome devtools untuk menyahpepijat kod JS yang dijalankan pada penyemak imbas. Sehingga suatu hari saya mendapati bahawa VSCode juga boleh menyahpepijat kod JS pada penyemak imbas saya mencubanya dan ia sangat bagus.

Seberapa wangi secara khusus? Jom kita tengok.

Terdapat fail .vscode/launch.json dalam direktori akar projek, yang menyimpan konfigurasi penyahpepijatan VSCode.

Kami mengklik butang Tambah Konfigurasi untuk menambah konfigurasi krom penyahpepijatan.

Konfigurasinya seperti ini:

url ialah alamat halaman web, kita boleh menjalankan setempat dev server , dan kemudian isikan alamat di sini.

Kemudian klik nyahpepijat untuk menjalankan:

VSCode akan memulakan penyemak imbas Chrome untuk memuatkan halaman web dan berhenti di titik putus kami. Timbunan panggilan, pembolehubah skop, dsb. akan dipaparkan pada panel kiri.

Tahap paling rendah sudah tentu adalah pintu masuk webpack. Kita boleh debug satu langkah bahagian runtime webpack.

Anda juga boleh melihat proses daripada pemaparan, seperti ReactDOM.render kepada pemaparan kepada subkomponen, dan perkara yang dilakukan di tengah.

Atau lihat bagaimana nilai cangkuk komponen berubah (nilai cangkuk disimpan dalam atribut MemerizedState fiberNod komponen):

Seperti yang anda lihat, sangat mudah untuk menyahpepijat kod masa jalan pek web atau menyahpepijat kod sumber React atau kod perniagaan.

Mungkin anda akan berkata, ini juga mungkin dalam chrome devtools Adakah terdapat sesuatu yang istimewa tentangnya?

Memang, chrome devtools juga boleh melakukan perkara yang sama, tetapi VSCode mempunyai dua faedah utama untuk menyahpepijat kod halaman web:

1. Taip kod dalam editor Breakpoints membolehkan anda untuk menukar kod semasa menyahpepijat.

2. Menggunakan alatan yang sama untuk menyahpepijat kod Node.js dan menyahpepijat kod halaman web, pengalaman boleh digunakan semula dan pengalaman itu konsisten.

Bagi perkara pertama, sumber chrome devtools sebenarnya boleh mengubah suai kod dan menyimpannya, tetapi selepas semua, ia bukan editor khusus, jadi ia adalah janggal untuk menggunakannya untuk menulis kod. Saya secara peribadi lebih terbiasa untuk menyahpepijat dan mengubah suai kod pada masa yang sama, dan VSCode menang dalam hal ini.

Kami biasanya menggunakan VSCode untuk menyahpepijat Node.js, tetapi anda juga boleh menggunakan VSCode untuk menyahpepijat halaman web Kemudian anda hanya perlu membiasakan diri dengan satu alat. Anda tidak perlu belajar cara menggunakan chrome devtools , dan pengalaman penyahpepijatan adalah lebih baik dengan VSCode , lagipun, ia adalah editor yang kami gunakan setiap hari, dan ia lebih mudah, itulah sebabnya VSCode menang.

Tetapi anda mungkin berkata, bagaimana jika saya mahu melihat maklumat profil? Iaitu, penggunaan masa setiap fungsi, yang penting untuk menganalisis prestasi kod.

Penyahpepijat VSCode juga menyokong ini:

Klik butang di sebelah kiri untuk merakam maklumat yang memakan masa dalam tempoh masa, yang boleh dihentikan secara manual . Anda boleh menentukan masa tetap atau titik putus tertentu, iaitu tiga cara untuk memilih proses pelaksanaan sekeping kod untuk merekod maklumat profil.

Ia akan menyimpan fail xxx.cpuprofile dalam direktori akar projek, yang merekodkan masa yang diperlukan untuk melaksanakan setiap fungsi Ia boleh menganalisis penggunaan masa bagi sekeping kod lapisan demi lapisan untuk mencari masalah dan mengoptimumkan prestasi.

Jika anda memasang sambungan VSCode vscode-js-profile-flame, anda juga boleh bertukar kepada paparan graf nyala.

Sesetengah pelajar mungkin tidak memahami gambar rajah nyalaan, izinkan saya menerangkan:

Kita tahu bahawa laluan pelaksanaan fungsi tertentu mempunyai timbunan panggilan Kita boleh melihat fungsi yang dipanggil langkah demi langkah, iaitu satu baris.

Tetapi sebenarnya, bukan hanya satu fungsi yang dipanggil oleh fungsi ini, ia mungkin berbilang:

Tindanan panggilan baru sahaja disimpan Ia mewakili laluan pelaksanaan ke fungsi tertentu, manakala graf nyalaan menyimpan semua laluan pelaksanaan.

Jadi, anda akan melihat garpu sedemikian dalam graf nyalaan:

Malah, ini ialah proses pelaksanaan:

Mari kita hitung soalan:

Fungsi A mengambil masa 50 ms, fungsi B yang dipanggilnya mengambil masa 10 ms, dan fungsi C yang dipanggilnya mengambil masa 20 ms Soalan: Fungsi A Berapa ms selebihnya logik diambil?

Jelas sekali ia boleh dikira sebagai 50 - 10 - 20= 20 ms Mungkin anda fikir fungsi D mengambil masa terlalu lama, kemudian lihat pada kod tertentu dan kemudian lihat Lihat sama ada ia boleh dioptimumkan, dan kemudian semak penggunaan masa.

Semudah itu, beginilah cara analisis prestasi profil dilakukan, penambahan dan penolakan mudah.

Lebar setiap kotak dalam graf nyalaan juga menggambarkan masa yang diambil, jadi ia lebih intuitif.

Enjin JS menggunakan gelung peristiwa untuk melaksanakan kod JS secara berterusan Oleh kerana graf nyalaan menggambarkan masa pelaksanaan semua kod, anda akan melihat tempoh setiap pelaksanaan kod gelung peristiwa.

Lebar setiap jalur mewakili penggunaan masa setiap gelung Sudah tentu, lebih nipis lebih baik, supaya ia tidak menyekat pemaparan. Oleh itu, matlamat pengoptimuman prestasi adalah untuk menjadikan graf nyalaan menjadi bar nipis kecil, bukan lebih tebal.

Berbalik kepada topik, profil cpu dan graf nyala VSCode sebenarnya lebih ringkas dan mudah digunakan berbanding prestasi chrome devtools, dan boleh memenuhi kebanyakan keperluan.

Saya fikir, melainkan anda ingin melihat maklumat pemaparan dan memori, kerana VSCode tidak menyokongnya, anda perlu menggunakan alat chrome devtools Untuk menyahpepijat kod JS, melihat maklumat profil dan graf nyala, VSCode sudah memadai.

Bagaimanapun, saya rasa VSCode cukup bagus untuk menyahpepijat kod JS pada halaman web, apakah pendapat anda?

Alamat asal: https://juejin.cn/post/7010768454458277924

Penulis: zxg_Tuhan berkata harus ada cahaya

Untuk>Video Pengaturcaraan

! !

Atas ialah kandungan terperinci Cara menggunakan VSCode untuk nyahpepijat kod JS pada penyemak imbas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!