Заметки в категории «Dev Tips»
Фичи, баги и секреты Chrome Developer Tools (DevTools для краткости) от Умара Ханса.
Chrome DevTools: перейти к линии в определённой колонке
Кобзарёв Михаил
2018-01-20T16:55:37+00:00
Dev Tips
Chrome DevTools: перейти к линии в определённой колонке
Чтобы перейти сразу к нужному месту в открытом файле на панели «Sources», воспользуйтесь хоткеем Cmd + O , указав желаемую позицию в формате :строка:столбец.
Chrome DevTools: копирование изображения как data URI
Кобзарёв Михаил
2018-01-15T18:19:41+00:00
Dev Tips
Chrome DevTools: копирование изображения как data URI
Если вам понадобится base64-копия любого изображения, отображаемого на странице в формате data URI для вставки, например, в CSS, то его легко можно получить при помощи DevTools.
Chrome DevTools: поиск в DOM-дереве по CSS-селекторам
Кобзарёв Михаил
2017-11-13T13:48:59+00:00
Dev Tips
Chrome DevTools: поиск в DOM-дереве по CSS-селекторам
На панели инструментов «Elements» в DevTools можно искать элементы в DOM-дереве, используя CSS-селекторы.
Chrome DevTools: Простая запись происходящего на экране
Кобзарёв Михаил
2017-09-18T18:28:33+00:00
Dev Tips
Chrome DevTools: Простая запись происходящего на экране
Если вам понадобилось записать что-либо происходящее на странице при помощи панели «Timeline», то попробуйте вот что.
Chrome DevTools: Отслеживание изменений файлов
Кобзарёв Михаил
2017-09-08T15:33:09+00:00
Dev Tips
Chrome DevTools: Отслеживание изменений файлов
Фича под названием «Local modifications» позволяет вам отслеживать изменения файлов, сделанные внутри DevTools.
Chrome DevTools: Запуск предзаданных сниппетов кода на любой странице
Кобзарёв Михаил
2017-09-13T21:12:46+00:00
Dev Tips
Chrome DevTools: Запуск предзаданных сниппетов кода на любой странице
В DevTools есть замечательная фича, называемая сниппетами (небольшие кусочки кода). Сниппеты можно создавать (или удалять) и запускать в контексте любой веб-страницы (что, согласитесь, удобнее, чем каждый раз набирать один и тот же код в консоли браузера).
Chrome DevTools: Повторить сетевой запрос в cURL
Кобзарёв Михаил
2017-09-13T21:12:55+00:00
Dev Tips
Chrome DevTools: Повторить сетевой запрос в cURL
Любой из ресурсов на панели Network имеет контекстное меню, которое позволяет копировать запрос в виде терминальной команды curl. При это в буфер попадает не только сам URL и его параметры, но и заголовки.
При желании, после вставки строки с запросом в консоль её можно подправить, а уж потом жмакать клавишу Enter.
В примере используется Numbers API.
Chrome DevTools: Активация псевдокласса DOM-элемента
Кобзарёв Михаил
2017-09-04T00:17:23+00:00
Dev Tips
Chrome DevTools: Активация псевдокласса DOM-элемента
Псевдоклассы (active, focus, hover и visited) элемента можно триггерить вручную, например, если вам нужно посмотреть, как выглядит элемент при наведении на него курсора мыши.
Для этого кликните правой клавишей мыши на ноду на панели Elements и выберите нужный псевдокласс из контекстного меню (в старых версиях Chrome они были запрятаны в подразделе Force element state), либо кликните иконку Toggle element state на панели Styles.
Свидетельством применения пвсевдокласса будет маленький кликабельный оранжевый кружок-индикатор на выбранном узле возле открывающего тега и закрывающего (при условии, что он далеко).
Chrome DevTools: Перенаправление порта для открытия локальных ссылок на мобилке
Кобзарёв Михаил
2017-09-03T23:52:52+00:00
Dev Tips
Chrome DevTools: Перенаправление порта для открытия локальных ссылок на мобилке
- Откройте локальный URL в браузере Google Chrome на декстопе
- Включите удаленную отладку и перенаправление порта
- Обновите страницу и вы увидите, как всё чётко работает без использования командной строки!
