8 Fitur Chrome DevTools yang Kurang Dikenal tapi MEMBUNUH

Chrome DevTools adalah salah satu alasan terbesar pengembang menolak menyentuh browser lain.

Tetapi kebanyakan dari kita hanya menggunakan sedikit fitur, tetap tidak menyadari banyak fitur luar biasa lainnya yang dirilis secara diam-diam.

Mari kita temukan beberapa permata tersembunyi ini!

Setiap orang memiliki sistem operasi favorit, platform perangkat keras, jenis perangkat, faktor bentuk perangkat, dll. Namun satu hal yang sama untuk semuanya β€” mereka menjalankan browser Chrome dan hanya browser Chrome! Saya pikir aman untuk mengatakan bahwa perang browser telah berakhir, dan Chrome menang dengan meyakinkan.

Pengguna Windows menggunakan browser default hanya untuk mengunduh Chrome dan setelah itu menggunakan Chrome, mengabaikan semua “rekomendasi” oleh Windows. Hal yang sama berlaku untuk perangkat Apple (terutama MacBook dan perangkat layar yang lebih besar), di mana pengguna dan pengembang menghindari Safari, meskipun Apple memiliki banyak klaim dan taktik konversi yang kuat.

Dan jika perangkat tidak menjalankan Chrome, kemungkinan besar itu menjalankan spin-off yang kompatibel dengan Chrome seperti Berani atau Vivaldi. Ya, saya tahu, secara teknis, browser ini tidak berbasis Chrome, tapi itu pembahasan lain. Rata-rata pengguna mungkin menggunakan browser lain ini untuk alasan ideologis atau khusus, tetapi jika menyangkut pengembang, tidak ada browser lain yang terlihat kecuali Chrome.

Bahkan fakta bahwa itu adalah monster pemakan ingatan akan diabaikan. Alasannya sederhana: Alat Pengembang Chrome.

Sumber gambar: Dokumen resmi Chrome DevTools

Sekarang, jika Anda membaca artikel ini, aman untuk berasumsi bahwa Anda adalah pengguna yang kuat, pengotak-atik, pengembang web, atau sesuatu yang serupa. Karena itu, tidak ada dari kita yang memerlukan pengenalan DevTools, cara membukanya, berbagai fiturnya, dll.

Alih-alih, tanpa membuang waktu, mari selami langsung beberapa fitur Chrome DevTools yang kurang dikenal namun sangat berguna.

Modus Desain

Salah satu hal yang rutin dilakukan developer adalah memeriksa elemen di halaman, lalu memodifikasi HTML-nya untuk mempratinjau sesuatu atau menguji efek perubahan.

Namun, bekerja dengan HTML secara langsung di DevTools bukanlah hal yang paling mulus – mengarungi sup tag, berusaha keras untuk menemukan braket pembuka/penutup yang tepat, dan berurusan dengan jumlah spasi kosong yang konyol saat mengedit teks (spasi putih itu jelas hilang dari dokumen yang Anda lihat), adalah beberapa masalah yang harus Anda tangani. Lebih buruk lagi jika Anda seorang desainer dan tidak ingin menyaring kekacauan.

Berikut tangkapan layar dari salah satu halaman situs web ini (techking.id):

HTML yang bersarang dalam dan kelas CSS yang misterius dan membingungkan merupakan tipikal situs web non-sepele mana pun saat ini, di mana pengalaman dengan DevTools kurang optimal, untuk sedikitnya. 🀭

Tapi ada fitur DevTools yang disebut Design Mode, yang bisa mengurangi rasa sakit dalam banyak kasus. Menggunakan Mode Desain (omong-omong, itu bukan nama resminya; itu hanya orang yang menamainya karena cara aktivasi dan fungsinya β€” jangan khawatir, kita akan lihat nanti!), perubahan ke halaman dapat dibuat secara visual dan hidup, seperti mengedit spreadsheet atau editor teks! Satu-satunya tangkapan adalah bahwa fitur ini tidak aktif secara default, dan mengaktifkannya sedikit memusingkan, terutama untuk non-pengembang.

