+7 495 008 8452
  • «агрузка
¬ыберите ваш цвет

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—-Ѕитриксї. ћы реализуем полный цикл работ - от разработки логотипа и фирменного стил€ будущей компании, до ее продвижени€ на рынок, использу€ максимально эффективные современные технологии.

Ќазад в раздел

ѕодписатьс€ на новые материалы раздела:
«агрузка...

* »сточник использованных инструментов