En tant que développeurs web, nous sommes constamment à la recherche de gains de productivité, en particulier lorsque nous jonglons entre notre éditeur de code, la documentation technique, et le navigateur pour le rendu. Si vous travaillez sur un écran large (ultrawide, ou même un double-moniteur), il est temps d'exploiter à fond une fonctionnalité souvent sous-estimée de Google Chrome : la Vue Fractionnée (Split View), parfois appelée "Mode Side-by-Side".
Contrairement aux outils de gestion de fenêtres basiques de votre OS, Chrome propose une intégration native et rapide qui change la donne pour les revues de code, la comparaison de designs, ou le debugging en temps réel.
Qu'est-ce que le Split View de Chrome ?
Le Split View de Chrome n'est pas simplement le fait de placer deux fenêtres côte à côte. C'est une méthode ultra-rapide, intégrée à l'interface, pour organiser deux onglets distincts dans une même fenêtre Chrome, occupant ainsi de manière optimisée l'espace horizontal disponible.
Cette fonctionnalité est documentée par Google (cf. centre d'aide), mais sa véritable valeur ajoutée réside dans les cas d'usage que nous, développeurs, pouvons en faire.
Le Développeur et le Split View : Cas d'Usage Avancés
Oubliez la simple consultation de deux sites. Voici comment cette vue fractionnée devient un outil de développement essentiel :
Le Workflow Documentation-Code
C'est l'usage le plus évident mais le plus puissant. Vous pouvez dédier un côté de la fenêtre à la documentation officielle (MDN, React Docs, OpenAPI specs, etc.) et l'autre à votre application en cours de développement.
Astuce Technique : Avec un écran ultrawide, vous pouvez même avoir un tier (votre éditeur de code), et le reste de l'espace divisé en deux avec le Split View de Chrome pour la documentation et le rendu de l'application.
Comparaison de Versions (A/B Testing ou Staging/Prod)
Lors d'une revue de code critique ou d'un hotfix, le Split View permet de comparer côte à côte deux environnements :
Gauche :
staging.monapp.comDroite :
prod.monapp.com
Ceci facilite la détection immédiate de régressions visuelles ou fonctionnelles sans avoir à basculer entre les fenêtres ou les bureaux virtuels.
Le Debugging Asynchrone (ou la "Vue Latérale" des DevTools)
Si vous activez la Vue Fractionnée, vous pouvez ouvrir les Developer Tools (F12). Les DevTools s'ouvrent alors sous les deux onglets de la vue fractionnée, ou, de manière plus ergonomique, vous pouvez les détacher dans une fenêtre séparée, ou utiliser la fonction Dock Side des DevTools pour qu'ils s'affichent uniquement à côté de l'onglet actif.
Comment Activer le Split View : Le Raccourci Indispensable
L'activation du Split View est d'une simplicité déconcertante et passe par l'interface utilisateur de Chrome, souvent via un clic droit ou le glisser-déposer.
Dégrouper les Onglets : Assurez-vous d'avoir deux onglets ouverts dans votre fenêtre Chrome.
Cliquer-Glisser :
Méthode 1 (Plus rapide) : Cliquez sur l'onglet que vous souhaitez déplacer et faites-le glisser hors de la barre d'onglets, vers le bord gauche ou droit de votre écran.
Méthode 2 (Native Chrome) : Certains utilisateurs verront une option apparaître lors du glissement ou via le menu contextuel. Référez-vous toujours à la documentation Google officielle pour la méthode la plus à jour de votre OS.
Le navigateur détecte que vous souhaitez positionner cette fenêtre sur la moitié de l'écran et propose de lier la nouvelle fenêtre à l'ancienne, créant ainsi la vue fractionnée.
Le Split View de Google Chrome est bien plus qu'une simple fonctionnalité d'ergonomie ; c'est un outil de productivité essentiel pour quiconque développe sur un écran offrant une largeur suffisante. En réduisant le temps passé à basculer entre les fenêtres et en permettant la comparaison visuelle instantanée, vous accélérez le feedback loop de votre développement.
Adoptez cette technique pour vos prochains cycles de debugging et constatez la différence !
