Можно ли изменить ширину столбцов в Firefox Developer Tools? Как я могу это сделать?
Когда я указываю над краем столбца (например, Status и т.д. на скриншоте), нет инструмента для изменения размера, чтобы я мог видеть весь контент.
Можно ли изменить ширину столбцов в Firefox Developer Tools? Как я могу это сделать?
Когда я указываю над краем столбца (например, Status и т.д. на скриншоте), нет инструмента для изменения размера, чтобы я мог видеть весь контент.
Обновление: эта функция теперь доступна и включена по умолчанию в Firefox 67. Вы можете отключить ее (вы с ума сошли?), Используя флаг devtools.netmonitor.features.resizeColumns
.
Исходный ответ: Как вы, вероятно, знаете, нет возможности изменить размер столбца (столбцов FF57), единственный вариант, который у вас есть, это скрыть/показать столбцы. это легко сделать, просто right-click
по любому столбцу, вы должны увидеть список столбцов и можете выбрать/отменить их выбор.
Но что это?! нет, вы можете изменить размер столбца (ов) с помощью CSS
(взломать инструменты разработчика), вот шаги:
Проверьте это 2 варианта:
Enable browser chrome and add-on debugging toolboxes
Enable remote debugging
Нажмите Ctrl+Shift+Alt+I
и нажмите кнопку OK
(при появлении запроса безопасности), чтобы открыть панель инструментов браузера.
Dev tools
используя открытую панель Dev tools
браузера.CSS
(так же, как с обычной веб-страницей)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
только ради времени, не используйте это, если можете
Несмотря на то, что в запросе функции и его зависимости, похоже, достигнут некоторый прогресс, последний был создан в 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
или вам нужно найти классы других столбцов.
Нет, это невозможно. Firefox по-прежнему отстает от Chrome с точки зрения инструментов UX. Кстати, я тоже искал ответ и просматриваю страницу Google, как и вы...