Menu Explication des outils de développeur IE8

Cet article a brièvement expliqué les différents menus d'outils de développeur. Je crois que tout le monde peut facilement utiliser cet outil puissant.

Explication détaillée de l'utilisation des outils de développement IE8 (explication détaillée des menus à tous les niveaux)

La version officielle d'IE8 a été publiée. Cet article ne fera aucun commentaire dans un non-sens, puis donnera la conclusion que Chrome a la capacité d'exécuter JavaScript 15 fois celui de IE8, qui a 2,456 fois celui de Safari, et ce que IE8 a 1,235 fois plus élevé que Firefox. Qui est-ce que je me soucie est mieux que qui? Tout ce que je sais, c'est: lorsque Windows 7 est publié, la part de marché du navigateur IE8 rendra les développeurs frontaux incapables de dire: ne vous inquiétez pas pour IE8, peu de gens l'utilisent. Ainsi, cet article l'expliquera de manière très pragmatique. IE8 peut être le seul outil de développeur qui rend les développeurs sympathiques. Dans le même temps, nous étendrons certaines informations et connaissances pertinentes. Alors, veuillez abandonner vos préjugés contre IE8 et continuer à regarder patiemment.

IE8 n'a-t-il pas encore installé?

Si vous êtes un développeur frontal, veuillez installer cette chose. Parce que la version officielle a été publiée. Contrairement à la version bêta précédente, nous devons y faire attention sérieusement cette fois. Allez télécharger et en installer un, ce qui suit est 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 bits

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 que vous vous inquiéterez que IE6 ou IE7 dans votre système soit terminé. Oui, en effet, c'est possible. Cependant, vous pouvez essayer l'outil suivant. Il vous permet de coexister avec plusieurs versions de solutions IE - coexistence de plusieurs versions de IE - ieTester

SuperPreview (avec téléchargement)

Bien que cette chose ait changé son nom à la mode, ce n'est pas une nouvelle chose. Son prédécesseur était Iedevtoolbar. Cependant, ce n'était qu'un plug-in pour IE. Dans IE8, le navigateur a automatiquement intégré cette chose, ce qui a non seulement changé le nom d'un peu rustique, mais a également beaucoup d'amélioration des fonctions.

Les outils du développeur peuvent également être appelés sous le menu des outils de IE8 ou cliquer directement sur la touche de raccourci F12.

Avant de le présenter, parlons de ce que cette chose peut faire? Si vous utilisez simplement un navigateur pour parcourir le site Web, sans vous soucier de la façon dont la page est faite. Ensuite, je pense que vous pouvez quitter cette page.

Dans l'ensemble, les outils de développeur sont des outils conçus pour que les développeurs frontaux pourraient développer des pages. Fournissez une série de gadgets pour vous permettre de trouver facilement des bogues de page, y compris le code HTML, le code CSS et le code JavaScript. En même temps, il fournit également quelques petits outils qui sont tout à fait inutiles mais qui peuvent toujours frapper l'odeur, comme la cueillette des couleurs, la règle d'écran, etc.

OK, nous l'avons vu et savons ce qu'il peut faire. Alors présentons-le un par un selon l'ordre du menu-

Cet article a brièvement expliqué les différents menus d'outils de développeur. Je crois que tout le monde peut facilement utiliser cet outil puissant.

【Révoquer tout】

Toutes les opérations effectuées dans les outils du développeur ont été annulées et les structures de page et de DOM sont actualisées.

【Source de tente d'exploration Internet personnalisée】

【Essayer la source】 Quel putain de nom. D'une manière simple, c'est: quel éditeur utiliser pour afficher le fichier source Web. Par exemple: j'utilise EditPlus.

【quitter】

Afin de ne pas insulter votre QI, je ne dirai pas grand-chose à ce sujet. Eh bien, F12 est une clé de raccourci de parité, mentionnons ceci d'ailleurs.

【Trouver le menu

Cliquez pour sélectionner l'élément

La clé de raccourci Ctrl B a le même effet que de cliquer sur le bouton ICO de la souris dans l'image. La fonction la plus couramment utilisée. Il s'agit également d'un commutateur de parité. Lors de l'ouverture, en cliquant sur un élément de la page avec la souris, l'élément modifié sera sélectionné et la structure DOM, le style CSS et d'autres informations de l'élément modifié seront répertoriés.

Par exemple, l'image ci-dessus. La zone à gauche montre les informations DOM de cet élément hyperlien. Ses éléments parents, enfants et sœurs et sœurs peuvent être clairement vus.

