Le navigateur de Mozilla a une page de service spéciale, qui contient d'innombrables paramètres cachés de Firefox. Aujourd'hui, nous allons vous montrer comment activer ceux d'entre eux qui peuvent être les plus intéressants pour l'utilisateur moyen.
Rappelez-vous que nous avons récemment parlé des paramètres et des techniques qui vous aideront. Dans le même document, nous parlerons de divers petits paramètres et améliorations principalement de l'interface du navigateur.
Où puis-je trouver les paramètres Firefox cachés?
Si les informations sur les paramètres de Firefox sur une page de service spéciale étaient encore nouvelles pour vous, trouver cette page est élémentaire. Entrez about: config dans la barre d'adresse, appuyez sur Entrée et cliquez sur le bouton bleu "J'accepte le risque":
L'avertissement vous répond pour une raison: certains paramètres de Firefox, si vous modifiez leur valeur au hasard, peuvent affecter négativement le programme
Et ici, nous avons la page même où vous pouvez activer, désactiver et modifier diverses fonctionnalités du navigateur:
Il existe de nombreux paramètres ici, et chacun a ses propres valeurs. Pour certains, il s'agit d'un booléen vrai ou faux (activé / désactivé), pour d'autres, il s'agit de nombres spécifiques ou même d'une URL. Changer les valeurs booléennes est très simple: il vous suffit de double-cliquer le bouton gauche de la souris sur la ligne souhaitée, et vous verrez comment sa valeur passe immédiatement de vrai à faux ou vice versa.
Les paramètres modifiés sont ensuite mis en évidence en gras pour plus de clarté. Cependant, vous pouvez les voir avant même de commencer à apporter des modifications vous-même. Ne vous inquiétez pas: très probablement, vous avez déjà changé d'options grâce à plugins installés ou extensions.
Le seul un gros problème de cette page entière: les noms des paramètres dessus ne disent parfois rien, même à un utilisateur couramment anglais, et aucune description supplémentaire n'est fournie. Cependant, nous vous aiderons à résoudre ce problème au moins partiellement.
Paramètres de l'onglet Firefox
Commençons par les différentes options cachées associées aux onglets Firefox. Plus évident, vous pouvez les faire rétrécir davantage, ce qui fait que Firefox ressemble plus à d'autres navigateurs.
Par défaut, les onglets Firefox, peu importe combien vous les ouvrez, ne se rétrécissent jamais à plus de 76 pixels, c'est leur largeur minimale:
Cependant, dans les paramètres, vous pouvez réduire cette valeur à 50 pixels à l'aide du paramètre browser.tabs.tabMinWidth (utilisez la recherche intégrée pour le trouver), qui peut être défini manuellement sur la valeur souhaitée.
Ceci est très important pour ceux qui préfèrent travailler avec un grand nombre d'onglets, car plusieurs d'entre eux tiendront à l'écran. Par conséquent, vous devrez recourir moins souvent au défilement du panneau avec eux et aux clics inutiles.
L'année dernière, Firefox a introduit une option très pratique qui vous permet de changer d'onglet en utilisant Ctrl + Tab non pas dans l'ordre de leur emplacement, mais dans l'ordre de leur utilisation:
Ce paramètre, comme vous pouvez le voir, se trouve dans les paramètres principaux du navigateur, bien qu'il soit généralement désactivé par défaut. Sur la page about: config, un curieux paramètre browser.ctrlTab.previews lui est associé. Il vous permet d'effectuer une telle commutation dans un mode visuel, lorsque vous voyez les onglets entre lesquels vous équilibrez:
Un autre paramètre concernant les onglets est lié à la mémoire du navigateur pour une récupération rapide en utilisant Ctrl + Maj + T. Par défaut, seuls dix onglets sont mémorisés. Mais si vous avez besoin de plus, définissez simplement le nombre souhaité devant le paramètre browser.sessionstore.max_tabs_undo au lieu de 10.
Voici quelques paramètres liés aux onglets plus importants sur about: config:
- browser.tabs.closeWindowWithLastTab - défini sur false pour empêcher la fenêtre de Firefox de se fermer lorsque le dernier onglet est fermé.
- browser.tabs.insertRelatedAfterCurrent - définissez false pour ouvrir de nouveaux onglets non pas après l'actuel, mais à la fin de la barre d'onglets;
- browser.tabs.closeTabByDblclick est un nouveau paramètre qui n'est pas encore disponible dans la version stable du navigateur. Il apparaîtra dans Firefox 61 et vous permettra de fermer les onglets en double-cliquant sur le bouton gauche de la souris.
Paramètres de la page Nouvel onglet
Passons aux paramètres de la page Nouvel onglet, où il y a eu de grands changements dans Firefox l'année dernière avec la mise à jour Quantum. Les cellules y sont devenues étonnamment plus petites. Si vous voulez l'ancienne version, vous pouvez toujours la retourner. Pour ce faire, utilisez le paramètre browser.newtabpage.activity-stream.enabled. Donnez-le faux et vous avez l'ancienne version du nouvel onglet:
Mis à jour: hélas, depuis Firefox 60 cette option est devenue indisponible, l'ancienne version du nouvel onglet ne peut plus être retournée.
En veux-tu plus? Faites ensuite attention au paramètre browser.newtabpage.activity-stream.topSitesCount. Par défaut, il est 6 ou 12, mais vous pouvez écrire votre propre numéro et vous verrez le nombre de cellules souhaité. Par exemple, 18:
Mis à jour: à partir de la version 60, ce paramètre n'existe plus. Un autre a suggéré à la place: browser.newtabpage.activity-stream.topSitesRows, mais il ne configure que le nombre de lignes avec des cellules.
Paramètres des signets
Les paramètres Firefox cachés suivants sont liés aux signets et à leur barre. Par défaut, ouvrir plusieurs éléments à la fois à partir de là est franchement peu pratique.
Par exemple, vous avez ouvert un dossier avec des signets sur le panneau:
Et vous voulez, tout en maintenant la touche Ctrl, ouvrir plusieurs éléments en séquence à partir de là. Hélas, cela ne fonctionnera pas pour vous, car lorsque vous ouvrez le premier signet d'un dossier, le navigateur ferme immédiatement le menu. Pour éviter que cela ne se produise, recherchez le paramètre browser.bookmarks.openInTabClosesMenu. Il doit être défini sur false.
Vous pouvez également être intéressé par le paramètre browser.tabs.loadBookmarksInBackground (donnez-lui la valeur true), grâce auquel tous les signets s'ouvrent à l'aide de la commande «ouvrir dans un nouvel onglet», la molette de la souris et LMB + Ctrl commenceront à s'ouvrir dans les onglets d'arrière-plan, c'est-à-dire que vous ne serez pas transférez-leur immédiatement à partir de la page actuelle.
En conséquence, Firefox dans ce cas commencera à ouvrir des signets tout comme Google Chrome, ce qui nous semble plus pratique.
Cependant, parfois, l'utilisateur a besoin de plus que de la commodité de travailler avec celui choisi. Parfois, il est nécessaire que vos signets, au contraire, ne soient pas affichés à des endroits bien en vue où quelqu'un peut les voir accidentellement. Depuis l'automne dernier, les derniers signets que vous avez ajoutés, ainsi qu'une partie de votre historique de navigation, sont toujours affichés dans le menu des favoris:
Il n'y a pas d'option explicite pour les supprimer de là. Heureusement, il existe une telle option parmi les paramètres cachés de Firefox dans about: config. Recherchez le paramètre browser.library.activity-stream.enabled et attribuez-lui la valeur false. "Dernier favori" disparaîtra du menu:
Renvoyez-le, si possible, en donnant au paramètre sa valeur initiale true.
Paramètres de lecture automatique
Firefox a actuellement des règles très simples pour la lecture automatique de l'audio et de la vidéo sur les sites: il fonctionne sur les onglets actifs et ne fonctionne pas sur les onglets d'arrière-plan. Autrement dit, si vous avez déjà vu le contenu de l'onglet, la lecture y commencera immédiatement, sans qu'il soit nécessaire de cliquer sur le bouton Lecture ou d'effectuer d'autres actions.
Si cette disposition ne vous convient pas, recherchez le paramètre media.autoplay.enabled et donnez-lui la valeur false. Dans ce cas, la lecture ne démarrera nulle part d'elle-même tant que vous n'aurez pas appuyé explicitement sur le bouton pour la démarrer. Cela est vrai même pour YouTube:
D'un autre côté, vous pouvez, en revanche, rendre les règles de lecture automatique moins restrictives en vous permettant de jouer n'importe quoi dans les onglets d'arrière-plan. Autrement dit, nous parlons de ces onglets que vous avez ouverts (via ctrl ou en cliquant avec la molette de la souris sur un lien), mais que vous n'avez pas encore vu leur contenu.
En fait, l'interdiction de tels onglets "vote", qui est définie par défaut dans le navigateur, semble très raisonnable, mais dans de rares situations, il peut être utile de le supprimer. Pour ce faire, recherchez le paramètre media.block-autoplay-until-in-foreground et définissez-le sur false.
Copier et coller du texte
Deux autres paramètres sont liés aux opérations de texte. Avez-vous remarqué que lorsque vous double-cliquez sur un mot de la page, le navigateur capture automatiquement l'espace qui suit ce mot dans la sélection:
Ce n'est pas toujours pratique. Vous pouvez désactiver cette fonction à l'aide du paramètre layout.word_select.eat_space_to_next_word. Il doit être défini sur false, puis les mots sur les pages Web commenceront à se démarquer sans intercepter les espaces à la fin.
Une autre option liée au texte concerne son insertion. Vous pouvez personnaliser la molette de la souris afin qu'elle puisse coller du texte copié dans le presse-papiers dans des champs de texte. Par conséquent, vous n'avez pas besoin d'appeler le menu contextuel et de sélectionner la commande "coller" pour cela. Pour ce faire, vous avez besoin du paramètre middlemouse.paste.
Paramètres de la barre d'adresse
Notre prochain arrêt est la barre d'adresse. Vous avez probablement remarqué que pour certaines pages Web contenant du cyrillique, lorsque vous essayez de copier, tout un désordre de différents caractères est copié.
Dans ce cas, le lien continue de fonctionner, mais il a l'air terrible, absolument aimé et en plus, il prend beaucoup de place. Par exemple, voici la page d'accueil de Wikipédia. Dans la capture d'écran ci-dessous, le gadget latéral montre ce qui est allé dans le presse-papiers lorsque l'URL a été copiée:
Heureusement, pour au moins certaines des pages avec des URL cyrilliques, cette situation peut être corrigée à l'aide du paramètre browser.urlbar.decodeURLsOnCopy. Réglez-le sur true et le résultat de la copie des adresses sera complètement différent:
Un autre paramètre de la barre d'adresse est lié à son menu déroulant. Là, comme vous le savez, des astuces de recherche, des signets, des onglets ouverts, des éléments de l'historique des visites, etc. peuvent être affichés. Pour tout cela, Firefox ne propose pas plus de dix postes par défaut.
Si cela vous semble insuffisant, alors en utilisant le paramètre browser.urlbar.maxRichResults, vous pouvez augmenter le nombre de positions pour le menu déroulant de la barre d'adresse. En conséquence, plus d'informations y figureront. Par défaut, le paramètre est dix, mais vous pouvez augmenter sa valeur, par exemple, à 15:
Autres paramètres de Firefox
Enfin, il existe quelques autres paramètres qui ne peuvent guère être attribués à une catégorie spécifique. Le plus intéressant est peut-être findbar.modalHighlight. Il touche la recherche de page intégrée et lance en même temps un effet d'assombrissement spécial, très similaire à ce qui est utilisé dans Safari et était également le classique Opera Presto:
L'effet fait ressortir les résultats beaucoup plus clairement sur les pages. Ils sont plus faciles et plus rapides à détecter.
Entre autres paramètres, notez ce qui suit:
- reader.parse-on-load.enabled - supprime l'icône du mode de lecture de la barre d'outils si vous ne l'utilisez jamais;
- pdfjs.disabled - vous permet de télécharger des documents PDF directement sur le disque si vous n'êtes pas satisfait du navigateur intégré à Firefox;
- browser.backspace_action - configure l'effet de la pression sur le bouton Retour arrière (0 - reculer d'une page, 1 - faire défiler rapidement la page vers le haut);
- browser.fullscreen.autohide - ne masque pas la barre d'adresse et les onglets dans mode plein écran (seule la barre des tâches Windows disparaîtra).
Voici les paramètres de base cachés de Firefox que nous voulions partager avec vous aujourd'hui. Nous compléterons et développerons ce matériel à mesure que de nouveaux paramètres supplémentaires apparaîtront dans about: config.
La barre d'outils FireFox offre un accès facile et rapide à toutes sortes de fonctions typiques du navigateur. C'est un panneau très pratique, grâce auquel l'utilisateur peut facilement accéder à l'une ou l'autre fonctionnalité. Aujourd'hui, nous allons parler de comment personnaliser cette barre d'outils dans FireFox.
Comment afficher ou masquer les barres d'outils dans le navigateur FireFox
La grande majorité des barres d'outils de FireFox peuvent être masquées ou affichées. Ce qui sera affiché et ce qui ne sera pas affiché dépend de vous. Pour masquer ou afficher la barre d'outils souhaitée, faites un clic droit sur la barre d'onglets, dans le menu contextuel qui apparaît, cliquez sur la barre d'outils souhaitée, après quoi elle apparaîtra ou se cachera.
Il y a 5 panneaux au total, à savoir:
- Barre de menu - Panneau standard navigateur FireFox avec des fonctions standard telles que Fichier, Modifier, Aide, etc. Ce panneau est masqué par défaut sous Windows 7 et Windows Vista, ainsi que sous Windows 8. Pour l'afficher temporairement, s'il est masqué, appuyez sur Alt.
- Barre d'onglets - Une barre standard qui ne peut en aucun cas être masquée, tous vos onglets se trouvent ici.
- Barre de navigation - Cette barre contient des outils de navigation, à savoir Accueil, Précédent, Suivant, Barre d'adresse, etc. Cette barre peut être masquée à volonté, mais elle est activée par défaut.
- Barre de signets - Une barre masquée standard qui stocke tous vos signets.
- Panneau des modules complémentaires - Situé au bas du navigateur, un panneau masqué standard qui stocke les extensions installées et lancées par vous. C'est ce panneau qui permet d'accéder aux extensions en cours d'exécution.
Comment personnaliser les barres d'outils
Toutes les barres d'outils sont personnalisableset pour les personnaliser, vous devez ouvrir la fenêtre des paramètres des barres d'outils. Pour ce faire, cliquez avec le bouton droit de la souris sur la barre d'onglets. Dans le menu contextuel qui apparaît, sélectionnez " Réglages«, Après quoi une fenêtre de configuration des barres d'outils s'ouvrira.
En faisant glisser et en déposant des icônes, vous pouvez les positionner où vous le souhaitez et comme vous le souhaitez. Cela se fait très facilement. Dans la liste des icônes, sélectionnez celle dont vous avez besoin et faites-la glisser vers le panneau souhaité. En outre, vous pouvez séparer des groupes d'icônes à l'aide d'une icône de séparation spéciale.
FireFox offre de nombreuses opportunités en termes de personnalisation des icônes et des panneaux et c'est tout simplement génial.
Firefox 10, sorti le 31 janvier (le jour de la sortie de la version bêta de Firefox 11), a finalement rassemblé tous les outils de développement accumulés et les a complétés avec des inspecteurs de page et de style (inspecteur de page et inspecteur de style).
À certains égards, ces outils sont similaires à l'outil Firebug, mais cela ne les empêche pas de conserver l'unicité inhérente aux outils de Mozilla. Plutôt que de copier les outils Firebug ou WebKit, Mozilla a décidé de ne conserver que les fonctionnalités les plus essentielles. Cela a été fait pour faciliter et simplifier l'expérience utilisateur de Mozilla.
La nouvelle approche s'est-elle avérée fructueuse ou les développeurs préféreront-ils Firebug? Explorons.
Vous pouvez appeler l'inspecteur de page en cliquant avec le bouton droit de la souris sur la page Web et en choisissant «Inspecter» (je dois inspecter l'élément). (Plus récemment, Firebug a changé sa barre de menus contextuels en «Inspecter l'élément avec Firebug» pour le distinguer des autres outils de développement intégrés). Une ligne violette apparaît en bas de l'écran contenant une liste du parent et de l'enfant de l'élément sélectionné.
Les éléments parents et enfants peuvent être sélectionnés en cliquant dessus avec le bouton de la souris. Pour voir les éléments adjacents, cliquez avec le bouton droit sur l'élément. Il y a trois boutons: «Inspecter», «HTML» et «Style». Comme vous pouvez le voir, cette disposition est beaucoup plus simple que la mer d'étiquettes et de boutons de Firebug.
En cliquant sur le bouton HTML, nous verrons un panneau qui montre la hiérarchie des balises HTML qui composent votre page. Dans ce panneau, vous pouvez réduire et développer les balises et modifier leurs attributs. Lorsque vous cliquez sur le bouton «Inspecter», vous commencez à survoler les éléments et vous pouvez ainsi sélectionner les éléments que vous souhaitez inspecter. Lors de l'inspection, l'élément que vous avez sélectionné est mis en évidence par Firefox, tandis que le reste de la page est ombré.
Pour appeler l'inspecteur de style, vous devez cliquer sur le bouton Style. L'inspecteur de style affiche les règles CSS qui s'appliquent à l'élément sélectionné. Dans l'inspecteur de style, vous pouvez passer de «Règles» à «Propriétés». La section «Propriétés» affiche les valeurs de propriété CSS calculées de l'élément sélectionné, ainsi que des liens vers la documentation de Mozilla pour chaque propriété.
En fait, nous avons tout couvert de l'inspecteur de page et de style. La console Web et l'éditeur JavaScript manquants introduits dans les versions précédentes de Firefox, ils sont devenus des outils distincts. De plus, aucun moniteur activité réseau, ni la propriété ‛edit as HTML“, ni les outils de test de performance, vous ne pouvez pas ajouter de nouvelles balises à la page, vous ne pouvez pas changer l'état d'un élément. Il n'y a pas non plus de panneau Layot pour visualiser la largeur, le remplissage et les marges d'un élément.
Malgré ces limitations, je continue à utiliser les Inspecteurs de page et de style. J'aime leur interface conviviale, super apparence et une disposition des panneaux réfléchie. Travailler avec eux me fait plaisir et avec leur aide, vous pouvez résoudre presque tous les problèmes que j'ai.
En raison de leur simplicité, les interfaces de l'inspecteur restent pertinentes même lorsque je réduis la taille de la fenêtre pour vérifier la sensibilité de la conception. Lorsque les inspecteurs ne peuvent pas m'aider, je recommence à utiliser Firebug ou la barre d'outils du développeur Web. - développeur)
Les outils Mozilla n'ont pas besoin de reproduire l'ensemble des propriétés d'outils de ses concurrents, car des propriétés spécialisées de ces outils existent déjà dans les applications Firefox. C'est là que les outils de développement Firefox sont uniques.
Version de Firefox 11
De nouvelles solutions et fonctionnalités peuvent être attendues dans les futures versions de Firefox. Les outils de développement de Firefox 11 peuvent rendre une page sous forme de piles de balises 3D. Chaque fois qu'une balise est imbriquée, la pile augmente. Cette propriété est étonnamment utile, car vous pouvez voir en un coup d'œil si un élément se trouve dans l'élément parent erroné. Être capable de voir comment les balises se chevauchent permettra aux nouveaux développeurs d'économiser beaucoup de maux de tête associés aux éléments de bloc.
Toujours dans Firefox 11, il y aura un éditeur de style (éditeur de style). Avec cet éditeur, vous pouvez créer de nouvelles feuilles de style. Cet éditeur diffère des textes en ce que les modifications sont appliquées instantanément dès que vous avez fini de taper.
Il est agréable de voir que l'édition CSS peut être effectuée directement via le navigateur, plutôt que d'utiliser des programmes comme Espresso. De nouvelles fonctionnalités sont attendues cette année, notamment un «outil d'aide à la performance des applications».
Malgré tout ce qui précède à propos de Firefox 11, comparer les outils de développement firefox11 à Firebug (ou les outils de développement WebKit) revient à comparer iOS à Android. Ainsi, la boîte à outils firefox 11 a une interface simple et intuitive, des idées innovantes intéressantes y sont implémentées, mais le nombre de fonctions adaptées à un professionnel est extrêmement faible.
Par exemple, firebug a toutes les fonctions auxquelles vous pouvez penser, il peut être configuré dès que vous le souhaitez, il n'est pas nécessaire de parler de simplicité et d'intuition. Cependant, contrairement à iOS et Données Android les outils peuvent être utilisés simultanément. Il est important de se rappeler que Mozilla continue de prendre en charge Firebug et a annoncé qu'il lui restait un long chemin à parcourir.
Quel outil vous convient le mieux? Cela dépend des fonctionnalités dont vous avez besoin et de celles dont vous avez besoin, et de ce que vous pensez de la recherche d'extensions supplémentaires pour l'outil choisi. Autant que vous pensez aux outils de développement, c'est un domaine où Firefox est difficile à blâmer pour avoir copié WebKit.
Le panneau de contrôle de n'importe quel programme, navigateur ou système d'exploitation peut être personnalisé individuellement. Par exemple, la salle d'opération familière à de nombreux système Windows n'est pas un programme, mais tout un arsenal de petits programmes qui vous permettent de travailler avec des fichiers, d'aller en ligne et bien plus encore. Les utilisateurs sont intéressés par la question: est-il possible, et surtout, comment ajouter des icônes à la barre d'outils?
Ajoutez des icônes à la barre d'outils. les fenêtres
Les fonctions de gestion du système d'exploitation contiennent des paramètres et un ensemble d'outils avec lesquels vous pouvez les modifier à votre guise. Vous pouvez non seulement modifier le menu Démarrer lui-même, mais également l'apparence des raccourcis et des fenêtres. Quant à l'ajout de nouveaux outils, dans ce cas cette fonction n'est possible que lors de l'installation de programmes supplémentaires dont l'action vise à étendre fonctionnalité système opérateur.
Vous pouvez également appeler la barre d'outils Windows à l'aide du menu contextuel en cliquant sur une zone vide de l'écran avec le bouton droit de la souris et en sélectionnant l'onglet «Personnalisation» (il est à noter que cette fonction n'est pas disponible dans toutes les versions du système d'exploitation).
À l'aide du paramètre DWORD DisailowCpl, vous pouvez personnaliser l'interface de gestion afin que seuls les dossiers et les liens autorisés soient affichés.
Logiciel
Si vous ajoutez ou supprimez des outils dans le panneau de configuration des programmes MS Office, il vous suffit de cliquer avec le bouton droit de la souris sur la barre de menu (où se trouvent les onglets «Insérer», «Afficher», «Fichier», etc.) et sélectionner la fonction «Paramètres du panneau accès rapide ". Ensuite, sélectionnez les outils nécessaires pour chaque paramètre proposé. Là, vous pouvez également supprimer ceux que vous utilisez rarement ou jamais. Les outils supplémentaires sélectionnés apparaîtront sur la ligne avec les icônes de commande. Si le nombre de gadgets ajoutés est supérieur à ce que le panneau intervient, une flèche apparaît sur le côté, et lorsqu'on clique dessus, un panneau supplémentaire se développe.
La personnalisation individuelle du panneau de commande est fournie dans tous les produits logiciels, éditeur graphique ou un programme pour construire des solutions de conception complexes et contrôler les problèmes d'automatisation.
Navigateurs Internet
Dans ce cas, toute la configuration se fait via le menu. Par exemple, dans le navigateur Mozilla FireFox, lorsque vous cliquez sur le bouton "Menu", un onglet apparaît dans lequel vous pouvez gérer tous les éléments:
- effacer
- bouge toi
- ajouter
N'hésitez pas à expérimenter, car vous pouvez toujours restaurer les paramètres d'origine à l'aide de la fonction "Restaurer les paramètres par défaut".
DANS navigateur Chrome et Opera offre également la possibilité de personnaliser le panneau de contrôle et d'ajouter de nouveaux outils. Pour effectuer l'opération, cliquez sur l'icône "Paramètres et guide du navigateur".
Il se trouve que les développeurs Web préfèrent Firefox aux autres navigateurs. Un certain nombre de modules complémentaires utiles apportent une aide significative à leur travail. Dans cet article, nous examinerons ceux d'entre eux qui, à notre avis, vous seront certainement nécessaires pour une programmation web réussie. De plus, nous aborderons certaines des propriétés les plus importantes de ces modules complémentaires.
Tout d'abord, vous devez installer Firebug.
Pyromane
Firebug est un addon incontournable pour tout développeur Web. Si vous ne savez pas où le trouver, accédez à. Vous devrez probablement redémarrer votre Firefox pour activer Firebug.
Après cela, vous pouvez afficher Firebug de l'une des manières suivantes: dans le menu Outils\u003e Développeurs Web\u003e Firebug ou en cliquant avec le bouton droit et sélectionnez dans le menu qui apparaît Inspecter l'élément avec Firebug.
Il existe une autre option: recherchez l'icône Firebug dans Firefox, cliquez dessus et la fenêtre du module complémentaire apparaîtra.
Firebug est très similaire aux outils de développement de Chrome. Il dispose d'un volet pour afficher la structure et les styles HTML, et un volet de console pour consulter les erreurs, les avertissements et les journaux. Mais ce n'est pas tout: nous avons quelques conseils supplémentaires que nous espérons que vous trouverez utiles.
Redimensionner un bloc
Un élément HTML est créé à partir du modèle de boîte CSS, qui se compose à son tour d'une bordure, d'un remplissage et d'un remplissage. Il arrive que nous devions changer ces indicateurs. Dans ce cas, vous devez sélectionner l'élément que vous souhaitez modifier et aller dans le panneau "Localisation".
Vous trouverez ici une illustration du modèle de boîte CSS, ainsi que ses caractéristiques telles que la largeur et la hauteur. Bien que ces deux valeurs ne soient pas spécifiées dans le CSS, cet outil est suffisamment intelligent pour les définir.
Si vous souhaitez les convertir, cliquez sur la valeur et utilisez les flèches haut (pour augmenter) et bas (pour diminuer).
Styles calculés
Vous vous demandez probablement pourquoi certains styles ne sont souvent pas applicables. Le moyen le plus simple et le plus rapide d'en savoir plus à ce sujet, surtout si vous avez des centaines de styles, consiste à explorer le panneau Style calculé. Dans l'exemple ci-dessous, la balise d'ancrage de couleur de texte a été remplacée par la classe .button, qui à son tour a été remplacée par .button.add.
Explorer la famille de polices (méthode simple)
Vous avez probablement rencontré de nombreuses familles de chiffrement dans la propriété font-family en CSS. Malheureusement, cette option ne nous aide pas à savoir quelle police utilise le navigateur. Pour résoudre ce problème, vous pouvez installer une extension Firebug appelée.
Une fois l'installation terminée, chargez votre page Web. Vous pouvez maintenant voir clairement quelle police est actuellement appliquée. Dans notre cas c'est Helvetica neue.
Analyse du travail
Cela peut sembler anodin, mais en. Un site qui se charge plus rapidement est considéré comme plus intelligemment conçu et plus haut en termes de contenu. Ainsi, la vitesse ne peut être ignorée.
Panneau réseau
La première chose que vous devez vérifier pour évaluer les performances d'un site Web est la barre de réseau. Il enregistre la requête HTTP de votre site lors de son chargement. La capture d'écran ci-dessous montre une page qui charge 42 requêtes et prend environ 4,36 secondes à charger.
Par la suite, vous pouvez catégoriser les requêtes HTTP par leur type (HTML, CSS et Images).
YSlow!
Vous pouvez également installer l'extension Yahoo! Firebug. Après son activation, un panneau supplémentaire apparaîtra à l'écran, appelé Yslow!.
Yslow!, Comme la barre Web, enregistrera l'activité de la page lors de son chargement, puis vous montrera pourquoi le site est lent et suggérera des solutions. Dans cet exemple, nous avons testé une page Web et elle a obtenu un score de 86, ce qui correspond à une note «OK».
Vous pouvez également installer un plugin. C'est comme Yslow!, Qui teste la vitesse de chargement du site Web, même si les résultats peuvent légèrement varier. L'exemple ci-dessous montre comment cette même page n'a gagné que 82 points.
Outils de développement Web
De toute évidence, ce sont des outils pour les développeurs Web avec un certain nombre d'options utiles. Ensuite, nous vous parlerons de l'un de ceux qui nous ont le plus plu.
Visualisation des images
Il arrive que nous ayons besoin d'obtenir des informations sur une image à partir d'une page Web. Le plus souvent, les internautes commencent à fouiller dans les propriétés du navigateur ou font un clic droit sur une image et sélectionnez "Afficher les informations sur l'image":
Mais cette méthode ne peut pas être qualifiée d'efficacité si cette procédure doit être effectuée avec un certain nombre d'images. Dans ce cas, il est préférable d'utiliser l'option complémentaire "Images". Il est facilement accessible via le menu Image de la barre d'outils.
Cet exemple montre comment nous affichons simultanément l'image et la taille du fichier:
Outils intégrés de Firefox
DANS dernières versions Firefox a beaucoup plus de propriétés intégrées pour les développeurs Web, notamment:
Inspecter l'élément
À première vue, il peut sembler qu'Inspect Element de Firefox n'est pas différent d'Inspection Element dans Firebug, mais ce n'est pas le cas.
Nous ne couvrirons pas les options Inspecter les éléments car elles sont identiques aux panneaux Firebug HTML et CSS et ne diffèrent que par la mise en page et la conception. L'outil a une caractéristique distinctive que vous devriez absolument essayer: la visualisation 3D. En l'utilisant, vous pouvez voir tous les détails de la page Web. Pour l'activer, cliquez sur le bouton "Firefox Native Inspect Element" situé dans le coin inférieur droit de la page. Voici à quoi ressemble la vue 3D:
Bien que je n'utilise pas cette nouvelle fonctionnalité de Mozilla aussi souvent que tout le monde, elle peut être très utile dans certaines situations.
Vue de conception Web
En raison de la popularité croissante du Responsive Web Design, Firefox a créé un signet approprié pour son navigateur. Grâce à cet outil, vous pouvez évaluer divers paramètres d'un site Web sans redimensionner la fenêtre du navigateur.
Accédez à Outils\u003e Développeur Web\u003e Affichage de conception Web. Voici ce que vous verrez finalement:
Éditeur de style
Enfin, si vous travaillez beaucoup avec CSS, vous allez adorer cette propriété. Dans les versions de Firefox 11 ou ultérieures, l'éditeur de style est devenu un outil intégré.
Cette propriété est tout aussi précieuse que la vue Conception Web. Il vous permet d'éditer le CSS, de voir immédiatement le résultat dans le navigateur et d'enregistrer les modifications qui sont propagées directement dans le fichier CSS d'origine.
L'éditeur de style est disponible dans le menu suivant: Outils\u003e Développeur Web\u003e Éditeur de style.
En conclusion
Les addons Firefox ont beaucoup d'options, et celles que nous avons couvertes aujourd'hui ne sont que quelques-unes d'entre elles.
