instalar - Cambiar el tamaño de las columnas en las herramientas para desarrolladores de Firefox

instalar firefox developer en ubuntu

Question

¿Es posible cambiar el ancho de las columnas en las herramientas para desarrolladores de Firefox? ¿Cómo puedo hacerlo?

Cuando apunto sobre el borde de la columna (como Estado, etc. en la captura de pantalla) no hay una herramienta de cambio de tamaño, por lo que puedo ver todo el contenido.

Answer 1

No, no es posible. Firefox todavía está detrás de Chrome en términos de herramientas de desarrollo UX. Por cierto, estoy aquí también en busca de una respuesta e inspeccionando una página de Google como tú ...

Answer 2

Si bien parece haber algún progreso reciente en la solicitud de funciones y su dependencia , esta última se creó en 2016, por lo que es bastante seguro asumir que podría pasar un tiempo antes de que Firefox admita el cambio de tamaño de la columna de forma predeterminada.

Mientras tanto, aquí está el CSS que he agregado a mi userChrome.css :

.requests-list-header-button {
padding-inline-start: 0px !important;
padding-inline-end: 0px !important;
}
.requests-list-method {
min-width: 30px !important;
}
.requests-list-status {
min-width: 40px !important;
}
.requests-list-file {
min-width: 100px !important;
}

Quería ampliar la columna Archivo , pero descubrí que reducir el ancho de las columnas Estado y Método en cambio solo era una gran mejora. Los estilos también eliminan el relleno lateral de los encabezados de columna para evitar que el texto sea truncado con …

Estas son las clases para las columnas predeterminadas:

• requests-list-status
• requests-list-method
• requests-list-file
• requests-list-domain
• requests-list-cause
• requests-list-type
• requests-list-transferred
• requests-list-size
• requests-list-waterfall

Tenga en cuenta que si reduce demasiado el ancho de las columnas, puede perder la alineación. Vea la respuesta de Mehdi si no sabe dónde guardar su userChrome.css o si necesita encontrar clases de otras columnas.

Answer 3

Actualización 2 : esta función ahora está disponible en la versión beta ( v67.x ). Deberá ir a about:config y habilitar el indicador devtools.netmonitor.features.resizeColumns .

Actualización : Firefox 58 59 60 61 62 63 64 sesenta y cinco 66 liberados, todavía no hay opción para cambiar el tamaño de las columnas, ¡agradable! ¡increíble! ¡interesante! ¡está bien! la siguiente versión tal vez! ¡no! ¡¿De Verdad?! Estoy impresionado no te preocupes mozilla estoy bien En serio, estoy bien.

Respuesta original : Como probablemente sepa, no hay ninguna opción para cambiar el tamaño de las columnas (a partir de FF57), la única opción que tiene es ocultar / mostrar columnas. es fácil de hacer, simplemente right-click el right-click en cualquier columna, debería ver la lista de columnas y puede seleccionarlas / deseleccionarlas.

¡¿Pero eso es todo?! no, puede cambiar el tamaño de la columna (s) usando CSS (hackear las herramientas de desarrollo), aquí están los pasos:

1. Abre las herramientas dev (usando F12 o ...)
2. Haga clic en el botón de engranaje , en la esquina superior derecha

3. Marque esta 2 opciones:

   • Enable browser chrome and add-on debugging toolboxes
   • Enable remote debugging

4. Presione Ctrl+Shift+Alt+I y haga OK en OK (en el indicador de seguridad) para abrir la Caja de herramientas del navegador

5. Debería poder inspeccionar las Dev tools utilizando la caja de Dev tools abierta del navegador
6. Juega con CSS ( igual que con la página web normal )
7. Guarde su CSS personalizado en el archivo userChrome.css

Necesita más información acerca de userChrome.css , diríjase a userchrome.org

Aquí están los pasos para crear / modificar userChrome.css :

• Abrir about:support
• Haga clic en Open Folder ( en la fila Profile Folder )
• Abrir / Crear directorio chrome
• Abrir / Crear archivo userChrome.css
• Haz lo que dije en la primera sección.

Para demostrar cómo funciona, cambio el color de fondo de una de las columnas de la Network tab a rojo.

Y aquí está el contenido de mi archivo userChrome.css ( para el ejemplo anterior )

.requests-list-file.requests-list-column {
background-color: red !important;
color: #fff !important;
}

Lo usé !important por el tiempo, no lo use si puede