Plugin Firefox pour développeur Web. Le plugin Web Developer est un module complémentaire pour Firefox destiné à aider les webmasters. Vérifiez la page HTML locale

Étape 1. Installez la dernière version

Version anglaise et la plus récente de l'application Développeur Web dans Firefox ou Chrom peut être défini via les paramètres du navigateur. Pour Firefox : ouvrir dans l'option "Add-ons" (peut être ouvert en appuyant sur une combinaison de trois touches Ctrl+Maj+A) section "Extensions" - voir Fig. 1 ou fig. 2.

DANS barre de recherche saisissez la demande :

Lors de l'installation de l'application, effectuez les actions suggérées dans la boîte de dialogue. Si vous avez tout fait séquentiellement, vous aurez alors un autre ajout dans la liste des extensions - Web Developer (Fig. 3).

Une gamme complète d'options apparaîtra dans la barre d'outils de votre navigateur. Outils Web Développeur, uniquement en version anglaise. Nous parlerons de la russification dans la prochaine étape.

Étape 2. Développeur Web Russify

Pour « traduire » les noms, il faudra « rétrograder » l’option Web Developer en russe version installée jusqu'à 1.1.9. Au moment de la rédaction de ce blog, aucune version supérieure ne prenait en charge la possibilité de passer au russe. Par conséquent, vous devrez télécharger l’extension séparément et la charger vous-même dans le navigateur. Suivez le lien :

Déplacez légèrement votre souris à droite du nom de la version dont nous avons besoin 1.1.9. L'option « Ajouter à Firefox » sera mise en surbrillance.

Petit ajout : L'article a été écrit en 2013. Mi-2016 Mozilla Firefox a un accès limité à certaines extensions et modules complémentaires antérieurs. Par conséquent, si vous avez le plus dernière version Mozilla Firefox est le contraire Extensions Web Versions développeurs 1.1.9, il y aura un bouton « Ajouter à Firefox » inactif (il y a un commentaire ci-dessous qui n'est pas disponible pour cela Versions Mozilla Firefox). N'ayez pas peur ! Cliquez quand même sur le bouton gris « ajouter ». Confirmez votre désir d'installer et l'installation se poursuivra.

Mozilla vous demandera de redémarrer. Faites-le immédiatement après avoir installé l'application ou remettez-le jusqu'à la prochaine fois, c'est à vous de décider. Cela n'a pas une importance fondamentale, puisque Application Web Le développeur ne passera au russe qu'après un redémarrage et prendra sa place dans la barre d'outils.

Le développeur Web Mozilla est incroyable extension utile. Il s'installe dans les navigateurs et apporte au blogueur des informations complètes sur l'état des sites. Au début, ce plugin ne pouvait être installé que dans Firefox, mais plus tard, le même auteur, Chris Pederick, l'a développé pour Chrome. Vous pouvez le télécharger et l'installer, dans la dernière version, en anglais.

Développeur Web Mozilla version russe

Pour blogueur russe Il est possible d'installer cette extension en russe, mais dans ce cas ce n'est pas la dernière version qui est installée, mais la précédente - Web Developer 1.19.

Premier dans les paramètres Navigateur Firefox, l'extension est installée, en anglais. Passons à l'onglet "modules complémentaires". Dans la nouvelle fenêtre de droite, nous verrons des boutons pour plusieurs programmes, dont « Web Developer ». Allumons le bouton "Paramètres", après quoi une fenêtre de paramètres de cet outil apparaîtra.

Pour activer la langue russe, vous devez suivre le lien vers les versions. Dans la nouvelle fenêtre, sélectionnez le numéro 1.19 et cliquez sur le bouton « Ajouter à Firefox ». Après avoir redémarré le navigateur, panneau supérieur les extensions seront en russe. Alors tout devient clair. Commençons par charger votre site et commençons à l'analyser à l'aide des nombreuses options du panneau supérieur.

Lorsque vous ouvrez à nouveau le navigateur, le panneau apparaît à nouveau en anglais, vous devez donc réinstaller la langue russe.

Le développeur Web Mozilla désactive certaines fonctionnalités

Dans le menu déroulant, nous verrons que vous pouvez désactiver un certain nombre de fonctions afin de pouvoir voir d'autres propriétés.

• • Je désactive le "cache" et " petite police", mais tu peux le désactiver script java et d'autres fonctions.

• • "Clic sur les cookies" s'ouvre grande page avec une liste. Ici cookies individuels peut être modifié ou supprimé, mais pour l'instant je l'ai regardé sans rien toucher. Après visionnage, je ferme l'onglet et passe aux points suivants.

