7 nouvelles fonctionnalités de Google Chrome à connaître Conseils 2021

Vérifiez 7 nouvelles fonctionnalités de Google Chrome que vous devriez connaître

En plus de sa fonction de grand navigateur Internet au quotidien, Google Chrome est également un excellent outil pour le développement Web. via DevTools.

DevTools est constamment mis à jour avec de nouvelles versions. Il se peut donc qu’il y ait certaines fonctions et DevTools que vous avez peut-être perdus en cours de route. Alors les voici 7 des dernières fonctionnalités de Google Chrome que vous devriez connaître.

Introduction : test Chrome DevTools

Chrome a quelques fonctionnalités expérimentales intéressantes, qui sont masquées ou désactivées par défaut. Pour activer ces fonctions expérimentales, accédez à chrome : // flags / # enable-devtools-experiment via la barre d’adresse de Chrome et Autoriser l’option DevTool Experiment, et redémarrer chrome.

Après le redémarrage, lancez DevTools et cliquez sur l’icône d’engrenage en haut à droite du panneau DevTools, et vous devriez voir l’onglet « Expérience » dans la barre latérale gauche. Cochez les fonctionnalités que vous souhaitez activer.

1. Émulateur d’appareil mobile amélioré

De nos jours, avoir un site Web optimisé pour les appareils mobiles est un must. Avec Chrome, vous pouvez déboguer des sites Web en mode mobile via le Fonction d’émulateur mobile, qui a été totalement repensé et ajouté avec une tonne de nouvelles fonctionnalités.

Pour activer l’émulateur mobile, lancez DevTools et cliquez sur l’icône Mobile à côté de l’icône boucle/recherche, comme illustré dans la capture d’écran suivante. Comme vous pouvez le voir, au-dessus de l’émulateur se trouve maintenant équipé de règles afin que vous puissiez voir exactement la taille de la fenêtre d’affichage dans laquelle se trouve le site Web.

2. Plusieurs sélections de curseur

Vous voulez modifier plusieurs lignes ensemble dans un fichier source comment pouvez-vous avec Sublime Text? Chrome prend désormais en charge les curseurs multipe et de sélection dans DevTools. Utilisez Ctrl + Clic ou Cmd + Clic pour sélectionner plusieurs lignes à la fois.

3. Limiter la connexion réseau

Maintenant, vous pouvez également tester la réactivité et les performances de votre site Web sur plusieurs connexions via DevTools. Dans DevTools, appuyez sur Échap pour démarrer Console Drawer, puis sélectionnez Emulation. Dans l’onglet Réseau, sélectionnez le type de vitesse pour limiter votre connexion réseau et voyez comment votre site Web fonctionne à la vitesse sélectionnée.

4. Mode hors ligne

Google Chrome est désormais équipé du mode hors ligne, qui vous permet d’ouvrir des sites Web lorsque vous êtes réellement hors ligne. Si vous développez une application Web qui vise à fonctionner même lorsque les utilisateurs sont hors ligne, cette fonctionnalité serait vraiment utile. Pour activer le mode hors ligne, accédez à chrome : // flags / # enable-offline-mode via la barre d’adresse et activez l’option « Activer le mode cache hors ligne ».

N’oubliez pas de redémarrer Chrome pour que l’effet se produise.

5. Faites glisser et déposez le code HTML dans l’éditeur.

Parfois, vous devez copier un élément HTML dans votre éditeur. Au lieu de le copier-coller manuellement dans votre éditeur de texte, vous pouvez simplement faites glisser le DOM et déposez-le dans l’éditeur.

Actuellement, vous ne pouvez faire glisser qu’un seul élément et ses enfants ne le suivront pas. Espérons que cela sera amélioré dans la prochaine mise à jour.

6. Audit CSS

Maintenant, vous pouvez également auditer votre CSS, comme inspecter les règles de style inutiles qui ne sont pas utilisés sur le site Web. Pour ce faire, allez dans l’onglet « Audits » et cliquez sur « Exécuter » pour lancer l’audit du CSS. Vous verrez une liste de classes / sélecteurs qui ne sont pas utilisés sur la page actuelle, comme indiqué ci-dessous.

7. Ajouter SourceMap

Avec Source Map, vous pouvez afficher la version non compilée ou non compilée de CSS ou JavaScript (JS). Cette fonctionnalité est particulièrement utile pour les développeurs composant des styles ou JS utilisant des préprocesseurs comme Sass, LESS ou CoffeeScript. Avec la carte source activée, vous pouvez trouver l’emplacement du code JS ou CSS généré sur un certain numéro de ligne et de colonne. La dernière version de Chrome vous permet d’ajouter manuellement la carte source.

Pour ce faire, assurez-vous que vous êtes dans le panneau des sources, puis ouvrez un fichier. Après cela, faites un clic droit et sélectionnez Ajouter une carte source. pour ajouter le fichier .map.

Derniers mots : 7 nouvelles fonctionnalités de Google Chrome à connaître

j’espère que vous comprendrez cet article 7 nouvelles fonctionnalités de Google Chrome à connaître, si votre réponse est non, vous pouvez demander n’importe quoi via la section du forum de contact liée à cet article. Et si votre réponse est oui, partagez cet article avec votre famille et vos amis.