web-dev-qa-db-fra.com

Augmentez la taille de la police du code dans l'outil de développement Firefox

Comment augmenter les polices de code dans les outils de développement Firefox? Je sais qu'il existe une fonction de zoom, mais je souhaite définir la taille de police uniquement pour le code.

firefoxfont-sizefirefox-developer-tools
59
LDMdev

Vous devez modifier userChrome.css en dessous de ~/.mozilla/firefox/[profile-name]/chrome avec ça:

/*  Styles for Web developer tools */
@namespace url(http://www.w3.org/1999/xhtml);
.CodeMirror {
    font-family:    "Ubuntu Mono", monospace !important;
    font-size:      15pt !important;
}

Le résultat ressemble à ceci:

firefox

Cela ne change que le débogueur et l'éditeur de style. Il existe un sélecteur différent pour l'inspecteur html. Je ne sais pas encore ce que c'est.

15
Nan Zou
  1. Ouvrez les outils de développement Firefox
  2. Presse Ctrl++ sous Unix/Win ou Cmd++ sur Mac.

Pour être clair, je veux dire la + clé. Vous n'avez pas besoin de tenir le Shift tout en le faisant.

154
John Karahalis

Ouvrez Firefox et saisissez about:support. Dans Application Basics la section a choisi Profile Directory - Open Directory. Cela déclenchera votre gestionnaire de fichiers. S'il n'y a pas de dossier chrome, créez-le. Ensuite, allez dans ce dossier chrome et créez un userChrome.css fichier, ouvrez-le dans un éditeur de texte et ajoutez: .devtools-monospace {font-size: 12px!important;} Sauver. Assurez-vous de redémarrer Firefox.

[~ # ~] mise à jour [~ # ~] : Une chose m'a dérangé - pendant que en tapant dans la console devtools le texte en fait un peu plus petit qu'en sortie (après avoir appuyé sur Entrée). Afin de le rendre identique, nous devons également changer font-size pour sa classe CSS correspondante. Je ne connais pas encore son nom de classe donc je viens de définir

* { font-size: 12px !important; } globalement et ça marche.

12
daGo

Donc, comme indiqué précédemment, la réponse courte est cmd++.

Mais le + signe peut ne pas être directement accessible sur votre clavier (pas de clavier numérique, ordinateur portable, disposition étrange).
Vous devez ensuite appuyer sur maj pour accéder au + signe, comme par exemple sur la disposition du clavier américain: maj+=.
Malheureusement, même si vous êtes correctement concentré sur le volet d'outils de développement, cmd+maj+= augmente la police du volet d'affichage Web, tandis que cmd+- diminue la police dans le volet d'outils de développement.
Et vous vous retrouvez avec un volet d'outils Web avec une taille de police si petite qu'elle est illisible, et aucun moyen de l'augmenter.

Ensuite, la réponse de @ Thal est pratique, une fois concentrée sur le volet d'outils de développement cmd+ réinitialise la taille de police de l'outil de développement à l'original.

Si vous souhaitez répondre à la question comme @Timothy_Truckle le demande, en voici quelques-unes (concentrez-vous toujours sur le volet d'outils de développement, bien sûr):

  • passez à la disposition du clavier américain et appuyez sur cmd+=
  • trouver une disposition de clavier avec le + directement accessible, basculez dessus et appuyez sur cmd++

C'est pour vous les gars qui se demandent pourquoi certains ont du mal à appuyer simplement sur cmd++ ou pourquoi certains ont du mal à se concentrer sur le volet d'outils de développement (car ils se concentrent réellement sur le volet d'outils de développement, mais le résultat est comme s'ils étaient concentrés sur le volet d'affichage Web).

8
loic.jaouen

Vous pouvez spécifier un style pour le devtools-monospace sélecteur de classe. Pour ce faire, modifiez userChrome.css dans le répertoire chrome de votre profil mozilla et spécifiez les propriétés CSS souhaitées. Par exemple:

.devtools-monospace {
    font-family: "Source Code Pro",monospace !important;
    font-size: 16px !important;
}

Le userChrome.css doit se trouver dans le dossier chrome de votre profil Firefox. Si le dossier n'existe pas, créez-le. Votre userChrome.css remplacera alors le CSS des outils de développement Firefox après avoir redémarré le navigateur.

Pour trouver votre profil dans le système d'exploitation Windows, tapez: Strg + R, puis entrez:

%APPDATA%\Mozilla\Firefox\Profiles\
5
Joschi

Certains éléments de Firefox peuvent être stylisés dans le fichier userChrome.css situé dans le chrome de votre profil Firefox dossier.
Depuis 2018, modifiez/créez ~/.mozilla/firefox/[profile-name] /chrome/userChrome.css avec quelque chose semblable à:

@-moz-document url-prefix("chrome://devtools/content/") {
    * { font-size: 13px !important; }
}

Redémarrez ensuite Firefox.

La solution sur les forums Mozilla a presque raison: https://support.mozilla.org/en-US/questions/1198481

En utilisant Ctrl+= ou Cmd+= n'était pas idéal pour moi car il augmentait les polices pour tous les éléments de la fenêtre, y compris les noms des onglets.

En utilisant .devtools-monospace { font-size: 13px !important;} était presque correct, mais cela n'affectait pas les onglets Débogueur et Réseau.

L'utilisation de la solution de @ bohag_bihu a eu des effets secondaires pour la barre d'adresse et certaines autres entrées de texte.

5
ovichiro

J'ai accidentellement fait redimensionner ma fenêtre de développeur Firefox au minimum (je ne pouvais même plus le lire), "CMD +" (mac) ne fonctionnait pas pour moi, enfin uniquement pour la page Web principale même si la console était concentrée, je appuyez simplement sur: "CMD 0" et il est revenu à la normale, si cela peut être une bonne alternative à quelqu'un d'autre;)

1
Thal

Comme l'a dit John, la façon d'augmenter la taille de la police dans les devtools est d'utiliser ctrl/cmd +, comme vous le feriez sur une page Web. En fait, les devtools sont une page Web. Vous devez juste vous assurer que le cadre devtools est focalisé en premier.

Je crains qu'il n'y ait aucun moyen d'augmenter uniquement la taille de police pour le code en ce moment.

1
pbrosset