Shortcut Inspect Element di macOS
Untuk membuka fitur Inspect Element pada peramban web di macOS, Anda dapat menggunakan kombinasi tombol keyboard Command (⌘) + Option (⌥) + I. Pintasan ini berlaku secara universal di hampir semua browser modern seperti Google Chrome, Mozilla Firefox, Microsoft Edge, dan Brave.
Jika Anda menggunakan Safari, terdapat perbedaan konfigurasi karena fitur pengembang (Develop menu) harus diaktifkan terlebih dahulu melalui pengaturan peramban agar shortcut tersebut berfungsi.
Tabel Shortcut Inspect Element per Browser
| Browser | Shortcut Keyboard | Keterangan |
|---|---|---|
| Google Chrome | Cmd + Option + I | Membuka panel Elements |
| Mozilla Firefox | Cmd + Option + I | Membuka Web Developer Tools |
| Microsoft Edge | Cmd + Option + I | Membuka F12 Developer Tools |
| Safari | Cmd + Option + I | Memerlukan aktivasi menu Develop |
Langkah Mengaktifkan Inspect Element di Safari
Safari memiliki kebijakan keamanan yang lebih ketat. Jika shortcut tidak merespons, ikuti langkah teknis berikut:
- Buka aplikasi Safari di Mac Anda.
- Klik menu Safari di bar bagian atas, lalu pilih Settings (atau Preferences).
- Pilih tab Advanced.
- Centang kotak bertuliskan Show features for web developers atau Show Develop menu in menu bar.
- Setelah aktif, Anda akan melihat menu Develop di bar atas. Anda kini bisa menggunakan shortcut Cmd + Option + I atau klik kanan pada elemen web dan pilih Inspect Element.
Fungsi Utama Inspect Element
Fitur ini merupakan alat bantu krusial bagi pengembang web untuk melakukan debugging secara real-time. Berikut adalah fungsi utama yang bisa Anda akses setelah menekan shortcut tersebut:
- Elements: Memeriksa struktur HTML dan CSS dari elemen yang dipilih.
- Console: Melihat log error JavaScript dan menjalankan perintah skrip secara langsung.
- Network: Memantau waktu muat aset, API request, dan status HTTP.
- Application: Mengelola penyimpanan lokal (Local Storage, Session Storage, dan Cookies).
- Performance: Menganalisis kecepatan rendering halaman web.
Jika Anda ingin melihat kode sumber halaman secara keseluruhan tanpa masuk ke mode inspeksi elemen, Anda bisa menggunakan shortcut Command (⌘) + Option (⌥) + U untuk membuka View Page Source.