Les meilleure fonctionnalité de Google Chrome que vous n'utilisez pas - Inspiration numérique
Master Chrome Developer Tools - La meilleure fonctionnalité de Google Chrome que vous n'utilisez pas
Google Chrome est un navigateur Web génial, mais il existe une fonctionnalité encore plus géniale intégrée à Chrome que la plupart d'entre nous utilisons rarement - elle s'appelle Chrome Developer Tools. Ne laissez pas le mot « développeur » vous intimider, car nous, les utilisateurs réguliers de Chrome, ou les non-développeurs, pouvons également bénéficier d'une connaissance de base des outils de développement Chrome.
Saviez-vous que vous pouvez utiliser Chrome comme éditeur WYSIWYG pour les pages Web ? Ou que Chrome peut fonctionner comme une calculatrice mathématique ? Ou que vous pouvez effectuer des calculs de date dans Chrome ? Ce didacticiel vidéo vous guidera à travers quelques exemples d'utilisation des outils de développement.
https://www.youtube.com/watch?v=FQKvro1Wz-E
Outils de développement Chrome pour les non-développeurs
Ouvrez cette page de démonstration dans Google Chrome sur le bureau, puis appuyez sur Ctrl + Shift + I sur le clavier (ou Cmd + Shift + I sur Mac) pour ouvrir Chrome Dev Tools. Cliquez maintenant sur l'icône Loupe dans le coin inférieur gauche de Chrome, passez votre souris sur le titre de la page et double-cliquez sur le code HTML sélectionné dans les outils de développement pour modifier ce titre.
1 . Réorganiser le texte et les images sur une page
Avec Chrome Dev Tools, vous pouvez facilement modifier l'ordre des éléments tels qu'ils apparaissent sur une page en les faisant simplement glisser avec votre souris. Cliquez sur l'icône en forme de loupe, survolez n'importe quel élément de la page - qu'il s'agisse de paragraphes de texte, d'images ou d'éléments de liste - puis faites glisser cette sélection pour la placer à un emplacement différent.
2 . Expérimentez avec différentes couleurs
Les pages Web utilisent souvent le format hexadécimal pour écrire les couleurs, mais si le format #AABBCC n'a aucun sens pour vous, écrivez simplement les noms des couleurs en anglais simple comme Gold, Aqua et plus encore. Tapez simplement le premier caractère et Chrome Dev Tools affichera toutes les couleurs disponibles commençant par cette lettre.
3 . Révéler les mots de passe cachés
Chrome peut remplir automatiquement le champ de mot de passe sur un formulaire de connexion d'une page Web, mais vous ne pouvez pas afficher ce mot de passe car il est caché derrière des astérisques. Vous pouvez cependant utiliser Chrome Dev Tools pour modifier le type de champ de saisie du mot de passe de « mot de passe » à « texte » et révéler le mot de passe caché .
4 . Modifiez vos pages Web en ligne
Les pages Web ne sont pas modifiables dans le navigateur, mais il existe une petite astuce qui vous permettra de modifier des pages Web en ligne comme vous le feriez dans un traitement de texte. Ouvrez Chrome Dev Tools, passez à l'onglet Console et tapez document.body.contenteditable=true à l'invite de commande. Voila ! La page devient modifiable.
5 . Chrome comme calculatrice
Lorsque l'onglet Console est actif, vous pouvez écrire des expressions arithmétiques et également effectuer des calculs de date comme le nombre de jours entre deux dates ou écrire une date sous forme de chaîne lisible par l'homme. Une petite connaissance de l' objet Date en JavaScript vous sera utile. Chrome stocke la valeur du calcul précédent dans une variable \$ _ spéciale qui peut être utilisée dans des calculs longs.
6 . Extraire des informations d'une page Web
Vous pouvez exécuter des commandes multilignes dans la fenêtre de la console pour analyser et extraire les données des pages Web. Par exemple, le sélecteur \$\$('a') contiendra tous les hyperliens intégrés dans une page. Vous pouvez ensuite utiliser une simple boucle for pour exporter ces hyperliens sous forme de texte brut.
URL = \$\$('a'); pour (url dans les urls) console.log ( urls [url] .href );
7 . Faux votre emplacement
Certains sites Web peuvent demander votre géolocalisation à des fins de personnalisation et avec Chrome Dev Tools, vous pouvez facilement simuler l'emplacement . Cliquez sur l'engrenage Paramètres dans les outils de développement et partagez un ensemble différent de valeurs de latitude et de longitude avec ce site.
Veuillez regarder la vidéo YouTube pour plus de conseils. ??
Meilleures ressources pour apprendre les outils de développement Chrome
Voici quelques bonnes ressources en ligne qui vous aideront à maîtriser les outils de développement Chrome.
- codeschool.com - Ce cours en ligne de Paul Irish de l'équipe Chrome vous aidera à essayer et à explorer toutes les fonctionnalités de Chrome Dev Tools.
- développeurs.google.com - Documentation officielle avec de nombreux trucs et astuces pour vous aider à maîtriser les outils de développement.
- vimeo.com - Patrick Dubroy de l'équipe Chrome fournit une démonstration approfondie de certaines des fonctionnalités les moins connues de Chrome Dev Tools.
- youtube.com - Ilya Grigorik, défenseur des développeurs chez Google, discute des fonctionnalités avancées des outils de développement.
- youtube.com - Paul Irish discute à nouveau des nouvelles fonctionnalités de Chrome Dev Tools lors de cet événement Google I/O.
Vous aimerez également :
- Comment rechercher et remplacer du texte dans des pages Web
- Jouez au jeu de dinosaures caché dans votre Google Chrome
- Utilisez le mode lecteur dans Chrome pour Android pour une meilleure expérience de lecture
- Accédez à vos mots de passe de n'importe où avec Google Password Manager
- Une application Chrome vous aide à arrêter de tergiverser
- Comment supprimer le mot de passe des fichiers PDF avec Google Chrome
- Comment lire des vidéos YouTube à une vitesse personnalisée
- Un module complémentaire Gmail pour les personnes occupées
- Ouvrir des pages Web dans Google Chrome pour iOS [Bookmarklet]
- Comment capturer des captures d'écran dans Google Chrome sans utiliser d'extensions
Vous cherchez quelque chose ? Trouvez ici!
Rencontrez l'auteur
Web Geek, expert développeur Google
Amit Agarwal est un développeur expert Google dans Google Workspace et Google Apps Script. Il est titulaire d'un diplôme d'ingénieur en informatique (IIT) et est le premier blogueur professionnel en Inde. Il est le développeur de Mail Merge pour Gmail et Document Studio . En savoir plus sur Lifehacker et YourStory
Entrer en contact
- Envoyez un email à amit@labnol.org
- A suivre sur @twitter et @youtube .
- Abonnez-vous à notre newsletter par e-mail et ne manquez jamais une mise à jour.
Modules complémentaires Google
Faites-en plus avec votre compte Gmail et GSuite
Nous créons des solutions sur mesure qui utilisent les capacités et les fonctionnalités de Google Workspace pour automatiser les processus métier et stimuler la productivité au travail.
Envoyez un e-mail personnalisé à votre contact Google avec une feuille Google et Gmail
Téléchargez les e-mails et les pièces jointes de Gmail sur votre Google Drive
Envoyer des notifications par e-mail à plusieurs personnes lorsqu'un nouveau formulaire Google est soumis
Créez de magnifiques documents au pixel près en fusionnant les données de Google Sheets et de Google Forms
Transformez vos présentations Google Slides en GIF animés et vidéos à télécharger sur YouTube
Commentaires
Enregistrer un commentaire
🖐 Hello,
N'hésitez pas à commenter ou vous exprimer si vous avez des trucs à dire . . .👉