Share
Google Chrome est l'un des principaux acteurs du Web aujourd'hui. C'est rapide, fiable, riche en fonctionnalités et extrêmement utile, surtout si vous êtes un développeur Web. Chrome permet également l'installation d'extensions tierces. Nous construisons ces extensions avec du HTML pur, CSS et JavaScript. L'équipe de Google fait un travail remarquable. Dans cet article, nous allons voir plusieurs outils utiles, dans Chrome, qui facilitent nos processus de développement..
De nos jours, la réactivité est partout. Avec la montée en puissance des appareils mobiles, nous devons faire fonctionner nos applications avec différentes résolutions. Les dernières versions de Chrome contiennent de merveilleux instruments pour faciliter notre travail. Commençons par définir une page simple et poursuivons en la rendant réactive. Voici le balisage HTML:
Site Web adaptatif
Responsive Web Design (RWD) est une approche de conception web…
Il y a quelques styles de base sur la page. Les règles CSS flottent dans les liens de navigation et positionnent les deux sections l'une à côté de l'autre. Le résultat ressemble à ceci:
Maintenant que le HTML et le CSS de base sont en place, nous pouvons commencer à expérimenter. Plaçons les points d'arrêt de nos requêtes média. Il est important de les choisir en fonction du contenu et des endroits où le contenu commence à mal paraître. Définir des résolutions telles que 1024x768, simplement parce que c'est populaire, n'est pas une bonne pratique.
Notre contenu se brise et nous voulons voir la taille exacte de la fenêtre. Nous devons donc redimensionner la fenêtre du navigateur. Sous Chrome, nous sommes en mesure d'ouvrir le panneau des outils de développement et augmenter sa taille là-bas.
Notez que pendant que nous modifions la taille de la fenêtre, nous voyons sa taille dans le coin supérieur droit. Cette petite info-bulle élimine le besoin d'un contrôle de taille manuel. Dans notre cas, les deux sections situées en dessous de la navigation sont devenues trop réduites, environ 500 pixels. Donc, c'est la place pour notre première requête média:
section float: left; largeur: 50%; @media all et (max-width: 550px) section float: none; largeur: 100%;
Si nous descendons un peu en dessous de 550px, nous verrons que la navigation provoque un défilement horizontal autour de 540px. Une nouvelle définition de requête multimédia résout ce problème.
.nav list-style: none; marge: auto 10px; rembourrage: 0; largeur: 510px; .nav li float: left; marge: 0 20 px 0 0; @media all et (max-width: 540px) .nav width: auto; .nav li float: none; marge: 0; rembourrage: 0; text-align: center;
Le résultat est une page Web qui fonctionne sur une large gamme d’écrans. Oui, notre page est simple et ne comporte que deux points d'arrêt, mais le processus de sélection de ceux-ci sera le même, même si nous avons un site Web géant..
Nous recevons souvent des rapports de bugs indiquant que notre application ne fonctionne pas correctement sur un périphérique spécifique. Chrome peut simuler divers appareils pour résoudre ce problème. Il définit la résolution d'écran exacte et définit les bons en-têtes HTTP. Ainsi, nous pouvons avoir une vue rapprochée de ce que voit le vrai utilisateur. La détection du navigateur JavaScript fonctionnera également car le navigateur modifie les en-têtes de requête..
Disons que nous devons simuler un appareil iPhone5. Il y a un petit bouton qui ouvre le tiroir panneau et puis il y a un Émulation languette.
Nous choisissons l'appareil et Chrome applique tous les paramètres de Écran, Agent utilisateur et Capteurs sections. Le navigateur émule même des événements tactiles.
Notre page est maintenant sensible, mais nous devons apporter des modifications à un moment donné. Encore une fois, nous pouvons utiliser Chrome comme outil et voir quels styles sont appliqués au document. Par exemple, le texte de la première section est trop gros. Nous voulons changer cela et définir une nouvelle couleur.
le Éléments panel est également utile si nous avons besoin de voir une règle CSS spécifique, mais nous ne savons pas où se trouve la définition de cette règle. Il y a une section sur le côté droit, qui montre les styles calculés appliqués à l'élément actuellement sélectionné et nous pouvons ensuite le modifier..
Enfin, nous avons parfois besoin de rechercher certains styles CSS, mais il est difficile de les trouver car il y a beaucoup de définitions. dans le outils de développement panneau, nous avons un beau champ de filtrage. Disons que nous voulons accéder aux règles de notre étiquette qui a le concept classe appliquée, voici comment nous pourrions le faire:
Google Chrome est un outil universel. Il dispose d'instruments pour aider les concepteurs, comme nous l'avons fait dans la dernière section de ce didacticiel. Mais il peut faire la même chose pour les développeurs, comme nous le verrons maintenant.
Il existe un bon débogueur JavaScript, intégré à Chrome. Il y a aussi une console et un visualiseur source merveilleux. Pour illustrer le fonctionnement de tout, nous allons ajouter un peu de logique à notre exemple. Nous voulons changer l'étiquette Exemples dans le menu principal pour Exemples impressionnants lorsque nous Cliquez sur sur le lien. Nous utiliserons jQuery comme aide afin de mieux nous concentrer sur l'exemple:
Accentsconagua
$ ('.nav'). sur ('click', fonction (e) var clicked = e.currentTarget; if (clicked.innerHTML === 'Exemples')) clicked.innerHTML = 'Exemples impressionnants'; else console.log ('ne rien faire…';;); Vous connaissez probablement déjà le problème, mais voyons comment le code ci-dessus fonctionne.
Peu importe ce que nous Cliquez sur on a ne fais rien… dans la console. Donc, il semble que notre si la clause est toujours fausse. Fixons un point d'arrêt pour voir ce qui se passe.
Le débogueur s'arrête à notre point d'arrêt et nous montre les variables définies localement. La variable cliqué, pointe vers l'élément de navigation et non vers le élément. Alors c'est innerHTML la propriété est certainement pas Exemples. C'est pourquoi nous avons ne fais rien… à chaque fois. Pour corriger le bogue, nous pourrions simplement utiliser .nav a au lieu de juste .nav.
Ci-dessus, l'approche traditionnelle qui fonctionne si nous savons où définir exactement le point d'arrêt. Mais si nous travaillons avec une base de code volumineuse et surtout si nous devons déboguer le fichier concaténé, cela devient un peu problématique. Nous commençons à placer console.log ici et là et vérifiez la console. Cela fonctionnera, mais bientôt nous aurons beaucoup de données, il sera difficile de les filtrer et de trouver les informations nécessaires. Chrome a également une solution à ce problème. Nous pourrions styler la sortie dans la console en ajoutant % c devant le texte, passé à la .bûche méthode. Ensuite, attachez un deuxième paramètre contenant nos styles. Par exemple:
Il y a autre chose que nous pourrions ajouter. le console l'objet a deux méthodes moins populaires - groupe et groupeFin. Ils nous donnent la possibilité de grouper nos journaux.
Il existe également une bibliothèque qui associe le style et le regroupement de la sortie, Deb.js. La seule chose à faire est de l’inclure dans notre page avant les autres scripts et de l’attacher. .deb () à la fin de la fonction que nous voulons inspecter. Il y a aussi .debc () version qui envoie les groupes réduits à la console.
Avec cette bibliothèque, nous pouvons obtenir les arguments passés à la fonction, sa valeur de retour de trace de pile et son temps d'exécution. Comme nous l'avons mentionné ci-dessus, les messages sont bien regroupés et imbriqués les uns dans les autres. Il est donc beaucoup plus facile de suivre le flux de l'application..
L'une des principales caractéristiques du navigateur de Google est l'écosystème de l'extension. Il existe un moyen pour nous d'écrire des programmes installables qui s'exécutent dans le navigateur et il existe des dizaines d'API utiles que nous pouvons utiliser. La chose la plus importante cependant est que nous n’avons pas à apprendre une nouvelle langue. Les technologies que nous allons utiliser sont les HTML, CSS et JavaScript habituels. Découvrez l'introduction suivante au développement des extensions de Chrome.
Il y a même une section séparée dans la boutique en ligne de Chrome appelée développement web. Il contient des instruments utiles spécialement conçus pour nous, les développeurs. Il y en a un qui s'appelle Yez !. Il apporte des fonctionnalités de type terminal dans le panneau Outils de développement. Nous sommes en mesure d'exécuter des commandes shell et d'obtenir leur sortie en temps réel.
L'extension elle-même n'est pas suffisante pour exécuter des commandes shell. C'est parce que nous n'avons pas accès au système d'exploitation. C'est pourquoi il existe un module Node.js qui agit en tant que proxy. Yez! se connecte à l'application en cours d'exécution Node.js via des sockets Web. Nous pourrions installer le module via le gestionnaire de paquets Node.js en utilisant npm install -g yez.
Yez! a également une belle intégration Git et nous montre la branche dans le répertoire courant. Nous sommes en mesure d'exécuter des commandes de terminal et d'obtenir leur sortie immédiatement.
L'extension a été développée à l'origine en tant que coureur de tâches. Donc, il a une interface pour les définitions de tâches. En fait, ce n'est qu'une série de commandes shell exécutées les unes après les autres. Nous obtenons les mêmes résultats en créant des scripts shell.
Nous pouvons également voir la sortie du terminal en temps réel. L'extension convient donc au développement d'applications Node.js. Normalement, nous devons redémarrer le processus Node.js, mais maintenant, tout est visible dans Chrome..
En tant que développeurs Web, il arrive souvent que nous devions effectuer une requête HTTP à nos applications. Nous avons peut-être développé une API REST ou un script PHP qui accepte les paramètres POST. Il existe un outil de ligne de commande appelé cURL. C'est probablement l'instrument le plus utilisé pour interroger le Web.
Avec cURL, nous n’avons pas à sauter au terminal. Il existe un DHC (client API HTTP REST) disponible. C'est une extension qui nous donne le contrôle total de la requête HTTP. Nous pourrions modifier la méthode de requête, les en-têtes ou les paramètres GET et POST. Il affiche également le résultat de la demande, avec ses en-têtes. Un instrument très utile.
Nous connaissons tous l'importance des tests. Il est extrêmement important pour nous de savoir que nos programmes se comportent correctement. Parfois, la rédaction de tests peut être difficile. Surtout si nous devons tester l'interface utilisateur. Heureusement, il existe un module Node.js qui contrôle notre navigateur (Chrome) et déclenche des actions telles que la visite d'une page, le clic sur un lien ou la saisie d'un formulaire. Cela s'appelle DalekJS. Il est facilement installable en exécutant:
npm installer -g dalek-cli
Faisons une courte expérience et voyons comment tout fonctionne. Dans un répertoire nouvellement créé, nous avons besoin d’un package.json fichier avec le contenu suivant:
"nom": "projet", "description": "description", "version": "0.0.1", "devDependencies": "dalekjs": "0.0.8", "dalek-browser-chrome": "0.0.10"
Après avoir couru npm installer dans le même répertoire, nous aurons dalekjs et dalek-browser-chrome installé dans un node_modules dossier. Nous allons placer notre test dans un fichier appelé test.js. Sauvegardons-le dans le même dossier. Voici un court script qui teste la fonctionnalité de recherche de GitHub:
var url = 'https://github.com/'; module.exports = 'doit effectuer une recherche dans GitHub': function (test) test .open (url) .type ('# js-command-bar-field', 'dalek') .submit ('# top_search_form') .assert.text ('. repolist h3 a', 'dalekjs / dalek', 'Il existe un lien avec l'étiquette dalekjs') .click ('[href = "/ dalekjs / dalek"]') .assert.text (' .repository-description p ',' Cadre de base de DalekJS ',' C’est le bon référentiel ') .done (); Pour exécuter le test, nous devons tirer dalek ./test.js -b chrome dans notre console. Le résultat est que DalekJS lance une instance du navigateur Google Chrome. Il ouvre ensuite le site de GitHub, à quel point vous pouvez taper Dalek dans le champ de recherche et va dans le référentiel approprié. En fin de compte, Node.js ferme simplement la fenêtre ouverte. La sortie dans la console ressemble à ceci:
DalekJS prend en charge PhantomJS, Firefox, InternetExplorer et Safari. C'est un outil utile qui fonctionne sous Windows, Linux et Mac. La documentation est disponible sur la page officielle dalekjs.com
Lorsque nous sommes devant notre ordinateur, nous passons la majeure partie de notre temps dans le navigateur. Il est bon de savoir que Google Chrome n'est pas seulement un programme de navigation sur le Web, mais également un puissant instrument de développement Web..
Maintenant, il existe des tonnes d'extensions utiles et une communauté en croissance constante. Je vous encourage donc vivement à essayer Google Chrome, si vous ne l'utilisez pas déjà pour votre prochaine application Web..
