Google Chrome adalah salah satu browser web populer untuk pengembangan web, karena itu fitur canggih. Alat Pengembang Chrome bisa sangat berguna saat debugging. Sebagian besar dari kita sudah tahu bahwa kita dapat mengedit CSS langsung menggunakan Chrome Dev Tools, tetapi ada lebih banyak kiat yang akan kami bagikan kepada Anda hari ini.
Tips Chrome Development Tools
Ada banyak trik Chrome Dev Tools yang tidak diketahui dan tersembunyi dan kami akan mencari trik yang paling berguna di antara mereka. Untuk membuka alat pengembang di Chrome, tekan F12 di keyboard Anda dan coba trik berikut.
1. Cari dan Buka file apa saja
Ketika kami melakukan pengembangan web, kami menangani banyak HTML, CSS, JS dan file lainnya. Saat kami ingin melakukan debug apa pun, kami membuka alat Chrome Dev. Anda dapat dengan cepat mencari dan menemukan file tertentu untuk mempermudah pekerjaan Anda. Hanya, tekan Ctrl + P dan mulai mengetikkan nama file. Ini membantu Anda menemukan file tertentu dari daftar file.
2. Cari dalam file sumber
Dalam trik sebelumnya, kami jadi tahu cara mencari file tertentu. Anda bahkan dapat mencari string tertentu di semua file yang dimuat. tekan Ctrl + Shift + F untuk mencari string dalam file. Ini juga mendukung ekspresi reguler.
3. Pergi ke baris tertentu
Setelah Anda membuka file sumber apa pun dan ingin pindah ke baris tertentu, tekan Ctrl + G dan berikan nomor baris dan tekan enter.
4. Memilih Elemen DOM di tab Konsol
Dev Tools juga memungkinkan Anda untuk memilih elemen di konsol.
- $() – Mengembalikan kejadian pertama dari pemilih CSS yang cocok.
- $$() – Ini mengembalikan susunan elemen yang cocok dengan pemilih CSS yang diberikan.
5. Manfaatkan beberapa caret
Terkadang, Anda ingin mengatur beberapa caret di tempat yang berbeda dan Anda dapat melakukannya dengan mudah di alat Pengembang Chrome dengan memegang Ctrl kunci dan klik di mana Anda ingin menempatkannya. Kemudian mulailah menulis dan Anda akan melihat yang ditempatkan di berbagai tempat yang dipilih.
6. Pertahankan Log
Preserve log membantu Anda untuk tetap log bahkan halaman dimuat. Periksa opsi di samping Pertahankan log di log Konsol dan log dipertahankan. Ini muncul log sebelum halaman di diturunkan dan bermanfaat untuk menyelidiki bug.
7. Gunakan beautifier kode bawaan
Alat Chrome Dev memiliki pemulas kode bawaan yang disebut cetak cantik “{}”. Alat pengembang menunjukkan kode yang diminimalkan dan tidak begitu mudah dibaca. Klik pada tombol cetak cantik yang ditampilkan di kiri bawah pada file sumber terbuka, untuk menampilkan file sumber dalam format yang dapat dibaca manusia.
8. Apakah situs web Anda ramah seluler? Periksa di sini
Alat Chrome Dev juga memungkinkan kami untuk memeriksa apakah situs web ramah seluler atau tidak. Anda dapat memeriksa bagaimana situs web Anda terlihat di berbagai perangkat. Buka ke alat Chrome Dev dan di bawah Emulasi tab, Anda dapat mengajukan berbagai perangkat. Pilih perangkat yang Anda inginkan dan uji bagaimana tampilan situs web Anda di perangkat itu.
9. Meniru Sensor dan Lokasi Geografis
Anda bahkan dapat meniru sensor seperti layar sentuh dan akselerometer. Anda bahkan dapat meniru lokasi geografis. Untuk melakukan ini, pergilah ke Emulasi -> Sensor.
10. Pilih kemunculan berikutnya dari kata saat ini
Jika Anda ingin mengganti kata Dalam semua kemunculannya, lalu pilih kata dan tekan Ctrl + D untuk memilih kemunculan berikutnya dari kata yang dipilih. Anda dapat mengedit kata itu dalam semua kemunculannya dalam satu potret.
11. Alter Color Format
Cukup gunakan Shift + Klik pada pratinjau warna untuk mengubah alter antara rgba, heksadesimal dan format hsl.
12. Tambahkan perubahan ke file lokal melalui ruang kerja
Kami dapat mengedit file sumber dan membuat beberapa perubahan dalam CSS, Java Script dan di file lain di alat-alat Chrome Dev. Untuk menambahkan perubahan ini ke file lokal, maka di sini tidak perlu menyalin tempel perubahan dari ruang kerja ke file di disk. Alat Chrome Dev memungkinkan Anda mencocokkan file dan memperbarui file lokal dengan perubahan yang telah Anda lakukan di alat dev. Untuk melakukan ini, klik kanan pada file sumber di sisi kiri pada Sumber-sumber tab dan pilih Tambahkan Folder ke ruang kerja.
Untuk informasi lebih lanjut tentang ruang kerja, kunjungi ke Chrome.com.