• • "Erreurs CSS" - ouvre également les lignes du menu déroulant. Les styles peuvent être désactivés. Mais je veux les voir, alors je clique sur la ligne : informations CSS. En conséquence, une feuille ouverte avec tous les styles intégrés au thème, plugins et widgets, résultant en une longue page Web.

« Formulaires" - p Lors de la consultation du site, les barres de site, les formulaires d'abonnement et la recherche étaient surlignés en couleur. Cet onglet est nécessaire aux webmasters lors de la création de modèles, car il existe de nombreuses lignes avec des paramètres.

Développeur Web Mozilla - autres panneaux pour l'évaluation du site

• • Graphiques - spectacle attributs alternatifs– les descriptions au-dessus des images sont mises en évidence. Vous pouvez parcourir toutes les pages du site et identifier les endroits où il n'y a pas de descriptions afin de pouvoir les corriger. Nous connaissons la taille des images, mais le poids et le nombre d'images sont indiqués ici. Tout va bien pour moi - le poids est petit, chaque image fait 3 Ko. Trouver images endommagées- sur la page principale - introuvable. Ouvre feuille séparée, où se trouvent les descriptions de toutes les images, y compris les compteurs et les favicon. Quand on regarde tout, décochez les cases.

• • Il y a beaucoup de lignes sur le panneau d'information. Je clique sur « afficher l'identifiant et la classe » et les liens sont mis en évidence à leur emplacement, c'est-à-dire sur le site. C'est très impressionnant parce que Attributs du titre et l'imbrication des documents sont représentés par coloration.

• • Poids du document : la page s'est ouverte, mais était initialement vierge. Il faut attendre un peu pour le chargement. Cependant, il apparaît bientôt informations précieuses sur le poids des sections individuelles. Surprend grand nombre scripts et leur taille. Il convient de réfléchir à la manière dont ils peuvent être réduits et réduits.

• • Liens de page d'accueil. Tout est pris en compte : titre du site, catégories, tags du cloud d'étiquettes, images, compteur, widgets jvascript, commentaires. J'ai essayé de suivre quelques liens vers les pages du site. Les adresses dans les commentaires sont fermées, merci, Cependant, le nombre de liens n'est pas réduit du fait de la nature du code Presse de mots, ce qui est difficile à résoudre. Au total, il s'avère que c'est 74 - 86 liens internes, mais selon les règles SEO, leur nombre ne peut pas dépasser 100.
  • Il existe des informations sur les balises méta de la page d'accueil.

Informations diverses

• • Divers - contiennent : règle, loupe, éditeur HTML, éléments cachés.

• • Contours : affiche les limites des titres, des liens et des contours des blocs. Vous pouvez visualiser simultanément les contours de deux ou trois éléments du site.

• • Dimensions : affiche les dimensions de la fenêtre et de la zone de visualisation. Il est possible d'ajuster la taille de la fenêtre et de la police en appuyant sur les boutons d'augmentation et de diminution.

• • Outils - la transition vers les services de validation est effectuée. Lors de la vérification, j'ai trouvé beaucoup d'erreurs CSS et HTMI. Par exemple, le CSS est vérifié en premier, puis celui généré est proposé fichier correct styles.

• • Par ce conseil a fait ce qui suit : en a activé un autre, sujet simple/pas pour longtemps/. J'ai copié mon fichier de styles, je l'ai transféré dans le bloc-notes, je l'ai enregistré et je l'ai supprimé de l'éditeur du site. J'ai téléchargé le bon fichier depuis le validateur et je l'ai inséré à la place du mien.

• • Je suis allé sur le site Web. Et qu’est-ce que je vois avec des styles nouveaux et corrects ? Le site internet est en place, mais lequel ? La vue est dégoûtante. Le modèle est devenu une seule colonne. Les textes s'étendent d'un bord à l'autre, il n'y a pas de couleurs.
  • C'est pourquoi j'ai rapidement renvoyé mon dossier de Erreurs CSS et tout s'est amélioré. En revanche, des erreurs de validation sont à corriger, mais cela n'est pas encore disponible pour moi.

Pour le navigateur Chrome

Version Internet. développeur pour le navigateur Chrom, du même auteur, amélioré et étendu. Par rapport à l'extension pour Navigateur Mozilla, options légèrement différentes. Le texte est en anglais, mais certaines pages d'ouverture sont traduites.

C'est mieux quand une personne connaît au moins Anglais, parce qu'Internet en a besoin. Après avoir parcouru le Web. développeur, les idées sur la structure du blog s'améliorent.

L'analyse dans cette extension doit être constante, il est donc conseillé à chaque blogueur de l'installer dans le navigateur. Au moins afin de contrôler le nombre de liens sur chaque page.