Trucs et astuces avec Google Chrome

En tant que travailleur du web, vous utilisez inévitablement un navigateur web pour accomplir la majorité de vos tâches. Cela va de soi.

Lorsque je pense à l’inévitable utilisation d’un navigateur web dans mon métier, il me vient en tête la variation sur le paradoxe de l’œuf et de la poule suivante :

Qu’est-ce qui est apparu en premier : le navigateur web ou le développeur web?

Le choix du navigateur est même un sujet sensible à semer la zizanie dans un groupe d’artisan du site web. Sommairement, il y a deux clans. Il y a ceux qui utilisent Google Chrome et les autres. Les autres sont ceux qui utilisent des navigateurs de second plan comme Firefox, Opera et Internet Explorer.

chrome-logoVous l’aurez deviné. Je suis un adepte invétéré de Google Chrome. Désolé pour les utilisateurs de Firefox, je vous aime quand même, un peu.

Cette introduction était un prétexte pour vous présenter ma liste de mes fonctionnalités préférées de Google Chrome.

Édition de propriétés CSS à même l’inspecteur – version magique

Lorsque j’ai su qu’il était possible de mettre à jour les valeurs de propriétés de style CSS, dans l’inspecteur HTML de Chrome, à l’aide du défilement de la roulette de ma souris, j’étais abasourdi.

Vraiment, j’étais impressionné!

Pour reproduire cette façon de faire, j’ai produit ce mini vidéo, en prenant exemple, la page d’accueil de ce blogue.

Édition de JavaScript à même l’onglet Sources

L’onglet « Sources » de l’inspecteur permet de consulter la source des scripts JavaScript qui sont exécutés à même votre page web. À même cet onglet, vous y trouverez différentes fonctions vous permettant de faire l’analyse et le débogage de votre code source.

Saviez-vous que c’était aussi un éditeur de JavaScript? Vous pouvez, avec ce même onglet, ajouter et/ou retirer du code à votre guise sans avoir même à recharger la page.

Pour avoir une idée de ce que vous pouvez faire avec cela, allez consulter la source du fichier functions.js du site http://geekroulette.ca/.  Ensuite, allez ajouter un console.log(« FrenchCoding »); après la ligne 63.

Une fois cela complété, allez cliquer sur le bouton « Démarrer » et  constatez que « FrenchCoding » sera écrit dans l’onglet « Console ».

Propriétés de l’inspecteur

Voyez-vous la petite roue dans le coin droit de l’inspecteur? Cliquez dessus. Ceci est les propriétés de l’inspecteur lui-même.

Dans le menu « General » vous pouvez personnaliser certains comportements de l’inspecteur. J’utilise fréquemment le paramètre « Disable cache » qui permet, vous l’aurez compris, de forcer Chrome à toujours ignorer les en-têtes d’expiration sur les fichiers et les télécharge toujours.

Vous pouvez aussi modifier certains comportements du navigateur dans l’onglet « Overrides ». C’est à cet endroit que vous pouvez réécrire le « User Agent » de votre navigateur ou, même, simuler une résolution d’écran en particulier.

Il est inutile de vous parler de l’onglet « Shortcuts ». N’est-ce pas?

Gestionnaire de tâches

Pour Chrome, une page est l’équivalent d’un processus bien distinct. Ce paradigme vous permet d’accéder à un gestionnaire de tâche pour votre navigateur.

À l’aide des touches « Shift-Escape », vous pouvez faire apparaître ce gestionnaire de tâches. Cela va vous permettre de consulter certaines statistiques d’utilisation, en temps réel, du navigateur et de ses différents processus. Vous pouvez même arrêter un processus en particulier si cela vous dit.

Advertisements

3 avis sur « Trucs et astuces avec Google Chrome »

  1. […] que je suis un utilisateur de Google Chrome. En fait, je l’ai ouvertement mentionné à plusieurs reprises ici même. J’ai toujours dit, le navigateur web doit être le premier outil […]

  2. Franck dit :

    J’ai vu qu’il était possible aujourd’hui de prendre en compte les modifs faites dans l’inspecteur directement sur le fichier css en ligne (comme j’ai hâte !).
    J’essaie de suivre les explications que j’ai trouvées mais elles sont dans un Anglais trop rude et pas assez « vulgarisé » pour moi qui ne suis pas codeur de formation.
    Quelqu’un aurait-il de la doc sur une procédure clair pour mettre en oeuvre cette merveille ?

Laisser un commentaire

Entrer les renseignements ci-dessous ou cliquer sur une icône pour ouvrir une session :

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l’aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment ce contenu :