Comment améliorer le site WordPress en utilisant les outils de développement chrome
Les outils de développement chrome (devtools) sont un excellent ensemble d’outils de création et de débogage Web Google Chrome. Devtools donne accès aux éléments qui créent une page Web. Vous pouvez utiliser devtools pour résoudre des problèmes de mise en page, afficher et modifier CSS, définir des points d’arrêt Javascript, vérifier le Code pour l’optimisation, et plus encore. Devtools est gratuit et a été intégré dans votre navigateur Chrome. Donc si vous avez chrome, vous l’avez déjà. Dans cet article, nous décrirons ces outils et comment ils peuvent être utilisés pour améliorer le site WordPress.
Ouverture de l’instrument
Il y a plusieurs façons d’ouvrir les outils: Sélectionnez le menu chrome, sélectionnez outils, puis sélectionnez outils de développement. Faites un clic droit sur n’importe quel élément de l’écran et sélectionnez vérifier l’élément (ma méthode préférée). Ctrl + shift + I (pour PC) | CMD + OPTI + I (pour Mac) la fenêtre devtools contient deux panneaux. Les deux contiennent des outils qui peuvent être utilisés ensemble. Voici les outils. Le premier groupe comprend huit ensembles d’instruments. Les outils comprennent: la deuxième partie de la console de vérification des ressources du profil des séries chronologiques des sources d’éléments du réseau comprend:
Calcule le point d’arrêt du modèle d’objet de document (DOM) de l’auditeur d’événements de style. L’outil de visualisation des propriétés peut être utilisé de plusieurs façons. Vous pouvez redimensionner la fenêtre pour faire de l’espace. Vous pouvez également déplacer la fenêtre sur le côté droit de l’écran afin qu’il y ait des outils d’un côté et votre site de l’autre. Élément
Ce panneau affiche l’arborescence Dom qui représente les éléments HTML de la page et vous permet de vérifier ou de modifier n’importe quel élément. Vous pouvez voir les ajustements CSS en temps réel. En cliquant sur un noeud, vous pouvez ouvrir et compresser n’importe quel panneau pour simplifier la visualisation et la navigation
Flèches ou triangles). La vue Dom Tree affiche l’état actuel de l’arbre au lieu du HTML original (par exemple, il peut avoir été modifié par JavaScript).
Lorsque vous passez le curseur sur un élément dans la vue arborescente, les éléments de la page Web sont mis en évidence. Il affiche des informations telles que le style de police, la taille de l’image, etc. Si vous cliquez sur l’un des éléments, la fenêtre de droite affiche CSS. Ici, vous pouvez choisir un style et changer la police, la couleur, la taille, les marges, les bordures, l’espacement intérieur, et plus encore. Au pied de page, vous verrez des miettes de pain pour revenir si nécessaire. Vous pouvez modifier n’importe quel élément en cliquant sur n’importe quel élément et en tapant les modifications. Lorsque vous appuyez sur Entrée, vous verrez qu’un changement s’est produit.
Par exemple, cette image a actuellement une largeur de 600 pixels. Je peux sélectionner la largeur et taper la nouvelle valeur, puis appuyer sur Entrée.
L’image est immédiatement changée en Nouvelle taille. Pour changer le style de police, sélectionnez la police et sélectionnez ce que vous voulez changer dans la fenêtre de style à droite.
Vous pouvez même faire glisser et placer un élément dans un nouvel emplacement pour changer la disposition de la page.
J’ai simplement fait glisser la DIV pour déplacer les commentaires les plus récents vers les messages les plus récents.
Un clic droit fournit un nouvel ensemble de fonctionnalités. Vous pouvez voir différents états d’éléments, éditer comme HTML, définir des séparateurs, copier des chemins CSS, et plus encore. Vous pouvez également faire un clic droit et supprimer le noeud. C’est trop facile, presque effrayant.
J’utilise cet outil pour trouver la taille de l’image et vérifier le fragment de code. Réseau
Le panneau Web affiche les ressources demandées et téléchargées à partir de votre site Web. Il est affiché graphiquement en temps réel. Voir quels articles ont plus de temps à télécharger
Fournit des informations sur les problèmes à résoudre pour optimiser la page. Vous pouvez filtrer et afficher différents types de vues et de diagrammes, comme la cascade. Vous pouvez enregistrer et enregistrer les activités du Réseau pour analyse ultérieure. Vous pouvez voir les détails de la ressource. Les détails comprennent:
En – têtes de requête et de réponse http: affiche l’URL de la requête, la méthode http, le Code d’état de la réponse, et énumère les en – têtes de requête et de réponse http ainsi que leurs valeurs et paramètres de chaîne de requête. Aperçu des actifs: affiche un aperçu des images et des actifs json. Réponse http: affiche le contenu non formaté de la ressource. Nom et valeur du cookie: affiche les cookies transférés dans les en – têtes de requête et de réponse http de la ressource et supprime les cookies. Messages websocket: affiche les messages envoyés ou reçus par une connexion websocket. Calendrier du réseau de ressources: diagramme montrant le temps consacré aux phases du réseau impliquées dans le chargement des ressources. La vue en cascade est un bon moyen de voir le temps de chargement de chaque projet depuis le début de la demande jusqu’à la livraison du dernier octet du projet. Vous pouvez mieux comprendre où changer en regardant quels éléments prennent plus de temps.
Vous pouvez sauvegarder les données du Réseau pour une analyse future. Source:
Vous pouvez utiliser le panneau source pour visualiser et déboguer le code JavaScript et les scripts qui font partie de la page de chargement. Vous pouvez mettre en pause, reprendre, faire défiler le Code et mettre en pause les exceptions. Comprend des fonctions d’exécution de code de base afin que vous puissiez contourner, entrer, sortir et activer \/ désactiver les points d’arrêt. Vous pouvez utiliser des points d’arrêt pour déboguer Javascript, les mises à jour DOM et les appels réseau. Vous pouvez également définir des jeux de mots
Toute expression peut renvoyer une interruption conditionnelle vraie ou fausse. Si les conditions sont remplies, le point d’arrêt suspend le Code.
Il y a une bonne fonction d’impression qui permet de lire facilement le Code simplifié. Cela facilite également la visualisation de l’emplacement des points d’arrêt. Si cela ne fonctionne pas comme vous le souhaitez, vous pouvez utiliser un format de cartographie basé sur json, appelé cartographie source. La carte source est créée par un réducteur avec cette fonctionnalité intégrée. Séries chronologiques
Le panneau timeline affiche le temps de chargement et d’utilisation de la page. Il tracera chaque événement sur l’horaire. Il affiche des ressources telles que Javascript, style Computing et Redesign. Vous pouvez enregistrer les événements et les analyser étape par étape. Il existe trois modes:
Événements: liste de tous les événements organisés par type. Cela montre quelles tâches prennent le plus de temps. Frames: affiche le travail à accomplir dans chaque Frame pour la performance de rendu du site. Par exemple, si le site est rendu à 60 images par seconde, il affiche le travail accompli en 1 \/ 60 seconde. Cela comprend le chargement des scripts, le dessin des mises en page, la gestion des événements, etc. Lorsque vous chargez une page, vous pouvez l’utiliser pour voir toute activité inhabituelle. Mémoire: diagramme montrant l’utilisation de la mémoire au fil du temps. Il affiche tous les documents, noeuds et auditeurs d’événements stockés en mémoire. Cela vous aide à comprendre ce qui cause la perte de mémoire. Profil
Ici, vous pouvez analyser le temps d’exécution et l’utilisation de la mémoire des pages Web et des applications. Ceci affiche où la ressource est utilisée. C’est un bon outil pour optimiser le Code. Il enregistre trois types de profils: collecter le profil CPU javascript: afficher le temps d’exécution des fonctions JavaScript. Prendre des photos de tas: exposition
Utilisation de la mémoire et distribution des objets JavaScript. Allocation du tas d’enregistrement: enregistre l’allocation de l’objet pour afficher la perte de mémoire au fil du temps. Ressources
Vous pouvez utiliser ce panneau pour vérifier les actifs. Il affiche des informations sur indexeddb, SQL Web Database, app cache cookies, local et session Store, et plus encore. Vous pouvez également vérifier les actifs visuels tels que les polices, les images et les feuilles de style. L’onglet indexedb vous permet de vérifier les bases de données indexedb et les archives d’objets, ainsi que de visualiser et de supprimer les enregistrements. Vous pouvez exécuter des commandes SQL et voir les résultats dans un format tabulaire. Lorsque vous tapez une commande, des conseils sont fournis sur les noms de table, les commandes et les clauses. L’onglet cookies affiche des informations sur les cookies créés par http ou JavaScript. Vous pouvez les supprimer individuellement ou en groupe. Chrome cache les ressources de l’application. L’onglet cache d’application affiche l’état de ces ressources. Il affiche également l’URL de la ressource, le type de ressource et sa taille. Le panneau local et de stockage de session vous permet de visualiser, créer, supprimer et modifier des paires de clés \/ valeurs locales et de stockage de session créées à l’aide de l’API de stockage. Audit
Le panneau de contrôle analyse la page pendant le chargement et recommande des corrections pour optimiser le chargement de la page. Il dispose de deux contrôles qui divisent l’information en deux catégories: l’utilisation du réseau et la performance du Web. Vous pouvez effectuer les deux vérifications en même temps, ou vous pouvez effectuer les vérifications que vous voulez. Vous pouvez effectuer une vérification dans l’état actuel de la page ou recharger la page et la vérifier au moment du téléchargement. Il ne détaille pas Google page speed Insights, mais il vous donne suffisamment d’informations pour restaurer les fruits en basse altitude. Après avoir vu les aperçus de la vitesse de la page
Composites, etc. Et surtout, il montrera un goulot d’étranglement potentiel. Il est utile de placer ces outils dans un tiroir parce que certains panneaux n’incluent pas l’accès à ces outils. Les outils de développement chrome (devtools) sont un excellent ensemble d’outils de création et de débogage Web pour vous aider à améliorer votre site Web. Vous pouvez rapidement faire glisser et déposer des éléments pour modifier la disposition du site, corriger les pertes de mémoire, corriger les problèmes de chargement de page, voir votre site sur presque n’importe quel appareil mobile et la taille de l’écran, et plus encore. Cet aperçu n’est qu’un aperçu préliminaire de la fonctionnalité de ces outils. Mieux encore, il est intégré dans Google Chrome, donc vous n’avez pas à télécharger quoi que ce soit. J’aimerais avoir votre avis. Utilisez – vous les outils de développement Chrome? Quelle est votre fonction préférée? Qu’utilisez – vous de plus? Avez – vous des suggestions pour utiliser ces outils? Faites – nous savoir dans les commentaires.
