10 outils et astuces de développement Chrome que vous devez connaître

1. Simuler un réseau lent et des appareils lents

Nous sommes peut-être habitués à la vitesse d'Internet dans les villes, c'est un levier, cela ne veut pas dire que la vitesse d'Internet en Chine, ils sont tous pareils. Dans certains endroits éloignés, la vitesse du réseau est encore pitoyablement lente, donc parfois les produits que nous fabriquons doivent tenir compte de la lenteur du réseau. Alors, comment la simuler ?

Ouvrez l'onglet performance du navigateur Google, puis cliquez sur l'icône d'engrenage dans le coin supérieur droit pour voir la simulation de Newwork et CPU.

2. Sélecteur de couleur

Cliquez sur le petit carré représentant la couleur pour faire apparaître le sélecteur de couleur.

Lorsque le sélecteur de couleurs est activé, vous pouvez survoler la page et utiliser le sélecteur de couleurs pour obtenir la couleur de ce pixel.

Le petit carré qui fait apparaître le sélecteur de couleurs comporte également des touches de raccourci pour maintenir Shift enfoncé et cliquer pour modifier le format de couleur. .

3. Audits

Audits（审计), cette fonction a toujours existé, mais après Chrome 60, elle a subi des changements bouleversants : un autre projet open source de Google a été introduit : LightHouse .

Audits évalue principalement la page Web sous 5 aspects, et générera éventuellement un rapport :

4 Pretty Print (afficher le code lisible)

<.>

Nous savons que de nombreux sites Web compressent le code Javascript, mais celui-ci est très difficile à lire pour les développeurs et les apprenants. Google nous propose une fonction pour mieux visualiser le document de compression.

Nous cliquons sur l'icône des accolades

ci-dessous pour utiliser la fonction Pretty Print ｛｝

Sélecteur de fichiers rapide

Si vous savez. le nom du fichier, vous n'êtes pas obligé d'ouvrir l'onglet "

". Appuyez simplement sur Sources, puis entrez le nom du fichier que vous souhaitez rechercher, puis appuyez sur Entrée et c'est OK. cmd/ctrl + p

6. Mode réactif

Nous développons des sites Web sur les appareils de bureau et mobiles, et nous préférons généralement l'expérience de bureau initiale. Mais cela n’a rien à voir avec la tendance selon laquelle de plus en plus d’utilisateurs utilisent des appareils mobiles pour accéder à Internet. Afin d'améliorer l'expérience utilisateur du site Web, nous devons savoir exactement comment le site Web fonctionne sur les appareils mobiles.

Chrome La fonctionnalité de simulation mobile a été ajoutée à la boîte à outils du développeur pour nous aider à tester :

Pour la plupart des gens, la plupart du temps, il suffit de visualiser leur site Web à travers différentes tailles d’écran et orientations.

Je coopère avec Alibaba Cloud sur le serveur. Le prix discount est relativement bon marché : 89/an, 223/3 ans, ce qui est moins cher que 9,9 par mois pour les étudiants. Je l'ai acheté pour construire un projet. C'est mieux si vous êtes familier avec la pile technologique (les anciens utilisateurs peuvent utiliser les comptes des membres de leur famille pour l'acheter, j'utilise le compte de ma mère pour trois ans). Vous pouvez cliquer sur cet article pour le consulter.

Icomo

7. Capture d'écran

1.

2. [ctrl+shift+p]

3. capturer"

4. Sélectionnez l'un des éléments suivants

capturer une capture d'écran en taille réelle"【page Web entière】
1. capturer une capture d'écran du nœud"【page Web du nœud】
« capture d'écran »【Écran actuel】

8. Extensions

Nous pouvons installer des extensions sur la console du développeur Chrome. De nombreux frameworks disposent de leurs propres extensions pour simplifier le développement de leurs technologies (Vue, Angular, React, etc.). Ceci est une liste des extensions DevTools en vedette.

9. Couverture

La couverture est une nouvelle fonctionnalité des outils de développement Chrome, au sens littéral, elle peut être utilisée pour détecter quels js et css sont déjà présents lorsque le code est exécuté sur le. site Web. Il est en cours d'exécution et quels js et css n'ont pas encore été utilisés. Comme le montre la figure, il s'agit du code en cours d'exécution et non encore en cours d'exécution affiché lorsque j'ouvre la page Web csdn.

Comment ouvrir caver Prérequis : La version du navigateur Chrome doit être 59 ou supérieure, ouvrez rapidement les outils de développement en ctrl+shift+i, cliquez sur le coin supérieur droit. . Plus d'outils Il existe une couverture.

Alors, à quoi sert cette nouvelle fonctionnalité ?

Comme le montre l'image ci-dessus, la partie la plus à droite indique le nombre de fichiers CSS et JS que nous avons chargés. La zone rouge indique le code qui a été exécuté, tandis que la zone cyan indique le code qui a été chargé mais non exécuté. Il peut être utilisé pour découvrir les codes js et css qui n'ont pas été utilisés dans la page. Vous pouvez fournir aux utilisateurs uniquement le code nécessaire, améliorant ainsi les performances de la page. Ceci est utile pour identifier les scripts qui peuvent être divisés et pour charger paresseusement des scripts non critiques.

10. Suivez les nouvelles fonctionnalités en temps réel

Les outils de développement de Chrome seront constamment mis à jour et des vidéos mises à jour sur les nouveautés de DevTools seront publiées. Nous pourrons aller le voir de temps en temps. au fil du temps pour en savoir plus. Nouvelles fonctionnalités, afin que nous puissions connaître certaines des fonctionnalités utiles de Google en temps réel.

Adresse originale : https://medium.com/better-programming/10-must-know-chrome-developer-tools-and-tricks-d03f75d10cc9

Auteur : FelDev

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!