Rumah > alat pembangunan > VSCode > teks badan

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

青灯夜游
Lepaskan: 2022-03-07 20:14:10
ke hadapan
2657 orang telah melayarinya

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!

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

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:

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

Jalankan pelayan pembangunan:

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

Antara muka yang dipaparkan oleh penyemak imbas adalah seperti ini:

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

Bagaimana hendak nyahpepijat dengan VSCode?

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

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

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

Letakkan dua titik putus dalam kod tindak balas:

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

Kemudian klik jalankan:

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

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

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

Lepaskan titik putus dan terus turun.

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

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

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:

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

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 mengkonfigurasi VSCode, kod Vue dan React debugging Su Shuang!

Bagaimana untuk memetakannya?

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

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

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:

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

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:

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

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?

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

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

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

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

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

Sebagai contoh , saya mengkonfigurasi laluan seperti ini:

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

Kemudian laluan fail semasa penyahpepijatan adalah seperti ini:

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

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

dan kemudian dipetakan ke fail setempat:

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

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

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

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!

Label berkaitan:
sumber:juejin.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan