👃🏽 ⛱️ 😌 Alat pengembang Chrome favorit saya 🦍 🏟️ 🧕🏿

Selamat siang teman!

Alat Pengembang Chrome adalah toolkit yang sangat kuat untuk mengembangkan aplikasi web. Dengan menggunakan alat-alat ini, kita dapat menavigasi DOM, memeriksa permintaan server, menyempurnakan kinerja aplikasi, dll.

Di antara banyak fitur yang tersedia, ada beberapa yang sangat menarik. "Fitur" ini membantu mengurangi satu atau dua klik - bukankah itu sebabnya kami berkumpul di sini?

Gaya JQuery untuk mengakses DOM

jQuery adalah perpustakaan yang luar biasa. Dia telah mengelola web untuk seluruh era. Menurut beberapa laporan, lebih dari 70% situs web paling populer di dunia menggunakan versi jQuery ini atau itu. Ini adalah pencapaian luar biasa untuk perpustakaan yang ditulis pada tahun 2006.

API paling populer yang disediakan oleh jQuery adalah $, digunakan untuk memilih elemen DOM. Di konsol alat pengembang Chrome (selanjutnya disebut sebagai konsol), dimungkinkan untuk menggunakan pemilih $, yang merupakan alias dari document.querySelector ().

Misalnya, untuk mengklik tombol, Anda perlu melakukan yang berikut:

$$ adalah sinonim untuk document.querySelectorAll ():

Ada beberapa trik untuk bekerja dengan $. Terkadang pemilih terlalu rumit untuk mengetik secara manual, atau kita tidak bisa menentukan spesifisitas pemilih yang cukup. Jika kita memilih elemen di tab "Elemen", kita bisa mendapatkannya di konsol menggunakan variabel $ 0:

Bahkan, konsol memungkinkan Anda untuk mengakses 5 elemen terakhir yang dipilih. Elemen-elemen ini tersedia melalui variabel $ 0- $ 4, masing-masing:

Salin properti item

Tab Elemen sangat berguna. Ini menyimpan pohon DOM situs kami, memungkinkan Anda untuk melihat gaya elemen dan membuat perubahan pada mereka dengan cepat.

Suatu hal yang sangat keren yang saya temukan adalah kemampuan untuk menyalin properti elemen (dan tidak hanya) menggunakan menu konteks.

Misalnya, Anda bisa menyalin pemilih elemen: Pemilih

ini mungkin tidak cukup spesifik atau terlalu spesifik, tetapi tetap membantu debugging kode.

Seperti yang Anda lihat, kita juga dapat menyalin gaya elemen, "path" JS (document.querySelector (SELECTOR)) atau XPath.

Penyaringan Permintaan Jaringan

Terkadang kita harus bekerja dengan halaman yang mengirimkan banyak permintaan ke server. Maksudku, banyak permintaan.

Mengarungi alam liar ini untuk mencari permintaan tertentu bukanlah pekerjaan yang menyenangkan. Untungnya, Anda dapat memfilter kueri.

Serangkaian filter memungkinkan Anda untuk menampilkan kueri berdasarkan jenis, misalnya, XHR / Fetch, style sheet, skrip JS, gambar, dll.

Anda juga dapat menentukan kriteria Anda sendiri di bidang input yang terletak di atas filter:

Meniru kecepatan koneksi jaringan yang berbeda

Menggunakan tab "Jaringan", kami dapat menguji situs kami dalam kondisi kecepatan koneksi yang berbeda. Standarnya diatur ke online, di mana Anda sepenuhnya menikmati bandwidth koneksi Anda.

Selain online, "preset" seperti Fast 3G, Slow 3G dan offline juga tersedia, yang berbeda dalam kecepatan memuat halaman, kecepatan pengunduhan file dan waktu tunda. Jika Anda perlu meniru sesuatu yang lain, Anda dapat menggunakan tombol Tambah ... untuk menambahkan profil Anda sendiri:

Menggunakan Ekspresi Langsung di konsol

Apa itu Ekspresi Langsung?

Ekspresi Langsung adalah ekspresi yang terus-menerus "dievaluasi" di konsol. Misalkan Anda ingin melacak nilai suatu variabel. Anda dapat memasukkannya lagi dan lagi:

Berkat Live Expressions, Anda dapat fokus pada kode dan memungkinkan Chrome memantau perubahan secara independen:

Fitur ini tersedia untuk kedua variabel yang dideklarasikan di konsol dan variabel yang dideklarasikan dalam skrip.

Meniru berbagai perangkat

Mereka yang bekerja dengan aplikasi responsif terbiasa dengan perasaan yang Anda alami ketika Anda bekerja keras dan lama di keindahan tata letak halaman hanya untuk melihat bagaimana semuanya berantakan pada perangkat dengan resolusi yang berbeda.

Saya di sini bukan untuk membicarakan pertanyaan media, tetapi untuk menunjukkan cara menguji pekerjaan mereka.

Jika Anda mengklik tombol yang terlihat seperti tablet dan telepon, Anda akan melihat bagaimana perubahan area tampilan browser sesuai dengan ukuran berbagai perangkat.

Anda dapat memilih perangkat dari daftar preset yang berisi perangkat populer seperti iPhone X, iPad Pro, Pixel 2, Pixel 2 XL, dll. Daftar ini masih jauh dari selesai (tidak terlalu relevan), tetapi cukup untuk menyelesaikan sebagian besar masalah.

Jika perangkat yang Anda butuhkan tidak terdaftar, Anda dapat mengatur resolusi secara manual. Seperti yang Anda lihat, saya menetapkan izin saya sendiri untuk meniru OnePlus 6 (gadget sehari-hari saya):

Ubah status item

Sudahkah Anda menemukan situasi di mana Anda ingin bermain dengan gaya yang diterapkan ke elemen ketika Anda mengarahkan mouse ke atasnya (: melayang), tetapi setiap kali Anda memindahkan kursor ke tab gaya, elemen kehilangan melayang?

Alat pengembang memungkinkan Anda untuk memperbaiki keadaan suatu elemen. Kami dapat dengan mudah mengaktifkan / menonaktifkan keadaan seperti: aktif ,: melayang-layang ,: fokus ,: fokus-dalam dan: dikunjungi:

Ini adalah alat pengembang Chrome favorit saya. Terima kasih atas perhatian Anda.

Selamat coding!

Alat pengembang Chrome favorit saya