Polypane - Browser untuk Pengembang Web yang Ambisius

• Browser desktop (berbasis Chromium) dengan fitur terintegrasi untuk pengembangan, debugging, dan pengujian situs web, termasuk desain responsif, aksesibilitas, dan pengujian performa
• Semua pekerjaan tersinkronisasi secara real-time, dan berbagai ukuran viewport dapat dilihat serta dimanipulasi secara bersamaan
  • Semua tindakan seperti klik, input, scroll, hover, dan lainnya langsung diterapkan ke semua viewport
• Tersedia di Mac, Windows, dan Linux, serta menawarkan uji coba gratis 14 hari

Ringkasan fitur utama

• Desain responsif

  • Dapat melihat semua viewport sekaligus, dari mobile hingga monitor 5K
  • Dapat menguji CSS breakpoint tanpa harus mengubah ukuran browser secara manual

• Analisis dan sinkronisasi real-time

  • Semua tindakan seperti scroll, klik, input, hingga hover tersinkronisasi secara real-time ke semua viewport
  • Konsol dan inspector elemen juga terintegrasi untuk mengurangi pekerjaan berulang

• Pemeriksaan aksesibilitas dan performa

  • Memeriksa struktur, metadata, dan aksesibilitas (A11y) secara real-time serta memberikan saran perbaikan
  • Dilengkapi lebih dari 40 alat debugging untuk pengujian dalam berbagai cara

• Dark mode dan pengujian berbagai media

  • Dapat menguji mode gelap/terang secara bersamaan tanpa mengubah pengaturan sistem operasi
  • Mensimulasikan berbagai kondisi media seperti reduced motion, mode hemat data, dan gaya cetak

• Pratinjau kartu media sosial

  • Mendukung pratinjau meta card untuk platform utama seperti Twitter(X), Facebook, Slack, LinkedIn, dan Discord
  • Menyediakan preview akurat hingga tingkat piksel, termasuk dalam light/dark mode dan saat di localhost

• Dukungan ekstensi developer tools

  • Dapat menggunakan berbagai ekstensi DevTools seperti React, Vue, Angular, Svelte, dan Redux
  • Karena berbasis Chromium, lingkungan pengembangannya terasa familier

Kelebihan khas Polypane

• Dapat menguji berbagai perangkat dan lingkungan hanya dengan satu browser
• Mempercepat workflow pengembangan dan desain hingga 5 kali lipat
• Paket all-in-one dengan alat debugging multifungsi, pemeriksaan aksesibilitas, sinkronisasi viewport, screenshot, real-time reloading, dan lainnya
• Berkembang berdasarkan umpan balik pengguna, dan merupakan proyek bootstrap yang 100% berfokus pada pengguna

Daftar fitur penting lainnya

• Pembuatan viewport tanpa batas
• Sinkronisasi keyboard, hover, dan scroll
• Grid overlay
• JSON viewer dan berbagai preset perangkat
• Deteksi horizontal overflow
• Perbandingan desain visual (diff)
• Simulasi buta warna
• Ikhtisar metadata
• Pemeriksa Web Vitals
• Emulasi sentuhan
• Deteksi tautan rusak
• Pengaturan custom header
• Fitur penyimpanan dan berbagi workspace

Kata dari pembuatnya

• Proyek yang dimulai oleh developer Kilian Valkhof untuk mengatasi ketidaknyamanan yang ia alami saat membangun banyak situs web
• Kecepatan kerja meningkat sekitar 60% dibandingkan saat hanya menggunakan Chrome, dan para pengguna juga merasakan peningkatan produktivitas 2 hingga 5 kali lipat
• Proyek yang dijalankan tanpa investasi, mengandalkan umpan balik dan langganan pengguna, dengan fokus pada pengembangan alat yang berpusat pada developer

Ringkasan ulasan pengguna

• Vivian Guillen: “Sangat cepat dan sinkronisasi scroll-nya luar biasa”
• Scott Tolinski: “Mudah menemukan masalah spasi antar breakpoint”
• Sara Soueidan: “Alat debugging-nya begitu hebat sampai membuat kagum”
• Kevin Powell: “Pemeriksaan aksesibilitas dan fitur debugging-nya luar biasa”
• Segun Adebayo (developer Chakra UI): “Alat yang wajib dimiliki untuk membangun aplikasi dan situs modern”