La zone à droite montre les informations de style élément. Le style qui est passé par la ligne signifie que le style ne fonctionne plus parce que la priorité n'est pas assez élevée. Pendant le débogage, le crochet précédent peut être accroché. Lorsqu'il est accroché, cela signifie que ce style est forcé d'être supprimé. De plus, les propriétés de chaque style peuvent être modifiées immédiatement après avoir cliqué avec la souris. Cela verra instantanément l'effet de page modifié, ce qui est très pratique.

Les amis qui ont utilisé Firefox Firebug doivent être familiers avec cela. La seule différence est: Firebug organise les styles avec une priorité inférieure ci-dessous, c'est tout.

La fonction des vues [de style de traçage] et [de style] est la même, et elles sont utilisées pour afficher les informations de style de l'élément sélectionné. La seule différence est: elle a changé sa méthode de visualisation. La vision spécifique de votre habitude dépend de vos propres préférences.

Cet article a brièvement expliqué les différents menus d'outils de développeur. Je crois que tout le monde peut facilement utiliser cet outil puissant.

[Disposition] La vue peut afficher les informations du modèle en boîte des éléments sélectionnés. Bien qu'il puisse afficher plus d'informations que Firebug, je préfère toujours la façon dont Firebug l'exprime directement sur la page avec des blocs de couleur.

[Propriétés] La vue peut afficher les informations d'attribut de l'élément sélectionné. Il est très gratifiant: vous pouvez ajouter ou supprimer quelques propriétés immédiatement pour déboguer rapidement la page.

Oh, c'est vrai. Il convient de noter que si vous modifiez le style ou les attributs de l'élément sélectionné dans l'outil de développeur, ils ne sont que du débogage temporaire et ne modifieront pas le code source de votre page Web.

【Désactiver le menu

【scénario】

Les scripts JavaScript ou VBScript sur la page sont interdits. Pourquoi le désactiver? Pour tester la robustesse de la page. Certains clients qui ont des exigences élevées pour la conception de pages demanderont: si le client désactive le script, cette page peut-elle encore être utilisée? Eh bien, oui, cette fonction est utilisée pour tester les besoins pervers de ces putains de clients.

【Bloqueur de fenêtres pop-up】

Filtre pour la fenêtre contextuelle. Utilisé pour tester celui qui peut faire du navigateur ou un filtre de logiciel de sécurité dans ma fenêtre contextuelle.

【CSS】

CSS Nude Festival arrive! Utilisez-le pour tester la posture de votre page lors de l'exécution nue dans CSS. Il s'agit également d'un test important pour vérifier la robustesse et l'accessibilité de la page. Bien qu'il n'y ait pas beaucoup de aveugles qui peuvent accéder aux pages Web en Chine maintenant.

Cet article a brièvement expliqué les différents menus d'outils de développeur. Je crois que tout le monde peut facilement utiliser cet outil puissant.

【Informations de classe et d'identification】

La touche de raccourci est Ctrl I, le commutateur de parité. Après l'avoir ouvert, vous verrez que la page est recouverte de blocs de couleurs rouges denses. Le nom de classe ou le nom de l'ID s'affichera. Oui, c'est l'effet de consulter les informations de classe et d'identification. Mais pour être honnête, qui serait intéressé par ce tabouret rouge? Non seulement la page ressemble à des vêtements d'un mendiant plein de patchs, mais il en est également complètement au courant -_- B ...

【Chemin de liaison】

Identique à ci-dessus. Il boxera tous les hyperliens de la page en rouge et affichera son adresse de liaison.

【Rapport de liaison】

À l'aide de la fonction de rapport de lien, l'outil de développeur vous aidera à générer un rapport de lien pour cette page. Comprend des informations telles que le nombre de liens, l'adresse des liens, que ce soit une nouvelle fenêtre, etc. Mais à quoi sert cette chose? Je ne sais pas non plus.

【Index d'onglet】

Mettez en surbrillance tous les éléments contenant des attributs Tabindex. Le paramètre de la propriété Tabindex peut modifier l'ordre dans lequel les éléments de la page Web se concentrent.

Cet article a brièvement expliqué les différents menus d'outils de développeur. Je crois que tout le monde peut facilement utiliser cet outil puissant.

【Clé d'accès】

Mettez en surbrillance tous les éléments contenant l'attribut AccessKey. Définissez l'attribut AccessKey pour définir les touches de raccourci pour les éléments pour obtenir la mise au point.

【Fichier source】 Source d'élément avec style

Générez un fichier source contenant des styles d'élément sélectionnés, du code HTML et des informations au niveau Web.

Un élément doit être sélectionné avant que cette commande ne soit valide. De plus, le fichier source généré n'est lié qu'aux éléments sélectionnés.

【Fichier source】 DOM (élément)

La touche de raccourci est Ctrl T. Générer un fichier source. Ce fichier source ne contient que des informations de structure DOM pour l'élément sélectionné. Les amis qui ont utilisé Firebug peuvent penser au code HTML de l'élément de copie de commande. En fait, celui-ci est similaire à celui-ci. C'est juste que cela est généré par une fenêtre et que Firebug est copié directement dans le presse-papiers.

【Fichier source】 DOM (page)

Clé de raccourci Ctrl G. Générez un fichier source. Ce fichier source contient la structure d'informations DOM de toute la page. C'est une putain de fonctionnalité. Je ne sais pas si c'est à cause du bug. Cette fonctionnalité doit en fait afficher le code source de la page Web. Parce que le code source généré n'est pas seulement des informations DOM, mais aussi des informations CSS et du script.

État d'origine du fichier source 【】】

La fonction extrêmement putain est de visualiser le code source de la page Web. Tout le monde devrait préférer utiliser le bouton de la souris droit pour cliquer directement sur la page Web.

[Aperçu] Le menu est évidemment une commande pour décrire les éléments qui remplissent les conditions et les afficher.

【Tableau de table】

C'est pour encadrer chaque cellule de la table de formulaire avec du filon orange . Faites-vous savoir-oh. Il s'avère qu'il s'agit de la cellule de la table.

【surface】

C'est pour encadrer le formulaire dans le filon orange . Faites-vous savoir-oh. Il s'avère qu'il s'agit du formulaire.

【Div Elements】

Il s'agit d'utiliser des wireframes verts pour tous les éléments div de la page. Faites-vous savoir-oh. Il s'avère que ce sont des éléments div.

Cet article a brièvement expliqué les différents menus d'outils de développeur. Je crois que tout le monde peut facilement utiliser cet outil puissant.

【image】

C'est pour encadrer tous les éléments IMG de la page dans Purple Wireframe . Faites-vous savoir-oh. Il s'avère que ce sont tous des éléments IMG.

【Tout élément】

Celui-ci est plus puissant. Vous pouvez personnaliser n'importe quelle étiquette et la couleur qu'ils souhaitent utiliser pour sortir avec Wireframe. Cliquez sur ce menu et la boîte de dialogue ci-dessous apparaîtra. Très simple. Plus d'explications.

【Positionner les éléments】 relatifs

Il sera encadré en vert , tous les éléments avec position: style relatif.

【Élément de positionnement】 Absolu

Il sera encadré de wireframe noir , tous les éléments avec position: style absolu.

【Élément de positionnement】 Fixé

Il sera encadré en bleu , tous les éléments avec position: style statique.

【Élément de positionnement】 Float

Il sera encadré de wireframes jaunes , tous les éléments avec style de flotteur.

【Clai Contline】

Lorsque votre page a été réalisée avec différentes couleurs de lignes comme des tables Excel, vous pouvez utiliser cette commande pour effacer toutes les lignes.

Cet article a brièvement expliqué les différents menus d'outils de développeur. Je crois que tout le monde peut facilement utiliser cet outil puissant.

De toute évidence, cette commande contrôle diverses images sur la page.

【Désactiver les images】

Afin de ne pas insulter votre QI, je ne dirai pas cela. La seule chose à expliquer est que non seulement l'élément IMG, mais aussi l'image d'arrière-plan de l'élément sera désactivée.

【Afficher la taille de l'image】

Très bonne fonctionnalité. Vous pouvez rapidement connaître la taille de chaque image sans vérifier les attributs de l'image. Bien sûr, l'unité est des pixels.

【Afficher la taille du fichier d'image】

Très bonne fonctionnalité. Vous pouvez rapidement connaître la taille du fichier de chaque image sans vérifier les propriétés de l'image. Bien sûr, l'unité est des octets.

【Afficher le chemin d'image】

Très bonne fonctionnalité. Vous pouvez rapidement connaître le chemin d'accès URL de chaque image sans vérifier les attributs d'image, et vous pouvez également le copier.

【Afficher le texte alt】

Le texte de l'attribut ALT de l'élément IMG peut être affiché. Soit dit en passant: n'empilez pas les mots clés pour les images, sinon il sera facilement considéré comme une optimisation de transition de référencement.

【Voir le rapport d'image】

Générez un rapport d'image détaillé pour modifier la page. Contient des informations très détaillées pour chaque image.

Cet article a brièvement expliqué les différents menus d'outils de développeur. Je crois que tout le monde peut facilement utiliser cet outil puissant.

Gérez les groupes de menu caches et cookies. Ce sera une fonctionnalité très agréable pour les développeurs.

【Refreindre toujours à partir du serveur】

Cela semble être une commande très profonde. En d'autres termes, il est interdit d'utiliser le cache du navigateur.

【Effacer le cache du navigateur】

