web-dev-qa-db-fra.com

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

Est-il possible de changer la largeur des colonnes dans Firefox Developer Tools? Comment puis-je le faire?

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

Firefox Developer Tools columns

firefoxfirefox-developer-tools
34
Daniel Gadawski

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

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

Mais c'est tout?! non, vous pouvez changer la taille des colonnes en utilisant CSS (pirater les outils de développement), voici les étapes:

  1. Ouvrez les outils de développement (en utilisant F12 ou ...)
  2. Cliquez sur le bouton engrenage , dans le coin supérieur droit

  3. Cochez ces 2 options:

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

  4. Appuyez sur Ctrl+Shift+Alt+I Et cliquez sur OK (sur l'invite de sécurité) pour ouvrir Browser Toolbox

  5. Vous devriez pouvoir inspecter le Dev tools En utilisant la boîte à outils du navigateur ouverte
  6. Jouez avec CSS ( comme vous le faites avec une page Web normale)
  7. Enregistrez votre CSS personnalisé dans le fichier userChrome.css

Besoin de plus d'informations sur userChrome.css, Rendez-vous sur serchrome.org

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

  • Ouvrez about:support
  • Cliquez sur Open Folder ( dans la ligne Profile Folder)
  • Ouvrir/créer le répertoire chrome
  • Ouvrir/créer un fichier userChrome.css
  • Faites ce que j'ai dit dans la première section

Pour montrer comment cela fonctionne, je change la couleur d'arrière-plan de l'une des colonnes de Network tab En rouge.

Example

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

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

J'ai utilisé !important Juste pour gagner du temps, ne l'utilisez pas si vous le pouvez

43
Mehdi Dehghani

Bien qu'il semble y avoir certains progrès récents sur le demande de fonctionnalité et sa dépendance , ce dernier a été créé en 2016, il est donc assez sûr de Supposons qu'il puisse s'écouler un certain temps avant que Firefox ne prenne en charge le redimensionnement des colonnes par défaut.

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

Je voulais agrandir la colonne Fichier , mais j'ai constaté que la réduction de la largeur de l'état et Les colonnes de méthode ont plutôt fait à elles seules une grande amélioration. Les styles suppriment également le remplissage latéral des en-têtes de colonne pour éviter que le texte ne soit 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 trop la largeur des colonnes, cela peut annuler l'alignement. Voir réponse de Mehdi si vous ne savez pas où enregistrer votre userChrome.css ou vous devez trouver des classes d'autres colonnes.

3
Dave S