Outils de développement Chrome : quelques conseils utiles pour l'utiliser comme un pro

Vous avez peut-être entendu parler de cette fonctionnalité puissante Navigateur Chrome Outils de développement Chrome Bien qu'il soit vrai que la plupart d'entre eux sont bénéfiques pour les développeurs Web, il y a des moments qui sont bénéfiques pour l'internaute moyen. Dans cet article, nous allons nous concentrer sur les choses utiles que vous pouvez faire avec Outils de développement Chrome. Par exemple, comment Restrictions de débordement Défini par le site Web, vous apprendrez les polices, les couleurs et les images cachées à la surface ou même en cas d’oubli de vos mots de passe.

Chrome Developer Tools : Quelques conseils utiles pour l'utiliser comme un pro – explications

Comment ouvrir les outils de développement dans Chrome?

Pour ouvrir les outils de développement Chrome dans Google Chrome, cliquez sur personnaliser chrome (⋮)> Plus d'outils -> outils de développement. Vous pouvez également cliquer avec le bouton droit sur la page que vous souhaitez modifier et choisir Inspecter. J'aime utiliser le raccourci clavier Ctrl + Maj + I (Cmd + Option + I Pour Mac).

Chrome Developer Tools : Quelques conseils utiles pour l'utiliser comme un pro – explications

Par défaut, une nouvelle fenêtre s'ouvre à droite, mais je préfère la garder basse, car cela me laisse plus d'espace pour me développer. Pour déplacer la fenêtre vers le bas, cliquez sur le bouton 3 en haut à droite () et choisissez l'option d'ancrage en bas. Vous pouvez également activer le mode sombre de "paramètres", ce qui facilite la lecture et le suivi des codes par les yeux. Maintenant, la prochaine fois que vous l'ouvrez inspecter l'élément, Il se souviendra de mes changements.

Conseils 10 pour une utilisation professionnelle des outils de développement Chrome

1. Modifier la page Web

À présent, il s’agit de l’utilisation principale des outils de développement, mais vous devez l’insérer. Vous pouvez modifier temporairement n'importe quelle page Web (telle que Wikipedia) dans votre navigateur. Pour ce faire, ouvrez une page Web que vous souhaitez modifier sur Chrome, cliquez avec le bouton droit de la souris et choisissez "Vérifier l'élément". Accédez à l'onglet Console (la deuxième option doit être à partir du haut), collez la ligne de code suivante, puis appuyez sur Entrée.

document.body.contentEditable = true
Chrome Developer Tools : Quelques conseils utiles pour l'utiliser comme un pro – explications

Cela rendra la page Web entière modifiable comme n'importe quel document Word. Cliquez n'importe où et commencez à taper. Cependant, rappelez-vous que tous les effets disparaîtront une fois la page mise à jour. Par conséquent, veillez à prendre un instantané de l’écran de la page avant de fermer ou de mettre à jour votre navigateur.

2. Révéler le mot de passe enregistré

Supposons que vous souhaitiez vous connecter à Instagram sur votre téléphone portable, mais que vous ne vous en souveniez pas. Mot de passe. Heureusement, vous l'avez enregistré dans votre navigateur. Désormais, au lieu de vous engager dans un processus fastidieux de réinitialisation du mot de passe, vous pouvez utiliser les outils de développement pour détecter le mot de passe masqué.

Chrome Developer Tools : Quelques conseils utiles pour l'utiliser comme un pro – explications

Cliquez avec le bouton droit sur le champ du mot de passe et choisissez Vérifier l'élément. Cela ouvrira la fenêtre Inspecter et tout ce que vous aurez à faire est de remplacer "mot de passe" par "texte" dans le champ de saisie du type de mot de passe. Cela devrait révéler le mot de passe caché à travers les astérisques.

3. Prendre un instantané de la page Web

Saviez-vous que vous pouvez capturer une capture d'écran d'une page Web à l'aide de Chome Dev Tools sans utiliser de plug-in? Cette fonctionnalité est très simple et ne fournit que deux paramètres, la partie visible de la page Web, la page Web entière. Il peut capturer des captures d'écran de la version mobile d'une page Web et vous pouvez sélectionner certaines dispositions de téléphones mobiles dans le menu déroulant en haut.

Chrome Developer Tools : Quelques conseils utiles pour l'utiliser comme un pro – explications

Pour capturer une capture d'écran, ouvrez Outils de développement Chrome. Allez sur l'onglet Console et appuyez sur Ctrl + Maj + M (Windows) Ou cmd + opt + M (Mac). Cliquez ensuite sur le menu Points 3 dans le coin supérieur droit de la page Web et sélectionnez Prendre une capture d'écran ou une capture d'écran en taille réelle. C'est tout, la capture d'écran sera enregistrée dans le dossier Téléchargements.

