Apa yang Baru Dengan DevTools: Edisi Lintas-Browser

Alat pengembang browser terus berkembang, dengan fitur baru dan yang ditingkatkan ditambahkan setiap saat. Sulit untuk melacak, terutama saat menggunakan lebih dari satu browser. Dengan penawaran sebanyak itu, tidak mengherankan jika kami merasa kewalahan dan menggunakan fitur yang sudah kami ketahui alih-alih mengikuti yang baru.

Sayang sekali, karena beberapa di antaranya bisa membuat kita jauh lebih produktif.

Jadi, tujuan saya dengan artikel ini adalah untuk meningkatkan kesadaran tentang beberapa fitur terbaru di Chrome, Microsoft Edge, Firefox, dan Safari. Mudah-mudahan, ini akan membuat Anda ingin mencobanya, dan mungkin akan membantu Anda merasa lebih nyaman saat berikutnya Anda perlu men-debug masalah khusus browser.

Dengan mengatakan itu, mari kita langsung masuk.

Alat Pengembang Chrome

Tim Chrome DevTools telah bekerja keras untuk memodernisasi basis kode mereka (sekarang berusia 13 tahun). Mereka sibuk meningkatkan sistem pembangunan, bermigrasi ke TypeScript, memperkenalkan WebComponents baru, membangun kembali infrastruktur tema mereka, dan banyak lagi. Hasilnya, alat sekarang lebih mudah diperluas dan diubah.

Tetapi di atas pekerjaan yang kurang menghadap pengguna ini, tim juga mengirimkan banyak fitur. Biarkan saya membahas beberapa di antaranya di sini, terkait dengan debugging CSS.

Scroll-gertakan

Scroll-snapping CSS menawarkan pengembang web cara untuk mengontrol posisi di mana wadah yang dapat digulir berhenti menggulir. Ini adalah fitur yang berguna untuk, misalnya, daftar panjang foto di mana Anda ingin browser memposisikan setiap foto dengan rapi di dalam wadah yang dapat digulir secara otomatis untuk Anda.

Jika Anda ingin mempelajari lebih lanjut tentang scroll-gertakan, Anda dapat membaca dokumentasi MDN ini, dan lihat demo Adam Argyle di sini.

Properti utama dari scroll-gertakan adalah:

• scroll-snap-type , yang memberi tahu browser arah terjadinya snapping, dan bagaimana hal itu terjadi;
• scroll-snap-align , yang memberi tahu browser tempat untuk mengambil.

Chrome DevTools memperkenalkan fitur baru yang membantu men-debug properti utama ini:

• jika sebuah elemen mendefinisikan scroll-snapping dengan menggunakan scroll-snap-type , panel Elements menunjukkan lencana di sebelahnya.

• Anda dapat mengklik lencana scroll-snap untuk mengaktifkan overlay baru. Saat Anda melakukannya, beberapa hal akan disorot di halaman:
  • wadah gulir,
  • item yang bergulir di dalam wadah,
  • posisi di mana item disejajarkan (ditandai dengan titik biru).

Hamparan ini memudahkan untuk memahami apakah dan bagaimana hal-hal masuk ke tempatnya setelah menggulir. Ini bisa sangat berguna ketika, misalnya, item Anda tidak memiliki latar belakang dan batas di antara mereka sulit untuk dilihat.

Meskipun scroll snapping bukanlah fitur CSS baru, adopsinya agak rendah (kurang dari 4% menurut chromestatus.com), dan karena spesifikasinya berubah, tidak semua browser mendukungnya dengan cara yang sama.

Saya berharap fitur DevTools ini akan membuat orang ingin bermain lebih banyak dengannya dan akhirnya mengadopsinya untuk situs mereka.

Kueri kontainer

Jika Anda telah melakukan pengembangan web apa pun dalam beberapa tahun terakhir, Anda mungkin pernah mendengar tentang kueri kontainer. Ini telah menjadi salah satu fitur CSS yang paling banyak diminta untuk waktu yang lama dan telah menjadi masalah yang sangat kompleks bagi pembuat browser dan penulis spesifikasi untuk dipecahkan.

