Используем Chrome DevTools профессионально

[alex_shpak]

Спасибо! Что-то знал, что-то использовал, что-то узнал новое!

[MaxRokatansky]

Всегда пожалуйста)

[extempl]

11 советов для тех, кто использует Chrome в качестве среды разработки.

Вводит в заблуждение. Я думал, будет про синхронизацию кодовой базы с Хромом (https://developers.google.com/web/tools/chrome-devtools/workspaces/), а это скорее про дебаггинг.

Некоторые "хаки", которые я использовал последнее время (из отсутствующих в статье):

• $0-$4 (по индексу предыдущие элементы)
• Break on… опция в контекстном меню элемента (можно словить момент, когда меняется subtree/аргумент)
• Network -> Copy as fetch (можно запустить тот же запрос из консоли с некоторыми правками, например убрать/добавить параметр)
• Если нужно проинспектировать элемент который появляется только по наведению средствами JS (любая новомодная библиотека) и начисто пропадет при blur — достаточно при наведении и открытой devTools нажать на F8 — это приостановит выполнение JS, и можно будет спокойно найти нужный элемент в Elements или посредством "Select an element on page and inspect it"
• debugger как строчка в JS для установки брекпоинта (учитывая препроцессоры, сборки в один файл и минификацию, это наиболее используемый мной способ установки первоначального брекпоинта сейчас)
• Network -> Online (селект для изменения имитации скорости соединения).

А вообще там конечно ещё туева куча разных полезных функций, нужно только не лениться их искать, вместо дебаггинга посредством расстановки console.log в коде, как это было ещё при консольных дебаггерах, многие кроме этого больше ничего и не используют.

[mib]

Всё бы хорошо, но хром в консоли не отображает ошибки, которые отображает файрфокс.
Например:
Cookie… has been rejected because a non-HTTPS cookie can’t be set as “secure”.
Разработчик в хроме может провести несколько незабываемых часов, чтобы понять, почему не работает по http то, что работало по https

[Nikiit]

chrome://flags/#cookies-without-same-site-must-be-secure ?

[mib]

Это не очевидно. Ну то есть должна быть ощшибка, типа кукис не будет установлен и есть вот такой флаг.

Еще — ну на самом деле, это болезнь и хрома и файрфокса — это выделение и копирование информации. Они как буд-то соревнуются между собой, кто «правильнее» поймёт намерения человека, который выделил какой-то элемент в Dev-инструментарии. Это может превратиться в поле редактирования, это может не скопироваться или скопироваться с дополнительными словами или еще какой-то изыск.
Бесит.

[riky]

хром тоже довольно утомляет всякими предупреждениями.
у вас info и warning точно включены?
prntscr.com/uo9l6x

[Zempik]

Когда много верстал, мечтал о том, чтобы когда-нибудь добавили возможность напрямую редактировать стили css из Chrome / Firefox с последующим сохранением напрямую в файл. Не придумали такого ещё?

[Max_JK]

Такое есть, но не очень удобно, т.к хром все же не полноценное IDE, многих функций вроде шаблонов, сокращений и быстрой навигации по коду не хватает, либо я не до конца разобрался, я делаю основную разметку и стили в редакторе, а затем просто редактирую и подгоняю значения под макет в панели стилей devTools.

Удобно, что можно стрелочками попиксельно изменять значение, зажав шифт на 10 пикселей с альт по 0.1 пикселю.

[riky]

тут уже скидывали ссылку.
developers.google.com/web/tools/chrome-devtools/workspaces

активно использую. очень удобно, но надо приспосабливаться.
делаю так:
— верстаю полностью html блока
— из него через программу генерирую css (просто собирает все классы в html)
— css заготовку с классами вставляю в файлы с разными media
— дальше верстаю в браузере, с пиксельперфет плагинами удобно.
так же эту штука работает и в обратную сторону, то есть при сохранении css файла автоматически обновляет стили без перезагрузки.

[Zempik]

Отлично, значит всё-таки придумали. Спасибо за ссылочку (но пока не верстаю)

[riky]

еще бы придумать как там кнопки сделать для быстрой вставки популярных свойств.
пока только придумал через автозамену (AutoHotkey).

[yakimchuk-ry]

Можно скопировать правило CSS из браузера и вставить в редактор, на выходе текст будет уже с форматированием.

[ArtKom]

Нажмите H на клавиатуре

Эта операция применяет к элементу стиль visibility: hidden !important;.

А есть такое же, только чтоб display: none !important?

[extempl]

Нет. Как вариант, можно удалить, посмотреть как оно, и вернуть обратно стандартной отменой действия.
Ещё, обычно где-то есть спец класс типа hide, классы тоже чуть быстрее можно ставить через то же место, где имитируется состояние :hover.

[iminside]

Спасибо за статью!
Хотелось бы еще отдельный подробный разбор по профайлеру и отлову утечек памяти.