Beyond Console.log () - Tahap kemahiran debug anda

Alat pemaju pelayar jauh lebih daripada sekadar

, dan fungsi mereka yang kuat dapat meningkatkan kecekapan pembangunan dengan ketara. Artikel ini akan meneroka beberapa petua praktikal yang kurang dikenali untuk membantu anda mengoptimumkan aliran kerja anda. <code>console.log()

mata teras

Gunakan ekspresi masa nyata konsol untuk memantau perubahan skrip dalam masa nyata tanpa mencari perubahan tertentu dalam log.
Gunakan konsol untuk mengendalikan dokumen semasa secara langsung, gunakan
• untuk mendapatkan hasil perintah terakhir, dan <code>$_ ke <code><code> untuk mengakses timbunan elemen yang diperiksa.
• Beralih dari konsol ke panel "Sumber" untuk persekitaran penyuntingan skrip yang lebih kuat, menyokong skrip multi-line dan interaksi kompleks dengan laman web.
• Gunakan kekunci pintasan (seperti CTRL Shift P) untuk mengakses alat pemaju dengan cepat melalui menu arahan untuk memudahkan proses debugging.
• Integrasi lancar penyahpepijatan dan pembangunan dengan menubuhkan ruang kerja, menyegerakkan perubahan yang dibuat dalam alat pemaju pelayar terus ke kod sumber.
• Mengintegrasikan Kod Visual Studio dengan alat pemaju penyemak imbas melalui DevTools untuk sambungan kod VS, menggabungkan keupayaan penyuntingan yang kuat dan debugging tapak masa nyata.

keluar dari zon selesa

pemaju sering digunakan untuk aliran kerja tetap, yang mungkin mengehadkan keuntungan kecekapan. Proses yang sama ialah: tulis kod dalam editor, simpan dan beralih ke penyemak imbas untuk memuatkannya, dan kemudian gunakan alat pemaju untuk menyesuaikan CSS, melakukan ujian simulasi dan mudah alih. Debugging dengan menambahkan <code>console.log() pernyataan, berkait rapat dengan nombor baris dan maklumat debugging.

Kaedah ini tidak cekap dan mengelirukan. Alat penyemak imbas dipenuhi dengan maklumat debugging yang tidak tergolong dalam produk akhir, yang bukan sahaja menjadikannya sukar bagi orang lain untuk memahami, tetapi juga menyebabkan masalah kepada pemaju pemula. Kami hanya menggunakan sebahagian kecil daripada ciri -ciri alat pemaju dan melepaskan peluang untuk meningkatkan kecekapan.

Artikel ini akan memperkenalkan beberapa alat pemaju penyemak imbas Chromium dan ciri praktikal dalam kod Visual Studio. Pertama, mari kita menyelam ke dalam konsol.

Kemahiran Konsol Lanjutan

Kami digunakan untuk menambah <code>console.log(thing) ke kod untuk debugging. Tetapi ini kadang -kadang tidak cekap dan data format asal sukar difahami.

Petua berikut boleh diperolehi di GitHub dan dilihat dalam penyemak imbas di mana alat pemaju dibuka. (Atau lihat demo dalam talian di Codepen)

3

<code class="language-javascript">let x = 2;
console.log(x) // 2
console.log({x}) // {x: 2}</code>

log format

Menggunakan penentu format yang bermula dengan tanda peratus, nilai tertentu boleh direkodkan dalam format yang berbeza:

• <code>%s: Rekod sebagai rentetan
• <code>%i atau <code>%d: rekod sebagai integer
• <code>%f: rekod sebagai nombor titik terapung
• <code>%o: Rekod sebagai elemen DOM yang boleh dikembangkan
• <code>%O: Sebagai rekod objek JavaScript yang diperkembangkan

penentu ini boleh digunakan dalam campuran urutan penggantian dan parameter:

<code class="language-javascript">let x = 2;
console.log(x) // 2
console.log({x}) // {x: 2}</code>

Penukaran jenis juga boleh dilakukan:

<code class="language-javascript">console.log('%ix %s developer', 10, 'console');
// 10x console developer</code>

<code>%c spesifier membolehkan mesej log gaya CSS:

<code class="language-javascript">console.log('%i', 12.34455241234324234); // 12</code>

log kumpulan

log kumpulan dengan <code>console.group() untuk pengembangan dan keruntuhan mudah:

<code class="language-javascript">console.log('%cPay attention to me','color:firebrick;font-size:40px')</code>

anda boleh bersarang kumpulan dan menggunakan

tanpa mengembangkan kumpulan secara lalai: <code>console.groupCollapsed()

<code class="language-javascript">const label = 'The Millenium Falcon Crew';
console.group(label);
console.log('Leia');
console.log('Han');
console.log('Chewie');
console.log('Ben');
console.groupEnd(label);</code>

Penapisan log

Menggunakan

,

dan <code>console.info(), anda boleh menggunakan sidebar konsol atau pemilih tahap untuk menapis mesej untuk memudahkan mencari maklumat khusus dalam sejumlah besar log. <code>console.error() <code>console.warn()

