Viewport Studio

Masalahnya

Mode perangkat di Chrome DevTools cuma menampilkan satu layar, dan ekstensi yang mengemulasi perangkat lewat debugger memunculkan banner "started debugging this browser" di setiap tab. Mengecek layout di beberapa HP berarti resize berulang-ulang.

Solusinya

Ekstensi yang mengubah tab aktif menjadi studio perangkat. Situs dimuat di iframe asli, jadi tidak ada banner debugger, dan sampai empat perangkat tetap sinkron saat kita browsing.

Yang saya bangun

• Perbandingan sampai 4 perangkat berdampingan dengan navigasi dan scroll yang sinkron, termasuk carousel dan area scroll di dalam halaman.
• Screenshot dengan atau tanpa bingkai perangkat, termasuk tangkapan satu halaman penuh yang menampilkan header sticky sekali saja, serta rekam video ke MP4.
• Sepuluh preset HP, tablet, dan desktop, ukuran kustom, rotasi tanpa reload, dan pengganti user agent mobile.
• Privat sejak awal: tanpa panggilan jaringan, analytics, kode remote, atau build step. Diuji dengan unit test dan test end-to-end Playwright di CI, dirilis dengan lisensi MIT.