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

Можно ли изменить ширину столбцов в Firefox Developer Tools? Как я могу это сделать?

Когда я указываю над краем столбца (например, Status и т.д. на скриншоте), нет инструмента для изменения размера, чтобы я мог видеть весь контент.

Firefox Developer Tools columns

Ответ 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 на красный.

Example

А вот мое 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, как и вы...