Astuces navigateur

Introduction

Le temps passé dans la navigateur est tel qu’il peut presque s’apparenter à une seconde maison. Voyons quelques éléments pour l’ameubler et pour rendre la vie dans celui-ci plus agréable.

Extensions

Voici une liste de mes extensions préférées, à la fois pour rendre la navigation plus agréable et aussi pour m’aider dans le cadre du développement.

Visbug

Avez-vous déjà eu besoin de mesurer la distance entre deux éléments du DOM dans une page comme dans Figma ? De faire quelques modifications à la volée pour tester rapidement un autre rendu visuel ? C’est ce que vous permet de faire Visbug. Très pratique, je l’utilise au quotidien. Pour une présentation plus détaillée, je vous renvoie à cet article Medium : VisBug 101: The Essentials for Manipulating Any Webpage.

Parafaute

Une extension (dont je suis l’auteur) permettant d’améliorer la lisibilité des textes en français en supprimant les marques d’écriture dite « inclusive », les anglicismes, certaines fautes courantes et avec les problèmes typographiques. Disponible sur le Chrome Web Store et le site des Modules pour Firefox .

Unhook

Ne vous est-il jamais arrivé d’aller sur YouTube pour regarder une vidéo et de vous retrouver pris dans la chaîne des recommandations et visionner bien plus que ce que vous aviez prévu ? Grâce à cet extension, vous ne serez plus distraits et pourrez en prime gagner de la place sur votre écran ;-)

Disponible pour Firefox, Edge et Chrome ici.

LinkHints

Je me suis toujours demandé comment les fanatiques de la navigation au clavier pouvaient décemment défendre leur paroisse sur la terre des navigateurs : les sites modernes sont souvent très complexes et nécessitent d’appuyer un nombre indécent de fois sur la touche tabulation avant d’espérer arriver à destination. Cependant, après quelques recherches, je suis tombé sur une extension rendant la navigation au clavier complète presque envisageable : LinkHints.

Rango

Rango se présente comme un équivalent vocal à l’extension LinkHints. C’est une solution d’accessibilité intéressante à avoir si vous ne pouvez pas utiliser votre clavier ou votre souris.

Je vous invite à explorer plus en détail Talon Voice si vous avez besoin de vous servir de votre ordinateur avec votre voix.

Parcourir une page au clavier

Nous avons vu comment naviguer plus facilement avec une extension, mais il reste un autre problème à régler : comment sélectionner du texte seulement au clavier ? Pour y parvenir, la plupart des navigateurs intègrent nativement une solution que vous pouvez retrouver sous le nom de caret navigation [navigation au clavier].

Pour tester ce mode de navigation, ouvrez votre navigateur préféré et appuyez sur la touche F7 de votre clavier : une fenêtre vous demandera la confirmation d’activer la navigation au clavier et un curseur clignotant, comme dans un éditeur de texte, devrait apparaître.

Une fois dans ce mode vous pouvez :

• Utiliser les flèches directionnelles pour vous déplacer dans la page.
• maintenir la touche Shift et utiliser les flèches directionnelles pour sélectionner du texte.
• Utiliser la touche Entrée lorsque vous rencontrez un lien pour le visiter.

Prendre des captures d’écran

Ne croyez pas cela trivial, prendre de bonnes captures d’écran peut s’avérer crucial (et ça rime !). Très souvent, j’ai été mené à devoir faire des captures d’écran parfaites d’un composant afin de pouvoir facilement présenter un avant/après comme ceci :

Un tel résultat est impossible ou très difficile avec les outils de capture par défaut de votre système d’exploitation. La manière la plus efficace de réaliser une capture d’écran dans une page web est d’utiliser l’outil de capture intégré à votre navigateur. Je vous renvoie à ce très bon guide vidéo (en anglais, mais vous devriez réussir à suivre) pour découvrir les différentes façons de réaliser une capture d’écran.

Sélectionner du texte plus facilement

J’ai beaucoup parlé du clavier, mais une bonne utilisation de la souris peut également aider, n’en déplaise aux ermites du terminal. Voici ceux qui me semblent les plus intéressants :

• Double clic sur un mot pour le sélectionner.
• Triple clic pour sélectionner un paragraphe entier.
• Cliquer sur une partie d’un paragraphe, maintenir la touche Shift et cliquer à un autre endroit du paragraphe pour marquer la fin d’une sélection. Pratique pour ne pas avoir à maintenir le clic sur une longue sélection.
• Clic central avec la molette de la souris sur un onglet pour le fermer.
• Clic central avec la molette de la souris sur un lien pour l’ouvrir dans un nouvel onglet.
• Utilisation de la molette pour passer d’un onglet à un autre. Ce comportement est actuellement activé par défaut sur les navigateurs type Chromium mais sur Firefox une manipulation est nécessaire pour activer cette fonctionnalité :
  1. Rendez-vous surabout:config.
  2. Recherchez toolkit.tabbox.switchByScrolling et mettez la valeur à true.

Voir les fautes de frappe sur un site

Vous n’avez pas eu le temps de mettre en place un vérificateur orthographique au moment de développer votre site et vous souhaitez voir rapidement si votre page contient des erreurs d’orthographe ? Un moyen simple est de tirer parti du correcteur orthographique intégré à votre navigateur.

Pour se faire, ouvrez vous outils de développement avec la touche F12, puis rentrez ceci dans la console pour entrer en mode édition : document.designMode = "on";. Une fois dans ce mode, vous erreurs seront soulignées d’un rouge écarlate.

Ressources

Pour exploiter au maximum le potentiel des DevTools, je vous recommande chaudement de visiter : DevTools Tips