Rumah > Artikel > hujung hadapan web > Bagaimana untuk menambah vue ke devtools
Dalam pembangunan bahagian hadapan harian, kita selalunya perlu menggunakan rangka kerja Vue.js untuk membangunkan aplikasi atau komponen satu halaman yang kompleks. Untuk memudahkan pembangunan dan nyahpepijat, kami perlu menambahkan alat penyahpepijatan berkaitan Vue.js pada penyemak imbas. Hari ini kita akan memperkenalkan cara menambah Vue pada devtools.
devtools ialah alat pembangun penyemak imbas yang boleh dibenamkan ke dalam penyemak imbas dan menyediakan pelbagai alat dan fungsi nyahpepijat, termasuk menyahpepijat JavaScript, CSS, DOM, prestasi dan permintaan rangkaian halaman Web dan seterusnya. Kami boleh melihat elemen dengan mudah, kod nyahpepijat, melihat konsol, melihat permintaan rangkaian, mengubah suai elemen halaman web dan banyak lagi.
Mula-mula, masukkan URL chrome://extensions
dalam penyemak imbas untuk memasuki halaman sambungan, kemudian kami klik pada 开发者模式
di penjuru kanan sebelah atas, dan kemudian klik pada 加载已解压的扩展程序
di sudut kiri atas 🎜> Anda boleh menambah Vue.
Kemudian kami memperkenalkan fail sumber Vue ke dalam projek Anda boleh membuat projek Vue.js dengan memasang vue-cli, atau memuat turun terus fail sumber dan merujuknya ke dalam projek. Selepas merujuk Vue.js dalam projek, kami boleh meneruskan pembangunan Vue.
Buka alat penyahpepijatan pada halaman (kunci pintasan ialah F12), klik tab Vue
untuk melihat maklumat yang berkaitan. Anda boleh melihat versi Vue semasa anda, serta kejadian, komponen, arahan, status Vuex aplikasi anda dan banyak lagi.
Jika anda menghadapi ralat semasa menyahpepijat program Vue.js, anda boleh nyahpepijat secara manual dengan melihat konsol, memeriksa tika Vue, dsb. Anda boleh mendapatkan contoh Vue dengan menaip $vm
dalam konsol, dan anda juga boleh mencetak maklumat penyahpepijatan dengan console.log
. Tetapi menggunakan devtools, kita boleh melihat struktur komponen dengan lebih mudah dan melihat penyahpepijatan status Vuex.
Sangat mudah menggunakan devtools untuk menyahpepijat program Vue.js Ia mempunyai kelebihan berikut:
devtools ialah alat penyahpepijatan yang sangat berkuasa dan menambahkan pemalam Vue menjadikannya lebih mudah untuk kami membangunkan dan menyahpepijat program Vue.js. Dengan melihat struktur komponen, penyahpepijatan status Vuex, pengurusan versi dan fungsi lain, kami boleh membangunkan dan menyahpepijat program Vue.js dengan lebih mudah.
Atas ialah kandungan terperinci Bagaimana untuk menambah vue ke devtools. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!