Buka Chrome DevTools

Kayce Basques
Kayce Basques
Jecelyn Yeen
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova

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

Anda bisa mengakses DevTools menggunakan keyboard atau UI Chrome:

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

Membuka DevTools dari menu Chrome

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

Buka panel Elemen untuk memeriksa DOM atau CSS

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

Opsi {i>Inspect<i} di menu {i>drop-down<i} di Chrome.

DevTools membuka panel Elements dan memilih elemen di hierarki DOM. Di panel Gaya, Anda dapat melihat aturan CSS yang diterapkan ke elemen yang dipilih.

Elemen yang dipilih di panel Elements.

Membuka panel terakhir yang Anda gunakan dari menu utama Chrome

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

Opsi Developer Tools dipilih dari menu tiga titik.

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

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

Jika Anda lebih suka 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 adalah cara mudah untuk mengingat pintasan:

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

Pintasan C membuka panel Elements dalam mode pemeriksa Periksa.. Mode ini menampilkan tooltip yang berguna saat Anda mengarahkan kursor ke elemen pada halaman. Anda juga dapat mengklik elemen apa pun untuk melihat CSS-nya di Elements > Panel Styles.

Panel Elemen dalam mode pemeriksa dengan tooltip.

Untuk daftar lengkap pintasan DevTools, lihat Pintasan keyboard.

Buka otomatis DevTools di setiap tab baru

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

  1. Tutup semua instance Chrome yang sedang 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 yang berguna untuk navigasi DevTools yang lebih cepat.

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