Il y en a bien sûr d'autres, je les mentionnerai certainement.

Firebug pour Firefox

Je ne sais pas avec certitude si c'est le cas Pyromane L'ancêtre des autres outils de développement, mais c'est certainement le plus populaire, le plus pratique et le plus fonctionnel de .

Firebug est un module complémentaire pour Firefox, ce qui signifie que vous devez le télécharger depuis le site Web des modules complémentaires de Firefox et l'installer.

Pour déclencher un firebug, appuyez simplement sur F12.

Caractéristiques de ce module complémentaire :

• Inspecter et éditer du HTML à changement dynamique ;
• Édition CSS à la volée ;
• Débogage JavaScript, ligne de commande pour exécuter des scripts ;
• Surveillance des requêtes réseau - vous pouvez voir la taille et les temps de téléchargement des fichiers et des scripts, les en-têtes de requête ;
• Analyseur DOM.

Vous pouvez parler longtemps de ces possibilités en détail, mais je pense que tous nos lecteurs les connaissent, et sinon, des informations détaillées se trouvent sur la page d'accueil de Firebug ou la même chose dans la traduction d'Ilya Kantor.

En plus du Firebug lui-même, vous aurez peut-être besoin d'un module complémentaire utile - FireCookie, avec lequel (surprise :-) vous pouvez consulter et modifier les cookies.

Barre d'outils du développeur WEB pour Firefox

Un autre ajout utile à Ognelis. Cela ressemble à ceci :

Regardons point par point.

Désactiver

Permet de désactiver JavaScript, de désactiver l'utilisation du cache, ce qui est très utile lors du développement (permet d'être sûr que la page est chargée avec les dernières mises à jour), d'annuler les couleurs utilisées sur la page et de les remplacer par des couleurs standards. , désactivez l'envoi de l'en-tête du référent (la page à partir de laquelle le référencement a été effectué) ).

Biscuits

Une option utile pour travailler avec les cookies : vous pouvez les visualiser, les supprimer, les refuser et les ajouter.

CSS

Ce menu stocke la fonctionnalité la plus intéressante de la barre d'outils du développeur : l'édition CSS à la volée. De plus, il est possible d'afficher les CSS, de les désactiver, etc. Selon moi, la présence de touches de raccourci est ici très utile (CTRL+SHIFT+C permet par exemple d'accéder directement à la visualisation des styles de page)

Formes

