Tools Pengembang Master Chrome: Fitur Terbaik Google Chrome yang Tidak Anda Gunakan

Tools Pengembang Master Chrome: Fitur Terbaik Google Chrome yang Tidak Anda Gunakan

Tools Pengembang Master Chrome: Fitur Terbaik Google Chrome yang Tidak Anda Gunakan

Google Chrome adalah peramban web yang luar biasa, tetapi ada fitur yang lebih mengagumkan yang dibangun tepat di dalam Chrome yang jarang digunakan kebanyakan dari kita – ini disebut Alat Pengembang Chrome.

Bacaan Lainnya

Biarkan kata “Pengembang” tidak mengintimidasi Anda karena kami pengguna Chrome biasa, atau bukan pengembang, juga dapat memperoleh manfaat dari memiliki beberapa pengetahuan dasar tentang Alat Pengembang Chrome.

Tahukah Anda bahwa Anda dapat menggunakan Chrome sebagai editor WYSIWYG untuk halaman web? Atau bahwa Chrome dapat berfungsi sebagai kalkulator Matematika? Atau Anda dapat melakukan penghitungan tanggal di dalam Chrome?

Tutorial video ini akan memandu Anda melalui beberapa contoh di mana Anda dapat menggunakan Alat Pengembang.

Alat Pengembang Chrome untuk Non-Pengembang

Buka halaman demo ini di dalam Google Chrome di desktop lalu tekan Ctrl + Shift + I di keyboard (atau Cmd + Shift + I di Mac) untuk membuka Chrome Dev Tools. Sekarang klik ikon Kaca Pembesar di sudut kiri bawah Chrome, arahkan mouse ke judul halaman dan klik dua kali kode HTML yang dipilih di Alat Dev untuk mengedit judul tersebut.

 1. Atur ulang teks dan gambar pada halaman

Tools Pengembang Master Chrome: Fitur Terbaik Google Chrome yang Tidak Anda Gunakan

Dengan Chrome Dev Tools, Anda dapat dengan mudah mengubah urutan elemen saat muncul di halaman hanya dengan menyeretnya dengan mouse. Klik ikon kaca pembesar, arahkan kursor ke elemen halaman mana pun – baik itu paragraf teks, gambar, atau item daftar – lalu seret pilihan itu untuk menempatkannya di lokasi yang berbeda.

2. Bereksperimenlah dengan warna yang berbeda

Tools Pengembang Master Chrome: Fitur Terbaik Google Chrome yang Tidak Anda Gunakan

Halaman web sering menggunakan format heksadesimal untuk menulis warna tetapi jika format #AABBCC tidak masuk akal bagi Anda, tulis saja nama warna dalam bahasa Inggris biasa seperti Emas, Aqua, dan lainnya. Cukup ketik karakter pertama dan Chrome Dev Tools akan menampilkan semua warna yang tersedia yang dimulai dengan huruf itu.

3. Ungkap Kata Sandi Tersembunyi

Chrome dapat secara otomatis mengisi bidang kata sandi pada formulir masuk halaman web tetapi Anda tidak dapat melihat kata sandi itu karena tersembunyi di balik karakter asterisk. Namun Anda dapat menggunakan Alat Pengembang Chrome untuk mengubah jenis bidang masukan kata sandi dari “kata sandi” menjadi “teks” dan mengungkapkan kata sandi yang tersembunyi.

4. Edit Halaman Web Anda sebaris

Tools Pengembang Master Chrome: Fitur Terbaik Google Chrome yang Tidak Anda Gunakan

Halaman web tidak dapat diedit di browser tetapi ada sedikit trik yang memungkinkan Anda mengedit halaman web sebaris seperti yang Anda lakukan di pengolah kata. Buka Alat Pengembang Chrome, alihkan ke tab Konsol dan ketik document.body.contenteditable=true pada prompt perintah. Voila! Halaman menjadi dapat diedit.

5. Chrome sebagai Kalkulator

Tools Pengembang Master Chrome: Fitur Terbaik Google Chrome yang Tidak Anda Gunakan

Saat tab Konsol aktif, Anda dapat menulis ekspresi aritmatika dan juga melakukan penghitungan tanggal seperti berapa hari antara dua tanggal atau menulis tanggal sebagai string yang dapat dibaca manusia. Sedikit mengetahui objek Date dalam JavaScript akan berguna. Chrome menyimpan nilai perhitungan sebelumnya dalam variabel \$_ khusus yang dapat digunakan dalam perhitungan panjang.

6. Ekstrak Informasi dari Halaman Web 

Anda dapat menjalankan perintah multi-baris di jendela konsol untuk mengurai dan mengekstrak data dari halaman web. Misalnya, pemilih \$\$(‘a’) akan menampung semua hyperlink yang disematkan di halaman. Anda kemudian dapat menggunakan loop for sederhana untuk mengekspor hyperlink ini sebagai teks biasa.

url = \$\$(‘a’); untuk (url dalam url) console.log ( urls[url].href );

Ekstrak Informasi dari Halaman Web

7. Palsu Lokasi Anda

Beberapa web mungkin meminta lokasi geografis Anda untuk personalisasi dan dengan Alat Pengembang Chrome, Anda dapat dengan mudah memalsukan lokasi. Klik roda gigi Pengaturan di Alat Dev dan bagikan kumpulan nilai garis lintang dan garis bujur yang berbeda dengan situs tersebut.

Sumber Daya Terbaik untuk Mempelajari Alat Pengembang Chrome

Berikut adalah beberapa sumber online bagus yang akan membantu Anda menguasai Alat Pengembang Chrome.

 •         codeschool.com – Kelas online oleh Paul Irish dari tim Chrome ini akan membantu Anda mencoba dan menjelajahi semua fitur Alat Pengembang Chrome.

•         developers.google.com – Dokumentasi resmi dengan banyak tip dan trik untuk membantu Anda menguasai Alat Pengembang.

•         vimeo.com – Patrick Dubroy dari tim Chrome memberikan demonstrasi mendalam tentang beberapa fitur Chrome Dev Tools yang kurang dikenal.

•         youtube.com – Ilya Grigorik, advokat pengembang di Google, membahas fitur-fitur canggih dari Dev Tools.

•         youtube.com – Paul Irish kembali membahas fitur baru Chrome Dev Tools di acara Google I/O tersebut. 

Tools Pengembang Master Chrome: Fitur Terbaik Google Chrome yang Tidak Anda Gunakan

Pos terkait

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *