Changer la taille des colonnes dans les outils de développement de Firefox

Question

Est-il possible de changer la largeur des colonnes dans les outils de développement de Firefox? Comment puis-je le faire?

Lorsque je pointe le bord de la colonne (comme Status, etc. sur la capture d'écran), il n'y a pas d'outil de redimensionnement pour que je puisse voir le contenu en entier.

Answer 1

Mise à jour: Cette fonctionnalité est désormais disponible et activée par défaut dans Firefox 67. Vous pouvez le désactiver (êtes-vous fou?) à l'aide de devtools.netmonitor.features.resizeColumns drapeau.

Réponse originale à cette question: Comme vous le savez probablement il n'y a pas d'option pour changer la colonne(s) taille (en FF57), la seule option que vous avez est de masquer/afficher les colonnes. c'est facile à faire, juste à l' right-click sur n'importe quelle colonne, vous devriez voir la liste de colonnes et pouvez sélectionner/désélectionner eux.

Mais c'est ça?! non, vous pouvez changer la colonne(s) taille à l'aide de CSS (hack les outils de dev), voici les étapes:

1. Ouvrir les outils de dev (à l'aide de la touche F12 ou ...)
2. Cliquez sur l' engrenage bouton, en haut à droite

3. Cochez cette 2 options:

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

4. Frapper Ctrl+Shift+Alt+I et Cliquez sur OK (sur invite de sécurité) pour ouvrir la boîte à outils du Navigateur

5. Vous devriez être en mesure d'inspecter l' Dev tools à l'aide de Navigateur ouvert boîte à outils
6. Jouer avec CSS (identique comme vous le faites avec les web page)
7. Sauvegarder votre propre CSS en userChrome.css le fichier

Besoin de plus d'info à propos de userChrome.css, à la tête userchrome.org

Voici les étapes pour créer/modifier userChrome.css:

• Ouvert jusqu' about:support
• Cliquez sur Open Folder (en Profile Folder rangée)
• Ouvrir/Créer chrome annuaire
• Ouvrir/Créer userChrome.css le fichier
• Faire ce que j'ai dit dans la première section

Pour montrer comment il fonctionne, je change la couleur de fond de l'un d' Network tab's colonnes de rouge.

Et voici mon userChrome.css contenu du fichier (pour l'exemple ci-dessus)

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

J'ai utilisé !important seulement pour le temps de grâce, n'utilisez pas de cela, si vous pouvez

Answer 2

Alors qu'il semble y avoir quelques progrès récents sur la demande de fonctionnalité et de sa dépendance, ce dernier a été créé en 2016, donc il est assez sûr de supposer qu'il pourrait être encore un certain temps avant que Firefox prend en charge colonne de redimensionnement par défaut.

En attendant, voici le CSS que j'ai ajouté à ma 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;
}

J'ai voulu agrandir le Fichier de la colonne, mais a constaté que la réduction de la largeur de l' État et de la Méthode des colonnes au lieu de cela fait une grande amélioration à elle seule. Les styles aussi supprimer côté rembourrage de les en-têtes de colonne pour éviter le texte tronqué avec ….

Ce sont les classes pour les colonnes par défaut:

• 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

Notez que si vous réduisez la largeur des colonnes trop, il peut jeter hors de l'alignement. Voir Mehdi réponse si vous ne savez pas où enregistrer votre userChrome.css ou vous avez besoin de trouver des cours des autres colonnes.