Clé de raccourci Ctrl R. Il n'y a rien à dire, il simplifie simplement les étapes de fonctionnement précédentes.

Je ne sais pas si vous avez remarqué qu'il y a trois points derrière [Clear Browser Cache] dans le menu. Cela signifie que la boîte de dialogue sera confirmée après avoir cliqué sur ce menu.

【Effacer le cache du navigateur pour ce domaine】

Clé de raccourci Ctrl D. Il n'y a rien à dire, effacez simplement le cache du navigateur dans ce domaine.

【Désactiver les cookies】

Il n'y a aucun avantage à dire. Aucun biscuit autorisé.

【Cookies de session claires】

Effacez tous les cookies de votre navigateur. Votre forum et votre communauté attendent à nouveau de se connecter.

【Effacer les cookies du domaine】

Effacer les cookies dans ce domaine.

【Voir les informations sur les cookies】

Consultez les informations sur les cookies contenues sur cette page. N'y pensez même pas, vous n'obtiendrez pas le mot de passe.

Certains gadgets utiles sont inclus avec les outils du développeur, bien qu'ils soient un peu plus faibles que d'autres outils connexes spécialisés. Mais la réponse d'urgence suffit encore.

【Redimensionner】

Gadget très utile. Vous pouvez rapidement ajuster la fenêtre du navigateur à la taille pertinente. De cette façon, il sera beaucoup plus pratique de tester la compatibilité de la résolution Web.

【Afficher le souverain】

Un outil de règle simple. Utilisez-le pour mesurer la longueur, la distance et d'autres informations. La couleur de la ligne peut être modifiée. Plusieurs titres peuvent également être créés. S'il est trop mince, vous pouvez utiliser la fonction de loupe .

【Afficher le sélecteur de couleurs】

Un simple outil de cueillette de couleurs. Cliquez sur la souris pour sélectionner la couleur. Cependant, je vous recommande un autre outil - ma boîte à outils de travail - Colorpic, qui est trop simple dans les outils du développeur.

Cet article a brièvement expliqué les différents menus d'outils de développeur. Je crois que tout le monde peut facilement utiliser cet outil puissant.

Cela provoquera certainement des tempêtes sanglantes dans le monde (merci Xiaoqi de m'avoir rappelé cet idiome que j'ai soudainement oublié, hélas ~ peut-être parce que j'ai lu moins de derniers romans d'arts martiaux. Mais je semble être familier avec les idiomes comme Paleting et Lianlian récemment). Dans un avenir proche, d'innombrables Kong Yiji seront sûrement produits.

【Html】

Vérifiez le code HTML de la page. Cette page sera envoyée à l'outil de vérification HTML de 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 de W3C et un rapport de vérification sera obtenu.

【source】

Vérifiez le code de 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】

Vérifiez le lien vers la page. Cette page sera envoyée à l'outil de vérification de W3C et un rapport de vérification sera obtenu.

【HTML local】

Ouvrez l'outil de vérification HTML de W3C pour vérifier la page locale.

【CSS local】

Ouvrez l'outil de vérification CSS de W3C pour vérifier la page locale.

【Fonctions accessibles】 Liste WCAG

Vérifiez la WCAG de la page (accessibilité du contenu Web Accessibilité Report-page). Cette page sera envoyée à l'outil de vérification contenuquality.com et un rapport de vérification sera obtenu.

Liste des [fonctions accessibles]

Vérifiez les normes de la page 508. Cette page sera envoyée à l'outil de vérification contenuquality.com et un rapport de vérification sera obtenu.

【Vérifications multiples】

Vérifiez la page en même temps pour vérifier plusieurs spécifications.

En ce qui concerne la vérification des pages, je voudrais dire quelques mots: en fait, la page doit-elle passer la vérification avant de pouvoir être lancée? Je pense personnellement que c'est complètement inutile. Si vous êtes étudiant, allongez-vous à l'intérieur de la tour d'ivoire. Vous pouvez lancer votre page à tout moment, car vous êtes le client et que vous avez juste le temps. Cependant, il n'est pas nécessaire de gaspiller de précieuses ressources de projet pour un laissez-passer pour les projets commerciaux. Parce qu'aucun client ne se soucie de vous, la page que j'ai faite a été vérifiée par W3C sous de nombreux aspects. Si un client se soucie vraiment, je peux seulement dire que j'admire votre capacité à tromper.

Cet article a brièvement expliqué les différents menus d'outils de développeur. Je crois que tout le monde peut facilement utiliser cet outil puissant.

Mais nous n'avons pas du tout mentionné les fonctions les plus puissantes. Tout, veuillez attendre notre prochain article. Dans le prochain article, nous expliquerons en détail l'utilisation du débogage JavaScript, du mode du navigateur, du mode texte et d'autres fonctions.