11 tips debugging chrome yang dapat meningkatkan efisiensi

Sebagai老婆dari sepatu anak-anak front-end, saya yakin Anda pasti sudah familiar dengan browser Chrome.调页面,写BUG ,画样式, dan看php片, seluruh dunia tidak akan berguna tanpanya.

Tidak percaya? Mari kita lihat betapa kuatnya老婆kita...

1#. Inisiasi ulang permintaan dengan sekali klik.

Saat bersama-sama melakukan debug pada antarmuka back-end atau memecahkan masalah bug online, apakah Anda sering mendengar mereka mengucapkan kalimat ini: Anda Coba membuat permintaan lain dan biarkan saya melihat mengapa kesalahan itu terjadi!

Ada cara yang sangat sederhana untuk mengirim ulang permintaan tersebut.

• Pilih Network

• klik Fetch/XHR

• pilih permintaan pengiriman ulang,

• klik kanan dan pilih Replay XHR

Tidak perlu menyegarkan halaman atau berinteraksi dengan halaman tersebut. ! !

2#. Dalam

skenario memulai permintaan dengan cepat di konsol atau debugging bersama atau perbaikan bug, untuk permintaan yang sama, terkadang perlu mengubah parameter input dan memulai kembali.

• Pilih Network

• klik Fetch/XHR

• pilih Copy as fetch

• konsol pengambilan, tempelkan kode

• untuk mengubah parameter, dan tekan Enter untuk menyelesaikan

Dulu, saya selalu mengatasinya dengan mengubah kode atau menulis fetch dengan tangan. Sungguh bodoh memikirkannya...

3#. Salin variabel JavaScript.

Jika kode Anda dihitung, itu akan menampilkan objek yang kompleks . dan itu perlu disalin dan dikirim ke orang lain.

• Gunakan fungsi copy untuk mengeksekusi对象sebagai parameter input

Dulu, saya selalu mencetaknya ke konsol melalui JSON.stringify(fetfishObj, null, 2) , lalu menyalin dan menempelkannya secara manual. Ini benar-benar tidak efisien...

4#. Konsol mendapatkan elemen yang dipilih di Elemen panel

saat men-debug halaman web. Setelah memilih elemen di panel Elements , bagaimana jika Anda ingin mengetahui beberapa atributnya, seperti宽,高,位置, dll, melalui JS ?

• Pilih elemen yang akan di-debug melalui Elements

• dan akses konsol secara langsung dengan $0

5#. Menangkap halaman web layar penuh

Kadang-kadang kita perlu mengambil tangkapan layar suatu halaman web. Satu layar saja sudah cukup. Tangkapan layar bawaan sistem atau tangkapan layar WeChat dapat dilakukan, tetapi diperlukan untuk menangkap konten yang melebihi satu layar. Apa yang harus dilakukan ?

• Siapkan konten yang ingin diambil,

• cmd + shift + p Jalankan perintah Command

• dan masukkan Capture full size screenshot dan tekan Enter.

Bagaimana jika Anda ingin mencegat beberapa elemen yang dipilih?

Jawabannya juga sangat sederhana. Pada langkah ketiga, masukkan Capture node screenshot

6#. Perluas semua elemen DOM dengan satu klik

. Saat men-debug elemen, apakah Anda sering memperluasnya satu per satu untuk men-debugnya ketika levelnya relatif dalam? Ada cara yang lebih cepat

• dengan menahan tombol opt + klik (elemen terluar yang perlu diperluas)

7#. Konsol mengacu pada hasil eksekusi terakhir

untuk melihat skenario ini. Saya kira Anda pasti pernah mengalaminya. Berbagai proses telah dilakukan pada string tertentu, dan kemudian kami ingin mengetahui hasil dari setiap langkah eksekusi. Apa yang harus kita lakukan? .

'fatfish'.split('').reverse().join('') // hsiftaf

Anda mungkin melakukan ini

// Langkah 1 'fatfish'.split('') // ['f', 'a ', 't', 'f', 'i', 's', 'h']
// Langkah 2 ['f', 'a', 't', 'f', 'i', 's', 'h'].reverse() // ['h', 's', ' i ', 'f', 't', 'a', 'f']
// Langkah 3 ['h', 's', 'i', 'f', 't', 'a', 'f'].join('') // hsiftaf

Cara yang lebih sederhana adalah

dengan menggunakan $_ untuk mereferensikan hasil operasi sebelumnya tanpa menyalinnya setiap saat

// Langkah 1 'fatfish'.split('') // ['f', 'a', 't', ' ikan']
// Langkah 2 $_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// Langkah 3 $_.join('') // hsiftaf

8.# Beralih tema dengan cepat.

Beberapa siswa menyukai tema putih chrome, dan beberapa menyukai hitam.

• cmd + shift + p jalankan perintah Command

• dan masukkan Switch to dark theme atau Switch to light theme untuk mengganti tema.

9.# pemilih " $ " dan " $$ "

adalah persyaratan paling umum untuk menggunakan document.querySelector dan document.querySelectorAll di konsol $ memilih elemen halaman saat ini, tetapi sebenarnya ini agak terlalu panjang dan $$ pengganti.

10.

# $i Instal paket npm langsung di konsol.

Terkadang saya ingin menggunakan API seperti dayjs atau lodash , tetapi saya tidak ingin membuka situs resminya untuk memeriksanya.

Console Importer adalah sebuah plug-in yang digunakan untuk menginstal paket npm langsung di konsol.

• Instal plugin Console Importer

• $i('name') untuk menginstal paket npm

11.# Tambahkan breakpoint bersyarat Kegunaan yang luar biasa dari breakpoint bersyarat

Misalkan ada kode berikut. Kita berharap breakpoint akan terpicu ketika nama makanannya ? bagaimana kita bisa melakukannya?

const makanan = [
  {
    nama: '?',
    harga: 10
  },
  {
    nama: '?',
    Harga: 15
  },
  {
    nama: '?',
    Harga: 20
  },
]

makanan.forEach((v) => {
  console.log(v.nama, v.harga)
})

Ini sangat nyaman ketika menggunakan data dalam jumlah besar dan hanya ingin memutus kondisi ketika kondisi terpenuhi. Bayangkan saja jika tidak ada conditional breakpoint, apakah kita perlu mengklik debugger sebanyak n kali?

(Belajar berbagi video: pengembangan front-end web, video dasar-dasar pemrograman)

Di atas adalah rincian 11 keterampilan debugging chrome yang dapat meningkatkan efisiensi. Untuk lebih lanjut, harap perhatikan artikel terkait lainnya di situs web PHP Cina!