Explication du menu des outils de développement IE8_HTML/Xhtml_Production de pages Web

Cet article a brièvement expliqué chaque menu des outils de développement. Je crois que tout le monde peut facilement utiliser cet outil puissant.

Explication détaillée de la façon d'utiliser les "Outils de développement" d'IE8 (explication détaillée des menus à tous les niveaux)
La version officielle d'IE8 a été publiée. Cet article ne sera pas une évaluation très absurde, puis donnera quelque chose comme "La capacité de Chrome à exécuter JavaScript est 15 fois supérieure à celle d'IE8", "La vitesse de rendu des pages d'IE8 est 2,456 fois supérieure à celle de Safari" et "La capacité anti-viol d'IE8". 1,235 fois plus élevé que FireFox » est une putain de conclusion. Je me fiche de savoir qui est meilleur que qui ? Tout ce que je sais, c'est que lorsque Windows 7 sortira, la part de marché du navigateur IE8 empêchera les développeurs front-end de dire : « Ne vous inquiétez pas pour IE8, peu de gens l'utilisent. Par conséquent, cet article expliquera de manière très pragmatique qu'IE8 peut être le seul « outil de développement » qui rend les développeurs conviviaux. Dans le même temps, nous développerons certaines informations et connaissances pertinentes. Alors, abandonnez vos préjugés contre IE8 et continuez à lire patiemment.

Vous n'avez pas encore installé IE8 ?

Si vous êtes un développeur front-end, veuillez installer cette chose. Parce que la version officielle est sortie. Contrairement à la version bêta précédente, cette fois nous devons y prêter une attention particulière. Allez en télécharger et en installer un, voici l'adresse de téléchargement——

Liste de téléchargement de la version chinoise IE8

Windows XP
Windows Vista
Windows Server 2003
Windows Server 2008
Windows XP 64 bits
Windows Vista 64 bits
Windows Server 2003 64 bits
Windows Server 2008 64- peu

Liste de téléchargement de la version anglaise IE8

Windows XP
Windows XP 64 bits
Windows Vista
Windows Vista 64 bits
Windows Server 2003
Windows Server 2003 64 bits
Windows Server 2008
Windows Server 2008 64 bits

Oh, peut-être craignez-vous que IE6 ou IE7 de votre système soit terminé. Eh bien, en effet, c'est possible. Cependant, vous pouvez essayer les outils suivants. Il permet de coexister avec plusieurs versions de IE - la solution pour la coexistence de plusieurs versions d'IE - IETester
Outil de développement et de débogage web Microsoft SuperPreview (avec téléchargement)
Découvrez les « Outils de développement »

Bien que cette chose ait changé de nom à la mode, ce n'est pas une nouveauté. Son prédécesseur était « IEdevtoolbar ». Cependant, il ne s’agissait auparavant que d’un plug-in pour IE. Dans IE8, le navigateur a automatiquement intégré cette chose. Non seulement il a changé son nom pour devenir un peu rustique, mais ses fonctions ont également été considérablement améliorées.
Les outils de développement peuvent être appelés dans le menu Outils d'IE8 ou en cliquant directement sur la touche de raccourci F12.

Avant de le présenter, parlons d’abord de ce que cette chose peut faire exactement ? Si vous utilisez simplement un navigateur pour parcourir le site Web, vous n'avez pas à vous soucier de la façon dont la page est créée. Alors je pense que vous pouvez quitter cette page.
En général, les outils de développement sont des outils conçus pour permettre aux développeurs front-end de développer des pages. Fournit une série de petits outils qui vous permettent de trouver facilement les bogues de page, notamment le code HTML, le code CSS et le code JavaScript. En même temps, il propose également des gadgets de mauvais goût mais néanmoins utiles, comme le choix des couleurs, la règle d'écran, etc.
OK, nous l’avons vu et savons ce qu’il peut faire. Puis présentons-les un par un selon l'ordre du menu -

Cet article a brièvement expliqué chaque menu des outils de développement. Je crois que tout le monde peut facilement utiliser cet outil puissant.
Menu [Fichier]

[Annuler tout]
Annulez toutes les opérations précédentes dans les outils de développement et actualisez la page et la structure DOM.
[Source de tentative Internet Explorer personnalisée]
[Source de tentative] est un putain de terme. Pour faire plus simple : « Quel éditeur dois-je utiliser pour visualiser le fichier source de la page Web ? » Par exemple : j’utilise EditPlus.
【Sortie】
Afin de ne pas insulter votre intelligence, je n'en dirai pas plus à ce sujet. Eh bien, F12 est une touche de raccourci paire-impaire, permettez-moi de le mentionner en passant.
Menu [Rechercher]
Cliquez pour sélectionner l'élément

La touche de raccourci Ctrl B a le même effet que de cliquer sur le bouton ICO de la souris dans l'image. Les fonctions les plus couramment utilisées. Également un commutateur de parité. Lors de l'ouverture, lorsque vous cliquez sur un élément de la page avec la souris, l'élément sera sélectionné et la structure DOM, le style CSS et d'autres informations de l'élément seront répertoriés.

Par exemple, la photo ci-dessus. La zone de gauche affiche les informations DOM de cet élément de lien hypertexte. Vous pouvez clairement voir ses éléments parents, ses éléments enfants et ses éléments frères.
La zone de droite affiche les informations de style de l'élément. Le style barré signifie que le style n'est plus efficace car sa priorité n'est pas assez élevée. Pendant le débogage, la coche précédente peut être décochée. Lorsqu'elle n'est pas cochée, cela signifie la suppression forcée de ce style. De plus, les propriétés de chaque style peuvent être modifiées immédiatement d'un simple clic de souris. Il est très pratique de voir immédiatement l’effet de page modifié.
Les amis qui ont utilisé FireBug de FireFox le connaîtront. La seule différence est que FireBug organise les styles avec une priorité inférieure ci-dessous, c'est tout.

La vue [Track Style] et la vue [Style] ont la même fonction, les deux sont utilisées pour afficher les informations de style de l'élément sélectionné. La seule différence est que cela change le mode d'affichage. La vue à laquelle vous êtes habitué dépend de vos préférences.

Cet article a brièvement expliqué chaque menu des outils de développement. Je crois que tout le monde peut facilement utiliser cet outil puissant.


La vue [Mise en page] peut afficher les informations de modèle encadré de l'élément sélectionné. Bien qu'il puisse afficher plus d'informations que FireBug, je préfère toujours la façon dont FireBug les affiche directement sur la page avec des blocs de couleur.

La vue [Attribut] peut afficher les informations d'attribut de l'élément sélectionné. Ce qui est très bien, c'est que vous pouvez ajouter ou supprimer certaines propriétés instantanément pour déboguer rapidement la page.
Oh, c'est vrai. Il est à noter que que vous modifiiez le style ou les attributs de l'élément sélectionné dans les outils de développement, ils ne servent qu'à un débogage temporaire et ne modifieront pas le code source de votre page web.
【Désactiver】menu

【Script】
désactivera l'utilisation de scripts JavaScript ou VBScript sur la page. Pourquoi le désactiver ? Pour tester la robustesse de la page. Certains clients qui ont des exigences élevées en matière de conception de page demanderont : « Si le client désactive les scripts, cette page peut-elle toujours être utilisée ? » Eh bien, oui, cette fonction est utilisée pour tester les besoins anormaux de ces clients foutus.
【Bloqueur de pop-ups】
Filtre pour les pop-ups. Utilisé pour tester "Comment puis-je empêcher le navigateur ou le logiciel de sécurité de filtrer mes fenêtres pop-up."
【CSS】
Le "CSS Streaking Festival" est là ! Utilisez-le pour tester l'apparence de votre page lorsque le CSS est en séquences. C'est également un test important pour vérifier la robustesse et l'accessibilité de la page. Cependant, peu d’aveugles en Chine peuvent désormais accéder au Web.

Cet article a brièvement expliqué chaque menu des outils de développement. Je crois que tout le monde peut facilement utiliser cet outil puissant.
Menu [Affichage]

[Informations de classe et d'identification]
La touche de raccourci est Ctrl I, commutateur de parité. Après l'avoir ouvert, vous verrez que la page est recouverte de blocs de couleur rouge dense. En même temps, le nom de la classe ou le nom de l'ID sera affiché. Oui, c'est l'effet de l'affichage des informations de classe et d'identification. Mais soyons honnêtes, qui serait intéressé par ces crottes rouges ? Non seulement cela donne à la page l'apparence d'un uniforme de mendiant rapiécé, mais c'est aussi complètement flou -_-b...

[Chemin du lien]
Idem que ci-dessus. Il mettra en évidence tous les hyperliens de la page dans des cases rouges et affichera leurs adresses de lien.

[Rapport de liens]
En utilisant la fonction de rapport de liens, les outils de développement vous aideront à générer un rapport de liens pour cette page. Contient des informations telles que le nombre de liens, l'adresse du lien, si une nouvelle fenêtre est ouverte, etc. Cependant, quelle est l’utilité spécifique de cette chose ? Je ne sais pas non plus.

[Tab Index]
Met en surbrillance tous les éléments contenant l'attribut tabindex. La définition de l'attribut tabindex peut modifier l'ordre dans lequel les éléments de la page Web obtiennent le focus.

Cet article a brièvement expliqué chaque menu des outils de développement. Je crois que tout le monde peut facilement utiliser cet outil puissant.
[Access Key]
Mettez en surbrillance tous les éléments contenant "l'attribut accesskey". Définissez l'attribut accesskey pour définir la touche de raccourci permettant à l'élément d'obtenir le focus.

【Fichier source】 "Source de l'élément avec style"
Générez un fichier source contenant le style d'élément sélectionné, le code HTML et les informations au niveau de la page Web.
Un élément doit être sélectionné en premier pour que cette commande soit efficace. De plus, le fichier source généré est uniquement lié à l'élément sélectionné.
[Fichier source] "DOM (Élément)"
La touche de raccourci est Ctrl T. Générez un fichier source. Ce fichier source contient uniquement les informations de structure DOM de l'élément sélectionné. Les amis qui ont utilisé FireBug peuvent penser à la commande "copier le code HTML de l'élément". En fait, celui-ci est presque le même que celui-là. C'est juste que ceci est généré dans une fenêtre et FireBug le copie directement dans le presse-papiers.
[Fichier source] "DOM (Page)"
Touche de raccourci Ctrl G. Générez un fichier source. Ce fichier source contient la structure des informations DOM de la page entière. C’est une fonction très foutue. Je ne sais pas si c’est à cause d’un bug. Cette fonction est en fait « visualiser le code source de la page web ». Parce que le code source généré ne contient pas seulement des informations DOM, mais inclut également des informations CSS et de script.
L'état "original" de [fichier source]
La fonction extrêmement putain est en fait "afficher le code source de la page Web". Tout le monde préfère probablement utiliser le bouton droit de la souris pour cliquer directement sur la page Web.
Menu [Contour]

Le menu [Contour] est évidemment une commande permettant de décrire et d'afficher les éléments qui remplissent les conditions.
【Cellule du tableau】
Utilisez simplement des lignes orange pour encadrer chaque cellule du tableau du formulaire. Juste pour que tu saches - oh. Il s'avère que c'est la cellule du tableau.

【Formulaire】
consiste à encadrer le formulaire avec des lignes orange. Juste pour que tu saches - oh. Il s'avère que c'est le formulaire.
[Élément DIV]
consiste à utiliser des lignes vertes pour encadrer tous les éléments div de la page. Juste pour que tu saches - oh. Il s'avère que ce sont tous des éléments div.


Cet article a brièvement expliqué chaque menu des outils de développement. Je crois que tout le monde peut facilement utiliser cet outil puissant.
【Image】
consiste à utiliser des lignes violettes pour encadrer tous les éléments img de la page. Juste pour que tu saches - oh. Il s'avère que ce sont tous des éléments img.

[N'importe quel élément]
C'est relativement puissant. Vous pouvez personnaliser n’importe quelle étiquette et la couleur filaire qu’elle souhaite utiliser. Cliquez sur ce menu et la boîte de dialogue suivante apparaîtra. Très simple. Plus aucune explication.

Le "relatif" de [Élément positionné]
sera entouré d'une ligne verte pour tous les éléments avec le style position:relative.
Le
"absolu" de [Élément positionné] sera entouré d'une ligne noire pour tous les éléments avec le style position:absolute.
Le
"fixe" de [Élément positionné] sera entouré d'une ligne bleue pour tous les éléments avec le style position:static. Le
"flottant" de
[Élément positionné] sera entouré d'une ligne jaune pour tous les éléments de style flottant.
【Effacer les contours】
Lorsque votre page a été réalisée comme un tableau Excel par des lignes de différentes couleurs, vous pouvez utiliser cette commande pour effacer toutes les lignes.


Cet article a brièvement expliqué chaque menu des outils de développement. Je crois que tout le monde peut facilement utiliser cet outil puissant.
Menu [Image]

Évidemment, cette commande contrôle différentes images sur la page.
【Images désactivées】
Afin de ne pas insulter votre intelligence, je ne dirai pas cela. La seule chose qui doit être expliquée est que non seulement l'élément img, mais également l'image d'arrière-plan de l'élément seront désactivés.
【Afficher la taille de l'image】
Très bonne fonction. Vous pouvez connaître rapidement la taille de chaque image sans vérifier les propriétés de l'image. Bien entendu, l'unité est le pixel.

[Afficher la taille du fichier image]
Une très bonne fonction. Vous pouvez connaître rapidement la taille du fichier de chaque image sans vérifier les propriétés de l'image. Bien entendu, l'unité est en octets.

[Afficher le chemin de l'image]
Une très bonne fonction. Vous pouvez connaître rapidement le chemin URL de chaque image sans vérifier les propriétés de l'image, et vous pouvez également le copier.

[Afficher le texte Alt]
Vous pouvez afficher le texte de l'attribut alt de l'élément img. Au fait : n'utilisez pas de mots-clés dans l'alt de l'image, sinon cela sera facilement identifié comme une sur-optimisation SEO.

【Afficher le rapport d'image】
Générez un rapport d'image détaillé de la page modifiée. Contient des informations très détaillées sur chaque image.


Cet article a brièvement expliqué chaque menu des outils de développement. Je crois que tout le monde peut facilement utiliser cet outil puissant.
Menu [Cache]

Groupe de menus pour la gestion du cache et des cookies. Ce sera une fonctionnalité très bienvenue pour les développeurs.
【Toujours actualiser depuis le serveur】
Cela semble être un commandement très profond. En fait, en d'autres termes : "Désactivez l'utilisation du cache du navigateur".
【Vider le cache du navigateur】
Touche de raccourci Ctrl R. Il n’y a pas grand chose à dire, c’est juste une simplification des étapes précédentes.
Je me demande si vous avez remarqué qu'il y a trois points après [Vider le cache du navigateur] dans le menu. Cela signifie que cliquer sur ce menu affichera une boîte de dialogue de confirmation.
【Vider le cache du navigateur pour ce domaine】
Touche de raccourci Ctrl D. Il n'y a pas grand chose à dire, videz simplement le cache du navigateur pour ce domaine.
【Désactiver les cookies】
Il n'y a aucun avantage à dire. Plus de cookies.
【Effacer les cookies de session】
Effacez tous les cookies du navigateur. Vos forums et communautés attendent tous d’être à nouveau connectés.
【Effacer les cookies de domaine】
Effacer uniquement les cookies de ce domaine.
【Afficher les informations sur les cookies】
Affichez les informations sur les cookies contenues sur cette page. N'y pensez même pas, vous n'obtiendrez pas le mot de passe.
Menu [Outils]

Certains gadgets utiles sont inclus avec les outils de développement, bien qu'ils soient un peu faibles par rapport à d'autres outils spécialisés connexes. Mais une intervention d’urgence suffit.
【Redimensionner】
Gadget très utile. Vous pouvez rapidement ajuster la fenêtre du navigateur à la taille appropriée. De cette façon, il sera beaucoup plus pratique de tester la compatibilité de la résolution des pages Web.
【Afficher la règle】
Un outil de règle simple. Utilisez-le pour mesurer la longueur, la distance et d'autres informations. La couleur du fil peut être modifiée. Plusieurs titres peuvent également être créés. Si la zone est trop petite, vous pouvez utiliser la fonction loupe.

【Afficher le sélecteur de couleurs】
Un outil de sélection de couleurs simple. Les couleurs peuvent être sélectionnées d'un simple clic de souris. Cependant, je vous recommande un autre outil - "My Work Toolbox - Color Picking Tool (ColorPic)". En comparaison, celui des outils de développement est trop simple.


Cet article a brièvement expliqué chaque menu des outils de développement. Je crois que tout le monde peut facilement utiliser cet outil puissant.
Menu [Vérification]

Cela va certainement provoquer une tempête sanglante dans le monde (Merci, Xiaoqi, de m'avoir rappelé cet idiome que j'ai soudainement oublié. Hélas ~ peut-être que le dernier roman d'arts martiaux que j'ai lu est plus probablement à cause de son absence. Mais dernièrement, il me semble être plus familier avec l'idiome "haletant encore et encore"). Il y aura d'innombrables Kong Yijis dans un avenir proche.
【HTML】
Vérifiez le code HTML de la page. Cette page sera envoyée à l'outil de vérification HTML du w3c et un rapport de vérification sera obtenu.
【CSS】
Vérifiez le code CSS de la page. Cette page sera envoyée à l'outil de vérification CSS du w3c et un rapport de vérification sera obtenu.
【Source】
Vérifiez le code du fichier source de la page. Cette page sera envoyée à l'outil de vérification feedvalidator.org et un rapport de vérification sera obtenu.
[Lien]
Lien vers la page de vérification. Cette page sera envoyée à l'outil de vérification du w3c et un rapport de vérification sera obtenu.
[HTML local]
Ouvrez l'outil de vérification HTML du w3c pour vérifier les pages locales.
[Local CSS]
Ouvrez l'outil de vérification CSS du w3c pour vérifier les pages locales.
[Accessibilité] « Liste de contrôle WCAG »
Vérifiez le WCAG (Web Content Accessibility Report-page Accessibility) de la page. Cette page sera envoyée à l'outil de vérification contentquality.com et un rapport de vérification sera obtenu.
【Accessibilité】"Liste 508"
Vérifiez les normes 508 de la page. Cette page sera envoyée à l'outil de vérification contentquality.com et un rapport de vérification sera obtenu.
【Vérifications multiples】
La vérification simultanée effectue plusieurs vérifications standards sur la page.

Concernant la vérification des pages, je voudrais dire deux choses : en fait, les pages doivent-elles également passer une vérification avant de pouvoir être mises en ligne ? Personnellement, je pense que c'est complètement inutile. Si vous êtes étudiant, allongez-vous dans la tour d'ivoire. Vous pouvez faire ce que vous voulez de votre page, car vous êtes le client et vous avez le temps. Mais pour les projets commerciaux, il n'est pas nécessaire de gaspiller de précieuses ressources de projet juste pour un « PASS ». Parce qu'aucun client ne s'en souciera, "Écoutez, cette page que j'ai créée a été vérifiée par le W3C à bien des égards." S'il y a des clients qui s'en soucient vraiment, alors je peux seulement dire que j'admire votre capacité à "tromper".

Veuillez attendre avec impatience le prochain épisode

Cet article a brièvement expliqué chaque menu des outils de développement. Je crois que tout le monde peut facilement utiliser cet outil puissant.
Mais nous n’avons pas encore parlé des fonctions les plus puissantes. Tous, attendez avec impatience notre prochain article. Le prochain article expliquera en détail l'utilisation du débogage JavaScript, du mode navigateur, du mode texte et d'autres fonctions.