Cukup tekan Alt + M, tampilan web apa pun seketika masuk ke dalam bingkai smartphone presisi piksel dengan kurva konsentris sasis nyata, siap inspect element, bisa diputar portrait-landscape, tanpa bayar langganan software bulanan, dan tanpa mengorbankan memori laptop ruko.
- Problem (Masalah Harian):
Setiap web developer dan teknisi sistem pasti sering menguji responsivitas tampilan web di ponsel. Pilihan yang ada selama ini serba merepotkan:
- Fitur Device Mode bawaan DevTools browser tampil kaku tanpa sasis fisik, sehingga tidak memberikan gambaran visual nyata bagaimana situs dilihat oleh pengguna smartphone.
- Saat membuka website internal atau dashboard server yang memproteksi iframe via header
X-Frame-Options: SAMEORIGINatauCSP: frame-ancestors, layar langsung mogok dan menampilkan ikon dokumen rusak (sad face). - Aplikasi simulator komersial di pasaran meminta biaya langganan bulanan mahal ($10 hingga $15 per bulan) dan umumnya dibangun di atas runtime Electron rakus memori yang menyedot RAM lebih dari 1 GB.
- Agitate (Dampak Fisik pada Hardware): Bagi teknisi yang bekerja dengan hardware kerja ruko (laptop kantor standar Core i3 atau AMD APU dengan RAM terbatas 8 GB), membuka emulator komersial bersamaan dengan IDE dan browser membuat temperatur prosesor melonjak, kipas pendingin meraung bising, dan sistem operasi tersendat akibat thrashing memory. Selain itu, mempresentasikan desain web ke klien menggunakan DevTools polos terlihat amatir dan kurang meyakinkan.
- Solution (Solusi Rekayasa Mandiri): Mobile View - Device Frame Studio dirancang sebagai instrumen workbench mandiri: ekstensi Chromium Manifest V3 murni berbobot ultra-ringan (~103 KB) yang menginjeksikan sasis smartphone presisi 1:1 langsung ke atas halaman aktif. Dilengkapi pelucut blokir subframe deklaratif, tombol rotasi fisik instan, sistem desain Solid Matte Workstation yang dingin di GPU, dan server pemantau inotify Linux yang me-reload ekstensi secara otomatis di latar belakang. Nol bundler, nol kompilasi, dan bebas biaya lisensi selamanya.
Berikut diagram alur arus data dari saat pintasan keyboard dipicu hingga layar smartphone ter-render sempurna:
[ Jendela Browser Aktif ]
│ (Tekan Alt + M / Klik Ikon Ekstensi)
▼
[ background.js (Service Worker MV3) ]
│
├─► [ rules.json (Declarative Net Request Engine) ]
│ └─► Lucuti header X-Frame-Options & CSP frame-ancestors secara lokal
│
▼
[ content.js (DOM Injector) ]
│
├─► Inject #mv-studio-overlay (Z-Index: 2147483647)
│
├─► [ Topbar Island (Uniform 30px Baseline) ]
│ ├── Kapsul Brand : MOBILE VIEW (Solid Matte Slate)
│ ├── Segmented Chips : iPhone 15 Pro | Galaxy S24 | SE | iPad
│ ├── Dimensi Live : 393 × 852 px (Font Monospace Tabular)
│ ├── Saklar Rotasi : [Putar] (Shortcut 'R')
│ ├── Kontrol Skala : Fit to Screen vs 100% Asli
│ ├── Saklar Tema : Gelap (Matte) vs Terang (Neomorphic) (Shortcut 'T')
│ └── Panel Setelan : Modal Preferensi Bawaan (Shortcut ',')
│
└─► [ Sasis Fisik Smartphone (#mv-phone-frame) ]
├── Outer Frame : Dimensi Terluar = (screenW + 2*bezel) x (screenH + 2*bezel)
├── Kurva Konsentris: R_outer = R_inner + bezel (Kelengkungan Sasis Presisi)
├── Tombol Hardware : Power & Volume (Otomatis Berpindah saat Rotasi)
└── Viewport Iframe : Layar Murni 1:1 (Bebas Distorsi & Siap Inspect Element)
▲
│ (Long-Poll HTTP 127.0.0.1:8897)
[ dev-watcher.js (Inotify Kernel Watcher di Linux Workstation) ]
└─► Pantau modifikasi berkas proyek -> Auto-Reload tab browser seketika (Zero-Touch)
Semua arsitektur dibangun di atas prinsip zero build-step tanpa dependensi Node.js di sisi browser:
-
Layar Depan Workbench (HTML5 + CSS Solid Matte & Neomorphic):
Mengadopsi palet Solid Matte Workstation (
#0F131D) pada tema gelap untuk mengeliminasi beban kalkulasi GPU dari efek mika akrilik transparan (backdrop-blur heavy), dipadukan dengan Pure Neomorphic White (#FFFFFF) pada tema terang.- ...yang artinya laptop lawas spesifikasi ruko (Core i3 Gen 3 / AMD Ryzen APU) tetap dingin, baterai lebih awet, dan antarmuka beroperasi pada 60 FPS konstan.
-
Mesin Pelucut Header (Manifest V3 + Declarative Net Request):
Service worker deklaratif modern yang menyuntikkan aturan
rules.jsonuntuk menanggalkan headerX-Frame-OptionsdanContent-Security-Policy: frame-ancestorspada tingkat jaringan browser.- ...yang artinya website dengan proteksi frame-busting ketat maupun dashboard server internal localhost bisa langsung dipratinjau tanpa perlu repot memasang reverse-proxy.
-
Kalibrator Dimensi Layar 1:1 & Radius Konsentris:
Menghitung geometri bingkai secara matematis: sasis luar menampung padding bezel (
screenW + 2*bezel), sehingga area kaca dalam (.mv-screen-container) mengunci dimensi resolusi perangkat murni, dengan kelengkungan konsentris$R_{outer} = R_{inner} + \text{bezel}$ .- ...yang artinya media queries CSS (
@media (max-width: 393px)) teruji 100% akurat tanpa kehilangan piksel akibat tertelan batas tepi bingkai.
- ...yang artinya media queries CSS (
-
Penyimpanan Ganda Sinkron (Dual-Tier Persistence Engine):
Kombinasi
localStoragesinkron untuk penyajian 0ms saat boot pertama tanpa kedipan (zero layout shift), dipadukan denganchrome.storage.localasinkron.- ...yang artinya preferensi default tema, tipe smartphone pilihan, dan orientasi layar langsung tersinkronisasi di seluruh domain web yang Anda buka.
-
Watchdog Auto-Reload Mandiri (
dev-watcher.js): Server HTTP mini native berbasis sensor inotify kernel Linux (fs.watch) yang berjalan di background PM2 port 8897.- ...yang artinya saat Anda mengedit kode CSS atau JS, seluruh tab pengujian otomatis me-refresh seketika tanpa perlu menekan tombol reload manual di
chrome://extensions.
- ...yang artinya saat Anda mengedit kode CSS atau JS, seluruh tab pengujian otomatis me-refresh seketika tanpa perlu menekan tombol reload manual di
Pengujian performa dan geometri dilakukan langsung pada workstation Ubuntu Linux (Node hizam):
| Parameter Pengujian | Hasil Ukur Nyata | Catatan Teknis Sirkuit |
|---|---|---|
| RAM Footprint Ekstensi | < 25 MB | Vanilla JavaScript murni tanpa framework runtime berat |
| Beban RAM Dev Watcher | ~21 MB | Standalone Node.js native tanpa dependensi node_modules pihak ketiga |
| Konsumsi CPU Standby | 0.0% | Memanfaatkan event kernel inotify murni (tanpa polling loop agresif) |
| Latensi Buka Studio | < 18 ms | DOM overlay diinjeksikan secara instan ke tab aktif |
| Ukuran Berkas Paket (.zip) | 103 KB | Kompresi bersih mencakup 11 varian ikon multi-resolusi |
| Keselarasan Topbar | 0.0 px Offset | Seluruh 9 elemen bilah atas terkunci di ketinggian presisi 30.0 px |
| Akurasi Viewport Layar | 100% Presisi 1:1 | Zero-pixel loss: iPhone 15 Pro persis 393×852 px, S24 persis 360×780 px |
Mengapa membangun ekstensi mandiri jauh lebih menguntungkan bagi studio dan ruko teknisi:
| Komponen Evaluasi | Software House / Ekstensi Berbayar | Rancang Mandiri (Mobile View Studio) | Penghematan Riil |
|---|---|---|---|
| Biaya Lisensi Bulanan | Rp 75.000 – Rp 150.000 / bln (SaaS) | Rp 0 (Milik Sendiri Permanen) | Hemat Rp 1.800.000 / tahun |
| Biaya Toko Chrome Store | $5 USD (~Rp 82.000) per akun developer | Rp 0 (Distribusi Langsung GitHub Release) | Bebas Biaya Perantara |
| Privasi Kode & Data | Analitik dikirim ke server pihak ketiga | 100% Offline Lokal (Zero-Telemetry) | Keamanan OPSEC Terjamin |
| Waktu Tunggu Rilis | Antre review Google 1 – 3 hari kerja | Instan 1 Detik (Langsung Aktif) | Iterasi Super Cepat |
| Beban Ekstensi Browser | Sarat tracking script & iklan (>60 MB) | Sangat ringan (<105 KB paket zip) | RAM Laptop Hemat |
Ekstensi ini mendukung seluruh browser modern berbasis Chromium (Google Chrome, Brave, Microsoft Edge, Opera, dan Vivaldi).
- Unduh Berkas Paket Rilis:
Buka halaman rilis resmi di GitHub:
https://github.com/4ntiDandruff/mobile-view/releases
Unduh berkas
mobile-view-v1.16.0.zip. - Ekstrak Berkas ZIP:
Ekstrak berkas zip tersebut ke folder yang aman di komputer Anda (misal: di
C:\Tools\mobile-viewpada Windows, atau~/Tools/mobile-viewpada Linux/macOS). Pastikan folder ini tidak terhapus. - Buka Halaman Ekstensi Browser:
- Google Chrome: Ketik
chrome://extensionsdi bilah alamat, lalu tekan Enter. - Brave Browser: Ketik
brave://extensionsdi bilah alamat, lalu tekan Enter. - Microsoft Edge: Ketik
edge://extensionsdi bilah alamat, lalu tekan Enter. - Opera / Vivaldi: Ketik
opera://extensionsatauvivaldi://extensionsdi bilah alamat.
- Google Chrome: Ketik
- Nyalakan Mode Pengembang (Developer Mode): Cari saklar bernama Developer mode (Mode Pengembang) di pojok kanan atas layar, lalu geser ke posisi Aktif (ON).
- Muat Ekstensi (Load Unpacked):
- Klik tombol Load unpacked (Muat yang belum dibongkar) di pojok kiri atas.
- Pilih folder hasil ekstrak
mobile-viewyang berisi berkasmanifest.json.
- Selesai & Siap Digunakan:
- Ekstensi langsung terpasang dan aktif seketika.
- Sematkan (pin) ikon Mobile View di bilah toolbar browser agar mudah diakses.
- Buka website apa saja, lalu tekan tombol keyboard
Alt + M!
Bagi pengembang yang ingin berkontribusi atau mengedit kode secara langsung dengan fitur auto-reload hands-free:
# 1. Clone repositori ke workstation lokal
git clone https://github.com/4ntiDandruff/mobile-view.git ~/proyek/mobile-view
cd ~/proyek/mobile-view
# 2. Jalankan daemon inotify auto-reload via PM2 (Opsional, khusus dev Linux)
pm2 start dev-watcher.js --name "mv-watcher"
# 3. Buka browser Chromium pilihan Anda
google-chrome-stable chrome://extensions &- Di browser, aktifkan Developer mode, klik Load unpacked, dan arahkan langsung ke folder
~/proyek/mobile-view. - Setiap kali Anda mengubah dan menyimpan berkas (
content.css,content.js, dll.), daemon PM2 akan mendeteksi event inotify kernel Linux dan tab pengujian akan me-reload otomatis tanpa perlu klik manual!
| Tombol Pintasan | Aksi Fisik | Fungsi Operasional |
|---|---|---|
Alt + M |
Saklar Studio Utama | Buka / tutup studio simulasi smartphone pada tab aktif |
R |
Putar Layar (Rotate) | Beralih instan antara mode Portrait dan Landscape |
T |
Ganti Tema (Theme) | Beralih instan antara tema Gelap (Matte) dan Terang (Neomorphic) |
, (Koma) |
Buka Panel Setelan | Menampilkan modal setelan preferensi bawaan & identitas studio |
Esc |
Keluar / Tutup Modal | Menutup jendela modal setelan (atau menutup studio jika modal tertutup) |
| Perangkat | Resolusi Layar (1:1 Viewport) | Dimensi Sasis Fisik Luar | Radius Sudut Kaca | Ketebalan Bezel |
|---|---|---|---|---|
| Apple iPhone 15 Pro | 393 × 852 px | 405 × 864 px | 19 px ( |
6 px |
| Samsung Galaxy S24 | 360 × 780 px | 370 × 790 px | 18 px ( |
5 px |
| Apple iPhone SE (3rd) | 375 × 667 px | 389 × 681 px | 14 px ( |
7 px |
| Apple iPad Mini (6th) | 768 × 1024 px | 784 × 1040 px | 20 px ( |
8 px |
Semua resolusi di atas diuji dan divalidasi langsung via Chrome DevTools Protocol (CDP).
mobile-view/
├── manifest.json # Konfigurasi Chromium Manifest V3 & definisi shortcut Alt+M
├── background.js # Background service worker + auto-reload client inotify
├── content.js # Pengendali injeksi overlay, sasis smartphone & keyboard hooks
├── content.css # Sistem desain ganda: Solid Matte Workstation & Neomorphic
├── preview.html # Tampilan studio mandiri (standalone browser tab)
├── preview.js # Pengendali interaksi layar, rotasi, zoom & sinkronisasi modal
├── rules.json # Aturan Declarative Net Request pelucut blokir subframe
├── dev-watcher.js # Server inotify Linux auto-reload (PM2 daemon port 8897)
├── PRIVACY.md # Dokumen Kebijakan Privasi resmi (Zero-Telemetry Compliance)
├── CHANGELOG.md # Catatan servis dan rekam medis pembaruan versi
├── README.md # Dokumentasi arsitektur sirkuit dan panduan operasional
├── scripts/
│ └── generate_icons.py # Skrip otomatisasi generator ikon via zero-bloat-icon-favicon-skill
└── icons/ # Paket aset ikon & favicon flat modern minimalis (#0071E3)
├── icon.svg # Vektor SVG master (455 byte)
├── favicon.ico # Multi-frame ICO (16, 32, 48, 64 px)
├── icon16.png # 16x16 PNG RGBA
├── icon32.png # 32x32 PNG RGBA
├── icon48.png # 48x48 PNG RGBA
├── icon128.png # 128x128 PNG RGBA (Master Toko & Browser Extension)
├── apple-touch-icon.png # 180x180 PNG RGBA (iOS Safari Web Clip)
├── android-chrome-512.png# 512x512 PNG RGBA (PWA Master Asset)
└── site.webmanifest # Manifest konfigurasi PWA
Hasil pengujian otomatis 11 skenario visual dan geometri menggunakan skrip headless Chrome CDP:
[*] Starting Chrome headless for comprehensive UI audit v2...
[*] Scenario 1: Dark Mode Portrait (iPhone 15 Pro)...
[+] Dark Metrics: {
"topbarHeight": 48.0,
"topbarBaselineOffset": 0.0,
"viewport": {
"dimText": "393 × 852 px",
"frameW": 405, "frameH": 864,
"screenW": 393, "screenH": 852,
"iframeW": 393, "iframeH": 852
}
}
[+] Captured: /tmp/audit_v15_dark_iphone15_portrait.png
[*] Scenario 2: Dark Mode Landscape (iPhone 15 Pro)...
[+] Landscape Metrics: {
"dimText": "852 × 393 px",
"frameW": 864, "frameH": 405,
"screenW": 852, "screenH": 393
}
[+] Captured: /tmp/audit_v15_dark_iphone15_landscape.png
[*] Scenario 3a: Device Galaxy S24 -> Screen: 360 × 780 px [PASS]
[*] Scenario 3b: Device iPhone SE -> Screen: 375 × 667 px [PASS]
[*] Scenario 3c: Device iPad Mini -> Screen: 768 × 1024 px [PASS]
[*] Scenario 4: Settings Modal (Preferensi - Dark) [PASS]
[*] Scenario 5: Settings Modal (Tentang & Changelog - Dark) [PASS]
[*] Scenario 6: Light Mode Portrait (iPhone 15 Pro) [PASS]
[*] Scenario 7: Light Mode Landscape [PASS]
[*] Scenario 8: Settings Modal (Preferensi - Light) [PASS]
[*] Scenario 9: Settings Modal (Tentang & Changelog - Light) [PASS]
[SUCCESS] ALL 11 AUDIT SCENARIOS PASSED WITH 100% GEOMETRIC ACCURACY!
[ ]Touch Event Simulation Hook: Menambahkan emulasi pointer sentuh multi-finger dan scroll inertia berbasis gestur touchpad laptop.[ ]Network Throttling Switcher: Saklar pembatas kecepatan jaringan bawaan (3G Hemat / 4G Ruko) langsung dari bilah topbar studio.[ ]One-Click PNG Screenshot Canvas: Tangkapan layar utuh mockup smartphone beserta bingkai fisiknya untuk materi presentasi dan portofolio ruko.
Megapass Intra Solusindo • Sidoarjo, Indonesia