Bagaimanapun, melakukannya cukup sederhana; yang perlu Anda lakukan hanyalah mengikuti petunjuk di bawah ini. Tergantung di mana Anda duduk di kurva kecanggihan pengguna, ini mungkin sangat mudah atau cukup sulit. Inilah yang harus dilakukan:

  • Pastikan halaman web yang ingin Anda edit dimuat, dan Anda sedang melihatnya (yaitu, tab yang dimaksud adalah yang aktif).
  • Buka panel DevTools seperti biasa (pintasan keyboard, klik mouse, apa pun). Saya suka menggunakan pintasan keyboard, dan di Mac, Opt + Cmd + I melakukan tugasnya.
  • Sekarang, dengan DevTools terbuka, buka tab bernama “Console”. Beberapa dari Anda mungkin memutar mata melihat betapa konyol, dan jelas semua ini, tapi hei, mari kita pikirkan juga (ratusan?) Ribuan orang di luar sana yang berjuang saat bekerja dengan konsol browser dan JavaScript (untuk alasan apa pun ).
  • Klik pada baris pertama di sebelah kursor, yang kemudian akan menampilkan prompt pengetikan, dan sekarang Anda dapat menulis kode JavaScript di sana (lihat tangkapan layar sedikit lebih jauh di bawah).
  • Sekarang kita perlu menulis beberapa kode JavaScript. Jangan khawatir, karena yang perlu Anda tulis/ketik sangat singkat dan mudah: document.designMode = β€œon”. Anda juga dapat menyalin dan menempelkan kode dari halaman ini (jika Anda melakukannya, pastikan pemformatannya tidak disalin β€” kami hanya memerlukan teks biasa) atau jika Anda merasa yakin, ketikkan.
  • Tekan Enter/Kembali.
  Daftar Pemahaman dengan Python – Dengan Contoh

“Itu dia??!”

Ya, itu saja!

Sekarang Anda dapat dengan bebas mengedit halaman seolah-olah itu adalah dokumen. Lihat contoh video ini tempat saya mengedit langsung situs web Spotify menggunakan Mode Desain:

Fitur Mode Desain, meskipun menarik, bukanlah peluru perak; Anda tidak dapat, misalnya, dengan mudah menyalin-tempel tombol, mengubah tampilannya, dan sebagainya. Jumlah sebenarnya yang dapat dilakukannya dibandingkan dengan editor halaman web visual impian sangat rendah; namun, ini memecahkan kasus penggunaan di mana konten perlu diubah secara visual dan saat itu juga.

Yang mengatakan, tidak terlalu mengada-ada untuk mengklaim bahwa orang-orang Chrome sedang menguji seberapa baik fitur ini diterima; jika menemukan penerimaan yang baik dan kasus penggunaan yang kuat, masuk akal untuk berharap bahwa kemampuan pengeditan yang lebih kuat akan segera menyusul! 🀞🏻🀞🏻

Simulasi kondisi jaringan

Tab Jaringan di Chrome DevTools mungkin yang paling banyak digunakan (saya tidak punya datanya, tentu saja, tetapi sebagai pengembang web, saya cenderung menggunakan tab Konsol mungkin 20-30% dari waktu, dan Tab jaringan sepanjang waktu). Ini memberi kami segala macam informasi tentang permintaan yang dibuat dari halaman, jenisnya, metadata/header, status, kemajuan pengunduhan aset (gambar, lembar gaya, dll.), waktu muat, dan sebagainya. Dengan kegunaan yang begitu luar biasa, tidak heran jika tab Jaringan menjadi yang paling umum.

Namun, mudah untuk melewatkan fitur yang sedang kita diskusikan; Anda mungkin tidak memperhatikan dropdown yang tidak berbahaya yang menyatakan hal yang sudah jelas: Online.

Jika Anda mengeklik ini, Anda akan melihat tarik-turun dengan berbagai opsi yang memungkinkan Anda membatasi kecepatan jaringan: 3G Cepat, 3G Lambat, Offline, dll. Meskipun ada berbagai kasus penggunaan untuk opsi ini, yang paling umum adalah menguji situs web kinerja pada jaringan lambat atau perilaku aplikasi web saat offline (dengan asumsi kemampuan tersebut ditambahkan).

Mari kita coba ini. Saya akan menyetel jaringan ke “3G Lambat” dan memuat ulang halaman yang sama dari tangkapan layar sebelumnya. Sebelum saya melakukannya, perhatikan di tangkapan layar sebelumnya bagaimana pada koneksi jaringan saya saat ini (broadband 40 Mbps), sebagian besar aset diunduh dalam waktu kurang dari 100 milidetik.

Dan sekarang, waktunya untuk melihat apa yang dilakukan 3G lambat terhadapnya.

Apa bedanya!

