Комментарии
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 в коде, как это было ещё при консольных дебаггерах, многие кроме этого больше ничего и не используют.

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

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

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

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

Удобно, что можно стрелочками попиксельно изменять значение, зажав шифт на 10 пикселей с альт по 0.1 пикселю.
тут уже скидывали ссылку.
developers.google.com/web/tools/chrome-devtools/workspaces

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

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

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

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

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

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


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

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

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

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.