Bagaimana untuk mengkonfigurasi VSCode, kod Vue dan React debugging Su Shuang!

Bagaimana untuk menjadikan penyahpepijatan kod Vue dan React lebih menyeronokkan? Artikel berikut memperkenalkan konfigurasi VSCode dan kaedah Su Shuang untuk menyahpepijat kod Vue dan React saya harap ia akan membantu semua orang!

Sebagai pembangun bahagian hadapan, saya pada asasnya perlu menyahpepijat kod Vue/React setiap hari. Saya tidak tahu cara semua orang menyahpepijatnya, tetapi saya rasa terdapat beberapa jenis:

• Tiada penyahpepijatan, cuma lihat kod untuk mencari masalah
• Log cetakan Console.log
• Gunakan penyahpepijat Chrome Devtools untuk nyahpepijat
• Gunakan penyahpepijat VSCode untuk nyahpepijat

Kaedah penyahpepijatan yang berbeza mempunyai kecekapan dan pengalaman yang berbeza Sekarang saya pada asasnya menggunakan penyahpepijat VSCode untuk penyahpepijatan, yang sangat cekap dan mempunyai pengalaman yang hebat. [Pembelajaran yang disyorkan: "Pengenalan kepada Tutorial vscode"]

Mungkin ramai pelajar masih tidak tahu cara menggunakan VSCode untuk nyahpepijat halaman web saya akan memperkenalkannya dalam artikel ini.

Mari kita lihat React dan Vue masing-masing:

Gunakan VSCode untuk nyahpepijat kod React

Saya menggunakan create-react-app untuk mencipta projek demo dengan komponen sedemikian:

Jalankan pelayan pembangunan:

Antara muka yang dipaparkan oleh penyemak imbas adalah seperti ini:

Bagaimana hendak nyahpepijat dengan VSCode?

Kami menambah fail konfigurasi .vscode/launch.json dalam direktori akar:

Mencipta konfigurasi penyahpepijatan, jenisnya adalah chrome dan dinyatakan url penyahpepijatan ialah alamat pelayan pembangunan.

Letakkan dua titik putus dalam kod tindak balas:

Kemudian klik jalankan:

Lihat, XDM, rosak! Terdapat timbunan panggilan, pembolehubah persekitaran semasa, dsb.

Lepaskan titik putus dan terus turun.

Anda juga boleh mendapatkan objek acara yang sepadan apabila anda mengklik:

Bukankah ia sangat mudah!

Dan apabila anda bosan menulis perniagaan dan ingin melihat kod sumber tindak balas, cuma klik pada bingkai tertentu dalam timbunan panggilan untuk melihat:

Sebagai contoh, kaedah renderWithHooks akan dipanggil semasa pemaparan. Objek workInProgress di dalamnya ialah nod gentian semasa, dan atribut MemorizedStatenya ialah tempat cangkuk menyimpan nilai:

Selepas menggunakan VSCode untuk nyahpepijat kod React, nyahpepijat kod perniagaan atau lihat kod sumber Pengalaman itu sangat menyenangkan, tidak kira apa.

Mari kita lihat Vue sekali lagi:

Gunakan VSCode untuk nyahpepijat kod Vue

Penyahpepijatan Vue akan menjadi lebih menyusahkan dan anda perlu melakukan beberapa pemetaan laluan tambahan berdasarkan di atas.

Oleh kerana dalam React kami menulis jsx dan tsx secara langsung, yang sepadan dengan fail js yang disusun satu-satu, tetapi tidak dalam Vue, kami menulis fail dalam format SFC (komponen fail tunggal). memerlukan vue-loader Untuk memisahkannya ke dalam fail yang berbeza, laluan mesti dipetakan secara berasingan untuk sepadan dengan lokasi kod sumber.

Iaitu, terdapat sumber tambahanMapPathOverrides dalam konfigurasi penyahpepijatan:

Bagaimana untuk memetakannya?

Anda boleh menambah penyahpepijat pada kod sumber dan semak laluan dipetakan semasa dalam penyemak imbas:

webpack://test here -vue-debug /src/App.vue?11c4 ialah laluan untuk dipetakan, jadi ke mana ia dipetakan?

jelas dipetakan ke laluan tempatan, seperti ini:

workspaceRoot ialah pembolehubah persekitaran yang disediakan oleh vscode, iaitu laluan projek . Dengan cara ini Selepas pemetaan, bukankah alamat itu menjadi fail setempat? Kemudian titik putus akan berkuat kuasa dalam fail tempatan:

Melihat pada laluan di sini, ia jelas dipetakan ke fail di bawah projek.

Tetapi apabila memetakan, terdapat cincangan di hujungnya. Apa yang perlu saya lakukan?

Laluan ini boleh dikonfigurasikan sebenarnya laluan fail apabila pek web menjana peta sumber Ia boleh dikonfigurasikan melalui output.devtoolModuleFilenameTemplate:

Anda boleh melihat dokumentasi untuk pembolehubah yang tersedia, jadi saya tidak akan mengembangkannya di sini (lihat sahaja mereka):

Sebagai contoh , saya mengkonfigurasi laluan seperti ini:

Kemudian laluan fail semasa penyahpepijatan adalah seperti ini:

Jangan' Jangan risau tentang awalan, lihat sahaja bahagian berikut Adakah ia telah dicincang

dan kemudian dipetakan ke fail setempat:

Dengan cara ini, ia dipetakan sekali lagi, dan ia dipecahkan dalam vscode Klik untuk berkuat kuasa:

Sama ada anda ingin menyahpepijat kod perniagaan Vue atau melihat. kod sumber Vue, pengalaman itu akan menjadi hebat.

Ringkasan

Sebagai jurutera bahagian hadapan, penyahpepijatan Vue dan kod React ialah sesuatu yang anda lakukan setiap hari Kaedah penyahpepijatan yang berbeza mempunyai pengalaman dan kecekapan yang berbeza. Jadi saya ingin memperkenalkan kepada anda kaedah saya yang biasa digunakan untuk menyahpepijat halaman web dengan VSCode.

Penyahpepijatan bertindak balas adalah agak mudah. ​​Hanya tambahkan konfigurasi penyahpepijatan chrome lebih menyusahkan Anda perlu melakukan pemetaan laluan, anda juga perlu menukar konfigurasi daripada laluan yang dijana Kemudian petakan semula (tetapi ia hanya perlu dikonfigurasikan sekali).

Menggunakan VSCode untuk menyahpepijat kod React/Vue adalah sangat mudah sama ada anda menyahpepijat kod perniagaan atau melihat kod sumber. Anda juga boleh mencubanya, ia akan menjadikan penyahpepijatan sangat menyeronokkan.

Untuk pengetahuan lanjut tentang VSCode, sila lawati: tutorial vscode! !

Atas ialah kandungan terperinci Bagaimana untuk mengkonfigurasi VSCode, kod Vue dan React debugging Su Shuang!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!