1. Швидке редагування HTML-елементів
2. Розкрити всі дочірні елементи
3. Зміна розташування інспектора
4. Пошук DOM-елементів
5. палітри
6. кілька курсорів
7. Кодувати зображення в base64
8. перемикання псевдокласів
9. виділення стовпцем
10. Копіювання запиту для cURL
11. Екранна клавіатура
12. Скріншот всієї сторінки
13. Емуляція сенсорних пристроїв
14. Корисні функції

Як випливає з назви, Chrome DevTools, або веб-інспектор, є інструментом, призначеним для веб-розробників і людей, пов'язаних з цим. Веб-інспектор дозволяє робити наступне:

• Інспектувати коректність відображення.
• Відслідковувати виконання скриптів на JavaScript.
• Переглядати веб дії.

При складанні цієї статті я використовував Canary - версію Chrome, де тестуються нові можливості, які потім потрапляють в стабільну версію Chrome.

Для того, щоб запустити інспектор, можна натиснути правою клавішею миші в будь-якому місці сторінки і вибрати пункт «Переглянути код елементу», також можна просто натиснути Ctrl + Shift + C.

Швидке редагування HTML-елементів

Почнемо з самого простого: редагування елементів.

Як перевірити:

• Виберіть вкладку «Elements».
• Виберіть будь-який HTML-елемент всередині панелі.
• Двічі клікніть по тегу і змініть, наприклад, ім'я тега.

По завершенні редагування закриває тег автоматично оновиться.

Розкрити всі дочірні елементи

Як перевірити:

• Перейдіть на панель «Elements».
• Виберіть елемент і, утримуючи Alt, клікніть по стрілочки зліва від елемента.

Зміна розташування інспектора

Панель інспектора може бути притиснута як до низу вікна браузера, так і до його правій стороні. Наприклад, розташування панелі праворуч зручно при роботі на широкоформатних моніторах. Також панель інспектора можна розташувати в окремому вікні і, наприклад, перенести на інший монітор.

Як перевірити:

• Ctrl + Shift + D - Перемикання розташування

Пошук DOM-елементів

Напевно, мало для кого це виявиться відкриттям, але у вкладці «Elements» можна здійснювати пошук по DOM.

Як перевірити:

• Натисніть Ctrl + F і введіть передбачуваний запит для пошуку.

палітри

Вибір кольору з палітри

Вибір кольору в останніх версіях Chrome зазнав деяких змін: додалися дві палітри, що полегшують вибір кольору.

кілька курсорів

Перемістіть курсор і, утримуючи Ctrl, клацніть в потрібному ділянці для додавання курсора. Скасувати дію можна за допомогою Ctrl + U. Особисто мені жодного разу не знадобилося.

Кодувати зображення в base64

Як перевірити:

• Переключитися на панель «Network».
• вибрати зображення
• Натиснути правою клавішею по зображенню і вибрати «»

перемикання псевдокласів

Псевдокласи відображають стан елементів і їх взаємне розташування.

Як перевірити:

• Натисніть ПКМ по елементу в панелі «Elements» і виберіть псевдоклас в списку «Force Element State».
• Також псевдоклас можна вибрати в правій частині панелі «Elements».

виділення стовпцем

Як перевірити:

• Перейдіть в панель «Sources».
• Виберіть який-небудь файл.
• Виділяйте текст, утримуючи Alt.

Виділення стовпцем працює також і при редактіроавніі HTML в панелі «Elements».

Копіювання запиту для cURL

Будь-який запит у вкладці Network можна скопіювати, а потім вставити в термінал для виконання за допомогою curl.

Екранна клавіатура

Якщо обраний профіль Nexus 5X, можна подивитися, як сайт виглядає при активній екранній клавіатурі.

Chrome DevTools: Екранна клавіатура

Скріншот всієї сторінки

Зробити знімок всієї сторінки дуже просто. Потрібно просто ...

1. Відкрити інспектор.
2. Перейти в консоль.
3. Натиснути Ctrl + Shift + P
4. Набрати "screenshot"
5. Вибрати пункт "Capture full size screenshot"

Скріншот всієї сторінки

Емуляція сенсорних пристроїв

Також можна симулювати деякі датчики:

• Сенсорний екран
• Координати для геолокації
• акселерометр

Як спробувати:

• Виберіть панель «Elements».
• Натисніть «Esc» і виберіть «Emulation> Sensors».

Корисні функції

keys і values

Функції keys і values ​​дозволяють вивести в консоль ключі або значення об'єкта відповідно. Висновок ключів і значень об'єкта окремо