Alat
Referensi Cepat Chrome DevTools
Cheat sheet siap cetak untuk Referensi Cepat Chrome DevTools, disusun untuk pencarian cepat, belajar, dan referensi di meja
Contoh
Isi cheat sheet ini
- Elements
- Console
- Network
- Sources
- Performance
- Application
- Lighthouse
- Shortcut
- Debug Mobile
- Pola Umum
Inspeksi & Edit
Right-click -> Inspect | Buka panel Elements untuk elemen tersebut |
Double-click tag/attribute | Edit HTML secara inline |
Delete key | Hapus node yang dipilih |
Ctrl+Z | Undo perubahan DOM |
H key | Toggle visibilitas elemen yang dipilih |
Drag node | Pindahkan elemen di tree DOM |
Panel Styles
element.style {} | Tambah inline style ke elemen |
Click property value | Edit nilai CSS secara live |
Checkbox next to rule | Toggle properti CSS on/off |
:hov button | Paksa pseudo-state elemen (:hover, :focus) |
.cls button | Tambah/hapus class CSS |
Color swatch | Buka color picker |
Computed tab | Lihat nilai CSS akhir yang dihitung |
Unduh cheat sheet lengkap dengan semua bagian, siap cetak
Unduh PDFUnduhan
Pilih varian yang sesuai dengan cara Anda membaca
-
Direkomendasikan
Standar
Hitam-putih, hemat tinta. Pilihan default untuk printer laser dan fotokopi
Terbaik untuk Cetakan dan referensi di meja
-
Warna
Aksen warna hangat untuk membaca di layar atau printer warna
Terbaik untuk Membaca di layar atau printer warna
-
Kartu Referensi
Kepadatan maksimum, layout 4 kolom. Semua dalam satu halaman
Terbaik untuk Pemindaian cepat dan penggunaan kertas minimum
