Изменение размера столбцов в Firefox Developer Tools

Ответ 1

Обновление: эта функция теперь доступна и включена по умолчанию в Firefox 67. Вы можете отключить ее (вы с ума сошли?), Используя флаг devtools.netmonitor.features.resizeColumns.

Исходный ответ: Как вы, вероятно, знаете, нет возможности изменить размер столбца (столбцов FF57), единственный вариант, который у вас есть, это скрыть/показать столбцы. это легко сделать, просто right-click по любому столбцу, вы должны увидеть список столбцов и можете выбрать/отменить их выбор.

Но что это?! нет, вы можете изменить размер столбца (ов) с помощью CSS (взломать инструменты разработчика), вот шаги:

1. Откройте инструменты разработчика (используя F12 или...)
2. Нажмите на кнопку передач, в правом верхнем углу

3. Проверьте это 2 варианта:

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

4. Нажмите Ctrl+Shift+Alt+I и нажмите кнопку OK (при появлении запроса безопасности), чтобы открыть панель инструментов браузера.

5. Вы должны быть в состоянии осмотреть Dev tools используя открытую панель Dev tools браузера.
6. Играйте с CSS (так же, как с обычной веб-страницей)
7. Сохранить пользовательские CSS в userChrome.css файле

Нужна дополнительная информация о userChrome.css, голова к userchrome.org

Вот шаги для создания/изменения userChrome.css:

• Откройся about:support
• Нажмите " Open Folder (в строке " Profile Folder)
• Открыть/Создать каталог chrome
• Открыть/Создать файл userChrome.css
• Делай то, что я сказал в первом разделе

Чтобы продемонстрировать, как это работает, я изменил цвет фона одного из столбцов Network tab на красный.

А вот мое userChrome.css файла userChrome.css (для примера выше)

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

Я использовал !important только ради времени, не используйте это, если можете

Ответ 2

Несмотря на то, что в запросе функции и его зависимости, похоже, достигнут некоторый прогресс, последний был создан в 2016 году, поэтому можно с уверенностью предположить, что это может занять некоторое время, прежде чем Firefox по умолчанию поддерживает изменение размера столбцов.

А пока вот CSS, который я добавил в свой 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;
}

Я хотел увеличить столбец " Файл", но обнаружил, что уменьшение ширины столбцов " Состояние" и " Метод" вместо этого принесло большое улучшение. Стили также удаляют боковые отступы из заголовков столбцов, чтобы избежать усечения текста с помощью ….

Это классы для столбцов по умолчанию:

• 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

Обратите внимание, что если вы слишком сильно уменьшите ширину столбца, это может привести к смещению выравнивания. См. Ответ Mehdi, если вы не знаете, где сохранить свой userChrome.css или вам нужно найти классы других столбцов.

Ответ 3

Нет, это невозможно. Firefox по-прежнему отстает от Chrome с точки зрения инструментов UX. Кстати, я тоже искал ответ и просматриваю страницу Google, как и вы...