Outils de développement Web

Les outils de développement Web (souvent abrégés en outils de développement ) permettent aux développeurs Web de tester, de modifier et de déboguer leurs sites Web. Ils diffèrent des créateurs de sites Web et des environnements de développement intégrés (IDE) dans la mesure où ils n'aident pas à la création directe d'une page Web , mais sont plutôt des outils utilisés pour tester l' interface utilisateur d'un site Web ou d'une application Web .

Les outils de développement Web sont disponibles sous forme de modules complémentaires de navigateur ou de fonctionnalités intégrées dans les navigateurs Web modernes. Les navigateurs tels que Google Chrome, Firefox , Safari , Microsoft Edge et Opera disposent d'outils intégrés pour aider les développeurs Web, et de nombreux modules complémentaires supplémentaires peuvent être trouvés dans leurs centres de téléchargement de plug-ins respectifs.

Les outils de développement Web permettent aux développeurs de travailler avec une variété de technologies Web, notamment HTML , CSS , DOM , JavaScript et d'autres composants gérés par le navigateur Web.

Les premiers développeurs Web ont débogué manuellement leurs sites Web en commentant le code et en utilisant des fonctions JavaScript . L'un des premiers outils de débogage de navigateur à exister était l'extension Firebug de Mozilla , qui possédait de nombreuses fonctionnalités de base actuelles des outils de développement actuels, ce qui a permis à Firefox de devenir populaire auprès des développeurs de l'époque. Le moteur WebKit de Safari a également introduit ses outils de développement intégrés à cette époque, qui sont finalement devenus la base des outils actuels de Safari et de Chrome. Microsoft a publié une barre d'outils de développement pour Internet Explorer 6 et 7, puis les a intégrés au navigateur à partir de la version 8. En 2017, Mozilla a abandonné Firebug au profit d'outils de développement intégrés.

De nos jours, tous les navigateurs Web modernes prennent en charge les outils de développement Web qui permettent aux concepteurs et aux développeurs Web d'examiner la composition de leurs pages. Il s'agit d'outils intégrés au navigateur et qui ne nécessitent pas de modules ou de configuration supplémentaires.

• Firefox – F12ouvre les outils de développement Firefox.
• Google Chrome et Opera – Outils de développement (DevTools)
• Microsoft Edge – ouvre les outils de développement Web. Microsoft intègre des fonctionnalités supplémentaires qui ne sont pas incluses dans la version principale de Chromium . F12
• Safari – Safari Web Inspector doit être activé à partir de son panneau de paramètres.

Les outils de développement Web intégrés au navigateur sont généralement accessibles en survolant un élément d'une page Web et en sélectionnant l'option « Inspecter l'élément » ou une option similaire dans le menu contextuel . Alternativement, la touche a tendance à être un autre raccourci courant. F12

Le visualiseur et l'éditeur HTML et DOM sont généralement inclus dans les outils de développement Web intégrés. La différence entre le visualiseur HTML et DOM et la fonction d'affichage de la source dans les navigateurs Web est que le visualiseur HTML et DOM vous permet de voir le DOM tel qu'il a été rendu en plus de vous permettre d'apporter des modifications au HTML et au DOM et de voir le changement reflété dans la page une fois le changement effectué.

En plus de la sélection et de l'édition, les panneaux d'éléments HTML affichent généralement également les propriétés de l'objet DOM, telles que la dimension d'affichage et les propriétés CSS.

Firefox, Safari, Chrome et Edge permettent tous aux utilisateurs de simuler le document sur un appareil mobile en modifiant les dimensions de la fenêtre d'affichage et la densité de pixels . De plus, Firefox et Chrome ont tous deux la possibilité de simuler le daltonisme pour la page.

Les pages Web chargent et nécessitent généralement du contenu supplémentaire sous forme d'images, de scripts, de polices et d'autres fichiers externes. Les outils de développement Web permettent également aux développeurs d'inspecter les ressources chargées et disponibles sur la page Web dans une liste arborescente, et l'apparence des feuilles de style peut être testée en temps réel.

Les outils de développement Web permettent également aux développeurs d'afficher des informations sur l'utilisation du réseau, comme le temps de chargement et l'utilisation de la bande passante et les en-têtes HTTP envoyés et reçus. Les développeurs peuvent manipuler et renvoyer des requêtes réseau.

Le profilage permet aux développeurs de recueillir des informations sur les performances d'une page Web ou d'une application Web. Grâce à ces informations, les développeurs peuvent améliorer les performances de leurs scripts. Les fonctionnalités d'audit peuvent fournir aux développeurs des suggestions, après avoir analysé une page, pour des optimisations visant à réduire le temps de chargement de la page et à augmenter la réactivité. Les outils de développement Web fournissent généralement également un enregistrement du temps nécessaire au rendu de la page, de l'utilisation de la mémoire et des types d'événements qui se produisent.

Ces fonctionnalités permettent aux développeurs d’optimiser leur page Web ou leur application Web.

JavaScript est couramment utilisé dans les navigateurs Web. Les outils de développement Web incluent généralement un panneau de débogage pour les scripts en permettant aux développeurs d'ajouter des expressions de surveillance, des points d'arrêt, d'afficher la pile d'appels et de faire une pause, de continuer et d'avancer pendant le débogage de JavaScript.

Une console est également souvent incluse, ce qui permet aux développeurs de saisir des commandes JavaScript et d'appeler des fonctions, ou d'afficher les erreurs qui peuvent avoir été rencontrées lors de l'exécution d'un script.

L' devtoolsAPI permet aux extensions de navigateur d'ajouter leurs propres fonctionnalités aux outils de développement.