Il existe d'autres moyens de capturer des captures d'écran et vous pouvez toujours installer une extension de capture d'écran ou utiliser le raccourci de capture d'écran d'origine pour PC, prtsc (windows) et cmd + shift + 4 (MacOS), mais cette méthode fonctionne correctement.

4. Utilisez le sélecteur de couleur

J'aime les couleurs les plus basses et le plus souvent, je fais défiler les images les plus basses sur Google pour trouver l'inspiration pour les fonctionnalités photo et les vignettes. Ou, si le jeu de couleurs d'un site Web particulier attire votre attention et que vous souhaitez savoir quelle couleur il utilise, vous pouvez toujours installer l'extension de sélecteur de couleurs. Mais il existe un moyen plus rapide de le faire.

Chrome Developer Tools : Quelques conseils utiles pour l'utiliser comme un pro – explications

Il suffit de montrer les outils de développement Chrome, sur le côté gauche, cliquez sur l’onglet Style, puis sur la petite case en regard de Couleur. Ceci affichera l'outil Sélecteur de couleurs. Maintenant, cliquez n'importe où sur la page Web que vous voulez connaître et le sélecteur de couleurs vous donnera un symbole hexadécimal. Copiez simplement le code hexadécimal et collez-le dans Photoshop.

5. Changer l'emplacement sur la disposition mobile

Chaque fois que vous ouvrez un site Web, une grande partie de vos données est envoyée sous la jaquette de la boîte, telle que votre adresse IP, la date et l'heure exactes et l'URL d'où vous êtes venu avec l'agent utilisateur.

Chrome Developer Tools : Quelques conseils utiles pour l'utiliser comme un pro – explications

L'agent d'utilisateur aide le site Web à identifier votre navigateur. Dans certains cas, cela aide Changer l'agent utilisateur. Par exemple, si vous souhaitez vérifier si votre site Web répond. Mais mon préféré est d’accéder à une version différente du site. Par exemple, certains sites Web gouvernementaux s’ouvrent uniquement dans Internet Explorer ou utilisent, par exemple, un compte Instagram. Vous savez, vous ne pouvez pas Téléchargez des photos sur Instagram via votre ordinateur Mais vous pouvez le faire à partir de leur site Web mobile. Pourquoi ne refusez-vous pas votre navigateur de bureau en tant que navigateur mobile?

Pour ce faire, exécutez Outils de développement Chrome, cliquez sur En-têtes 3, puis sous Outils, sélectionnez Conditions de réseau. Vous devez décocher la case "Agent utilisateur", sélectionner automatiquement et dans la boîte de dialogue contextuelle sélectionner Navigateur mobile. Si vous essayez d'accéder à un site gouvernemental, sélectionnez un autre navigateur. Fermez maintenant la fenêtre et actualisez la page. Comme vous pouvez le constater, il existe un bouton de téléchargement entièrement fonctionnel que vous pouvez utiliser pour télécharger des photos sur Instagram à partir de votre ordinateur.

6. Recherche de rien

La recherche est une autre caractéristique difficile à identifier. L'onglet Recherche vous permet de rechercher une page Web pour un contenu spécifique ou HTML.

Par exemple, si vous voulez savoir quelle police le site Web utilise, vous devrez cliquer sur les trois points, cliquer sur Rechercher, taper "police" ou "Utiliser la famille de polices" avec précision, et vous pourrez trouver les informations dans les lignes. Du code.

Chrome Developer Tools : Quelques conseils utiles pour l'utiliser comme un pro – explications

Ou pour prendre un autre exemple, je trouve un site Web qui utilise une vidéo d'arrière-plan et je suis intriguée de voir quelle vidéo est exactement, et maintenant, ne sauvegardera pas la page sauvegardée. Utilisez plutôt l'outil de développement de Chrome, recherchez "vidéo" en faisant défiler les résultats et voyez si vous obtenez une URL. Dans ce cas, faites preuve de bon sens si vous essayez un fichier vidéo, souvent une extension MP4. Voilà, vous avez maintenant deux résultats avec mp4, dont l'un doit être le fichier vidéo. Cliquez dessus pour afficher l'URL. Copiez et collez cette URL dans votre navigateur, puis désactivez-la.

7. Supprimer les pop-ups