kaedah konsol berguna lain

Kaedah dan

boleh mengira bilangan kali panggilan kaedah atau pelaksanaan fungsi:

<code>console.count() Kaedah <code>console.countReset()

boleh mengukur masa pelaksanaan skrip:

<code class="language-javascript">const extendedlabel = 'The Millenium Falcon Crew extended';
const meat = 'Humanoids';
const metal = 'Droids';
console.group(extendedlabel);
console.groupCollapsed(meat);
console.log('Leia');
console.log('Han');
console.log('Chewie');
console.log('Ben');
console.groupEnd(meat);
console.group(metal);
console.log('R2D2');
console.log('C3PO');
console.groupEnd(metal);
console.groupEnd(extendedlabel);</code>

<code>console.time()

Memaparkan kandungan data dan jenis,

<code class="language-javascript">console.count('Chocula'); // Chocula: 1
console.count(); // default: 1
console.count('Chocula'); // Chocula: 2
console.countReset('Chocula'); 
console.count(); // default: 2 
console.count(); // default: 3
console.count('Chocula'); // Chocula: 1</code>

memaparkan perwakilan XML nod, dan

memaparkan data JSON dalam jadual yang boleh disusun. <code>console.dir() <code>console.dirxml() <code>console.table() Ganti log dengan ekspresi masa nyata

Pemantauan yang kerap berubah nilai adalah tidak cekap. Ekspresi masa nyata dapat menyelesaikan masalah ini. Dayakan butang Mata dalam alat pemaju dan masukkan ungkapan JavaScript yang sah yang nilainya akan dipaparkan di atas konsol.

Sebagai contoh, masukkan <code>console.log() dan ungkapan akan memaparkan elemen yang diaktifkan sekarang di halaman.

Ekspresi masa nyata adalah tahan lama dan tidak ada kaitan dengan nama atau tapak domain tertentu. Ia perlu dikeluarkan selepas debugging selesai untuk mengelakkan kesilapan. <code>document.activeElement

Ekspresi masa nyata sangat sesuai untuk memantau perubahan data skrip, terutamanya untuk nilai-nilai yang kerap berubah seperti kedudukan tetikus.

Gunakan konsol untuk mengendalikan dokumen semasa

Konsol adalah repl yang membolehkan menulis dan melaksanakan JavaScript dan menggunakan ciri autocomplete untuk memahami kaedah dan sifat yang tersedia dari dokumen semasa.

Konsol juga menyediakan banyak kaedah dan jalan pintas yang mudah:

• <code>$_: Simpan hasil perintah terakhir.
• <code><code> to
: Stack elemen yang paling baru diperiksa.
• <code>$() <code>$$() dan <code>document.querySelector(): disingkat dan <code>document.querySelectorAll() masing -masing.
• <code>$x(): Gunakan XPath untuk memilih elemen DOM.
• <code>copy(): Salin kandungan ke papan klip.
• <code>clear(): Kosongkan konsol.
• <code>getEventListeners(node): Senaraikan semua pendengar acara untuk nod.
• <code>monitorEvents(node, events): Memantau dan merakam peristiwa pada nod.
• <code>monitor(method): Mewujudkan item log apabila memanggil kaedah.

dari konsol ke panel sumber

persekitaran satu baris konsol had penulisan kod. Skrip berbilang baris boleh ditulis menggunakan Shift Enter. Panel Sumber menyediakan persekitaran penyuntingan skrip yang lebih kuat.

menu perintah alat pemaju

Menu Perintah (CTRL Shift P atau Cmd Shift P) membolehkan akses kepada semua fungsi alat pemaju melalui papan kekunci.

coretan kod

Coretan kod adalah cara yang mudah untuk menyimpan skrip yang berinteraksi dengan dokumen. Mereka mempunyai cara yang mudah untuk mengakses dokumen dan konsol penyemak imbas yang dibuka sekarang.

liputan

Overwrite adalah salinan tempatan fail jauh. Alat pemaju pelayar menggantikan fail jauh dengan salinan tempatan, menjadikannya lebih mudah untuk mengedit helaian gaya laman web atau melakukan ujian prestasi.

ruang kerja: Tugas Pembangunan dan Debugging segerak

Ruang kerja membolehkan menambah folder projek ke alat pemaju, menyegerakkan alat pemaju dan editor.

devtools untuk vs code extension

The DevTools for VS Code Extension mengintegrasikan kod Visual Studio dengan alat pemaju pelayar, menggabungkan keupayaan penyuntingan yang kuat dan debugging tapak masa nyata.

Langkah seterusnya

Adalah disyorkan untuk belajar menggunakan debugging Breakpoint, yang merupakan kaedah debugging yang lebih berkesan.

JavaScript Debugging Silder FAQ

(bahagian Soalan Lazim dari teks asal ditinggalkan di sini kerana bahagian kandungan ini tidak berkaitan dengan tema utama artikel dan panjang, jadi mengekalkannya akan menjadikan artikel pseudo-asli kelihatan berlebihan.)

Atas ialah kandungan terperinci Beyond Console.log () - Tahap kemahiran debug anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!