Зручні функції Chrome DevTools: пошук і фічі, як у Sublime

Google – зараз найпопулярніший браузер для розробки. Швидкий цикл оновлень (шість тижнів) і потужний набір функцій перетворили його на необхідний інструмент для веб-розробки і веб-дизайну. 

Ми розкриємо для вас кілька корисних функцій, які допоможуть вам у роботі з цим потужним інструментом. Туторіал буде корисний тим дизайнерам та веб-розробникам, хто вже має базове розуміння роботи з DevTools.

1. Швидке перемикання файлів

Якщо ви використовували Sublime Text, ви, ймовірно, не можете жити без функції “Перейти куди завгодно”. Ви будете раді почути, що DevTools також мають таку команду. Натисніть клавіші Ctrl + P (Cmd + P на Mac), коли DevTools відкритий, щоб швидко знайти і відкрити будь-який файл у вашому проекті.

2. Пошук у вихідному коді

Але якщо ви хочете шукати у вихідному коді? Для пошуку заданого тексту в усіх завантажених файлах на сторінці, натисніть Ctrl + Shift + F (Cmd + Opt + F). Цей метод пошуку також підтримує регулярні вирази.

3. Перейти до рядка

Після того як ви відкрили файл на вкладці Sources (Джерела), Chrome DevTools дозволяє легко перейти до будь-якого рядка в ній. Для цього натискаємо Ctrl + G для Windows, і Linux, (або Cmd + L для Mac) і введіть номер потрібного рядка.

Інший спосіб: натиснути Ctrl + O, і замість того, щоб шукати файл, введіть “:”, а потім номер рядка.

4. Елементи вибору в консолі

Консоль DevTools підтримує деякі корисні магічні змінні та функції вибору елементів DOM:

$() – Скорочення для document.querySelector(). Повертає перший елемент, відповідного селектора CSS (наприклад, $(‘DIV’) поверне перший елемент DIV на сторінці).

$$() –  Скорочення для document.querySelectorAll(). Повертає масив елементів, які відповідають введеному селектору CSS.

$0 – $4 – Історія п’яти найостанніших елементів DOM, які ви вибрали на панелі елементів, $0 – останнім.

5. Використання декількох кареток і вибір

Ще одина фіча із Sublime Text. При редагуванні файлу ви можете встановити кілька кареток, затиснути Ctrl (Cmd для Mac) і клікнути, де ви хочете їх розмістити, це дозволить вам писати в багатьох місцях одночасно.

Чекайте на продовження!

kazhut-dyzajnery-ne-vmiyut-pysaty-5

Вам сподобалося?

Читайте щотижня наші кращі статі про дизайн!

email рассылки

Корисна розсилка!

Все найцікавіше про дизайн і дизайнерів!
А ще свіжі вакансії і трішки гумору)

Ваш email:
email рассылки
Позначки:

Залишити відповідь