Comment utiliser les outils de développement de navigateur Web



par

En plus que la plupart des fabricants de navigateurs se concentrent sur l'utilisateur quotidien qui cherche à surfer sur le Web, ils s'adressent également aux développeurs Web, aux concepteurs et aux professionnels de l'assurance qualité qui aident à créer les applications et les sites auxquels ces utilisateurs accèdent en intégrant des outils puissants directement dans les navigateurs. se.

Il est révolu le temps où les seuls outils de programmation et de test trouvés dans un navigateur vous permettaient d'afficher le code source d'une page et rien de plus. Les navigateurs d'aujourd'hui vous permettent de plonger beaucoup plus en profondeur en exécutant et en déboguant des extraits de code JavaScript, en inspectant et en modifiant les éléments DOM, en surveillant le trafic réseau en temps réel pendant le chargement de votre application ou de votre page pour identifier les goulots d'étranglement, en analysant les performances CSS, en vous assurant que votre code est ne pas utiliser trop de mémoire ou trop de cycles CPU, et bien plus encore.

Du point de vue des tests, vous pouvez reproduire le rendu d'une application ou d'une page Web dans différents navigateurs ainsi que sur différents appareils et plates-formes grâce à la magie de la conception réactive et des simulateurs intégrés. La meilleure partie est que vous pouvez faire tout cela sans avoir à quitter votre navigateur!

Les didacticiels ci-dessous vous expliquent comment accéder à ces outils de développement dans plusieurs navigateurs Web populaires.


Google Chrome

Les outils de développement de Chrome vous permettent de modifier et de déboguer le code, d'auditer des composants individuels pour exposer les problèmes de performances, de simuler différents écrans d'appareils, y compris ceux exécutant Android ou iOS, et d'exécuter plusieurs autres fonctions utiles.

  1. Sélectionnez Chrome menu principal, marqué par trois lignes horizontales et situé dans le coin supérieur droit du navigateur.

  2. Lorsque le menu déroulant apparaît, placez le curseur de votre souris sur le Autres outils option.

  3. Un sous-menu devrait maintenant apparaître. Sélectionnez l'option intitulée Outils de développement. Vous pouvez également utiliser le raccourci clavier suivant à la place de cet élément de menu: Chrome OS / Windows (CTRL + MAJ + I), Mac OS X (ALT (OPTION) + COMMANDE + I)

  4. L'interface des outils de développement Chrome doit maintenant être affichée, comme illustré dans cet exemple de capture d'écran. En fonction de votre version de Chrome, la disposition initiale que vous voyez peut être légèrement différente de celle présentée ici. Le hub principal des outils de développement, généralement situé en bas ou à droite de l'écran, contient les onglets suivants.

  5. En plus de ces sections, vous pouvez également accéder aux outils suivants via le >> icône, située à droite du performance languette.

    • Mémoire: Surveillez et enregistrez l'utilisation de la mémoire sur une page Web. Vous pouvez voir à quel point le JavaScript de votre site est lourd.
    • Sécurité: Met en évidence les problèmes de certificat et d'autres problèmes liés à la sécurité avec la page ou l'application active.
    • Application
      : Inspectez les ressources utilisées par une application Web. Obtenez une ventilation complète de ce qui est utilisé.
    • Vérifications: Offre des moyens d'optimiser le temps de chargement et les performances générales d'une page ou d'une application.

  6. Mode appareil vous permet d'afficher la page active dans un simulateur qui la restitue presque exactement telle qu'elle apparaîtrait sur l'un des plus d'une douzaine d'appareils, y compris plusieurs modèles Android et iOS bien connus tels que l'iPad, l'iPhone et le Samsung Galaxy. Vous avez également la possibilité d'émuler des résolutions d'écran personnalisées pour répondre à vos besoins particuliers de développement ou de test.

    Pour basculer Mode appareil activé et désactivé, sélectionnez le icône de téléphone portable situé directement à gauche du Éléments languette.

  7. Vous pouvez également personnaliser l'apparence de vos outils de développement en sélectionnant d'abord le bouton de menu représenté par trois points placés verticalement et situé à l'extrême droite des languettes susmentionnées.

    À partir de ce menu déroulant, vous pouvez repositionner le dock, afficher ou masquer différents outils ainsi que lancer des éléments plus avancés tels qu'un inspecteur de périphériques. Vous constaterez que l'interface des outils de développement elle-même est hautement personnalisable via les paramètres trouvés dans cette section.

Mozilla Firefox

