Tutorial, Tips, Trik, Alat Pengembangan Chrome

Google Chrome adalah salah satu peramban web populer untuk pengembangan web, karena ini adalah fitur lanjutan. Alat Pengembang Chrome dapat sangat berguna ketika melakukan 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 dengan Anda hari ini.

Kiat Alat Pengembangan Chrome

Ada banyak trik Chrome Dev yang tidak diketahui dan tersembunyi Alat dan kami akan mencari trik yang paling berguna di antara mereka. Untuk membuka alat pengembang di Chrome, tekan F12 pada keyboard Anda dan coba trik berikut ini.

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. Cukup, tekan Ctrl + P dan mulai ketikkan nama file. Ini membantu Anda menemukan file tertentu dari daftar file.

2. Cari di dalam file sumber

Pada 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 dan ingin pindah ke baris tertentu, kemudian tekan Ctrl + G dan berikan nomor baris dan tekan enter.

4. Memilih Elemen DOM di tab Konsol

Dev Tools juga memungkinkan Anda memilih elemen di konsol.

• $ () - Mengembalikan kemunculan pertama pemilih CSS yang cocok.
• $$ () - Ini mengembalikan array elemen yang sesuai dengan pemilih CSS yang diberikan.

Untuk perintah konsol lebih lanjut, menuju ke posting ini.

5. Memanfaatkan beberapa tanda

Terkadang, Anda ingin mengatur beberapa caret di tempat yang berbeda dan Anda dapat melakukannya dengan mudah di alat-alat Chrome Dev dengan menahan tombol Ctrl dan mengklik di mana Anda ingin menempatkannya. Kemudian mulailah menulis dan Anda akan melihat yang ditempatkan di berbagai tempat yang dipilih.

6. Preserve Log

Preserve log membantu Anda untuk tetap log bahkan halaman dimuat. Periksa opsi di samping Preserve log di log Konsol dan log dipertahankan. Ini menunjukkan log sebelum halaman di diturunkan dan berguna untuk menyelidiki bug.

7. Gunakan pengotot kode bawaan

Alat Chrome Dev memiliki pemikat kode bawaan yang disebut cukup cetakan "{}". 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

Chrome Dev Tools juga memungkinkan kami untuk memeriksa apakah situs web ramah seluler atau tidak. Anda dapat memeriksa bagaimana situs web Anda terlihat di berbagai perangkat. Buka alat Chrome Dev dan di bawah tab Emulasi , Anda dapat mengajukan berbagai perangkat. Pilih perangkat yang Anda inginkan dan uji tampilan situs web Anda di perangkat itu.

Untuk informasi lebih lanjut, silakan lihat video berikut ini.

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, kembali ke Emulasi -> Sensor.

10. Pilih kemunculan berikutnya dari kata saat ini

Jika Anda ingin mengganti kata Dalam semua kemunculannya, kemudian pilih kata dan tekan Ctrl + D untuk memilih kemunculan berikutnya dari kata yang dipilih. Itu, Anda dapat mengedit kata itu dalam semua kejadian itu dalam satu tembakan.

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 tab Sumber dan pilih Tambah Folder ke ruang kerja.

Untuk informasi lebih lanjut tentang ruang kerja, kunjungi ke Chrome.com.