Réduire une fenêtre de bureau ne suffit pas pour tester les gestes tactiles ou le comportement réel d'un smartphone. GB Coder propose une fenêtre externe détachable pour les configurations multi-écrans et la génération instantanée de QR codes pour tester directement sur téléphone.

1. Les limites de l'émulation de bureau pour le mobile

Les outils pour développeurs simulent la largeur des écrans, mais ne reproduisent pas les interactions tactiles réelles ni le comportement de la barre d'adresse sur iOS et Android.

2. Détacher l'aperçu dans une fenêtre indépendante (Popout)

Cliquez sur "Popout Preview" dans la barre d'outils pour détacher l'iframe. Vous pouvez ainsi garder Monaco en plein écran sur un écran et l'aperçu en direct sur le second.

3. Synchronisation bidirectionnelle en direct

La fenêtre détachée communique via postMessage. Vos modifications HTML ou CSS s'affichent instantanément sans perdre l'état des formulaires.

4. Test instantané sur smartphone via QR Code

Cliquez sur "Mobile Preview" pour générer un QR code. Scannez-le avec l'appareil photo de votre téléphone pour ouvrir la prévisualisation locale sur votre réseau.

<!-- Standards-compliant responsive viewport meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
<style>
  /* Modern dynamic viewport sizing preventing mobile address bar jump */
  .hero-section {
    min-height: 100dvh;
    padding: clamp(1.5rem, 5vw, 4rem);
  }
</style>

5. Console virtuelle pour le débogage sur smartphone

Les erreurs JavaScript et journaux console.log émis par votre téléphone sont automatiquement renvoyés sur la console virtuelle de votre poste de travail.