La section des développeurs Web de Firefox comprend des outils pour les concepteurs, les développeurs et les testeurs, tels qu'un éditeur de style et une pipette ciblant les pixels.

  1. Sélectionnez Firefox menu principal, représenté par trois lignes horizontales et situé dans le coin supérieur droit de la fenêtre du navigateur.

  2. Lorsque le menu déroulant apparaît, sélectionnez Web Developer.

  3. Le système Menu Développeur Web devrait maintenant être affiché, contenant les options suivantes. Vous remarquerez que la plupart des éléments de menu sont associés à des raccourcis clavier.

    • Toggle Outils: Affiche ou masque l'interface des outils de développement, généralement positionnée au bas de la fenêtre du navigateur. Raccourci clavier: Mac OS X (ALT (OPTION) + COMMANDE + I), Les fenêtres (CTRL + MAJ + I)
    • inspecteur: Vous permet d'inspecter et / ou d'ajuster le code CSS et HTML sur la page active ainsi que sur un appareil portable via un débogage à distance. Raccourci clavier: Mac OS X (ALT (OPTION) + COMMANDE + C), Les fenêtres (CTRL + MAJ + C)
    • Console Web: Vous permet d'exécuter des expressions JavaScript dans la page active ainsi que d'examiner un ensemble diversifié de données enregistrées, y compris les avertissements de sécurité, les demandes réseau, les messages CSS, etc. Raccourci clavier: Mac OS X (ALT (OPTION) + COMMANDE + K), Les fenêtres (CTRL + MAJ + K)
    • Debugger: Le débogueur JavaScript vous permet d'identifier et de corriger les défauts en définissant des points d'arrêt, en inspectant les nœuds DOM, en mettant en boîte noire des sources externes, et bien plus encore. Comme c'est le cas avec l'Inspector, cette fonctionnalité prend également en charge le débogage à distance. Raccourci clavier: Mac OS X (ALT (OPTION) + COMMANDE + S), Les fenêtres (CTRL + MAJ + S)
    • Éditeur de style: Vous permet de créer de nouvelles feuilles de style et de les incorporer à la page Web active, ou de modifier des feuilles existantes et de tester le rendu de vos modifications dans un navigateur en un seul clic. Raccourci clavier: Mac OS X, Windows (MAJ + F7)
    • performance: Fournit une ventilation détaillée des performances réseau de la page active, des données de fréquence d'images, du temps d'exécution et de l'état de JavaScript, du clignotement de la peinture, et bien plus encore. Raccourci clavier: Mac OS X, Windows (MAJ + F5)
    • Réseau: Répertorie chaque demande réseau initiée par le navigateur avec la méthode correspondante, le domaine d'origine, le type, la taille et le temps écoulé. Raccourci clavier: Mac OS X (ALT (OPTION) + COMMANDE + Q), Les fenêtres (CTRL + MAJ + Q)
    • Inspecteur de stockage: Jetez un œil au cache et aux cookies stockés par un site Web. Raccourci clavier: (MAJ + F9)
    • Barre d'outils du développeur: Ouvre un interpréteur de ligne de commande interactif. Entrer Besoin d'aide ? dans l'interpréteur pour une liste de toutes les commandes disponibles et leur syntaxe appropriée. Raccourci clavier: Mac OS X, Windows (MAJ + F2)
    • WebIDE: Offre la possibilité de créer et d'exécuter des applications Web via un appareil réel exécutant Firefox OS ou via le simulateur Firefox OS. Raccourci clavier: Mac OS X, Windows (MAJ + F8)
    • Console du navigateur: Fournit les mêmes fonctionnalités que la console Web (voir ci-dessus). Cependant, toutes les données renvoyées concernent l'ensemble de l'application Firefox (y compris les extensions et les fonctions au niveau du navigateur), par opposition uniquement à la page Web active. Raccourci clavier: Mac OS X (SHIFT + COMMANDE + J), Les fenêtres (CTRL + MAJ + J)
    • Vue de conception réactive: Vous permet d'afficher instantanément une page Web dans différentes résolutions, mises en page et tailles d'écran pour imiter plusieurs appareils, y compris les tablettes et les smartphones. Raccourci clavier: Mac OS X (ALT (OPTION) + COMMANDE + M), Les fenêtres (CTRL + MAJ + M)
    • Pipette: Affiche le code couleur hexadécimal des pixels sélectionnés individuellement.
    • Bloc-notes: Scratchpad vous permet d'écrire, de modifier, d'intégrer et d'exécuter des extraits de code JavaScript à partir d'une fenêtre contextuelle de Firefox. Ouvrez un document JavaScript interactif qui vous permet d'écrire du code et de le tester sur un site Web. Raccourci clavier: (MAJ + F4)
    • Travailleurs de service: Le service de débogage travaille votre application Web. Obtenez des informations détaillées sur leurs performances et leurs erreurs.
    • Source de la page: L'outil de développement d'origine basé sur un navigateur, cette option affiche simplement le code source disponible pour la page active. Raccourci clavier: Mac OS X (COMMANDE + U), Les fenêtres (CTRL + U)
    • Obtenez plus d'outils: Ouvre le Boîte à outils du développeur Web collection sur le site officiel des add-ons de Mozilla, comprenant une douzaine d'extensions populaires telles que Firebug et Greasemonkey.


