Device Simulator

Test responsive design website Anda langsung di dalam VSCode tanpa perlu membuka browser! Device Simulator memungkinkan Anda untuk melihat bagaimana website Anda tampil di berbagai perangkat mobile dan tablet dengan mudah.

✨ Fitur Utama

• 🎯 15+ Device Presets - iPhone, iPad, Android phones & tablets
• 📐 Custom Viewport - Atur ukuran viewport sesuai kebutuhan
• 🔄 Rotate Device - Switch antara portrait dan landscape mode
• 🔍 Zoom Controls - Zoom in/out (10%-200%) dengan kontrol yang mudah
• 📏 Manual Resize - Drag handles untuk resize viewport secara real-time
• ⚡ Live Preview - Preview website langsung tanpa reload
• 💾 History Manager - Simpan dan akses kembali website yang sering ditest

🚀 Cara Menggunakan

Quick Start

1. Buka Device Simulator

   • Tekan Ctrl+Shift+V (Windows/Linux) atau Cmd+Shift+V (Mac)
   • Atau buka Command Palette (Ctrl+Shift+P) → ketik "Device Simulator"

2. Load Website

   • Masukkan URL website (contoh: https://example.com)
   • Klik tombol "Load" atau tekan Enter

3. Pilih Device

   • Pilih device dari dropdown (default: iPhone 15 Pro Max)
   • Website akan otomatis menyesuaikan dengan ukuran device

4. Test Responsiveness

   • Gunakan tombol "Rotate" untuk mengubah orientasi
   • Drag resize handles untuk test ukuran custom
   • Gunakan zoom controls untuk melihat detail

Keyboard Shortcuts

Tips & Tricks

• Multiple Simulators: Tekan Ctrl+M / Cmd+M untuk membuka simulator baru dan test beberapa device sekaligus
• History: Klik sidebar icon untuk melihat history website yang pernah ditest
• Auto-refresh: Centang "Auto-refresh" untuk reload otomatis saat ganti device
• Zoom: Gunakan tombol "Fit" (⛶) untuk auto-fit viewport ke layar VSCode

Device Presets

iPhone

• iPhone 13 Pro: 390 × 844
• iPhone 15: 393 × 852
• iPhone 15 Pro Max: 430 × 932
• iPhone 12 Mini: 360 × 780
• iPhone 14 Pro: 393 × 852
• iPhone 11: 414 × 896

iPad

• iPad Pro 11: 834 × 1194
• iPad Air: 820 × 1180
• iPad Mini: 768 × 1024

Android

• Samsung Galaxy S25: 360 × 800
• Google Pixel 9: 412 × 915
• OnePlus 10 Pro: 412 × 916
• Xiaomi 14: 360 × 780
• Samsung Galaxy Tab S8: 800 × 1280
• Google Pixel Tablet: 800 × 1280

Other

• Auto Size: Menyesuaikan dengan ukuran panel

⚙️ Requirements

• Visual Studio Code versi 1.75.0 atau lebih baru

🐛 Known Issues

Beberapa website mungkin tidak bisa ditampilkan karena:

• Website memblokir iframe embedding (X-Frame-Options header)
• Website memerlukan HTTPS dan tidak mengizinkan mixed content

Solusi: Gunakan local development server atau website yang mengizinkan iframe embedding.

👨‍💻 Author

@tomyoktavian

Dibuat dengan ❤️ untuk memudahkan testing responsive design

Enjoy testing! 🚀