Une autre fonctionnalité utile d'Inspecter consiste à supprimer les fenêtres contextuelles du site Web. Par exemple, prenons Quora - un site Web de questions fréquemment posées qui offre du contenu uniquement à ses membres. Si vous accédez à ce site depuis Google et essayez de lire plus d'une page, il apparaît Fenêtre pop-up Vous êtes invité à vous abonner. Voici comment les supprimer, cliquez avec le bouton droit sur la page et affichez les éléments analysés. Déplacez le curseur sur la ligne de code jusqu'à ce que la fenêtre contextuelle (couvrant le contenu) soit en surbrillance. Une fois que vous avez terminé, supprimez cette ligne de code. Parfois, il existe un autre calque transparent sur le texte de la page, ce qui empêche les liens de répondre. Supprimez-le également.

Chrome Developer Tools : Quelques conseils utiles pour l'utiliser comme un pro – explications

8. Modifiez la position GPS de votre navigateur

Désormais, tous les sites Web peuvent savoir où vous allez: votre adresse IP et l'emplacement de votre navigateur. Bien que vous puissiez facilement changer l'adresse IP en utilisant VPN et Smart DNS privé, il n'est pas facile de changer l'emplacement du navigateur.

Par exemple, l’autre jour, je parcourais CBS avec un VPN, et tout s’est bien passé. Cependant, lorsque j'ai décidé de regarder les chaînes locales sur le réseau CBS, j'ai montré au site une fenêtre contextuelle demandant la localisation de mon navigateur. Ensuite, vous devez cliquer sur "Autoriser" pour continuer, de sorte que la fenêtre indique que le contenu n'est pas disponible sur mon site.

Chrome Developer Tools : Quelques conseils utiles pour l'utiliser comme un pro – explications

Pour résoudre ce problème, ouvrez la Console du développeur en cliquant avec le bouton droit de la souris sur l’écran. En bas du panneau, appuyez sur le bouton en trois points en haut à gauche, puis cliquez sur l’option "Capteurs" de Plus. Une nouvelle fenêtre s'ouvrira dans la moitié inférieure de la fenêtre Outils de développement, sous Géolocalisation Sélectionnez Site personnalisé. Maintenant, placez votre site sur la latitude et la longitude, si vous ne connaissez pas ces valeurs, vous pouvez toujours utiliser Google Maps. Ou sélectionnez simplement un nom de ville comme California. Maintenant, rechargez la page, autorisez les données de localisation dans la fenêtre contextuelle. Maintenant, si vous actualisez la page et cliquez sur "Autoriser l'emplacement", vous voyez, je peux maintenant diffuser des stations locales.

9. Utilisez la règle

Tout comme l'outil Sélecteur de couleurs, les outils de développement de Google Chrome incluent également une règle. Cela s'avère pratique lorsque vous souhaitez mesurer des pixels sur la hauteur et la largeur de la page.

Chrome Developer Tools : Quelques conseils utiles pour l'utiliser comme un pro – explications

Pour afficher la règle, cliquez avec le bouton droit sur la page que vous souhaitez utiliser, puis cliquez sur "Vérifier l'élément". Ensuite, vous devez activer la fonctionnalité pour la première fois, puis cliquez sur les points verticaux 3 en haut à gauche et sur les paramètres. Une nouvelle fenêtre s’ouvre, sous la section "Items", sélectionnez l’option "Show Ruler".

10. Utiliser l'élément d'inspection sur Android (type de ce type)

Il n’existe aucun moyen d’obtenir un outil de développement complet à part entière sur Android, mais vous pouvez utiliser Inspecter et modifier HTML Live Pour quelque chose de similaire. Pour commencer, installez l'application depuis le Play Store et commencez à la lire. Tapez le nom de domaine du site Web dans la barre d'adresse, puis cliquez sur la petite icône représentant un doigt noir en regard de la barre d'URL. Il s’agit du sélecteur d’éléments, et désormais, chaque fois que vous cliquez sur, il vous montrera le code source, que vous pourrez éditer et voir les changements directs. En général, l'application présente deux caractéristiques principales: l'affichage / la modification du code source du site Web et la saisie de JavaScript dans la page Web spécifiée.

Chrome Developer Tools : Quelques conseils utiles pour l'utiliser comme un pro – explications

L'application est gratuite, mais affiche de petites bannières publicitaires au bas de la page, que vous pouvez supprimer en achetant une copie professionnelle unique contre des dollars 3.

Comment utiliser l'outil Chrome Developer?

En général, les outils de développement ne se limitent pas à altérer vos sites Web préférés. En bref, tout ce que le site Web côté serveur n'utilise pas peut être modifié à l'aide des outils de développement de Chrome. Au lieu de cela, vous pouvez utiliser une extension Développeur Web  Pour un accès en un clic à toutes les fonctionnalités et plus.

source
Aller au bouton supérieur