Share
En 2013, j'ai publié quelques tutoriels sur DevTools: marquage et style, mise en réseau, console et JavaScript et performance, couvrant les fonctionnalités de base des différents panneaux DevTools. Depuis lors, beaucoup de choses ont changé, alors jetons un coup d'oeil.
DevTools a pas mal grandi depuis sa dernière apparition sur Tuts +, voici quelques-unes des fonctionnalités que vous voudrez connaître:
Screencast: afficher et interagir avec des pages Web sur votre appareil Android via DevTools sur le bureau.
Espaces de travail: Utilisez le Sources panneau en tant qu'éditeur de code. Modifiez le code de votre projet et conservez-le sur le disque..
Débogage de la carte source: écrire MOINS / Sass ou même CoffeeScript? Générez les mappages source lors de la compilation pour que DevTools comprenne le mappage.
* Tableau des flammes: *afficher une visualisation interactive du traitement de JavaScript au fil du temps.
Émulation mobile: émulez certaines caractéristiques de l'appareil (par exemple, les dimensions de l'écran, les agents utilisateurs) et appliquez-les à votre page pour voir son comportement.
Débogage de la toile: parcourez les commandes reçues par le canevas HTML5 et voyez comment le canevas change avec chaque instruction.
Les outils DevTools ont permis d’améliorer les flux de travail de développement et de débogage. Du débogage de la carte source au débogage à distance, il est à espérer qu'au moins un élément de ce message vous permettra d’enlever et de commencer à utiliser. Si vous souhaitez essayer certaines de ces fonctionnalités, n'hésitez pas à essayer Chrome Canary..
La fonction Screencasting vous permet d’interagir avec une page Web ouverte dans Chrome pour Android, à partir de votre ordinateur de bureau. Les clics, les balayages, le défilement, etc. sont tous possibles grâce à la souris.
Ouvrez le Inspecter les appareils page en cliquant sur le Hot-dog icône dans Chrome (coin supérieur droit) et aller à Outils> Inspecter les périphériques (Vous pouvez également entrer chrome: // inspect / # devices dans la barre d'adresse). Assurez-vous de pouvoir voir votre appareil dans la liste. Le débogage USB doit être activé sur votre appareil, si ce n'est déjà fait. Une fois que votre appareil est apparu, entrez l'URL que vous souhaitez déboguer à distance dans le champ "Onglet ouvert avec url"zone de saisie et sélectionnez ouvrir. À ce stade, vous devriez voir cette page se charger dans Chrome pour Android. Frappé 'Inspecter'retour sur le chrome: // inspecter page et remarquez un petit Écran icône dans le coin supérieur droit de l'outil de développement. En cliquant dessus, vous activez le Screencasting.
Le screencast que vous voyez dans DevTools est mis à jour en temps réel. Si vous faites défiler la page (via DevTools ou sur le périphérique), son homologue fera également défiler. Notez dans la capture d'écran ci-dessous, que le Inspecter l'élément La fonctionnalité se comporte exactement comme vous le souhaiteriez, dans la mesure où des fonctionnalités telles que la frappe et les gestes vous permettent de déplacer des parties importantes du flux de travail de test de votre périphérique vers l'outil de développement..
Consultez la documentation officielle sur le screencast de l'écran de votre appareil.
L'idée générale est que vous avez le Sources Le panneau affiche le contenu des fichiers source de votre projet tels qu’ils existent dans votre système de fichiers. Chaque fichier est éditable avec des capacités de sauvegarde sur disque. Modifiez non seulement les fichiers comme un éditeur de texte, mais synchronisez-les avec les modifications, que vous modifiiez les styles Éléments panneau, en externe dans un autre éditeur ou dans les outils de développement.
Pour préparer des espaces de travail:
Vous ajoutez d'abord un dossier à votre espace de travail. Clic-droit dans le Sources volet et sélectionnez 'Ajouter un dossier à l'espace de travail'.
Accorder des autorisations de système de fichiers à la demande de Chrome.
Une fois que vous avez accordé des autorisations de système de fichiers, vous pouvez modifier votre code dans DevTools et le sauvegarder, comme vous le feriez dans un éditeur de code. Le véritable avantage provient de la modification du code partagé par la page Web affichée. Si vous servez une page à http: // localhost: 3000 / Continuez et ajoutez le projet correspondant en tant que dossier Workspace dans DevTools. À ce stade, vous voudrez enseigner à DevTools le mappage entre la ressource réseau et la ressource de système de fichiers correspondante..
Clic-droit sur un fichier dans un dossier de ressources réseau dans le Sources panneau (assurez-vous qu'il y a une correspondance évidente avec un fichier sur votre système de fichiers).
Sélectionner Mapper sur une ressource du système de fichiers…
Une fois que DevTools a été informé du mappage, les fichiers source de votre projet s'afficheront à la place des fichiers de ressources réseau..
Quelques petites fonctionnalités utiles à noter sont:
La plupart des fichiers sont accompagnés d'une coloration syntaxique.
Utilisation Cmd + P pour ouvrir rapidement un fichier, si vous voyez des résultats indésirables (comme des fichiers au sein de node_modules), clic-droit sur le dossier contenant et sélectionnez 'Dossier d'exclusion'.
Créer de nouveaux fichiers à partir du Menu contextuel > 'Nouveau fichier'.
Si vous mettez à jour un fichier ailleurs, DevTools tentera de le recharger automatiquement chaque fois qu'il reprend le focus..
Consultez la documentation de DevTools pour les espaces de travail sur Google pour plus d'informations..
Pour LESS, Sass, CoffeeScript et quelques autres outils, leur processus de compilation peut générer des fichiers de carte source. DevTools est capable d’interpréter de tels fichiers et de vous fournir des capacités d’édition en direct. Cela signifie que vous pouvez éditer vos fichiers source (.moins, .scss, .coffee) dans le Sources panneau. Si vous avez une tâche de surveillance sur vos fichiers prétraités qui recompile un nouveau fichier CSS / JS en cas de modification, DevTools rechargera automatiquement à partir de ce fichier en cas de modification et mettra à jour la page Web en conséquence..
Pour en savoir plus sur ces flux de travail, nous avons déjà couvert DevTools ainsi que le débogage de cartes sources:
Développer avec Sass et Chrome DevTools (juin 2013)
Utilisation de LESS et de Chrome DevTools (Jan 2014)
Le tableau des flammes vous donne un aperçu visuel de l'activité de JavaScript pendant un certain temps.
Pour créer et afficher une visualisation de diagramme de flammes, collectez un profil de CPU JavaScript à partir du Profils tab et choisi le "Graphique"vue sur le Profil résultat. Les pointes du graphique peuvent être agrandies par glisser et sélectionner une partie de l'intérêt. Vous pouvez sélectionner une plage dans laquelle le tableau des flammes sera mis à jour en conséquence, puis faites glisser les flammes horizontalement ou verticalement pour vous déplacer..
La hauteur de toutes les barres d'une colonne donnée n'est pas significative, elle représente simplement chaque appel de fonction qui s'est produit. Cependant, l’important est la largeur d’une barre, car sa longueur est liée au temps nécessaire à la fonction pour s’exécuter..
Chaque barre peut être survolée pour afficher les détails de chronométrage. Un point de départ pour découvrir les goulots d'étranglement liés aux performances serait:
Trouver une barre large dans le tableau des flammes.
Flotter dessus pour faire apparaître la section détails.
Assurer leTemps total'est à un montant satisfaisant.
Une barre qui a un temps d’exécution élevé peut ralentir votre page Web, Cliquez sur sur elle pour être pris au point correspondant dans le code.
Il existe une documentation dédiée pour le tableau des flammes sur Google..
L'émulation mobile permet à Desktop Chrome d'imiter certaines caractéristiques des appareils mobiles. Les caractéristiques peuvent être contrôlées individuellement ou via un ensemble de préréglages fixes basés sur des appareils populaires tels que le Nexus 5, le Galaxy S4, l'iPhone, l'iPad, le Kindle et bien d'autres..
Dès le départ, vous pouvez appliquer un paramètre prédéfini pour voir le comportement de la page Web inspectée dans des conditions mobiles..
Ouvrez le tiroir de DevTools en appuyant sur Échapper.
Naviguez vers le volet Emulation.
Sélectionnez 'Google Nexus 5'
Presse 'Imiter'
Vous voudrez également actualiser la page pour vous assurer que les paramètres du périphérique ont été appliqués correctement. Notez que la zone de page Web visible est maintenant beaucoup plus petite, cela correspond au rapport hauteur / largeur du préréglage de périphérique. Quoi d'autre a changé?
Agent utilisateur: Dactylographie navigator.userAgent dans la console va sortir le imité agent d'utilisateur de périphérique, par exemple: "Mozilla / 5.0 (Linux; Android 4.2.1; fr-fr; Nexus 4 Build / JOP40D) AppleWebKit / 535.19 (KHTML, comme Gecko) Chrome / 18.0.1025.166 Mobile Safari / 535.19"
Résolution d'écran: Les dimensions rapportées screen.width et screen.height Indiquez maintenant les dimensions que vous recevrez de l'appareil lui-même. Notez que pour le préréglage Nexus 5, la largeur et la hauteur sont indiquées comme suit: 384 et 640 respectivement. Voir Un pixel n'est pas un pixel n'est pas un pixel.
* devicePixelRatio: *window.devicePixelRatio rapports 2 qui permettra une requête de média qui cible min-device-pixel-ratio: 2.
Événements tactiles: Les "clics" que vous effectuez vont maintenant se traduire par les événements habituels touchstart, touchend et autres. Conseil: écoutez rapidement les événements tactiles à l'aide de monitorEvents (fenêtre, "touchstart"); dans le Console panneau.
Quel que soit le préréglage d'un périphérique, d'autres options d'émulation disponibles peuvent être activées. La sous-fenêtre Capteurs du panneau Emulation contient un accéléromètre en temps réel que vous pouvez faire glisser.
Vous pouvez personnaliser la latitude et la longitude rapportées, qui se trouvent également dans le volet Capteurs. Ceci est utile lorsque la page Web inspectée utilise navigator.geolocation les méthodes.
Pour plus d'informations sur les options d'émulation disponibles dans DevTools, voir la documentation officielle sur l'émulation Mobile..
L'inspection de canevas dans DevTools est actuellement une fonctionnalité expérimentale. Activer à Outils de développement> Paramètres> Expériences. Canvas Inspection est essentiellement un type de profil, vous le trouverez donc sous le Profils volet où il peut être activé.
Le profileur de canevas collecte les instructions envoyées au canevas lui-même et vous permet de les parcourir en visualisant les états actuels des propriétés du canevas et une représentation visuelle du canevas à un moment donné..
Une fois qu'un profil a été enregistré, vous pouvez explorer les éléments de niveau supérieur (groupes d'appels de tirage) et découvrir les appels de tirage individuels (ctx.drawImagepar exemple). À la droite de chaque appel de tirage, prenez note du fichier: linumber référence, en cliquant dessus, vous accédez à la Sources Panneau avec la ligne de code appropriée sélectionnée. Vous pouvez utiliser la barre d’outils:
… Pour naviguer facilement parmi les appels de tirage individuels ou les groupes d'appels de tirage ultérieurs. La liste déroulante vous permet de spécifier le contexte de la toile à inspecter, s’il existe plusieurs propriétés..
Un guide plus détaillé, voir: Inspection de la zone de dessin à l'aide de Chrome DevTools sur HTML5Rocks.
DevTools for Mobile - Chrome Dev Summit 2013 par Paul Irish.
Il y a aussi The Breakpoint Ep. 6: Accélération du temps de chargement, du temps d'exécution et de l'outillage JS qui met fortement l'accent sur la performance, cela fait un an mais vaut toujours la peine d'être surveillé.
Pour ceux dont les pages défilent lentement sur leur mobile, passez à la caisse: The Breakpoint Ep. 7: profilage d'un site mobile avec Chrome DevTools avec Paul Irish et John McCutchan
Un bel épisode de points d'arrêt en profondeur sur le profilage de la mémoire: Ep. 8: Profilage de la mémoire avec Chrome DevTools, l'épisode présente Loreena Lee et John McCutchan.
Addy Osmani a créé une vidéo de productivité DevTools: Améliorer votre productivité en 2013 avec Chrome DevTools.
Paul Irish présente une série de fonctionnalités précédemment expérimentales dans les DevTools.
Certains résumés de DevTools ont été publiés sur HTML5 Rocks, il y a les éditions de novembre et décembre, la dernière en date étant celle de Chrome 33..
Remy Sharp partage son point de vue sur les performances de rendu avec le panneau Montage.
Paul Lewis et Addy Osmani ont récemment écrit pour Smashing Magazine un article extrêmement détaillé intitulé: 60 pages par seconde: une étude de cas de performances de peinture Pinterest, ce qui est bien, car il fournit des exemples pratiques de performances problématiques..
Adventures in Jank Busting: La parallaxe, les performances et la nouvelle page d'accueil Flickr, publiée sur le blog Flickr Engineering, constituent un autre article extrêmement détaillé sur la manière dont les performances médiocres ont été considérablement améliorées grâce aux mesures prises par le panneau de la timeline.
Brian Grinstead partage ses extraits de DevTools sur GitHub avec un article de blog.
Les secrets du navigateur Les outils de développement d’Andi Smith contiennent un grand nombre de conseils DevTools qui devraient permettre aux développeurs d’être plus efficaces au cours de leur processus de développement..
DevThemez contient un tas de thèmes personnalisés qui peuvent être utilisés avec les DevTools.
J'essaie de re-tweeter / partager des liens utiles sur mes pages Twitter et Google+ dans mon profil ici à Tuts+.
C'est tout pour le moment, merci d'avoir lu.
Vous aimez ce que vous avez appris? En savoir plus sur Chrome DevTools!
Accentsconagua