Perhatikan bahwa waktu pemuatan aset sekarang berada dalam kisaran 5-10 detik. Selain itu, situs selesai memuat sepenuhnya dalam 17,25 detik! Ya, saya tahu apa yang Anda pikirkan, tetapi Anda harus mempertimbangkan bahwa pada jaringan 3G yang lambat, setiap situs web modern akan membutuhkan waktu beberapa detik untuk dimuat. Apakah Anda ingin memuat cepat di jaringan lambat adalah hal lain, meskipun secara keseluruhan, itu harus menjadi keputusan bisnis di mana keuntungan membenarkan upaya tersebut.

Pada tangkapan layar di atas, perhatikan ikon peringatan di tab Jaringan. Itulah cara Chrome untuk mengingatkan Anda bahwa Anda membuat beberapa perubahan non-default dan terus-menerus, dan kecuali Anda tahu apa yang Anda lakukan, Anda mungkin harus mengatur ulang.

Pemilih warna interaktif

Memeriksa elemen DOM di DevTools adalah sesuatu yang sering kita lakukan setiap hari. Kami juga terbiasa dengan bagian detail CSS yang ditampilkan di samping, dan kami tahu kami dapat mengeditnya dan langsung melihat hasilnya.

Satu kemudahan kecil yang tersembunyi di antara semua ini adalah jika Anda mengeklik properti warna CSS, antarmuka pemilih warna yang familier akan muncul!

Perhatikan bahwa ini bukan pemilih warna dasar. Ini memungkinkan Anda mengontrol transparansi, mengubah sistem warna yang digunakan, memilih warna langsung dari halaman, dan banyak lagi.

Jadi, lain kali Anda bereksperimen dengan warna aksen situs, misalnya, Anda tidak perlu menghitung atau menebak nilai yang tepat untuk bayangan yang Anda pikirkan! Nyatanya, banyak orang suka mendesain situs web langsung di browser; bagi mereka, fitur seperti ini adalah anugerah! πŸ™‚

Memantau acara di elemen halaman

Kami sering berada dalam situasi di mana kami berharap kami tahu apa yang terjadi dengan satu elemen tertentu yang kami minati. Hal ini terutama berlaku saat menggunakan jQuery dalam basis kode non-sepele β€” baik milik Anda atau milik orang lain; penangan acara dan logika tersebar di semua tempat, dan melacak bug bisa menjadi mimpi buruk.

  Perbaiki Scripted Diagnostics Native Host Tidak Berfungsi

