На сьогоднішній день Google Chrome є найпопулярнішим браузером серед розробників. Завдяки шеститижневого циклу розробки і значному спектру можливостей, даний набір інструментів став практично незамінний. Можливості про які ви чули: редагування CSS в режимі реального часу, використання консолі і відладчика. У даній статті ми поділимося з вами і іншими можливостями даного інструменту.
1. Швидке перемикання між файлами
Якщо ви користуєтеся Sublime Text, то напевно не можете жити без функції переходу до будь-якого файлу. Даний підхід так само доступний і в інструментах для розробника Google. Відкрийте DevTools, натисніть Ctrl + P для швидкого пошуку потрібного файлу.
2. Пошук в вихідному коді
Для пошуку певної рядки у всіх завантажених файлах затисніть Ctrl + Shift + F. Даний підхід так само передбачає використання регулярних виразів.
3. Перехід до рядка
Після відкриття джерела файлу ви можете відразу ж перейти до потрібної рядку, скориставшись поєднанням клавіш Ctrl + G, а потім увівши номер потрібного рядка.
4. Вибірка елементу в консолі
В консолі DevTools є можливість використання спеціальних змінних і функцій для вибірки DOM елементів:
- $ () - скорочення document.querySelector (). Повертає перший елемент по шуканого CSS селектору (таким чином $ ( 'div') поверне перший div, який зустріне на сторінці).
- $$ () - скорочення document.querySelectorAll (). Повертає масив елементів по CSS селектору.
- $ 0 - $ 4 - п'ятірка DOM елементів, які були обрані, $ 0 останній.
5. Використання декількох кареток
Ще одна забійна фішка, яку ви могли зустріти в Sublime Text. При редагуванні файлу ви можете створити кілька кареток для паралельного редагування кількох рядків, затиснувши Ctrl і клікнувши в потрібних місцях.
6. Скасування очищення лог-повідомлень
Затиснувши галочку на опції Preserve Log, все логи будуть записуватися в консоль без очищення при завантаженні інших сторінок. Це може бути корисно при налагодженні коду.
7. Форматування коду <>
Частенько нам трапляються мінімізовані файли, де весь код написаний в одну або кілька рядків. Для того щоб зробити цей код більш читабельним, можемо клікнути на відповідну іконку.
8. Емулятор використання сенсорного пристрою
Ще однією карколомної фішкою є можливість імітації сенсорного дотику або акселерометра. Так само ви можете вказати своє географічне розташування.
9. Вибір кольору з зразка
При роботі зі стилями ми можемо вибрати певний колір не тільки з представленої палітри, але так само і з самої сторінки.
10. Зміна стану кнопки
11. Відображення тіньового DOM
Зараз в веб-браузерах часто використовує такі фішки як текстові поля, кнопки та інші елементи, які за замовчуванням приховані. Однак ви можете це виправити, відправившись в Settings -> General та активувавши опцію Show user agent shadow DOM.
12. Вибірка наступного входження
13. Перемикання між форматами кольору
Використовуючи Shift + Click ви можете перемикатися між різними форматами квітів.
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!