- PVSM.RU - https://www.pvsm.ru -
Привет! В этот прекрасный пятничный день предлагаем вам ознакомиться с очередной частью цикла переводов советов для веб-разработчиков. Предыдущие части: 1-16 [1], 17-32 [2], 33-48 [3].
Содержание:
49 Циклическое переключение между панелями при помощи шорткатов [4]
50 Проверка и активация CSS media queries, а также нахождение этих правил в коде [5]
51 Предустановка разрешения нового устройства [6]
52 Улучшения полоски хлебных крошек в панели Elements [7]
53 Печать стектрейса в консоли [8]
54 Детектирование долгих фреймов (не путать с iframe) [9]
55 Продвинутая фильтрация запросов в панели «Network» [10]
56 Поиск по проекту с возможностью указания файла [11]
57 Новый экспериментальный редактор раскладки страницы [12]
58 Дублирование DOM-элементов [13]
59 Просмотр скриншотов поведения страницы [14]
60 Редактирование html-кода в панели «Console» [15]
61 Простые клавиатурные трюки для управления панелей «Стили» [16]
62 Выбор цвета, сгенерированного палитрой [17]
63 Инкремент и декремент чисел в DOM-атрибутах [18]
64 Сетевые запросы в панели «Timeline» [19]
Используйте Cmd + ] / Cmd + [ для циклического переключениями между панелями в DevTools. Кроме этого существует шорткат Cmd + Alt + i для открытия инструментов разработчика.
В деле инспектирования и активации зарегистрированных CSS media queries вам поможет инструмент Media Query Inspector. Чтобы его открыть, в режиме устройства (Device Mode) кликните на иконку, напоминающую лесенку, в верхнем левом углу страницы. Вы можете активировать различные точки останова простым кликом на появившиеся полосы. При этом правых клик на них позволяет открыть конкретную место в коде, где эта Media Query определена.
Часто ли вам приходится эмулировать разрешение нового устройства? Режим Device Mode позволяет задать и запомнить профиль такого аппарата.
Добавленное выше устройство появится в меню Devices в верхнем левом углу.
А вы знали, что в панели Elements есть «хлебные крошки»? Они могут помочь вам отслеживать полную вложенность, когда вы работаете с DOM-деревом. Активируйте экспериментальный Material Design в Canary и вы получите несколько приятных фич:
Не забывайте, что по клику на конкретный сегмент «хлебных крошек» будет подсвечен соответствующий DOM-элемент.
Вызов функции console.trace()
может вам помочь быстро и легко получить стектрейс для лучшего понимания потока управления вашей программы.
Его особенности:
console.trace
совместим со сниппетами.console.log
).Панель Timeline в Canary может подсвечивать некоторые фреймы красным. Это предупреждение означает, что время нахождения в нем вышло за рамки 18мс. При клике на конкретный фрейм вы получите детальную информацию о причинах возникновения проблемы. Если частота обновления монитора 60Гц (так делают большинство дисплеев), то на фрейм должно приходится не более 16мс, потому что 1000мс / 60 кадров в секунду = ~16мс.
Для того, чтобы уменьшить количество найденных сетевых запросов, используйте продвинутую фильтрацию:
larger-than:100
выведет вам все ресурсы, размер которых превышает 100 байт.-larger-than:50k
найдет все запросы, не превышающие 50Кб.
status-code:200
покажет все ответы со статусом 200
.Вот еще несколько запросов, с которыми вы можете поэкспериментировать:
Автодополнение поиска поможет вам обнаружить все фильтры и определить тип их значений. При этом все показанные значения взяты из записанных запросов при последней сессии.
Вы можете искать по всем файлам при помощи шортката Cmd + Opt + F / Ctrl + Shift + F. Если поиск вернет слишком много результатов, вы можете ограничить выборку, указав конкретный файл, поменяв запрос query
на query file:main.js
или query file:main
.
Layout Editor — скрытый эксперимент средств разработчика Canary. Хотя некоторая функциональность из этого инструмента может измениться или вовсе исчезнуть, я расскажу кое-что о нем:
DevTools позволяют очень просто модифицировать DOM-дерево, не меняя при этом куски html-кода.
Кроме этого вам доступка функция Cut (также она вызывается по Cmd + x / Ctrl + x). В противовес копирования, она переместит элемент на новое место в дереве.
Эксперимент: Попробуйте добавить больше ссылок в хедер/футер какого-нибудь сайта при помощи техники копирования-вставки и выяснить, какие места верстки требуют улучшения!
Панель Timeline позволяет вам снимать скриншоты поведения страницы. При перемещении курсова от начала к концу записи вы увидите визуальное состояние веб-приложения, изменяющееся во времени.
Далее вы сможете сопоставить фреймы с пиками или предупреждениями с полученными скриншотами, чтобы определить, почему страница работала с неудовлетворительной производительностью.
Контекстное меню DOM-элемента, знакомое вам по панели Elements также доступно и в панели Console.
Клавиша Tab позволяет вам навигироваться по CSS-свойствам в следующей порядке:
В случае достижения конца CSS-правила курсор будет перенесен на следующее. Кроме этого сочетание Shift + Tab переключает фокус в обратную сторону. Предположим, в поле названия правила вы начали вводить back
с намерением выбрать background
из вариантов выпадающей подсказки, но случайно ошиблись и выбрали background-color
. В этом случае просто нажмите клавишу Backspace, и вы будете перемещены обратно к редактированию названия свойства.
Для удаления свойства вы можете стереть его название или значение при помощи Backspace, а дальше просто нажмите Enter.
Инструмент выбора цвета (Color Picker) в Canary DevTools снова получил обновление. Теперь он получил новую цветовую палитру, генерирующуюся автоматически на основании набора цветов, уже представленных в ваших таблицах стилей.
Вы можете модифицировать DOM-атрибут так же, как и название класса при помощи клавиш ↑ / ↓. Предположим, что на некотором элементе висит класс span_1_of_7
, стрелка ↑ в этом случае трансформирует его в span_2_of_7
.
Эта возможность может быть очень полезной, если вы используете систему CSS-сеток, которая включает в имена классов элементов конкретные числа.
Разработчики Canary DevTools сделали новый эксперимент Network on Timeline: теперь панель Timeline отображает сетевые запросы, которые могли бы влиять на процесс отображения страницы.
Автор: Mail.Ru Group
Источник [20]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/google-chrome-2/113441
Ссылки в тексте:
[1] 1-16: http://habrahabr.ru/company/mailru/blog/268519/
[2] 17-32: http://habrahabr.ru/company/mailru/blog/268777/
[3] 33-48: https://habrahabr.ru/company/mailru/blog/275425/
[4] Циклическое переключение между панелями при помощи шорткатов: https://habrahabr.ru/company/mailru/blog/278021/#49
[5] Проверка и активация CSS media queries, а также нахождение этих правил в коде: https://habrahabr.ru/company/mailru/blog/278021/#50
[6] Предустановка разрешения нового устройства: https://habrahabr.ru/company/mailru/blog/278021/#51
[7] Улучшения полоски хлебных крошек в панели Elements: https://habrahabr.ru/company/mailru/blog/278021/#52
[8] Печать стектрейса в консоли: https://habrahabr.ru/company/mailru/blog/278021/#53
[9] Детектирование долгих фреймов (не путать с iframe): https://habrahabr.ru/company/mailru/blog/278021/#54
[10] Продвинутая фильтрация запросов в панели «Network»: https://habrahabr.ru/company/mailru/blog/278021/#55
[11] Поиск по проекту с возможностью указания файла: https://habrahabr.ru/company/mailru/blog/278021/#56
[12] Новый экспериментальный редактор раскладки страницы: https://habrahabr.ru/company/mailru/blog/278021/#57
[13] Дублирование DOM-элементов: https://habrahabr.ru/company/mailru/blog/278021/#58
[14] Просмотр скриншотов поведения страницы: https://habrahabr.ru/company/mailru/blog/278021/#59
[15] Редактирование html-кода в панели «Console»: https://habrahabr.ru/company/mailru/blog/278021/#60
[16] Простые клавиатурные трюки для управления панелей «Стили»: https://habrahabr.ru/company/mailru/blog/278021/#61
[17] Выбор цвета, сгенерированного палитрой: https://habrahabr.ru/company/mailru/blog/278021/#62
[18] Инкремент и декремент чисел в DOM-атрибутах: https://habrahabr.ru/company/mailru/blog/278021/#63
[19] Сетевые запросы в панели «Timeline»: https://habrahabr.ru/company/mailru/blog/278021/#64
[20] Источник: https://habrahabr.ru/post/278021/
Нажмите здесь для печати.