7 полезных инструментов Chrome для веб-разработчика

1. Быстро перелистываем файлы.

Сочетание клавиш Ctrl + P (Cmd + P, если вы работаете на Mac). В Sublime Text подобная функция называется "Go to anything", а в Idea - "Searching Everywhere".

2. Поиск регулярных выражений в исходном коде

Команда Ctrl + Shift + F (Cmd + Opt + F) позволит искать во всех загруженных файлах на странице.

3. Переход к строке с известным номером

Команда Ctrl + G (или Cmd + L для Mac) + номер строки приведет вас прямо в нужное место в документе.

4. Выборка DOM элементов в консоли

Консоль инструментов разработчика обеспечивает несколько функций для выборки элементов DOM:

$() — работает как document.querySelector(). Выводит первый элемент, отвечающий селектору CSS. Таким образом, $ ('DIV') вернет первый элемент DIV на странице.

$$ () — работает как document.querySelectorAll (). Возвращает список элементов NodeList), отвечающих данному CSS-селектору;

$0 — $4 — выведет историю последних пяти элементов DOM, которые были выбраны во вкладке Elements. $0 будет выведен последним.

5. Несколько кареток (выделений) на разных строках одновременно

Удерживая Ctrl (Cmd для Mac), указателем мыши устанавливайте каретки на нужных вам строках и затем вводите код или редактируйте выделения.

6. Preserve Log сохраняет результаты

На вкладке Console поставьте флаг "Preserve Log". После этого результаты будут сохраняться и после ухода со страницы.

7. Восстановление удобочитаемого вида минимизированного кода

В инструментах разработчика есть инструмент, обозначенный пиктограммой {} в левом нижнем углу открытого файла во вкладке Sources.


Удачи вам! Пару подсказок по инструментам Chrome для веб-разработчика дала вам Веб-студия "АКРИТ". Разработка и продвижение сайтов на CMS «1С-Битрикс». Мы реализуем полный цикл работ - от разработки логотипа и фирменного стиля будущей компании, до ее продвижения на рынок, используя максимально эффективные современные технологии.

Назад в раздел