Fitur debugging cerdas Polypane yang saya sukai

Saya sedang berupaya memperbarui situs web pribadi saya, begitulah saya menyebutnya <>Reproduksi resolusi tinggiYah, saya tidak akan menyebutnya sebagai desain ulang yang “lengkap”. Saya hanya membereskan semuanya, dan Polypane akan segera hadir. Saya menulis tentang betapa saya menikmati pengembangan dengan Polypane di blog pribadi saya pada bulan Maret 2023. Di blog saya, saya mengatakan bahwa saya menemukan hal-hal baru setiap kali saya membuka browser dan saya di sini untuk mengatakan bahwa ini adalah <>Itu masih terjadi Pada Agustus 2024.

Polypane, jika Anda belum mengetahuinya, adalah browser web yang dibuat khusus untuk membantu pengembang dalam berbagai cara berbeda. Fitur yang paling jelas adalah beberapa panel yang menampilkan proyek Anda dengan ukuran port berbeda:

Polypane Browser menampilkan ryantrimble.com dalam tiga ukuran port berbeda secara bersamaan

Saya tidak akan mencoba membuat daftar setiap fitur yang tersedia di Polypane; Saya akan menyerahkannya kepada teman saya dan pencipta acara tersebut, Kilian Valkhof. Sebaliknya, saya ingin berbicara tentang fitur keren yang baru saya temukan.

Tab garis besar

Di dalam sidebar Polypane Anda akan menemukan tab berbeda yang memberikan informasi berbeda tentang situs Anda. Misalnya, jika Anda bertanya-tanya bagaimana tampilan pratinjau media sosial untuk postingan blog terbaru Anda, Polypane siap membantu Anda. mati Faktur yang belum dibayar.

Kartu pratinjau menunjukkan cara melihat informasi grafik terbuka di Mastodon.

Namun, tab yang ingin saya fokuskan adalah Garis besar terperinci Di permukaan, tampaknya cukup mudah, karena Polypane memindai halaman dan memberi Anda tata letak judul, landmark, link, gambar, urutan fokus, dan bahkan pohon aksesibilitas seluruh halaman.

Bilah samping multipane, tab Kerangka, opsi Pilihan tampilan menampilkan berbagai tampilan yang tersedia: judul, fitur, tautan, gambar, urutan fokus, dan pohon aksesibilitas

Melihat halaman Anda dengan cara ini membantu Anda menemukan beberapa kesalahan yang jelas, namun Polypane tidak berhenti di situ. Tampilkan masalah Opsi ini akan menunjukkan beberapa masalah yang tidak jelas.

Bilah samping multi-panel, tab Garis Besar, Tampilan fitur, "Tampilkan masalah" Opsi ini diaktifkan. Dalam kerangkanya, teks berwarna merah menjelaskan kesalahan: Beberapa elemen spanduk ditemukan pada tingkat yang sama.

Pada tampilan fitur terdapat opsi untuk Tunjukkan potensi Ini juga menampilkan item yang dapat… <>mungkin Menjadi penanda halaman.

Bilah samping multi-panel, tab Garis Besar, Tampilan Fitur - Garis Besar menampilkan ikon merah yang menunjukkan item fitur potensial

Dalam tampilan kerangka ini, Anda juga dapat menampilkan overlay pada halaman dan menyorot lokasinya.

Tampilan area pandang laptop multi-panel dari ryantrimble.com Hamparan fitur diaktifkan, yang memilih item fitur berwarna biru sekaligus menampilkan nilainya

Sekarang, alasan saya menemukan fitur-fitur ini di bawah tab Outline adalah karena bug yang saya lacak, bug yang secara khusus terkait dengan urutan fokus. Jadi, saya membuka bagan Urutan Fokus Terperinci untuk memeriksa lebih lanjut.

Bilah samping multipane, tab Kerangka, Tampilan urutan fokus, menampilkan kerangka elemen apa saja pada halaman yang memiliki fokus

Saat itulah saya memperhatikan opsi untuk melihat overlay <>Untuk mengatur fokus.

Tampilan multi-panel pada laptop dengan overlay urutan fokus diaktifkan, menampilkan garis panduan yang menandai lokasi setiap item yang dapat menjadi fokus

Ini memberikan peta literal urutan fokus pada halaman Anda. Menurut saya ini sangat berguna saat memecahkan masalah, serta menjadi cara yang bagus untuk memvisualisasikan bagaimana seseorang menavigasi situs web Anda menggunakan keyboard.

Jenis fitur yang tampaknya kecil namun berguna ini banyak ditemukan di Poliban.

Alat yang luar biasa

Ketika saya menghubungi Kilian dan menyebutkan penemuan saya kepadanya, tanggapannya adalah “Semuanya ada saat Anda membutuhkannya!”

Saya bisa membuktikannya.


Fitur Debugging Cerdas Polypane yang Saya Suka awalnya diterbitkan di CSS-Tricks, bagian dari keluarga DigitalOcean. Anda harus mendapatkan buletin.

Sumber