Tout pour travailler avec des formulaires : afficher les mots de passe, afficher des informations sur les formulaires, convertir les méthodes de formulaire (GET » POST et vice versa) et bien plus encore. Une fonction utile est « Remplir les champs du formulaire » pour remplir automatiquement les champs du formulaire (par exemple, lors du test d'un site, lorsque la fonction de mémorisation des mots de passe est désactivée. Sinon, je ne vois rien d'utile dans cet élément.

Images

Il existe une fonctionnalité utile pour désactiver les images – pour voir à quoi ressemble votre site sans images. Vous pouvez encercler les images, afficher leurs tailles et afficher les attributs alt.

Information

Il y a beaucoup d'options dans ce menu. La fonction d'affichage des attributs class et id sur la page peut être utile. De plus, l'élément « Afficher les informations sur les couleurs » est intéressant : il permet d'obtenir rapidement des informations sur les couleurs utilisées sur la page. "Afficher la taille du document" - afficher la taille de la page. "Afficher les en-têtes de réponse" - afficher les en-têtes de page.

Divers

La fonction la plus fréquemment utilisée consiste à vider le cache. De plus, les fonctions disponibles ici sont « Règle de page » - une règle, « Loupe de page » - une loupe et « Guides de lignes » - plusieurs lignes qui peuvent être utiles pour découper un modèle.

Contour

Mise en évidence de différents éléments de la page - tableaux, titres, liens, cadres, blocs. Redimensionner vous permet de redimensionner la fenêtre du navigateur pour l'adapter à toutes les extensions d'écran standard. Les fonctionnalités des outils pour la validation des pages sont stockées ici. À la fois local et externe. Accès pratique et rapide à la validation du HTML, CSS et plus encore. Pour valider le HTML, vous pouvez utiliser le raccourci clavier CTRL+SHIFT+H.

Voir la source

Afficher le code source. Possibilité de visualisation dans une application externe, visualisation du code généré.

J'aime le plus celui dans le coin droit. Il s'agit d'un indicateur d'erreur HTML, CSS et JavaScript rapide. S’il n’y a aucun problème, l’icône est verte et s’il y a des problèmes, l’icône est rouge.

Barre d'outils du développeur Internet Explorer

À partir de la version 8.0, le débogage des erreurs est déjà intégré à ce navigateur. On peut facilement l'appeler Touche F12. C’est vrai qu’il est aussi médiocre qu’un programme des années 90.

Mais il existe un outil beaucoup plus cool pour ce navigateur, la soi-disant barre d'outils de développement Internet Explorer, qui peut être téléchargée à partir du lien.

En apparence, cette barre d'outils ressemble bien sûr à Firebug, mais, hélas, elle n'y est pas encore parvenue. Bien que, d'un autre côté, il possède certaines capacités que Firebug n'a pas. J'appellerais la barre d'outils de développement Internet Explorer une sorte d'hybride de Firebug et Développeur WEB FireFox Barre d'outils.

Comme dans Firebug, il est possible d'inspecter un élément d'un simple clic. Mais si nous pouvons voir immédiatement le remplissage et les marges, ici, une telle opportunité n'existe pas.

De plus, la barre d'outils du développeur Internet Explorer ne met pas à jour dynamiquement l'arborescence des éléments comme le fait Firebug. Autrement dit, si nous modifions quelque chose sur la page en utilisant js, nous ne verrons rien en utilisant cette barre d'outils.

Ce que vous pouvez apprécier, c'est changer le CSS à la volée (un moyen simple de trouver quoi pirater :), la possibilité de désactiver le CSS et les images, la possibilité de vider rapidement le cache et de jouer avec les cookies, un accès rapide à la validation.

Le meilleur : il y a un sélecteur de couleurs intégré, qui vous permet d'obtenir n'importe quelle couleur de la page à l'aide d'une pipette. (il existe un plugin ColorZilla distinct pour ff).

Déboguer DebugBar pour Internet Explorer

DebugBar pour Internet Explorer peut être téléchargé à partir du lien indiqué.

Une extension intéressante en soi. Installé comme panneau supplémentaire au navigateur :

Pour une raison quelconque, il existe un moteur de recherche intégré, une pipette, la possibilité de modifier la taille de la fenêtre et, encore une fois, pour une raison quelconque, la possibilité d'envoyer une page à un ami pour du savon. Même si cela peut être utile. Mais je n'ai pas réussi à profiter de cette opportunité.

De plus, il y a un inspecteur :

Les développeurs n'étaient pas satisfaits de la méthode d'inspection par clic ou par pointage : ils ont proposé quelque chose de plus intéressant. Dans DebugBar, vous devez faire glisser le réticule sur l'élément souhaité pour le voir dans l'arborescence. Il n'est pas possible de modifier le CSS. Mais il existe un validateur et une console js intégrée.

Et si vous fouillez dans les paramètres, vous trouverez ceci :

A la fois drôle et triste.

On sait que la barre d'outils du développeur sera intégrée au huitième explorateur. Ce sera similaire à celui décrit dans le troisième paragraphe, mais nous espérons qu'il sera meilleur.

Déboguer DragonFly pour Opera

DragonFly est intégré à Opera à partir de la version 9.5, il n'est donc pas nécessaire de l'installer. Pour activer Dragonfly, allez dans Outils → Avancé → Outils de développement. Et si en anglais, alors Outils → Avancé → Outils de développement.

Laissez-moi vous prévenir tout de suite que DragonFly est au stade Alpha2, cela explique bon nombre de ses problèmes.

Liste des fonctionnalités :

• Inspecteur DOM ;
• Inspectez par clic (encore une fois, nous ne verrons pas d'indentation comme dans FireFox) ;
• Édition ;
• Accès rapide à la console d'erreurs.

DF est quelque chose comme une page séparée dans un cadre. Si vous l'ouvrez, il sera ouvert pour tous les onglets (contrairement à Firebug). Par conséquent, avant d'inspecter un élément, nous devons sélectionner dans la liste la page que nous souhaitons visualiser.

Malheureusement, ici, comme dans la barre d'outils Dav d'Internet Explorer, les éléments créés dynamiquement ne sont pas affichés. Et en général, lorsque l'on inspecte la page, aucun JavaScript n'est lancé : les liens et les boutons ne sont pas cliqués. Espérons que nous verrons toutes ces fonctionnalités lorsque DragonFly se rapprochera de sa sortie.

Déboguer l’inspecteur WEB dans Safari

Je dirai tout de suite qu'il s'agit du navigateur Safari J'ai raté l'information, je ne suis donc pas responsable de l'adéquation du matériel, comme on dit.

Afin d'activer l'élément « Développement » dans le menu Safari, vous devez activer l'élément correspondant dans les paramètres (l'onglet « Avancé ») :

Dans le menu « Développement », les fonctions suivantes sont à notre disposition :

Regardons de plus près l'inspecteur WEB :

Par défaut, l'inspecteur s'ouvre en mode d'affichage HTML. Mais il peut être basculé en mode d'affichage DOM. A cet effet, il y a un interrupteur sur la plaque supérieure. Lorsque vous survolez un élément dans l'inspecteur, il sera mis en surbrillance sur la page elle-même. Vous ne pouvez pas voir le remplissage, modifier le balisage ou le CSS à la volée, ni voir les modifications dynamiques dans DOMe à la volée comme vous le pouvez dans FireBug. Mais il faut admettre que c'est très mignon.

Si vous souhaitez travailler avec l'inspecteur dans une fenêtre de navigateur, vous pouvez cliquer sur le bouton dans le coin inférieur gauche.

Même dans Safari, une fonction telle que « Network Timeline » est disponible (le bouton « Network » dans l'inspecteur) :

Vous pouvez clairement voir quand et combien de temps il faut pour télécharger des fichiers. Vous pouvez également afficher les en-têtes de requête, mais malheureusement, vous ne pouvez pas afficher le contenu lui-même.

Débogage pour les développeurs dans Google Chrome

Lame est né sous une forme avancée, et il dispose immédiatement, bien que tordu pour l'instant, mais toujours d'outils pour les développeurs.

• Inspecteur DOM ;
• débogueur javascript ;
• Console JavaScript.

Afin d'inspecter n'importe quel élément, vous devez faire un clic droit dessus et sélectionner « Afficher le code de l'élément » dans le menu contextuel :

La fonctionnalité est la même que dans Safari : les éléments sont mis en surbrillance lorsqu'ils sont survolés, mais l'édition CSS et HTML n'est pas disponible et les modifications dans le DOM ne sont pas suivies. Mais le bouton dans le coin inférieur gauche, qui doit attacher l'inspecteur à la fenêtre du navigateur, ne fonctionne pas.

Dans l'onglet « Ressources », nous pouvons voir ce qui suit :

Légèrement différent de l'échelle en safari. Les éléments translucides dans ce diagramme montrent les tailles relatives des fichiers et les couleurs indiquent le temps de chargement. D’une manière ou d’une autre, il est évident que cette partie de Chrome est loin d’être terminée.

Dans cet article, j'ai examiné les extensions et les éléments intégrés de navigateur les plus connus.

Il y en a d'autres, par exemple :

• Internet Explorer WEB Development Helper - un bon assistant pour les développeurs ASP.NET (Internet Explorer) ;
• Barre d'outils du développeur WEB - barre d'outils pour Internet Explorer et FireFox. Il existe plusieurs fonctionnalités utiles ;
• Barre d'outils d'accessibilité WEB - barre d'outils pour Internet Explorer. Rien d'interessant.

S'il y a des modules complémentaires que je n'ai pas mentionnés, mais qui devraient l'être, ou s'il y a des fonctions pour les extensions mentionnées que j'ai manquées, veuillez écrire.

Profitez-en pour votre santé !

Ctrl+U

Comment puis-je visualiser le code source d'un élément ?

Faites un clic droit sur l'élément de page qui vous intéresse.

Google Chrome: "Afficher le code de l'élément"

Opéra: "Inspecter l'élément"

Firefox : « Analyser l'élément »

Dans d'autres navigateurs, recherchez un élément de menu ayant une signification similaire.

Salut tout le monde!

J'ai spécialement exposé tout le sujet au début de l'article, pour ceux qui recherchent une réponse rapide.

L'information est peut-être connue de beaucoup, mais comme j'écris pour les blogueurs débutants, les programmeurs Web et autres prospecteurs, cet article de référence est un incontournable.

À l'avenir, vous étudierez certainement le code source des pages et des éléments individuels.

Examinons un exemple spécifique de la façon dont vous pouvez utiliser l'affichage du code source d'une page.

Par exemple, nous voulons voir quels mots-clés sont utilisés pour une page spécifique. Nous allons à la page Web qui nous intéresse et appuyons sur Ctrl+U. Le code source de cette page s'ouvrira dans une fenêtre séparée ou dans un onglet séparé. Appuyez sur Ctrl+F pour rechercher un extrait de code. Dans ce cas, on tape le mot « mots clés". Vous serez automatiquement redirigé vers un morceau de code contenant cette balise méta et le mot recherché sera mis en surbrillance.

Par analogie, vous pouvez rechercher et étudier d'autres fragments de code.

L'affichage de l'intégralité du code source d'une page n'est dans la plupart des cas pas très pratique, donc dans tous les navigateurs, il est possible d'afficher le code d'un élément ou d'un fragment individuel.

Utilisons un exemple spécifique de visualisation du code d'un élément. Par exemple, voyons si le lien a un attribut nofollow. Faites un clic droit sur le lien qui nous intéresse et dans le menu contextuel déroulant, faites un clic gauche sur l'élément "Afficher le code de l'élément" ou similaire (selon votre navigateur). Ci-dessous, dans une fenêtre spéciale pour l'analyse du code, nous obtenons quelque chose de similaire.

On voit que le code du lien contient rel=”nofollow” . Cela signifie que les relations publiques ne « fuiront » pas via ce lien. Nous en parlerons plus en détail dans les articles suivants. Maintenant, l'important est que vous sachiez maintenant comment afficher le code source de la page et le code source d'un élément individuel.

Les développeurs de navigateurs ont veillé au confort de ceux qui créent des sites qui s'ouvrent dans ces mêmes navigateurs, à savoir les webmasters. Ils ont ajouté des outils de développement aux fonctionnalités standard, avec lesquels vous pouvez facilement ouvrir et afficher le code source de la page du site dans le navigateur: HTML, CSS, JavaScript (JS), obtenir diverses données utiles sur la structure du site, procéder à son analyse technique. En général, voyez beaucoup de choses utiles.

Bien entendu, ces outils sont utilisés non seulement par les créateurs de sites Web à des fins professionnelles, mais également par les utilisateurs ordinaires, pour qui le code source leur permet de visualiser diverses données utiles.

A partir de cet article vous apprendrez comment visualiser le code source d'une page de site web dans un navigateur (comment ouvrir le code HTML, CSS, JavaScript d'un site web).

Comment ouvrir le code source d'une page dans un navigateur

Il existe deux manières d'ouvrir le code source d'une page Web dans un navigateur :

1. Utiliser des touches de raccourci ;
2. Ouvrir à partir du menu contextuel.

Ctrl+U– une combinaison de touches de raccourci pour afficher le code source de la page entière du site dans une nouvelle fenêtre séparée. Standard pour tous les navigateurs : Google Chrome, Opera, Mozilla Firefox, navigateur Yandex, IE.

Vous pouvez également accéder aux outils de développement comme suit :

Afin de trouver rapidement le code, le mot ou le texte souhaité sur une page, vous pouvez utiliser la combinaison de touches de raccourci de recherche standard pour tous les navigateurs : Ctrl + G.

Instructions vidéo :

Afficher le code de l'élément | explorer l'élément | inspecter l'élément

Si vous avez soudainement besoin de ne pas afficher l'intégralité du code source, mais d'en afficher seulement une partie distincte, une zone de la page, alors l'outil précédent ne fonctionnera pas. À cette fin, les outils de développement ont une autre fonction, qui sera abordée ci-dessous.

Comment visualiser le code d'un élément sur une page :

Vous pouvez également utiliser des raccourcis clavier pour accéder rapidement à l’inspection des éléments.

Raccourcis clavier (boutons) :

Google Chrome : Ctrl+Maj+I et Ctrl+Maj+C

Opéra : Ctrl+Maj+I et Ctrl+Maj+C

Mozilla Firefox : Ctrl+Maj+I et Ctrl+Maj+C

Navigateur Yandex : Ctrl+Maj+I et Ctrl+Maj+C

Après ces étapes, le code source de la page Web s'ouvrira dans la même fenêtre du navigateur :

Tout le code HTML sera dans la grande colonne de gauche. Et les styles CSS sont à droite.

L’avantage de cette méthode est bien entendu que l’utilisateur a la possibilité de modifier le code source et d’éditer les styles. Autrement dit, vous pouvez modifier les styles sur le site et voir à quoi cela ressemblera avec certains styles, sans avoir à apporter immédiatement des modifications aux fichiers situés sur les serveurs d'hébergement. Pour modifier ou ajouter du code de programme, vous devez double-cliquer sur le fragment ou la zone souhaitée. Bien entendu, la correction du code dans le navigateur ne sera pas effectuée sur les serveurs d'hébergement. Par conséquent, à l'avenir, vous devrez dans tous les cas copier ce code et l'écrire dans des fichiers.

Cette instruction vidéo décrit en détail et montre comment travailler avec les outils de développement :

Juste comme ça, juste en ligne, directement dans votre navigateur, vous pouvez visualiser le code source de la page du site, obtenir des données de base sur le code HTML et CSS, les modifier et les copier, sans avoir à télécharger les fichiers de ce site sur votre ordinateur .

D'ailleurs, les internautes inexpérimentés qui ont modifié le code de la page et s'attendent à ce qu'il soit enregistré seront déçus. Après tout, après avoir actualisé la page, toutes les modifications apportées disparaîtront. Cela ne suffit pas pour pirater le site :)

Comment afficher le code source sur un téléphone Android

Je voudrais également noter que les outils de développement ne sont pas disponibles uniquement dans la version de bureau des navigateurs, c'est-à-dire sur les ordinateurs et les ordinateurs portables. Sur les téléphones et tablettes (Android, iOS), vous pouvez également consulter le code source.

Pour ce faire, ajoutez le préfixe view-source à l'URL de la page en cours d'inspection :

Par exemple:

voir la source :https://site/turbo-rezhim-opera/

La note: La version adaptative du site est activée, qui s'adapte automatiquement à la petite taille de votre navigateur et masque certains détails du site pour en faciliter la lecture. Bon visionnage !

Bonjour, chers lecteurs du blog Site sur! Dans cet article, nous discuterons de ce sans quoi je ne peux tout simplement pas imaginer réussir, nous parlerons d'ensembles d'outils de développement Web entièrement fonctionnels tels que Mozilla Firefox avec son plugin. Pyromane et inspecteurs Web similaires. Puisque je préfère utiliser le navigateur Opera pour surfer sur Internet, dans cet article je me concentrerai spécifiquement sur, mais le plus important pour vous est simplement de découvrir que de tels outils existent, il y en a beaucoup et ils existent pour tous les navigateurs, et donc ce serait un péché de ne pas les utiliser.

Afin de faire une vue détaillée (inspection) d'un élément sur la page, vous devez faire un clic droit (clic droit) et sélectionner l'un des éléments suivants dans le menu déroulant : « inspecter l'élément » (Opera) ; « inspecter l'élément », ou mieux encore, « inspecter l'élément à l'aide de Firebug » (Firefox) ; "afficher le code de l'élément" (Chrome). Raccourcis clavier pour appeler l'inspecteur chez Opera : Ctrl + Maj + I.

Vous devriez voir quelque chose comme ceci :

Nous avons donc devant nous l'arme de mise en page la plus puissante, avec laquelle nous pouvons visualiser et, grâce à sa clarté, comprendre comment et ce qui fonctionne pour nous. Nous pouvons visualiser les codes CSS et JavaScript, ainsi que les modifier à la volée ! Oui, chers lecteurs, l'une des caractéristiques les plus intéressantes de l'inspection des éléments est que nous pouvons, pour ainsi dire, éditer n'importe quel site « en ligne » et voir ce qui se passerait si les développeurs faisaient ceci ici et cela ici. Nous pouvons nous connecter, déconnecter ou modifier ceci ou cela, jouer à JavaScript, même ajouter notre propre texte au milieu de l'article de quelqu'un d'autre, etc., bien sûr, tout cela n'est visible que par nous.

Grâce à l’inspection des éléments intégrée, apprendre les aspects pratiques de la mise en page d’un site Web peut devenir un véritable jeu pour vous. Personnellement, je regarde donc très souvent les arrière-plans originaux des sites qui me plaisent (images incluses dans la propriété CSS background), et je regarde également tous les tenants et aboutissants de la mise en page d'un site particulier afin d'apprendre de nouvelles techniques, qui Je vous conseille de le faire aussi.

Opera Dragonfly propose une surveillance du trafic réseau, un journal des erreurs, une console intégrée, une mise en évidence intelligente du code et des éléments sur la page, un débogueur JavaScript, une visualisation des ressources de la page et bien plus encore.

Je suggère de regarder cette courte et belle vidéo sur l'inspecteur Web intégré d'Opera - :

Il convient de noter qu'Opera Dragonfly est nativement intégré à chaque version d'Opera et est mis à jour automatiquement, sans notifications ni votre participation.

Je voudrais également démontrer une fonctionnalité aussi intéressante de l'inspecteur Web intégré de Mozilla Firefox que la visualisation 3D, qui m'a vraiment plu :

La chose la plus importante que vous auriez dû apprendre et comprendre sur l'inspection des éléments de page est ce que j'ai déjà écrit ci-dessus, le reste, à mon avis, est une question de pratique, pas de théorie, donc c'est tout pour aujourd'hui, merci pour votre attention, développement de site Web réussi!

3,7 sur 5

Bonjour. Aujourd'hui, je veux parler des ajouts à navigateurs essentiel pour tout développeur Web. Tout le monde connaît FireBug - le module complémentaire le plus puissant et le plus pratique pour FireFox.

Mais Firebug ne peut rien vous aider lorsque vous travaillez avec IE, Opera ou Safari.

Alors, au programme :

• FireBug pour Firefox ;
• Barre d'outils de développement Web pour Firefox ;
• Barre d'outils du développeur IE ;
• Barre de débogage pour IE ;
• DragonFly pour Opéra ;
• WebInspecteur pour Safari ;
• Outils de développement pour Google Chrome.

Il y en a bien sûr d'autres, je les mentionnerai certainement.

Firebug pour Firefox

Je ne sais pas avec certitude si Firebug est l'ancêtre d'autres outils destinés aux développeurs, mais c'est certainement le plus populaire, le plus pratique et le plus fonctionnel.

Firebug est un module complémentaire pour Firefox, ce qui signifie que vous devez le télécharger depuis le site Web des modules complémentaires de Firefox et l'installer.

Pour déclencher un firebug, appuyez simplement sur F12.

Caractéristiques de ce module complémentaire :

• Inspection et édition changeant dynamiquement HTML ;
• Édition CSS à la volée ;
• Débogage JavaScript, ligne de commande pour exécuter des scripts ;
• Surveillance des requêtes réseau - vous pouvez voir la taille et les temps de téléchargement des fichiers et des scripts, les en-têtes de requête ;
• Analyseur DOM.

Vous pouvez parler longtemps de ces possibilités en détail, mais je pense que tous nos lecteurs les connaissent, et sinon, des informations détaillées se trouvent sur la page d'accueil de Firebug ou la même chose dans la traduction d'Ilya Kantor.

En plus du Firebug lui-même, vous aurez peut-être besoin d'un module complémentaire utile - FireCookie, avec lequel (surprise :-) vous pouvez afficher et modifier les cookies.

Barre d'outils de développement Web pour Firefox

Un autre ajout utile à Ognelis. Cela ressemble à ceci :

Regardons point par point.

Désactiver
Permet de désactiver javascript, de désactiver l'utilisation du cache, ce qui est très utile lors du développement (permet d'être sûr que la page est chargée avec les dernières mises à jour), d'annuler les couleurs utilisées sur la page et de les remplacer par des standards. , désactivez l'envoi de l'en-tête du référent (la page à partir de laquelle la transition a été effectuée) ).

