Share
Découvrez les nouvelles fonctionnalités intéressantes de Chrome 4 pour les développeurs, telles que la prise en charge multi-plateforme, l'intégration impressionnante d'inspecteur Web et de nouvelles extensions pratiques. Il devient de plus en plus difficile de refuser à Chrome le titre de nouveau navigateur pour les développeurs Web. Si ce n'est pas encore tout à fait là, ce sera bientôt!
Avec des temps de chargement rapides, un moteur JavaScript rapide, une solide fondation WebKit et un support renommé, Google Chrome a gagné une part de marché respectable, dépassant même Safari pour devenir le 3ème navigateur le plus populaire en décembre. Toutefois, pour les développeurs, Firefox a séduit de nombreuses personnes en raison de sa capacité à s’exécuter sur n’importe quel système d’exploitation et de sa riche offre d’extensions de développement Web, telles que Firebug et la Web Developer Toolbar. Mais il est important de tester JavaScript dans tous les navigateurs, et disposer d'un ensemble complet d'outils (y compris Internet Explorer) est précisément ce dont les développeurs ont besoin pour tirer le meilleur parti de leur code..
Heureusement pour nous, les gens de Google ont travaillé dur pour rendre Chrome multi-plateforme, intégrer le fantastique Web Inspector de WebKit et ajouter des extensions, faisant de Chrome 4 un outil extrêmement utile pour le développement Web. Dans ce didacticiel, je vais vous présenter certaines des fonctionnalités qui font de Chrome 4 un excellent ajout à la ceinture d’utilitaires pour développeurs Web..
À compter du 25 janvier, Chrome 4 a été officiellement publié comme stable pour Windows. Utilisateurs de Mac et de Linux, cependant, nous devons être un peu plus courageux pour pouvoir profiter de tout ce que Chrome 4 a à offrir. Les utilisateurs Mac ont besoin de télécharger la version "dev" et les utilisateurs Linux, la version "bêta", et cela en vaut vraiment la peine! Consultez les liens suivants pour obtenir une copie de Chrome pour votre système d'exploitation, qui prend en charge tout ce dont nous allons parler dans cet article:
Entrons maintenant dans le vif du sujet! Dans Firefox, Firebug est une aubaine pour les développeurs, fournissant une console de débogage, une manipulation HTML et CSS, un profilage JavaScript et bien d'autres avantages. Les responsables de WebKit en ont pris bonne note et perfectionnent depuis quelques années un ensemble d'outils appelé Web Inspector, qui offre un ensemble similaire de fonctionnalités à Firebug. Dans Chrome 4, Web Inspector est intitulé «Outils de développement».
En plus de Chrome 4, Web Inspector fonctionne depuis un certain temps déjà dans les versions précédentes de Chrome et Safari, bien que ce soit un peu caché. Pour accéder à Web Inspector dans différents navigateurs:
Si vous n'avez pas encore utilisé la console Firebug ou Web Inspector, vous manquez un excellent moyen de déboguer JavaScript. La console JavaScript remplit plusieurs fonctions importantes, telles que la capture des erreurs et leur présentation dans un format utile, le test de courts morceaux de JavaScript et un emplacement pratique pour consigner des informations utiles telles que les valeurs de variables et les temps d'exécution. En pratique, j'utilise régulièrement cet outil pour évaluer les performances de mes programmes et pour m'assurer que certaines variables sont calculées correctement..
En plus de la console JavaScript, il est toujours agréable de disposer d'un outil vous permettant de visualiser rapidement les informations HTML et de style de certains éléments de la page. Le panneau Éléments de l'inspecteur Web fournit une vue arborescente du modèle DOM (Document Object Model), qui vous permet d'explorer le document pour sélectionner un élément d'intérêt. Vous pouvez également accéder aux informations d'un objet donné en cliquant avec le bouton droit de la souris sur un élément dans le navigateur et en sélectionnant «Inspecter l'élément».
Enfin, il convient de noter que le panneau Éléments permet beaucoup plus que la simple inspection. Vous pouvez modifier et ajouter des styles, modifier du code HTML et, dans les versions les plus récentes, afficher des écouteurs d’événements attachés à un élément DOM sélectionné. Toutes ces fonctionnalités peuvent s'avérer très utiles lorsque vous avez affaire à de petits problèmes que vous ne pouvez pas comprendre..
La dernière fonctionnalité que je voudrais souligner dans les outils Web Inspector / Developer est l’onglet «Ressources». Si vous avez travaillé avec l'onglet «Net» de Firebug, vous remarquerez plusieurs similitudes. Pour l’essentiel, l’onglet Ressources fournit une ventilation de toutes les informations échangées entre votre navigateur et le serveur, des images au JavaScript, en passant par le document. Il affiche également une tonne d'informations utiles, telles que:
Outil élégant permettant d’inspecter facilement la vitesse de la page, l’onglet Ressources peut vous aider à identifier et à éliminer les goulots d’étranglement liés aux performances. Essayez-le et voyez où votre page est trop grasse, puis affinez vos images et votre code volumineux pour offrir une meilleure expérience à vos utilisateurs.!
Un aperçu complet des outils de l'inspecteur Web / du développeur peut facilement constituer un didacticiel, mais nous avons davantage de chemin à parcourir! Je recommande fortement de consulter les ressources suivantes pour en savoir plus:
Maintenant, bien que Safari 4 et Chrome aient toujours été époustouflés par rapport à Firefox, il leur manquait une fonctionnalité essentielle: les add-ons. Dans Chrome 4, tout change avec l'ajout de «extensions». Vous pouvez ajouter des fonctionnalités à Chrome en téléchargeant et en installant des extensions ou en utilisant les outils standard du commerce, à savoir HTML, CSS et JavaScript, pour écrire les vôtres. Les extensions peuvent être téléchargées à partir du référentiel des extensions Chrome et doivent être assez simples à installer. Un certain nombre d'extensions très intéressantes ont déjà été créées pour faciliter le développement Web, de la validation rapide aux tests de résolution. Jetons un coup d'oeil à quelques.
Un développeur Web ne peut jamais être assez obsédé par les performances, et plus il y a d'outils qui identifient les performances lentes, mieux c'est. C'est là que Speed Tracer, une extension Chrome développée par Google, entre en jeu. Speed Tracer amène le panneau «Ressources» au niveau supérieur en fournissant une visualisation du temps nécessaire à l'exécution de tâches de bas niveau, telles que le rendu CSS ou l'analyse HTML et JavaScript. Je vous recommande vivement de visionner une démonstration vidéo de Speed Tracer réalisée par Google pour avoir une meilleure idée de la façon dont elle peut vous aider à améliorer les performances de vos applications..
En passant de Firefox à Chrome, une extension que tout le monde va rechercher remplace la fantastique barre d'outils Web Developer. Pour ceux qui ne le savent pas, la barre d’outils Web Developer traite des tâches que Firebug n’était pas censée gérer, telles que la validation rapide de HTML et de CSS, la possibilité de désactiver rapidement le JavaScript ou les images et un outil de vérification des liens. Ces fonctions sont toutes gérées avec style par Pendule, qui offre la plupart des fonctionnalités de base de la barre d’outils Web Developer (pas tout à fait), tout en offrant quelques avantages, comme un sélecteur de couleur..
Les développeurs Web doivent souvent s'assurer que leurs conceptions fonctionnent à différentes résolutions. Le test de résolution permet aux développeurs de redimensionner efficacement la fenêtre de leur navigateur en un certain nombre de résolutions communes pour des tests rapides et faciles. La dernière version vous permet même d’ouvrir plusieurs fenêtres à différentes résolutions en quelques clics seulement. Le test de résolution est fantastique pour vous assurer que votre public cible voit la page que vous voulez qu'ils voient.
Il est parfois nécessaire, non seulement de capturer une capture d'écran de la partie visible actuelle d'un site Web, mais également une capture d'écran de la page entière. Par exemple, vous souhaiterez peut-être imprimer une page complète pour une revue critique par les pairs ou une démonstration dans votre portefeuille. Auparavant, j’utilisais un outil de bureau pour cela, mais maintenant Webpage ScreenShot fait un travail remarquable en capturant des captures d’écran de la page entière en quelques clics..
Vous arrive-t-il parfois de tomber sur une page fantastique et de vous demander «qu'est-ce qu'ils utilisent pour construire cela?», Et je me retrouve souvent à fouiller dans le code source en essayant de déterminer qui est l'homme derrière le rideau. Bien qu’il s’agisse d’un exercice d’entraînement utile et nécessaire si vous vraiment Pour savoir ce qui se passe, Chrome Sniffer peut généralement vous donner un instantané des infrastructures JavaScript et PHP utilisées pour une page donnée. Par exemple, accédez à NetTuts et Chrome Sniffer nous informe qu'il est exécuté sur Wordpress à l'aide de Google Analytics et de jQuery..
L'avenir du développement Web continue de paraître de plus en plus brillant! Il y a quelques années à peine, nous disposions d'un ensemble limité d'outils pour le débogage de JavaScript, le bricolage avec CSS et l'affichage HTML, mais nous disposons aujourd'hui de nombreuses options puissantes. Maintenant que Google Chrome est devenu multi-plateforme, entièrement intégré à WebKit Web Inspector et ajouté des extensions, il s'agit d'un outil polyvalent qui aide les développeurs à améliorer leurs propres pages. Je vous encourage tous à télécharger une copie pour vous-même et à essayer de voir si cela peut vous aider à améliorer vos pages, puis revenez ici et partagez vos plugins et outils préférés avec nous.!
Saviez-vous que vous pouvez gagner jusqu'à 600 USD en écrivant un tutoriel et / ou un screencast PLUS pour nous?? Nous recherchons des didacticiels détaillés et bien écrits sur HTML, CSS, PHP et JavaScript. Si vous en avez la possibilité, veuillez contacter Jeffrey à l'adresse [email protected]..
Veuillez noter que la rémunération réelle dépendra de la qualité du didacticiel final et du screencast..
Accentsconagua