11 tips untuk mereka yang menggunakan Chrome sebagai lingkungan pengembangan.
Jadi, karena satu dan lain alasan, Anda memutuskan untuk fokus pada Chrome saat mengembangkan. Anda membuka alat pengembang dan mulai men-debug kode Anda.
Terkadang Anda membuka konsol untuk melihat keluaran dari program Anda, atau tab Elemen untuk memeriksa gaya CSS dari elemen DOM.
Apakah Anda benar-benar ahli dalam Chrome DevTools? Faktanya, alat pengembang memiliki banyak fitur canggih yang membuat hidup lebih mudah, tetapi hanya sedikit orang yang mengetahuinya.
Saya akan memberi tahu Anda tentang yang paling berguna.
Mari kita mulai dengan melihat menu perintah. Menu perintah di Chrome seperti shell perintah di Linux. Di dalamnya, Anda dapat menulis perintah untuk mengontrol Chrome.
Buka Alat Pengembang Chrome. Untuk mengakses menu perintah, gunakan tombol pintas:
- Windows ： Ctrl + Shift + P
- macOS ： Cmd + Shift + P
Anda juga dapat membukanya melalui antarmuka grafis, seperti ini:
Di area ini Anda dapat melihat daftar panjang perintah yang memberi Anda akses ke banyak fungsi yang berguna.
Fitur screenshot lanjutan
Anda harus sering mengambil tangkapan layar dari suatu bagian layar, dan saya yakin program yang nyaman telah diinstal di komputer Anda untuk ini. Bisakah mereka:
- mengambil tangkapan layar dari seluruh laman, termasuk konten di luar area pandang?
- ambil konten dari satu elemen DOM?
Kebutuhan seperti itu cukup sering muncul, tetapi sebagian besar alat sistem untuk mengambil tangkapan layar tidak menangani tugas-tugas ini. Untungnya, kami telah mendedikasikan perintah Chrome untuk mengambil tangkapan layar seperti ini.
Di sini mereka:
- Screenshot Menangkap tangkapan layar ukuran penuh
- Screenshot Tangkap tangkapan layar node
Contoh
Buka halaman web apa pun, seperti artikel JavaScript paling populer di Medium: medium.com/tag/javascript .
Buka menu perintah dan jalankan perintah
Screenshot Capture full size screenshot.
Kami mengambil snapshot dari seluruh halaman saat ini secara keseluruhan.
Tangkapan layar asli memiliki kualitas yang baik, tetapi di sini saya telah mengunggah gambar terkompresi untuk menghemat bandwidth Anda.
Jika Anda ingin mengambil tangkapan layar dari elemen DOM, Anda dapat menggunakan alat sistem, tetapi alat tersebut tidak akan dapat menangkap elemen dengan sempurna. Chrome memiliki perintah khusus untuk ini
Capture node screenshot.
Pertama buka tab Elemen dan pilih elemen yang diinginkan. Lalu jalankan perintahnya.
Inilah hasilnya:
Menggunakan hasil operasi terakhir di konsol
Kami sering men-debug kode di konsol. Katakanlah Anda ingin tahu cara membalikkan string di JavaScript. Anda mencari informasi yang Anda butuhkan di Internet, dan Anda menemukan potongan kode ini. Ya, kode ini membalikkan garis. Tapi Anda belum jelas bagaimana metode kerja , , dan apa hasilnya memberi mereka masing-masing. Anda dapat menelusuri kode ini selangkah demi selangkah dengan menuliskannya seperti ini: Sekarang kita tahu nilai apa yang dikembalikan setiap metode. Tapi kenapa menulis begitu banyak? Sangat mudah untuk membuat kesalahan dalam catatan yang begitu panjang dan sulit untuk memahaminya. Izinkan saya memberi tahu Anda sebuah rahasia: ada variabel ajaib di konsol yang menyimpan hasil operasi terakhir.
'abcde'.split('').reverse().join('')
split()reverse()join()
$_
$_Adalah variabel khusus yang nilainya selalu sama dengan hasil operasi terakhir yang dilakukan di konsol. Trik ini membuat proses debug menjadi jauh lebih mudah.
Kirim Ulang Permintaan XHR
Dalam proyek front-end, Anda sering kali perlu menggunakan XHR untuk mengirim permintaan untuk menerima data dari server. Bagaimana jika saya perlu mengirim ulang permintaan saya?
Pengembang yang tidak berpengalaman menyegarkan halaman, tetapi ini sangat merepotkan. Di Chrome, kita dapat men-debug kode langsung dari tab Jaringan.
- Buka tab Jaringan.
- Tekan tombol XHR.
- Pilih permintaan XHR yang ingin Anda kirim ulang.
- Pilih Putar Ulang XHR dari menu konteks untuk memutar ulang permintaan.
Berikut contoh animasi:
Lacak status pemuatan halaman
Diperlukan waktu lebih dari sepuluh detik untuk memuat halaman sepenuhnya. Dalam kasus seperti itu, Anda perlu mengontrol proses pemuatan halaman pada setiap waktu yang berbeda.
Di Chrome DevTools, Anda dapat mengambil tangkapan layar dari suatu halaman saat sedang memuat dengan mencentang kotak di samping
Capture Screenshotstab Jaringan.
Pilih tangkapan layar untuk melihat informasi tentang permintaan jaringan yang sesuai. Visualisasi ini akan memberi Anda gambaran yang lebih baik tentang permintaan jaringan yang dikirim ke server pada waktu tertentu.
Menyalin Variabel
Apakah Anda tahu cara menyalin nilai variabel JavaScript ke clipboard?
Sepertinya tugas yang mustahil, tetapi Chrome menyediakan fungsi khusus untuk menyelesaikannya
copy.
ECMAScript tidak berisi definisi untuk fungsi salin, ini adalah fungsi Chrome. Ini dapat digunakan untuk menyalin nilai variabel JavaScript ke clipboard.
Menyalin gambar sebagai URI dengan awalan "data:"
Ada dua cara untuk menyisipkan gambar ke halaman: Anda dapat menautkan ke file eksternal, atau Anda dapat menyematkan gambar menggunakan data: URL .
Data: URL (Prefixed URL
data:) adalah skema untuk menyematkan file kecil dalam dokumen sebagai elemen sebaris. Dulu disebut "data: URI", tetapi WHATWG telah menghapus nama itu.
Menyematkan gambar kecil langsung ke data: Skema URL mengurangi jumlah permintaan HTTP ke server, yang membuat pemuatan halaman lebih cepat.
Bagaimana cara melakukan ini di Chrome?
Tonton animasinya:
Mengeluarkan larik objek ke tabel
Katakanlah kita memiliki array objek:
let users = [{name: 'Jon', age: 22},
{name: 'bitfish', age: 30},
{name: 'Alice', age: 33}]
Sulit untuk memahami informasi seperti itu di konsol. Dan jika arraynya lebih panjang dan berisi elemen yang lebih kompleks, maka akan lebih mudah untuk tersesat di dalamnya.
Untungnya, Chrome memiliki fungsi yang mengeluarkan larik objek ke tabel.
Ini akan berguna bagi Anda, dan lebih dari sekali.
Menyeret pada tab Elemen
Terkadang Anda perlu memindahkan beberapa elemen DOM pada halaman untuk menguji antarmuka pengguna. Pada tab Elemen, Anda dapat menarik elemen HTML mana saja di dalam kode:
Dalam contoh ini, saya menyeret elemen pada tab Elemen, dan posisinya di halaman web juga langsung berubah.
Merujuk item yang saat ini dipilih di konsol
$0 Adalah variabel ajaib lain yang berisi elemen yang dipilih di tab Elemen.
Mengaktifkan kelas semu CSS
Pseudo-class memungkinkan Anda menata elemen tidak hanya berdasarkan lokasinya di pohon dokumen, tetapi juga bergantung pada faktor eksternal seperti riwayat penelusuran (misalnya : dikunjungi ), status konten (misalnya : diperiksa dalam beberapa bentuk), posisi penunjuk mouse (misalnya, pseudo- class: hover mengubah gaya elemen saat Anda mengarahkan kursor ke atasnya).
Beberapa pseudo-class dapat ditulis untuk satu elemen. Untuk mempermudah pengujian gaya, pseudo-class dapat diaktifkan langsung dari tab Elemen.
Contoh
Lihat kode halaman:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
font-size: 150px;
}
div:hover{
color: red;
}
div:active{
color: blue;
}
div:focus{
color: brown;
}
</style>
</head>
<body>
<div>hello world</div>
</body>
</html>Kami membuka halaman di browser, memeriksa cara kerja pseudo-class di tab Elemen, dan membuat perubahan jika perlu.
Tombol pintas untuk menyembunyikan item
Saat men-debug gaya CSS, elemen sering kali perlu disembunyikan. Chrome melakukannya dengan cepat: Anda hanya perlu memilih item dan menekan sebuah tombol
H.
Tekan H pada keyboard Anda
Operasi ini menerapkan gaya ke sebuah elemen
visibility: hidden !important;.
Menyimpan elemen DOM sebagai variabel sementara global
Jika kita ingin dengan cepat mereferensikan elemen DOM di konsol, kita bisa melakukannya seperti ini:
- Pilih item.
- Buka menu konteks dengan tombol kanan mouse.
- Pilih Simpan sebagai variabel global.