Biscuits
Une option utile pour travailler avec les cookies : vous pouvez les visualiser, les supprimer, les refuser et les ajouter.

CSS
Ce menu stocke la fonctionnalité la plus intéressante de la barre d'outils du développeur : l'édition CSS à la volée. De plus, il est possible d'afficher les CSS, de les désactiver, etc., etc. Selon moi, la présence de touches de raccourci est ici très utile (CTRL+SHIFT+C permet par exemple d'accéder directement à la visualisation des styles de page)

Formes
Tout pour travailler avec des formulaires : afficher les mots de passe, afficher des informations sur les formulaires, convertir les méthodes de formulaire (GET -> POST et vice versa) et bien plus encore. Une fonction utile est « Remplir les champs du formulaire » pour remplir automatiquement les champs du formulaire (par exemple, lors du test d'un site, lorsque la fonction de mémorisation des mots de passe dans FF est désactivée. Sinon, je ne vois rien d'utile dans cet élément.

Images
Il existe une fonction utile pour désactiver les images – pour voir à quoi ressemble votre site sans images. Vous pouvez encercler les images, afficher leurs tailles et afficher les attributs alt.

Information
Il y a beaucoup d'options dans ce menu. La fonction d'affichage des attributs class et id sur la page peut être utile. De plus, l'élément « Afficher les informations sur les couleurs » est intéressant : il permet d'obtenir rapidement des informations sur les couleurs utilisées sur la page. « Afficher la taille du document » : affichez la taille de la page. "Afficher les en-têtes de réponse" - afficher les en-têtes de page.

Divers
La fonction la plus fréquemment utilisée consiste à vider le cache. De plus, les fonctions disponibles ici sont « Règle de page » - une règle, « Loupe de page » - une loupe et « Guides de lignes » - plusieurs lignes qui peuvent être utiles pour découper un modèle.

Contour
Mise en évidence de différents éléments de la page - tableaux, titres, liens, cadres, blocs. Redimensionner
Vous permet de redimensionner la fenêtre du navigateur pour l'adapter à toutes les extensions d'écran standard. Outils
Les fonctionnalités de validation de page sont stockées ici. À la fois local et externe. Accès pratique et rapide à la validation du HTML, CSS et plus encore. Pour valider le HTML, vous pouvez utiliser le raccourci clavier CTRL+SHIFT+H.

Voir la source
Afficher le code source. Possibilité de visualisation dans une application externe, visualisation du code généré.

J'aime le plus celui dans le coin droit. Il s'agit d'un indicateur d'erreur HTML, CSS et JS rapide. S’il n’y a aucun problème, l’icône est verte et s’il y a des problèmes, l’icône est rouge.

Barre d'outils du développeur Internet Explorer

En apparence, cette barre d'outils ressemble bien sûr à Firebug, mais, hélas, elle n'y est pas encore parvenue. Bien que, d'un autre côté, il possède certaines capacités que Firebug n'a pas. J'appellerais la barre d'outils de développement IE une sorte d'hybride de la barre d'outils de développement Web Firebug et FF.

Comme dans Firebug, il est possible d'inspecter un élément d'un simple clic. Mais si dans FF nous pouvons voir immédiatement le remplissage et les marges, ici, une telle opportunité n'existe pas.

De plus, la barre d'outils du développeur IE ne met pas à jour dynamiquement l'arborescence des éléments comme le fait Firebug. Autrement dit, si nous modifions quelque chose sur la page en utilisant js, nous ne verrons rien en utilisant cette barre d'outils.

Ce dont vous pouvez profiter, c'est la possibilité de modifier le CSS à la volée (un moyen simple de trouver quoi pirater :), la possibilité de désactiver le CSS et les images, la possibilité de vider rapidement le cache et de jouer avec les cookies, un accès rapide à la validation.

Le meilleur : il y a un sélecteur de couleurs intégré, qui vous permet d'obtenir n'importe quelle couleur de la page à l'aide d'une pipette. (il existe un plugin ColorZilla distinct pour ff).

Barre de débogage pour IE

Une extension intéressante en soi. Installé comme panneau supplémentaire au navigateur :

Pour une raison quelconque, il existe un moteur de recherche intégré, une pipette, la possibilité de modifier la taille de la fenêtre et, encore une fois, pour une raison quelconque, la possibilité d'envoyer une page à un ami pour du savon. Même si cela peut être utile. Mais je n'ai pas pu profiter de cette opportunité =(.
De plus, il y a un inspecteur :

Les développeurs n'étaient pas satisfaits de la méthode d'inspection par clic ou par pointage : ils ont proposé quelque chose de plus intéressant. Dans DebugBar, vous devez faire glisser le réticule sur l'élément souhaité pour le voir dans l'arborescence.
Il n'est pas possible de modifier le CSS. Mais il existe un validateur et une console js intégrée.

Et si vous fouillez dans les paramètres, vous trouverez ceci :

A la fois drôle et triste.
On sait que la barre d'outils du développeur sera intégrée au huitième explorateur. Ce sera similaire à celui décrit dans le troisième paragraphe, mais nous espérons qu'il sera meilleur.

DragonFly pour Opéra

DragonFly est intégré à Opera à partir de la version 9.5, il n'est donc pas nécessaire de l'installer. Pour activer Dragonfly, allez dans Outils → Avancé → Outils de développement. Et si en anglais, alors Outils → Avancé → Outils de développement.
Laissez-moi vous prévenir tout de suite que DragonFly est au stade Alpha2, cela explique bon nombre de ses problèmes.

Liste des fonctionnalités :

• Inspecteur DOM ;
• Inspection par clic (encore une fois, nous ne verrons pas d'indentation comme dans FF) ;
• Édition CSS ;
• Accès rapide à la console d'erreurs.

DF est quelque chose comme une page séparée dans un cadre. Si vous l'ouvrez, il sera ouvert pour tous les onglets (contrairement à Firebug). Par conséquent, avant d'inspecter un élément, nous devons sélectionner dans la liste la page que nous souhaitons visualiser.
Malheureusement, ici, comme dans la barre d'outils de développement IE, les éléments créés dynamiquement ne sont pas affichés. Et en général, quand on inspecte la page, aucun js n'est lancé : les liens et les boutons ne sont pas cliqués. Espérons que nous verrons toutes ces fonctionnalités lorsque DragonFly se rapprochera de sa sortie.

Inspecteur Web dans Safari

Afin d'activer l'élément « Développement » dans le menu Safari, vous devez activer l'élément correspondant dans les paramètres (l'onglet « Avancé ») :

Dans le menu « Développement », les fonctions suivantes sont à notre disposition :

Examinons de plus près l'inspecteur Web :

Par défaut, l'inspecteur s'ouvre en mode d'affichage HTML. Mais il peut être basculé en mode d'affichage DOM. A cet effet, il y a un interrupteur sur la plaque supérieure. Lorsque vous survolez un élément dans l'inspecteur, il sera mis en surbrillance sur la page elle-même. Vous ne pouvez pas voir le remplissage, modifier le balisage ou le CSS à la volée, ni voir les modifications dynamiques dans DOMe à la volée comme vous le pouvez dans FireBug. Mais il faut admettre que c'est très mignon.

Si vous souhaitez travailler avec l'inspecteur dans une fenêtre de navigateur, vous pouvez cliquer sur le bouton dans le coin inférieur gauche.

Même dans Safari, une fonction telle que « Network Timeline » est disponible (le bouton « Network » dans l'inspecteur) :

Vous pouvez clairement voir quand et combien de temps il faut pour télécharger des fichiers. Vous pouvez également afficher les en-têtes de requête, mais malheureusement, vous ne pouvez pas afficher le contenu lui-même.

Toutes sortes de choses pour les développeurs dans Google Chrome

Lame est né sous une forme avancée, et il dispose immédiatement, bien que tordu pour l'instant, mais toujours d'outils pour les développeurs.

• Inspecteur DOM ;
• Débogueur JS ;
• Console JS.

Afin d'inspecter n'importe quel élément, vous devez cliquer dessus avec le bouton droit et sélectionner « Afficher le code de l'élément » dans le menu contextuel.