Microsoft Edge / Internet Explorer

Communément appelé le Outils de développement F12, un hommage au raccourci clavier qui a lancé l'interface depuis les versions antérieures d'Internet Explorer, l'ensemble d'outils de développement dans IE11 et Microsoft Edge a parcouru un long chemin depuis sa création en offrant un groupe très pratique de moniteurs, débogueurs, émulateurs, etc. -les compilateurs à la volée.

  1. Choisir Plus d'actions, représenté par trois points et situé dans le coin supérieur droit de la fenêtre du navigateur.

  2. Lorsque le menu déroulant apparaît, sélectionnez l'option intitulée Outils de développement.

  3. L'interface de développement doit maintenant être affichée, généralement au bas de la fenêtre du navigateur. Les outils suivants sont disponibles, chacun accessible en cliquant sur leur en-tête d'onglet respectif ou en utilisant le raccourci clavier associé.

    • Explorateur DOM: Vous permet de modifier les feuilles de style et le code HTML dans la page active, ce qui rend les résultats modifiés au fur et à mesure. Utilise la fonctionnalité IntelliSense pour compléter automatiquement le code le cas échéant. Raccourci clavier: (CTRL + 1)
    • CONSOL: Offre la possibilité de soumettre des informations de débogage, y compris des compteurs, des minuteries, des traces et des messages personnalisés via une API intégrée. Vous permet également d'injecter du code dans une page Web active et de modifier les valeurs attribuées à des variables individuelles en temps réel. Raccourci clavier: (CTRL + 2)
    • Debugger: Vous permet de définir des points d'arrêt et de déboguer votre code pendant son exécution, ligne par ligne si nécessaire. Raccourci clavier: (CTRL + 3)
    • Réseau: Répertorie chaque demande réseau initiée par le navigateur pendant le chargement et l'exécution de la page, y compris les détails du protocole, le type de contenu, l'utilisation de la bande passante et bien plus encore. Raccourci clavier: (CTRL + 4)
    • performance: Détaille les fréquences d'images, l'utilisation du processeur et d'autres mesures liées aux performances pour vous aider à accélérer les temps de chargement des pages et d'autres activités. Raccourci clavier: (CTRL + 5)
    • Mémoire: Vous aide à isoler et à corriger les fuites de mémoire potentielles sur la page Web actuelle en affichant une chronologie d'utilisation de la mémoire avec des instantanés de différents intervalles de temps. Raccourci clavier: (CTRL + 6)
    • Émulation: Vous montre comment la page active serait rendue dans différentes résolutions et tailles d'écran, émulant des smartphones, des tablettes et d'autres appareils. Il offre également la possibilité de modifier l'agent utilisateur et l'orientation de la page, ainsi que de simuler différentes géolocalisations en entrant une latitude et une longitude. Raccourci clavier: (CTRL + 7)

  4. Pour afficher le CONSOL tandis que dans l'un des autres outils, appuyez sur bouton carré avec un support droit à l'intérieur, situé dans le coin supérieur droit de l'interface des outils de développement.

  5. Pour désancrer l'interface des outils de développement afin qu'elle devienne une fenêtre distincte, sélectionnez le deux rectangles en cascade ou utilisez le raccourci clavier suivant: CTRL + P. Vous pouvez replacer les outils à leur emplacement d'origine en appuyant une deuxième fois sur CTRL + P.


Apple Safari (OS X uniquement)