Jika Anda tidak tahu apa itu kueri kontainer, saya sarankan untuk membaca artikel Kueri Kontainer CSS Stephanie Eckles terlebih dahulu.

Singkatnya, ini adalah cara bagi pengembang untuk menentukan tata letak dan gaya elemen tergantung pada ukuran wadahnya. Kemampuan ini merupakan keuntungan besar saat membuat komponen yang dapat digunakan kembali karena kami dapat membuatnya beradaptasi dengan tempat mereka digunakan (daripada hanya beradaptasi dengan ukuran viewport yang cocok untuk kueri media).

Untungnya, banyak hal bergerak di ruang ini dan Chromium sekarang mendukung kueri penampung dan tim Chrome DevTools telah mulai menambahkan alat yang memudahkan untuk memulainya.

Kueri penampung belum diaktifkan secara default di Chromium (untuk mengaktifkannya, buka chrome://flags dan telusuri “kueri penampung”), dan mungkin masih perlu beberapa saat untuk mengaktifkannya. Selanjutnya, pekerjaan DevTools untuk men-debug mereka masih dalam tahap awal. Tetapi beberapa fitur awal telah mendarat.

• Saat memilih elemen di DevTools yang memiliki gaya yang berasal dari @container at-rule, aturan ini muncul di sidebar Styles pada panel Elements. Ini mirip dengan bagaimana gaya kueri media disajikan di DevTools dan akan memudahkan untuk mengetahui dari mana gaya tertentu berasal.

Seperti yang diperlihatkan tangkapan layar di atas, bilah sisi Gaya menampilkan 2 aturan yang berlaku untuk elemen saat ini. Yang paling bawah berlaku untuk elemen .media setiap saat dan menyediakan gaya defaultnya. Dan yang teratas disarangkan dalam @container (max-width:300px) yang hanya berlaku bila penampung lebih sempit dari 300px.

• Selain itu, tepat di atas @container at-rule, panel Styles menampilkan tautan ke elemen yang menjadi tujuan aturan, dan mengarahkan kursor ke atasnya menampilkan informasi tambahan tentang ukurannya. Dengan cara ini Anda tahu persis mengapa kueri penampung cocok.

Tim Chrome DevTools secara aktif mengerjakan fitur ini dan Anda dapat mengharapkan lebih banyak lagi di masa mendatang.

Kolaborasi Kromium

Sebelum masuk ke fitur yang dimiliki browser lain, mari kita bicara sedikit tentang Chromium. Chromium adalah proyek sumber terbuka tempat Chrome, Edge, Brave, dan browser lainnya dibangun. Itu berarti semua browser ini memiliki akses ke fitur Chromium.

Dua dari kontributor paling aktif untuk proyek ini adalah Google dan Microsoft dan, dalam hal DevTools, mereka berkolaborasi dalam beberapa fitur menarik yang ingin saya bahas sekarang.

Alat Debug Tata Letak CSS

Beberapa tahun yang lalu, Firefox berinovasi di bidang ini dan mengirimkan inspektur grid dan flexbox pertama kalinya. Browser berbasis Chromium sekarang juga memungkinkan pengembang web untuk men-debug grid dan flexbox dengan mudah.

Proyek kolaboratif ini melibatkan para insinyur, manajer produk, dan desainer dari Microsoft dan Google, bekerja menuju tujuan bersama (pelajari lebih lanjut tentang proyek itu sendiri dalam pembicaraan BlinkOn saya).

Antara lain, DevTools sekarang memiliki fitur debug tata letak berikut:

• Sorot beberapa kisi dan tata letak fleksibel pada halaman, dan sesuaikan jika Anda ingin melihat nama atau nomor garis kisi, area kisi, dan sebagainya.

• Flex dan editor grid untuk bermain-main secara visual dengan berbagai properti.

• Ikon perataan dalam pelengkapan otomatis CSS memudahkan untuk memilih properti dan nilai.

• Sorot pada properti, arahkan kursor untuk memahami bagian halaman mana yang diterapkan properti.

Anda dapat membaca informasi lebih lanjut tentang ini di situs dokumentasi Microsoft dan Google.

Lokalisasi

Ini adalah proyek kolaboratif lain yang melibatkan Microsoft dan Google yang, sekarang, memungkinkan semua DevTools berbasis Chromium untuk diterjemahkan dalam bahasa selain bahasa Inggris.

Awalnya, tidak pernah ada rencana untuk melokalkan DevTools, yang berarti ini adalah upaya besar. Ini melibatkan memeriksa seluruh basis kode dan membuat string UI dapat dilokalkan.

Namun, hasilnya sepadan. Jika bahasa Inggris bukan bahasa pertama Anda dan Anda akan merasa lebih nyaman menggunakan DevTools dalam bahasa lain, buka Pengaturan ( F1 ) dan temukan tarik-turun bahasa.

Berikut adalah tangkapan layar dari tampilannya di Chrome DevTools:

Dan inilah tampilan Edge dalam bahasa Jepang:

Edge DevTools

Microsoft beralih ke Chromium untuk mengembangkan Edge lebih dari 2 tahun yang lalu sekarang. Sementara, pada saat itu, menyebabkan banyak diskusi di komunitas web, tidak banyak yang ditulis atau dikatakan sejak saat itu. Orang-orang yang bekerja di Edge (termasuk DevTools-nya) sibuk, dan browser memiliki banyak fitur unik sekarang.

Berbasis pada proyek sumber terbuka Chromium berarti Edge mendapat manfaat dari semua fitur dan perbaikan bug. Secara praktis, tim Edge menyerap perubahan yang dibuat di repositori Chromium di repositori mereka sendiri.

Namun selama sekitar satu tahun terakhir, tim mulai membuat fungsionalitas khusus Edge berdasarkan kebutuhan pengguna dan umpan balik Edge. Edge DevTools sekarang memiliki serangkaian fitur unik yang akan saya bahas.

Membuka, Menutup, dan Memindahkan Alat

Dengan hampir 30 panel berbeda, DevTools adalah perangkat lunak yang sangat rumit di browser apa pun. Namun, Anda tidak pernah benar-benar membutuhkan akses ke semua alat secara bersamaan. Faktanya, saat memulai DevTools untuk pertama kalinya, hanya beberapa panel yang terlihat dan Anda dapat menambahkan lebih banyak lagi nanti.

Di sisi lain, sulit untuk menemukan panel yang tidak ditampilkan secara default, bahkan jika itu bisa sangat berguna bagi Anda.

Edge menambahkan 3 fitur kecil, namun kuat, untuk mengatasi hal ini:

• tombol tutup pada tab untuk menutup alat yang tidak Anda perlukan lagi,
• a + (plus) tombol di akhir bilah tab untuk membuka alat apa pun,
• opsi menu konteks untuk memindahkan alat.

GIF berikut menunjukkan bagaimana menutup dan membuka alat di area utama dan laci dapat dilakukan di Edge.

Anda juga dapat memindahkan alat antara area utama dan area laci:

• mengklik kanan pada tab di bagian atas menunjukkan item "Pindahkan ke bawah", dan
• mengklik kanan pada tab di laci menunjukkan item "Pindahkan ke atas".

Mendapatkan Bantuan Kontekstual dengan DevTools Tooltips

Sulit bagi pemula dan pengembang berpengalaman untuk mengetahui semua tentang DevTools. Seperti yang saya sebutkan sebelumnya, ada begitu banyak panel sehingga Anda tidak mungkin mengetahui semuanya.

Untuk mengatasi ini, Edge menambahkan cara untuk langsung dari alat ke dokumentasi mereka di situs web Microsoft.

Fitur Tooltips baru ini berfungsi sebagai overlay yang dapat dialihkan yang menutupi alat. Saat diaktifkan, panel disorot dan bantuan kontekstual disediakan untuk masing-masing panel, dengan tautan ke dokumentasi.

Anda dapat memulai Tooltips dengan 3 cara berbeda:

• dengan menggunakan pintasan keyboard Ctrl + Shift + H di Windows/Linux ( Cmd + Shift + H di Mac);
• dengan masuk ke menu utama ( ... ), lalu masuk ke Bantuan, dan pilih “Toggle the DevTools Tooltips”;
• dengan menggunakan menu perintah dan mengetik “Tooltips”.

Menyesuaikan Warna

Dalam lingkungan pengeditan kode, pengembang suka menyesuaikan tema warna mereka untuk membuat kode lebih mudah dibaca dan lebih menyenangkan untuk dilihat. Karena pengembang web juga menghabiskan banyak waktu di DevTools, masuk akal jika ia juga memiliki warna yang dapat disesuaikan.

Edge baru saja menambahkan sejumlah tema baru ke DevTools, selain tema gelap dan terang yang sudah tersedia. Sebanyak 9 tema baru ditambahkan. Ini berasal dari VS Code dan karenanya akan familiar bagi orang-orang yang menggunakan editor ini.

Anda dapat memilih tema yang ingin digunakan dengan masuk ke pengaturan (menggunakan F1 atau ikon roda gigi di pojok kanan atas), atau dengan menggunakan menu perintah dan mengetik theme .

Firefox DevTools

Mirip dengan tim Chrome DevTools, orang-orang yang bekerja di Firefox DevTools sibuk dengan pembaruan arsitektur besar yang bertujuan untuk memodernisasi basis kode mereka. Selain itu, tim mereka sedikit lebih kecil akhir-akhir ini karena Mozilla harus memfokuskan kembali beberapa waktu terakhir. Namun, meskipun ini berarti mereka memiliki lebih sedikit waktu untuk menambahkan fitur baru, mereka masih berhasil merilis beberapa fitur menarik yang akan saya bahas sekarang.

Men-debug Scrollbar yang Tidak Diinginkan

Pernahkah Anda bertanya pada diri sendiri: "dari mana scrollbar ini berasal?" Saya tahu saya punya, dan sekarang Firefox memiliki alat untuk men-debug masalah ini.

Di panel Inspector, semua elemen yang menggulir memiliki lencana scroll di sebelahnya, yang sudah berguna saat menangani pohon DOM yang sangat bersarang. Di atas ini, Anda dapat mengklik lencana ini untuk mengungkapkan elemen (atau elemen) yang menyebabkan bilah gulir muncul.

Anda dapat menemukan lebih banyak dokumentasi tentangnya di sini.

Memvisualisasikan Urutan Tabing

Menavigasi halaman web dengan keyboard memerlukan penggunaan tombol tab untuk menelusuri elemen yang dapat difokuskan satu per satu. Urutan elemen yang dapat difokuskan menjadi fokus saat menggunakan tab adalah aspek penting dari aksesibilitas situs Anda dan urutan yang salah dapat membingungkan pengguna. Sangat penting untuk memperhatikan hal ini karena teknik CSS tata letak modern memungkinkan pengembang web untuk mengatur ulang elemen pada halaman dengan sangat mudah.

Firefox memiliki panel Accessibility Inspector yang berguna yang menyediakan informasi tentang pohon aksesibilitas, menemukan dan melaporkan berbagai masalah aksesibilitas secara otomatis, dan memungkinkan Anda mensimulasikan berbagai kekurangan penglihatan warna.

Di atas fitur ini, panel sekarang menyediakan hamparan halaman baru yang menampilkan urutan tab untuk elemen yang dapat difokuskan.

Untuk mengaktifkannya, gunakan kotak centang “Show Tabbing Order” di toolbar.

Anda dapat menemukan lebih banyak dokumentasi tentangnya di sini.

Alat Performa Baru

Tidak banyak area pengembangan web yang bergantung pada perkakas seperti halnya pengoptimalan kinerja. Di domain ini, panel Performa Chrome DevTools adalah yang terbaik di kelasnya.

Selama beberapa tahun terakhir, para insinyur Firefox telah berfokus pada peningkatan kinerja peramban itu sendiri, dan untuk membantu mereka melakukannya, mereka membangun alat profiler kinerja. Alat ini awalnya dibuat untuk mengoptimalkan kode asli mesin tetapi juga mendukung analisis kinerja JavaScript sejak awal.

Hari ini, alat kinerja baru ini menggantikan panel kinerja Firefox DevTools lama dalam versi pra-rilis (Nightly dan Edisi Pengembang). Ambillah untuk berputar ketika Anda mendapatkan kesempatan.

Antara lain, profiler Firefox baru mendukung berbagi profil dengan orang lain sehingga mereka dapat membantu Anda meningkatkan kinerja kasus penggunaan yang direkam.

Anda dapat membaca dokumentasi tentangnya di sini, dan mempelajari lebih lanjut tentang proyek di repositori GitHub mereka.

Inspektur Web Safari

Last but not least, mari kita bahas beberapa fitur Safari terbaru.

Tim kecil di Apple telah membuat dirinya sangat sibuk dengan berbagai peningkatan dan perbaikan di sekitar alat. Mempelajari lebih lanjut tentang Safari Web Inspector dapat membantu Anda menjadi lebih produktif saat men-debug situs Anda di perangkat iOS atau tvOS. Selain itu, ia memiliki banyak fitur yang tidak dimiliki DevTools lain, dan tidak banyak orang yang mengetahuinya.

Debug Grid CSS

Dengan Firefox, Chrome, dan Edge (dan semua browser berbasis Chromium) memiliki alat khusus untuk memvisualisasikan dan men-debug kisi CSS, Safari adalah browser utama terakhir yang tidak memilikinya. Nah, sekarang sudah!

Pada dasarnya, Safari sekarang memiliki fitur yang sama seperti DevTools browser lain di area ini. Ini bagus karena artinya mudah berpindah dari satu browser ke browser berikutnya dan tetap produktif.

• Lencana kisi ditampilkan di panel Elemen untuk menemukan kisi dengan cepat.
• Mengklik lencana akan mengaktifkan overlay visualisasi pada halaman.
• Panel Tata Letak baru sekarang ditampilkan di bilah sisi. Ini memungkinkan Anda untuk mengonfigurasi overlay grid, melihat daftar semua grid di halaman dan beralih overlay untuk mereka.

Yang menarik dari implementasi Safari adalah mereka benar-benar memahami aspek kinerja alat. Anda dapat mengaktifkan banyak overlay yang berbeda sekaligus, dan menggulir halaman tanpa menyebabkan masalah kinerja sama sekali.

Hal menarik lainnya adalah Safari memperkenalkan panel Elemen 3-panel, sama seperti Firefox, yang memungkinkan Anda melihat DOM, aturan CSS untuk elemen yang dipilih, dan panel Layout sekaligus.

Cari tahu lebih lanjut tentang Inspektur Grid CSS di posting blog WebKit ini.

Banyak Perbaikan Debugger

Safari dulu memiliki panel Sumber Daya dan Debugger yang terpisah. Mereka telah menggabungkannya ke dalam satu panel Sumber yang memudahkan untuk menemukan semua yang Anda butuhkan saat men-debug kode Anda. Selain itu, ini membuat alat ini lebih konsisten dengan Chromium yang biasa digunakan banyak orang.

Konsistensi untuk tugas-tugas umum penting dalam dunia lintas-browser. Pengembang web sudah perlu menguji di beberapa browser, jadi jika mereka perlu mempelajari paradigma baru saat menggunakan DevTools browser lain, itu bisa membuat segalanya lebih sulit daripada yang seharusnya.

Tetapi Safari juga baru-baru ini berfokus untuk menambahkan fitur inovatif ke debuggernya yang tidak dimiliki DevTools lain.

Skrip bootstrap:
Safari memungkinkan Anda menulis kode JavaScript yang dijamin berjalan terlebih dahulu sebelum skrip apa pun di halaman. Ini sangat berguna untuk instrumen fungsi built-in untuk menambahkan pernyataan debugger atau logging misalnya.

Konfigurasi breakpoint baru:
Semua browser mendukung beberapa jenis breakpoint seperti breakpoint bersyarat, breakpoint DOM, breakpoint peristiwa, dan banyak lagi.

Safari baru-baru ini meningkatkan seluruh rangkaian tipe breakpoint mereka dengan memberi mereka semua cara untuk mengonfigurasinya secara ekstensif. Dengan fitur breakpoint baru ini, Anda dapat memutuskan:

• jika Anda ingin breakpoint hanya mengenai ketika kondisi tertentu benar,
• jika Anda ingin breakpoint menjeda eksekusi sama sekali, atau hanya menjalankan beberapa kode,
• atau bahkan memutar bunyi bip audio sehingga Anda tahu beberapa baris kode telah dieksekusi.

queryInstances dan fungsi konsol queryHolders :
Kedua fungsi ini sangat berguna ketika situs Anda mulai menggunakan banyak objek JavaScript. Dalam beberapa situasi, mungkin menjadi sulit untuk melacak ketergantungan antara objek-objek ini, dan kebocoran memori mungkin mulai muncul juga.

Safari memang memiliki alat Memori yang dapat membantu menyelesaikan masalah ini dengan membiarkan Anda menjelajahi snapshot tumpukan memori. Tetapi terkadang Anda sudah tahu kelas atau objek mana yang menyebabkan masalah dan Anda ingin menemukan instance apa yang ada atau apa yang merujuk padanya.

Jika Animal adalah kelas JavaScript di aplikasi Anda, maka queryInstances(Animal) akan mengembalikan array dari semua instance-nya.

Jika foo adalah objek dalam aplikasi Anda, maka queryHolders(foo) akan mengembalikan array dari semua objek lain yang memiliki referensi ke foo .

Pikiran Penutup

Saya harap fitur-fitur ini akan bermanfaat bagi Anda. Saya hanya dapat merekomendasikan menggunakan beberapa browser dan membiasakan diri dengan DevTools mereka. Menjadi lebih akrab dengan DevTools lain dapat berguna ketika Anda harus men-debug masalah di browser yang tidak Anda gunakan secara teratur.

Ketahuilah bahwa semua perusahaan yang membuat browser memiliki tim yang bekerja di DevTools secara aktif. Mereka berinvestasi untuk menjadikannya lebih baik, lebih sedikit buggy, dan lebih kuat. Tim ini bergantung pada umpan balik Anda untuk membangun hal yang benar. Tanpa mendengar tentang masalah apa yang Anda hadapi, atau fitur apa yang tidak Anda miliki, akan lebih sulit bagi mereka untuk membuat keputusan yang tepat tentang apa yang harus dibangun.

Melaporkan bug ke tim DevTools tidak hanya akan membantu Anda saat perbaikan datang, tetapi juga dapat membantu banyak orang lain yang menghadapi masalah yang sama.

Perlu diketahui bahwa tim DevTools di Microsoft, Mozilla, Apple, dan Google biasanya cukup kecil dan menerima banyak umpan balik, jadi melaporkan masalah tidak berarti itu akan diperbaiki dengan cepat, tetapi itu membantu, dan tim tersebut mendengarkan .

Berikut adalah beberapa cara Anda dapat melaporkan bug, mengajukan pertanyaan, atau meminta fitur:

• Firefox DevTools
  • Firefox menggunakan Bugzilla sebagai pelacak bug publik mereka dan siapa pun dipersilakan untuk melaporkan bug atau meminta fitur baru dengan membuat entri baru di sana. Yang Anda butuhkan hanyalah akun GitHub untuk masuk.
  • Menghubungi tim dapat dilakukan di Twitter dengan menggunakan akun @FirefoxDevTools atau masuk ke obrolan Mozilla (temukan dokumentasi tentang obrolan di sini).
• Inspektur Web Safari
  • Safari juga menggunakan pelacakan bug publik untuk bug WebKit mereka. Berikut adalah dokumentasi tentang cara mencari bug dan melaporkan yang baru.
  • Anda juga dapat menghubungi tim di Twitter dengan @webkit.
  • Terakhir, Anda juga dapat memberi sinyal bug tentang Safari dan Safari Web Inspector menggunakan asisten umpan balik.
• Edge DevTools
  • Cara termudah untuk melaporkan masalah atau meminta fitur adalah dengan menggunakan tombol umpan balik di DevTools (gambar tongkat kecil di sudut kanan atas alat).
  • Mengajukan pertanyaan kepada tim bekerja paling baik melalui Twitter dengan menyebutkan akun @EdgeDevTools.
• Alat Pengembang Chrome
  • Tim mendengarkan umpan balik di milis devtools-dev serta di twitter di @ChromeDevTools.
• kromium
  • Karena Chromium adalah proyek sumber terbuka yang mendukung Google Chrome dan Microsoft Edge (dan lainnya), Anda juga dapat melaporkan masalah pada pelacak bug Chromium.

Dengan itu, terima kasih telah membaca!