Untungnya, Chrome DevTools memiliki fitur bagus hanya untuk ini. Itu akan mengamati elemen yang ditunjukkan untuk Anda dan mencatat peristiwa ke konsol. Namun ada sedikit kekecewaan: fitur ini tidak memiliki kemampuan pemilihan elemen berdasarkan nama kelas CSS. Jadi, cara jQuery dari $(β€œ#email”) tidak tersedia. πŸ™‚

Dengan itu, mari kita lihat bagaimana membuatnya bekerja. Kita mulai dengan melakukan “pemeriksaan elemen” sederhana menggunakan inspektur DevTools. Ya, itu adalah alat inspeksi yang sama yang kita gunakan setiap hari.

Pada tangkapan layar di bawah, saya menggunakan alat inspektur untuk menyorot masukan teks. Dengan “menyorot”, saya tidak bermaksud bahwa elemen pada halaman disorot (bukan seperti yang Anda lihat); alih-alih, kursor inspektur diklik pada masukan teks, dan kode HTML terkait di DevTools disorot.

Melakukan hal ini menargetkan elemen yang sedang diperiksa untuk pemantauan peristiwa, yang membuat elemen dapat diakses sebagai variabel JavaScript khusus yang disebut $0. Selanjutnya, memastikan saya tidak mengklik di tempat lain di jendela browser secara sembarangan (terutama bagian kode HTML), saya mengklik Konsol dan melampirkan pendengar acara untuk input teks ini. Untuk ini, yang saya butuhkan hanyalah satu baris kode: monitorEvents($0, ‘mouse’). Bagian “mouse” di sini memberi tahu Chrome bahwa saya hanya tertarik menonton acara berbasis mouse.

Segera setelah saya menekan Enter/Return, pemantauan diaktifkan, dan jika sekarang saya mengarahkan kursor atau mengklik input teks, peristiwa tersebut dicatat ke konsol sebagai objek JavaScript:

Seperti yang Anda lihat di tangkapan layar, beberapa jenis peristiwa mouse ditangkap saat saya mengklik elemen, mengetik nama saya, lalu memindahkan mouse menjauh (peristiwa pengetikan, yaitu peristiwa keyboard, tidak dicatat). Peristiwa tersebut adalah objek JavaScript itu sendiri, seperti yang terlihat jelas dari tangkapan layar; setiap objek acara berisi sejumlah besar informasi. Misalnya, saya memperluas objek acara “klik”, dan jumlah properti tidak dapat ditampung semuanya dalam satu tangkapan layar!

Saya sangat menganjurkan Anda untuk mencoba fitur ini segera karena ini pasti akan menyelamatkan Anda dari banyak sakit kepala dalam proyek Anda yang akan datang!

Laporan kinerja situs web

Hari-hari ini, kinerja situs web membuat atau menghancurkan bisnis / situs web. Bahkan peningkatan kinerja yang kecil berarti keuntungan SEO yang besar serta kepuasan pengguna. Tapi bagaimana Anda tahu bagian mana dari situs web Anda yang perlu diperhatikan dan mana yang sudah bagus?

Apakah Anda perlu menyewa tim ahli dan menunggu dengan sabar selama beberapa hari?

Ya, ada beberapa kasus di mana hal itu perlu dilakukan, tetapi untungnya, Chrome DevTools dapat membantu kita semua. Di versi terbaru Chrome (akhir 2020), Anda akan menemukan tab Lighthouse di DevTools. Beberapa bulan yang lalu, itu disebut Audit, dan cukup membingungkan, itulah nama yang akan Anda temukan di dokumen resmi saat penulisan. Bagaimanapun, intinya Lighthouse dulunya adalah situs web yang trendi untuk memeriksa kinerja situs web secara gratis, tetapi kemudian Google menghapusnya (tidak ada alasan yang diberikan). Untungnya, fungsi hebat yang sama kemudian muncul kembali di DevTools.

Untuk menghasilkan laporan kinerja, yang perlu Anda lakukan hanyalah menekan satu tombol setelah halaman yang Anda minati dimuat:

Seperti yang Anda lihat di sisi kanan tangkapan layar, ada beberapa opsi untuk mengontrol berapa banyak informasi yang Anda inginkan (dan, tentu saja, apa yang ingin Anda uji). Setelah Anda puas dengan pengaturannya, tekan tombol biru besar itu, duduk, dan rileks. Beberapa detik kemudian, Anda akan mendapatkan laporan bermanfaat yang terlihat seperti ini:

Angka yang Anda lihat di tangkapan layar di atas menunjukkan skor keseluruhan untuk setiap kategori. Kategori untuk Aplikasi Web Progresif (PWA) berwarna abu-abu, mungkin karena situs web ini tidak memiliki kemampuan PWA. Juga, seperti yang Anda tahu dari ukuran bilah gulir di tangkapan layar (di paling kanan), ini adalah laporan yang panjang.

Berikut adalah bagian dari bagian performa:

Saya tidak akan mengklaim bahwa Lighthouse dan sarannya adalah cawan suci kinerja situs web, tetapi ini sangat membantu; itu karena pemilik dan pengembang situs web jarang memiliki petunjuk tentang masalah apa yang ada dan bagaimana cara mengatasinya.

  11 Solusi Text to Speech Terbaik untuk Penggunaan Bisnis dan Pribadi

Sejujurnya, bahkan saya merasa tersesat sebagai pengembang web, karena kinerja dan pengujian cenderung menjadi semacam spesialisasi. Dengan demikian, Lighthouse adalah alat yang kurang dikenal dan kurang dihargai, sekarang menjadi bagian dari Chrome DevTools, yang sangat berguna bagi pemilik bisnis dan pengembang/sysadmin.

Kecakapan mengedit kode

Tab Sumber di DevTools memungkinkan kita mengakses berbagai file yang dimuat oleh situs web. Ini juga memiliki kemampuan seperti mengedit kode, menyimpan cuplikan, dll. Hal ini seharusnya tidak mengejutkan bagi pengembang web. Namun, DevTools juga memiliki beberapa kemudahan bawaan yang membuat hidup lebih mudah bagi pengembang yang terbiasa dengan IDE kode favorit mereka.

DevTools menggunakan beberapa pintasan keyboard terkenal yang akan menghemat waktu Anda dan meminimalkan frustrasi perselisihan kode. Misalnya, Ctrl + D (atau Cmd + D di Mac) dapat digunakan untuk menyorot beberapa kemunculan kata. Demikian pula, menahan Ctrl (atau Cmd di Mac) dan mengklik di banyak tempat dalam kode memberi Anda banyak kursor. Lihat video di bawah ini untuk mendapatkan ide yang lebih baik:

Jika menurut Anda ini keren, pastikan untuk mempelajari dokumen resmi untuk memanfaatkan semua fitur pengeditan kode yang ditawarkan DevTools.

Mengontrol status elemen DOM

Terkadang kami menguji atau men-debug sesuatu, tetapi perilaku yang kami kejar hanya tersedia dalam status elemen tertentu. Bergantung pada keadaannya, Anda mungkin akan mengalami masa-masa sulit; bagi saya, ini adalah status “arahkan”, seingat saya membuang banyak waktu untuk mencoba mengatur waktu tindakan melayang atau menggunakan CSS sementara tambahan, dll.

Untungnya, Chrome DevTools memiliki cara mudah untuk mengubah status elemen yang diperiksa. Terlebih lagi, opsi untuk melakukannya ada di sana jika kita mengklik kanan elemen (di tab Elemen), tetapi mengingat banyaknya fitur dan tekanan pekerjaan sehari-hari, mudah untuk mengabaikan ini:

Ya, sesederhana itu!

Sekarang, Anda tidak perlu memasukkan logika pengujian bersyarat ke dalam kode Anda, menulis CSS tambahan, atau melewati rintangan lain saat mengamati elemen dalam status berbeda.

Panel alat

Terakhir namun tidak kalah pentingnya dalam daftar ini adalah panel Alat. Ini adalah fitur lain yang sangat berguna yang tersembunyi dengan baik dan hanya dapat dilihat menggunakan pintasan keyboard. Seperti namanya, panel Alat bukanlah alat tunggal tetapi semacam dasbor tempat hampir semua fungsi DevTool tersedia. Karena ada terlalu banyak fungsi yang menawarkan fungsionalitas DevTools secara keseluruhan, bilah pencarian tersedia tepat di bagian atas.

Untuk mengaktifkan panel Tools, pastikan Anda berada di panel DevTools lalu tekan Ctrl + Shift + P (atau Cmd + Shift + P untuk pengguna Mac):

Panel Alat penuh dengan kemampuan dan kejutan. Misalnya, tahukah Anda bahwa Anda bisa mengambil tangkapan layar langsung dari DevTools?

Saya yakin tidak, karena Anda harus menjalankan panel Alat dan mengetik “tangkapan layar” di bilah pencarian untuk mengungkap bahwa:

Anda juga akan melihat beberapa opsi untuk mengambil screenshot, termasuk satu untuk node DOM yang dipilih! Jelajahi panel Alat lebih lanjut, dan saya jamin Anda tidak akan kecewa!

Jika Anda perlu mengambil screenshot halaman web mana pun dari jarak jauh, lihat alat Screenshot techking.id.

Kesimpulan

Peramban Chrome itu sendiri kaya fitur, tetapi yang paling menonjol adalah penawaran DevTools. Seperti yang kita lihat di artikel ini, ada beberapa fitur yang tersembunyi dengan baik – dan yang lainnya tersembunyi di depan mata – yang tidak diketahui oleh sebagian besar pengguna. Mengapa fitur ini disembunyikan?

Saya kira beberapa di antaranya sangat eksperimental (seperti Mode Desain), dan pengembang Chrome ingin mempersulit pengguna sehari-hari untuk menemukan fitur ini. Untuk banyak fitur lainnya, saya yakin ini hanyalah kasus kelebihan informasi: jika ada, katakanlah, 120 fitur, dengan beberapa di antaranya memiliki sub-fitur dan sebagainya, hampir tidak mungkin mendesain UI yang tepat untuk fitur tersebut. sebuah skenario. Selain itu, Google secara historis belum melakukan pekerjaan yang baik dengan UX produknya, jadi begitulah. πŸ€·πŸ»β€β™‚οΈ

Terlepas dari itu, saya harap Anda menemukan beberapa fitur ini berguna. Namun yang lebih penting, saya harap artikel ini memberi Anda gambaran tentang apa yang tersembunyi di mana sehingga lain kali Anda ingin menjelajahi atau mencari sesuatu yang khusus, Anda tahu ke mana harus “menggali lebih dalam”. πŸ˜†