about - Aumentar el tamaño de fuente del código en la herramienta para desarrolladores de Firefox

about config

Question

¿Cómo aumentar las fuentes de código en las herramientas de desarrollador de Firefox? Sé que hay una función de zoom, pero quiero establecer el tamaño de fuente solo para el código.

Answer 1

1. Abra las herramientas de desarrollador de Firefox
2. Presione Ctrl + + en Unix / Win o Cmd + + en Mac.

Para ser claros, me refiero a la tecla + . No necesitas mantener el Shift mientras lo haces.

Answer 2

Abra Firefox y escriba about:support . En la sección Conceptos básicos de la aplicación , elija Carpeta de perfil - Carpeta abierta . Se activará su administrador de archivos. Si no hay una carpeta de chrome créelo. Después de eso, vaya a esta carpeta de chrome y cree un archivo userChrome.css , ábralo en un editor de texto y agregue: .devtools-monospace {font-size: 12px!important;} Guardar. Asegúrese de reiniciar Firefox.

ACTUALIZACIÓN : Una cosa me molestó: al escribir en la consola de devtools, el texto en realidad es un poco más pequeño que en la salida (después de presionar Enter). Para que sea igual, también debemos cambiar el tamaño de fuente para su clase css correspondiente. Todavía no sé su nombre de clase, así que solo configuré

* { font-size: 12px !important; } * { font-size: 12px !important; } globalmente y funciona.

Answer 3

Accidentalmente, mi ventana de desarrollador de Firefox se redimensionó al mínimo (ni siquiera podía leerla más), "CMD +" (mac) no funcionó para mí, bueno solo para la página web principal, incluso si la consola estaba enfocada, yo simplemente presione: "CMD 0" y volvió a la normalidad, si puede ser una buena alternativa para cualquier otra persona;)

Answer 4

Algunos elementos de Firefox se pueden diseñar en el archivo userChrome.css ubicado en la carpeta de Chrome de su perfil de Firefox.
A partir de 2018, modifique / cree ~ / .mozilla / firefox / [nombre-perfil] /chrome/userChrome.css con algo similar a:

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

Luego reinicia Firefox.

La solución en los foros de Mozilla casi tiene razón: https://support.mozilla.org/en-US/questions/1198481

Usar Ctrl + = o Cmd + = no fue ideal para mí, ya que aumentó las fuentes para todos los elementos de la ventana, incluidos los nombres de las pestañas.

El uso de .devtools-monospace { font-size: 13px !important;} estaba casi bien, pero no afectó a las pestañas Debugger y Network.

El uso de la solución de @ bohag_bihu tuvo efectos secundarios para la barra de direcciones y algunas otras entradas de texto.

Answer 5

Como dijo John, la forma de aumentar el tamaño de fuente en las herramientas de desarrollo es usar ctrl / cmd +, tal como lo haría en una página web. De hecho, devtools es una página web. Solo necesita asegurarse de que el marco de devtools esté enfocado primero.

Me temo que no hay forma de aumentar solo el tamaño de fuente para el código en este momento.

Answer 6

Entonces, como se dijo anteriormente, la respuesta corta es cmd + + .

Pero el signo + podría no estar directamente accesible en su teclado (sin teclado numérico, computadora portátil, diseño extraño).
Luego debe presionar maj primero para acceder al signo + , como, por ejemplo, en el diseño del teclado americano: maj + = .
Desafortunadamente, incluso si está correctamente enfocado en el panel de herramientas de desarrollo, cmd + maj + = aumenta la fuente del panel de vista web, mientras que cmd + - disminuye la fuente en el panel de herramientas de desarrollo.
Y terminas con un panel de herramientas web con un tamaño de fuente tan pequeño que es ilegible y no hay forma de aumentarlo.

Luego, la respuesta de @ Thal es útil, una vez enfocado al panel de herramientas de desarrollo cmd + 0 restablece el tamaño de fuente de la herramienta de desarrollo al original.

Si desea responder a la pregunta que @Timothy_Truckle está pidiendo, aquí hay algunos de ellos (todavía se centran en el panel de herramientas de desarrollo, por supuesto):

• cambie a la distribución del teclado de EE. UU. y presione cmd + =
• encuentre un diseño de teclado con el + directamente accesible, cambie a él y presione cmd + +

Eso es para ustedes que se preguntan por qué a algunos les resulta difícil simplemente presionar cmd + + o por qué a algunos les resulta difícil enfocarse en el panel de herramientas de desarrollo (porque en realidad se centran en el panel de herramientas de desarrollo, pero el resultado es como si estuvieran enfocados en el panel de vista web).

Answer 7

Para ciertas versiones de Mozilla (estaba probando en Mozilla SeaMonkey equivalente a Mozilla Firefox 52 ESR), se requiere un elemento raíz establecido explícitamente.

Esto funcionará:

@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace html url("http://www.w3.org/1999/xhtml");

mientras que esto no :

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace html url("http://www.w3.org/1999/xhtml");

Una vez que se hayan establecido las reglas de @namespace ,

solo necesita agregar selectores y estilos:

.devtools-monospace, .CodeMirror, .CodeMirror pre { font-family: "Courier New", monospace !important; font-size: 10pt !important; }

Answer 8

Puede especificar un estilo para el selector de clase devtools-monospace . Para hacerlo, edite userChrome.css en el directorio chrome su perfil de mozilla y especifique las propiedades CSS que desee. Por ejemplo:

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

El userChrome.css debe estar en la carpeta de chrome de su perfil de Firefox. Si la carpeta no existe, créela. Su userChrome.css anulará el CSS de las herramientas de desarrollo de Firefox después de reiniciar el navegador.

Para encontrar su perfil en el sistema operativo Windows, escriba: Strg + R y luego ingrese:

%APPDATA%/Mozilla/Firefox/Profiles/

Answer 9

userChrome.css modificar userChrome.css en ~/.mozilla/firefox/[profile-name]/chrome con esto:

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

El resultado se ve así:

Esto solo cambia el depurador y el editor de estilo. Hay un selector diferente para el inspector html. No estoy seguro de qué es eso todavía.