Sebagian besar dari kamu pasti sudah mengetahui dan pernah melakukan pengeditan langsung menggunakan Chrome Developer Tools , akan tetapi ada lebih banyak kiat yang akan kami bagikan kepada Kamu hari ini.
Untuk lebih mendalami dan lebih jelas mengenai Chrome Developer Tools itu sendiri. Anda perlu mengetahui alat pengembagan yang terdapat pada Chrome Developer Tools agar dapat mengakses web kamu. Berikut ini ulasannya!
Chrome Developer Tools Memungkinkan Pengembang Mengakses ke Internal Aplikasi Web
Kiat Alat Pengembangan Chrome
Ada banyak trik yang tidak diketahui dan tersembunyi dari Alat Pengembang Chrome (chrome developer tools) dan kami akan melihat trik yang paling bermanfaat di antara mereka. Untuk terhubung ke alat pengembang di Chrome , tekan F12 di keyboard Kamu dan coba trik berikut.
1. Temukan dan Buka Arsip Apa Saja
Saat kami melakukan pengembangan situs, kami menanggulangi banyak arsip HTML , CSS , JS, dan lainnya. (CSS) Saat kami ingin men-debug apa pun, kami mengakses chrome developer tools. Kamu bisa dengan cepat mencari dan menemukan arsip eksklusif untuk mempermudah pekerjaan Kamu.
Cukup(Just) , tekan Ctrl + P dan mulailah mengetik julukan arsip. Ini membantu Kamu menemukan arsip eksklusif dari daftar arsip.
2. Cari di Dalam Arsip Sumber
Di dalam trik sebelumnya, kami menyadari cara mencari arsip eksklusif. Kamu apalagi dapat mencari string eksklusif di seluruh arsip yang dimuat. Tekan Ctrl + Shift + F untuk mencari string didalam arsip. Ini juga menopang aktualisasi diri reguler.
3. Pergi ke Baris Eksklusif
Setelah Kamu mengakses arsip sumber apa pun dan ingin pindah ke baris eksklusif, tekan Ctrl + G dan berikan nomor baris dan tekan enter.
4. Memilih Elemen DOM di Tab Konsol (Console)
Chrome developer tools juga amat mungkin Kamu memilih elemen di konsol.
$() – Mengembalikan kemunculan pertama dari pemilih CSS yang cocok.(css)
$$() – Ini mengembalikan array elemen yang cocok dengan pemilih CSS yang diberikan untuk perintah konsol lainnya, buka posting ini.
5. Manfaatkan Beberapa Tanda Sisipan
Terkadang, Kamu ingin mengatur beberapa tanda sisipan di tempat yang berbeda dan Kamu bisa melakukannya dengan mudah di chrome developer tools dengan menghindar tombol Ctrl dan mengklik di mana Kamu ingin meletakkannya.
Kemudian mulailah menulis dan Kamu akan melihat bahwa ditempatkan di beraneka tempat yang dipilih.
6. Simpan Log
Pertahankan log membantu Kamu menjaga log meskipun halaman dimuat. Centang орѕі di samping dan pеrtаhаnkаn log Konsol. Hal ini dapat menampilkan log sebelum halaman dibongkar dan membantu untuk menyelidiki bug.
7. Gunakan Kode Kecantikan Bawaan
Chrome developer tools punya code beautifier bawaan yang disebut pretty print “{}” . Alat pengembang memperlihatkan kode yang diperkecil dan tidak begitu mudah dibaca. Klik(Click) tombol cetak cantik yang ditampilkan di kiri bawah pada arsip sumber terbuka, untuk menampilkan arsip sumber di dalam format yang dapat dibaca manusia.
8. Apakah Situs Website Kamu Ramah Seluler? Cek disini
Chrome developer tools juga sangat memungkinkan bagi kami untuk memeriksa apakah website website mobile friendly atau tidak. Kamu dapat memeriksa tampilan web site web site Kamu di bermacam perangkat.
Buka alat Chrome Dev dan di bawah tab Emulation , Kamu dapat mengajukan bermacam perangkat. Pilih perangkat yang Kamu idamkan dan uji tampilan web site website Kamu di perangkat itu.
9. Sensor dan Lokasi Geografisnya
Kamu bisa meniru meniru sensor seperti layar sentuh dan akselerometer. Kamu dapat meniru lokasi geografis. Untuk melakukan ini, Emulation -≫ Sensors.
10. Pilih Kata dari Kemunculan Berikutnya Ini
Jika Kamu ingin mengganti kata Di semua kemunculannya, pilih kata tersebut dan tekan Ctrl + D untuk memilih kemunculan berikutnya dari kata yang dipilih. Kemudian, Kamu dapat mengedit kata itu di dalam seluruh kemunculannya didalam satu bidikan.
11. Ubah Format Warna
Cukup gunakan Shift + Click pada pratinjau warna untuk mengubah perubahan antara format RGBA, heksa desimal, dan hsl.
12. Tambahkan Perubahan ke Arsip Lokal Lewat Ruang Kerja
Kami dapat mengedit arsip sumber dan membuat beberapa perubahan pada CSS , Javascript , dan arsip lainnya di alat Chrome Dev . Untuk memberikan perubahan ini ke arsip lokal, maka tidak perlu menyalin dan menempelkan perubahan dari ruang kerja ke arsip di disk.
Chrome developer tools terlalu mungkin Kamu untuk mencocokkan arsip dan memperbarui arsip lokal dengan perubahan yang sudah Kamu lakukan di alat pengembang. Untuk menyelesaikan ini, klik kanan pada arsip sumber di sisi kiri pada tab Sumber dan pilih Tambahkan Folder ke ruang kerja.
Demikianlah beberapa ulasan yang membahas tentang chrome developer tools semoga bermanfaat dan bisa membantu.
