13 Tips Dan Trik Chrome Developer Tools Yang Harus Kalian Tahu

Google Chrome adalah Browser yang paling popular di gunakan oleh pengembang web saat ini, selain Google Chrome Mozilla Firefox juga salah satu browser yang paling popular di gunakan. Sebagian besar dari kita mungkin akrab dengan banyak fitur-fiturnya seperti live-editing CSS, menggunakan Console dan Debugger. Nah dalam artikel kali ini saya akan berbagi 13 tips dan trik yang keren, yang akan meningkatkan alur kerja kalian dalam membuat website menggunakan browser Google Chrome. Tips dan Trik yang pertama adalah.

Quick File Switching

Quick File Switching pada DevTools Chrome berfungsi untuk mencari atau membuka file yang ada pada website kalian secara live, contohnya seperti kalian mau mengedit CSS yang ada pada website kalian, kalian tinggal membuka DevTools dan tekan Ctrl + p (Cmd + p Untuk Mac), maka kalian akan mendapatkan file CSS yang kalian cari dan mengeditnya secara live.

Search Within Source Code

Search within source code pada DevTools Google Chrome berfungsi untuk mencari kode atau script yang ingin kalian cari, kalian cukup menekan Ctrl + Shift + F.

Go To Line

Setelah kalian membuka file di dalam Sources Tabs, DevTools memungkinkan kalian untuk dengan mudah mencari baris yang ingin kalian tuju, caranya kalian tinggal menekan tombol Ctrl + G dan ketikkan nomor baris yang ingin kalian cari.

Selecting Elements in Console

Use Multiple Carets & Selections

Tools yang kali ini sangat bagus sekali kalian dapat menulis Source Kode yang sama secara berbarengan, kalian cukup menekan Ctrl dan arahkan pada baris yang ingin kalian tulis.

Preserve Log

Tools ini berfungsi untuk mengecek bug yang muncul sebelum halaman website kalian di ubah.

Pretty Print {}

Pretty Print {} berfungsi untuk meraphikan kembali file atau kode yang terlihat berantakan atau kode yang sudah di Minified.

Device Emulation Sensors

Fitur lain yang keren yaitu Device Emulation Sensore yang berfungsi untuk mensimulasikan sensor perangkat mobile, seperti layar sentuh dan akselerometer.

Color Picker

Ketika kalian memilih warna dalam editor style, kalian dapat mengklik pada preview warna dan pemetik akan muncul. Sedangak Color piker pada DevTools ketika kalian buka, pointer mouse kalian akan berubah menjadi kaca pembesar yang di gunakan untuk memilih warna dengan akurasi pixel.

Force Element State

Force element state pada DevTools Google Chrome berfungsi untuk melihat Pseudo-Class yang ada pada CSS seperti :hover, :focus, sehingga kita dapat mengeditnya dengan mudah.

Visualize the shadow DOM

Web Browser membangun hal-hal seperti teks, tombol dan masukan dari elemen dasar lainnya yang biasanya tersebunyi dari pandangan kita. Namun jika kalian ingin melihat elemen-elemen yang tersebunyi tersebut, kalian bisa ke Settings -> General -> and Toggle show user agent shadow DOM, yang akan menampilkan mereka di tab elemen.

Select next occurrence

Select next occurrence pada DevTools Google Chrome berfungsi untuk mengedit file yang ada pada sources tab secara bersamaan. Untuk menggunakannya kalian cukup menekan tombol Ctrl + D.

Change color format

Gunakan Shift + klik pada Preview warna untuk mengubah format warna antara RGBA, HSL, dan Heksadesimal.

28 Maret 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat