Buka Chrome DevTools

Kayce Basques
Kayce Basques
X GitHub
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

Ada banyak cara untuk membuka Chrome DevTools. Pilih cara favorit Anda dari referensi komprehensif ini.

Anda dapat mengakses DevTools menggunakan UI Chrome atau keyboard:

Selain itu, pelajari cara membuka DevTools secara otomatis untuk setiap tab baru.

Membuka DevTools dari menu Chrome

Jika lebih suka UI, Anda dapat mengakses DevTools dari menu drop-down di Chrome.

Buka panel Elemen untuk memeriksa DOM atau CSS

Untuk memeriksa, klik kanan elemen di halaman, lalu pilih Periksa.

Opsi Periksa di menu drop-down di Chrome.

DevTools akan membuka panel Elemen dan memilih elemen di hierarki DOM. Di tab Gaya, Anda dapat melihat aturan CSS yang diterapkan pada elemen yang dipilih.

Elemen yang dipilih di panel Elemen.

Membuka panel terakhir yang Anda gunakan dari menu utama Chrome

Untuk membuka panel DevTools terakhir, klik tombol di sebelah kanan kolom URL, lalu pilih Alat Lainnya > Developer Tools.

Opsi Alat Developer dipilih dari menu tiga titik.

Atau, Anda dapat membuka panel terakhir dengan pintasan. Lihat bagian berikutnya untuk mempelajari lebih lanjut.

Membuka panel dengan pintasan: Elemen, Konsol, atau panel terakhir Anda

Jika Anda lebih suka menggunakan keyboard, tekan pintasan di Chrome, bergantung pada sistem operasi Anda:

OS Elemen Konsol Panel terakhir Anda
Windows atau Linux Ctrl + Shift + C Ctrl + Shift + J F12
Ctrl + Shift + I
Mac Cmd + Option + C Cmd + Option + J Fn + F12
Cmd + Option + I

Berikut cara mudah untuk menghafal pintasan:

  • C adalah singkatan dari CSS.
  • J untuk JavaScript.
  • I menunjukkan pilihan Anda.

Tombol pintas C akan membuka panel Elements dalam mode pemeriksa . Mode ini menampilkan tooltip yang berguna saat Anda mengarahkan kursor ke elemen di halaman. Anda juga dapat mengklik elemen mana pun untuk melihat CSS-nya di tab Elements > Styles.

Panel Elemen dalam mode pemeriksa dengan tooltip.

Untuk daftar lengkap pintasan DevTools, lihat Pintasan keyboard.

Dengan DevTools terbuka, muat ulang halaman dengan atau tanpa cache

Dengan DevTools terbuka, Anda dapat memuat ulang halaman dengan tiga cara. Di panel tindakan utama jendela Chrome, tekan lama tombol Muat Ulang dan pilih salah satu opsi:

Tiga opsi pemuatan ulang dengan DevTools terbuka.

  • Muat Ulang Normal. Menggunakan cache untuk mempercepat waktu pemuatan ulang.

    Pintasan: Cmd+R (macOS) atau Ctrl+R (Windows/Linux).

  • Muat Ulang Paksa. Melewati cache, tetapi tidak mengosongkannya.

    Pintasan: Cmd+Shift+R (macOS) atau Ctrl+Shift+R (Windows/Linux).

  • Kosongkan cache dan muat ulang keras. Mengosongkan cache untuk semua situs sebelum memuat ulang.

Membuka DevTools secara otomatis di setiap tab baru

Jalankan Chrome dari command line dan teruskan tanda --auto-open-devtools-for-tabs:

  1. Tutup semua instance Chrome yang berjalan.

  2. Jalankan aplikasi terminal atau command line favorit Anda.

  3. Bergantung pada sistem operasi Anda, jalankan perintah berikut:

  • macOS:

    open -a "Google Chrome" --args --auto-open-devtools-for-tabs

  • Windows:

    start chrome --auto-open-devtools-for-tabs

  • Linux:

    google-chrome --auto-open-devtools-for-tabs

DevTools akan otomatis terbuka untuk setiap tab baru hingga Anda menutup Chrome.

Apa langkah selanjutnya?

Selanjutnya, tonton video berikut untuk mempelajari beberapa pintasan dan setelan berguna untuk navigasi DevTools yang lebih cepat.

Untuk pengalaman belajar yang lebih langsung, lihat cara menyesuaikan DevTools.