Menyesuaikan DevTools

Sofia Emelianova
Sofia Emelianova

Halaman ini mencantumkan cara menyesuaikan Chrome DevTools.

Setelan

Settings > Preferences berisi banyak opsi untuk menyesuaikan DevTools.

Lihat Membuka Setelan dan Preferensi.

Tema gelap

Anda dapat mengaktifkan tema gelap di Setelan atau Menu Perintah.

Tema gelap.

  1. Buka Menu Command.
  2. Mulai ketik dark, pilih perintah Beralih ke tema gelap, lalu tekan Enter untuk menjalankan perintah.

    Perintah tema gelap.

  3. Atau, tetapkan tema Anda di Setelan > Preferensi > Tampilan > Tema.

Tema dinamis

DevTools dapat otomatis mencocokkan tema warna Chrome.

Untuk menetapkan tema:

  1. Buka tab baru, lalu klik Sesuaikan Chrome di pojok kanan bawah.
  2. Di Tampilan, pilih tema melalui Ubah tema atau pilih palet warna.

DevTools mencocokkan tema warna yang dipilih di Tampilan.

Panel samping

Panel Samping berisi banyak fitur tersembunyi.

Tekan Escape untuk membuka atau menutup Panel Samping.

Laci.

Klik Alat Lainnya untuk membuka Panel Samping lainnya tab.

Tombol Alat Lainnya yang membuka tab Panel Samping lainnya.

Mengubah penempatan DevTools

Secara default, DevTools dikaitkan di sebelah kanan area pandang. Anda juga dapat menempatkannya di sisi bawah atau kiri, atau melepaskan kaitan DevTools ke jendela terpisah.

Anda dapat mengubah penempatan DevTools dengan dua cara:

  • Menu Utama: Buka Customize And Control DevTools dan klik:
    • Lepas kaitan ke jendela terpisah
    • Dock to left
    • Dek ke bawah
    • Dek ke kanan
  • Menu Perintah:

    1. Buka Menu Command.
    2. Mulai ketik dock dan pilih salah satu opsi yang disarankan: pasang ke dok ke bawah, kiri, kanan, lepaskan dari dok, atau pulihkan posisi dok terakhir.

Opsi dok yang disarankan di Menu Perintah.

Untuk mengaktifkan/menonaktifkan Pulihkan posisi dok terakhir dengan pintasan keyboard, tekan:

  • Di Linux atau Windows: Control+Shift+D
  • Di macOS: Command+Shift+D

Menyusun ulang panel, tab, dan panel

Untuk mengubah pengurutan, klik dan tarik ke kiri atau ke kanan salah satu dari hal berikut:

  • Panel di bagian atas DevTools.
  • Panel di panel Elemen seperti Gaya, Terkomputasi, Tata Letak, dan lainnya.
  • Panel di panel Sumber seperti Halaman, Ruang Kerja, Penggantian, dan lainnya.
  • Tab Panel samping di bagian bawah DevTools.

Selain itu, Anda dapat memindahkan panel dan tab ke atas dan ke bawah ke dan dari Panel Samping. Untuk melakukannya, klik kanan panel atau tab dan pilih Pindahkan ke atas atau Pindahkan ke bawah dari menu drop-down.

Urutan tab kustom Anda akan tetap ada di seluruh sesi DevTools.

Tata letak panel

Secara default, DevTools akan otomatis mengatur ulang tata letak panel Anda bergantung pada ukuran jendela. Anda dapat menonaktifkan pengaturan ulang otomatis. Buka Setelan > Preferensi > Tampilan dan perbarui tata letak panel berdasarkan preferensi Anda.

Misalnya, panel Gaya di panel Elemen akan berpindah dari samping ke bawah saat ukuran layar kecil. Jika Anda ingin panel Gaya selalu berada di sisi, ubah tata letak panel menjadi vertikal.

Ubah tata letak panel

Mengubah bahasa UI DevTools

Lihat Setelan > Preferensi > Tampilan > Bahasa.

Ubah bahasa dengan membuka Setelan, lalu Preferensi

Setelan sinkronisasi

Anda dapat menyinkronkan setelan DevTools di beberapa perangkat.

Untuk mengaktifkan sinkronisasi, aktifkan Sinkronisasi Chrome terlebih dahulu. Setelah diaktifkan, setelan DevTools Anda akan disinkronkan secara default.

Sinkronisasi profil Chrome.

Anda dapat mengaktifkan atau menonaktifkan sinkronisasi setelan DevTools secara terpisah menggunakan Setelan > Sinkronisasi > Aktifkan sinkronisasi setelan.

Setelan sinkronisasi DevTools

DevTools menyinkronkan sebagian besar setelan kecuali setelan di tab Workspace, Experiments, dan Devices serta beberapa setelan umum lainnya. Status kotak centang Aktifkan sinkronisasi setelan juga disinkronkan di seluruh perangkat.

Misalnya, setelan Tampilan berikut disinkronkan, sehingga Anda memiliki pengalaman yang konsisten di seluruh perangkat dan tidak perlu menentukan ulang setelan yang sama lagi.

Setelan tampilan.

Namun, setelan dock tidak disinkronkan karena developer memiliki preferensi dock yang berbeda saat men-debug di situs yang berbeda.

Dok.

Sesuaikan pintasan keyboard

Lihat Setelan > Pintasan.

Mengaktifkan eksperimen

Lihat Setelan > Eksperimen.