Використовуємо Chrome DevTools як про
- Швидке редагування HTML-елементів
- Розкрити всі дочірні елементи
- Зміна розташування інспектора
- Пошук DOM-елементів
- палітри
- кілька курсорів
- Кодувати зображення в base64
- перемикання псевдокласів
- виділення стовпцем
- Копіювання запиту для cURL
- Екранна клавіатура
- Скріншот всієї сторінки
- Емуляція сенсорних пристроїв
- Корисні функції
Як випливає з назви, 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: Екранна клавіатура
Скріншот всієї сторінки
Зробити знімок всієї сторінки дуже просто. Потрібно просто ...
- Відкрити інспектор.
- Перейти в консоль.
- Натиснути Ctrl + Shift + P
- Набрати "screenshot"
- Вибрати пункт "Capture full size screenshot"
Емуляція сенсорних пристроїв
Також можна симулювати деякі датчики:
- Сенсорний екран
- Координати для геолокації
- акселерометр
Як спробувати:
- Виберіть панель «Elements».
- Натисніть «Esc» і виберіть «Emulation> Sensors».
Корисні функції
keys і values
Функції keys і values дозволяють вивести в консоль ключі або значення об'єкта відповідно. Висновок ключів і значень об'єкта окремо