[nemorize]

https://responsiveviewer.org/
Ada juga versi yang didistribusikan sebagai ekstensi Chrome. Jika bersedia melepas beberapa fitur, Anda juga bisa langsung menggunakannya tanpa ekstensi.

[qyurila]

Anehnya, cukup sulit menemukan penyebutannya, tetapi jika menghubungkan akun GitHub Student, Anda bisa menggunakannya secara gratis. Berkat itu, saya memakainya dengan baik untuk proyek pribadi sebelumnya.

[luiseok]

Fiturnya memang agak kurang, tetapi ada browser serupa.
https://responsively.app/
Kalau Anda ragu karena Polypane berbayar, saya sarankan untuk mencobanya sekali.

[GN⁺]

Komentar Hacker News

• Halo, saya Kilian, pendiri dan satu-satunya pengembang Polypane. Menarik melihatnya muncul lagi di halaman depan
• Saya baru-baru ini pertama kali membuat desain web responsif modern dengan CSS, mempelajari flexbox dan grid, serta memakai berbagai browser dan emulator perangkat. Seandainya saya tahu aplikasi ini, saya rasa saya bisa menghemat banyak usaha
• Saya sudah sering memakai Polypane. Ini produk yang hebat, dan mampu mengemulasikan masalah perangkat yang halus yang tidak ditangani dengan baik oleh tampilan perangkat Chrome
• Saya sudah memakai Polypane lebih dari setahun, dan meskipun mungkin tidak cocok untuk semua orang, ini sangat pas untuk kebutuhan saya
  • Manajemen sesi membuat alur kerja tetap rapi
  • Desain yang mengutamakan responsivitas dengan panel untuk tampilan desktop dan mobile
  • Fitur tangkapan layar yang komprehensif termasuk anotasi
  • Anda mungkin bisa meniru fitur-fitur ini dengan browser atau plugin lain, tetapi saya suka karena semuanya sudah diatur secara bawaan sehingga tidak perlu konfigurasi tambahan
  • Dukungannya luar biasa. Saat saya mengalami masalah IDE yang tidak bisa menjalankan Polypane dengan benar, saya dibantu lewat Slack dan masalahnya cepat terselesaikan
  • Jika membaca percakapan di Slack, jelas terlihat bahwa mereka berdedikasi untuk membuat produk terbaik bagi penggunanya
• Andai ada browser yang bisa mengemulasikan browser di perangkat mobile secara akurat. Bukan sekadar mengubah ukuran layar; bahkan simulator iOS milik Apple pun gagal di bagian ini
• Kelihatannya ini mengemulasikan banyak hal, tetapi saya penasaran apa saja yang tidak bisa diemulasikan dengan baik
  • Sepertinya ini dibuat berbasis Chromium, jadi kemungkinan tidak bisa menampilkan masalah yang hanya muncul di Safari atau Mozilla
  • Mungkin ada di dokumentasi
  • Edit: ternyata ada di bagian bawah FAQ. Saya penasaran apakah ada keterbatasan lain yang sudah diketahui selain engine browser yang sebenarnya
• Hampir semua fiturnya tampaknya sudah ada di Firefox Developer Tools. Saya penasaran kenapa perlu browser baru. Rasanya ini juga bisa dibuat sebagai ekstensi
• Saya penasaran fitur apa saja yang ditawarkan dibanding Browserstack (terkait pengujian lintas browser)
• Saya penasaran apakah ada integrasi GenAI (Copilot, Claude, dll.)
  • Saya ingin terbantu untuk menjual produk ini ke manajer saya
• Saya berharap model harganya menyediakan pembelian sekali bayar. Ini terlihat hebat, tetapi saya rasa akan sulit membenarkan biaya bulanan/tahunan
• Keren sekali! Saya penasaran apakah ada kemungkinan mendapatkan diskon pelajar. Untuk sekarang saya akan mencoba uji coba gratisnya dulu