L'ensemble d'outils de développement diversifiés de Safari reflète la grande communauté de développeurs qui utilise un Mac pour leurs besoins de conception et de programmation. En plus d'une console puissante et des fonctionnalités traditionnelles de journalisation et de débogage, un mode de conception réactif facile à utiliser et un outil pour créer vos propres extensions de navigateur sont également fournis.

  1. Choisir "safari". dans le menu du navigateur, situé en haut de votre écran. Lorsque le menu déroulant apparaît, sélectionnez "Préférences". Vous pouvez également utiliser le raccourci clavier suivant à la place de cet élément de menu: COMMANDE + COMMA(,)

  2. Safari "Préférences" L'interface devrait maintenant être affichée, superposée à la fenêtre de votre navigateur. Sélectionnez le Icône avancée, situé à l'extrême droite de l'en-tête.

  3. Le système Passerelle IIoT les préférences devraient maintenant être visibles. Au bas de cet écran se trouve une option intitulée Afficher le menu Développer dans la barre de menu, accompagné d'une case à cocher. S'il n'y a pas de coche dans la case, cliquez dessus une fois pour en placer une.

  4. Fermer la "Préférences" interface.

  5. Vous devriez maintenant remarquer une nouvelle option dans le menu du navigateur nommée Développer des méthodes à hautes performances, situé entre Signets et fenêtre. Cliquez sur cet élément de menu. Un menu déroulant devrait maintenant être affiché, contenant les options suivantes.

    • Ouvrir la page avec: Vous permet d'ouvrir la page Web active dans l'un des autres navigateurs actuellement installés sur votre Mac.
    • Agent utilisateur: Vous permet de sélectionner parmi plus d'une douzaine de valeurs d'agent utilisateur prédéfinies, y compris plusieurs versions de Chrome, Firefox et Internet Explorer, ainsi que de définir votre propre chaîne personnalisée.
    • Entrez en mode de conception réactive: Rend la page actuelle telle qu'elle apparaîtrait sur différents appareils et à différentes résolutions d'écran.
    • Afficher l'inspecteur Web: Lance l'interface principale des outils de développement de Safari, généralement placée au bas de l'écran de votre navigateur et contenant les sections suivantes: éléments, réseau, ressources, chronologies, débogueur, stockage, console.
    • Afficher la console d'erreur: Lance également l'interface des outils de développement, directement sur le Onglet Console qui affiche des erreurs, des avertissements et d'autres données de journal consultables.
    • Afficher la source de la page: Ouvre le Onglet Ressources, qui affiche le code source de la page active classée par le document.
    • Afficher les ressources de la page: Exécute la même fonction que l'option Afficher la source de la page.
    • Afficher l'éditeur d'extraits de code: Ouvre une nouvelle fenêtre dans laquelle vous pouvez saisir du code CSS et HTML, en prévisualisant sa sortie à la volée.
    • Afficher le générateur d'extensions: Offre la possibilité de créer ou de modifier des extensions Safari avec CSS, HTML et JavaScript.
    • Afficher l'enregistrement de la chronologie: Ouvre l'onglet Chronologies et commence à afficher les requêtes réseau, les informations de mise en page et de rendu ainsi que l'exécution de JavaScript en temps réel.
    • Caches vides: Supprime tout le cache actuellement stocké sur votre disque dur.
    • Désactiver les caches: Arrête Safari de la mise en cache afin que tout le contenu soit récupéré du serveur à chaque chargement de page.
    • Désactiver les images: Empêche le rendu des images sur toutes les pages Web.
    • Désactiver les styles: Ignore les propriétés CSS lorsqu'une page est chargée.
    • Désactiver JavaScript: Restreint l'exécution de JavaScript sur toutes les pages.
    • Désactiver les extensions: Empêche toutes les extensions installées de s'exécuter dans le navigateur.
    • Désactiver les piratages spécifiques au site: Si Safari a été modifié pour gérer explicitement les problèmes spécifiques à la page Web active, cette option bloquera ces modifications afin que la page se charge comme elle le ferait avant l'introduction de ces modifications.
    • Désactiver les restrictions de fichiers locaux: Permet au navigateur d'avoir accès aux fichiers sur vos disques locaux, une action qui est restreinte par défaut pour des raisons de sécurité.
    • Désactiver les restrictions d'origine croisée: Ces restrictions sont mises en place par défaut pour éviter XSS et d'autres dangers potentiels. Cependant, ils doivent souvent être temporairement désactivés à des fins de développement.
    • Autoriser JavaScript à partir du champ de recherche intelligente: Lorsqu'il est activé, il offre la possibilité de saisir des URL avec javascript: intégré directement dans la barre d'adresse.
    • Traitez les certificats SHA-1 comme non sécurisés: Les certificats SSL utilisant l'algorithme SHA-1 sont largement considérés comme obsolètes et vulnérables.

Laisser un commentaire