• Главная
  • Карта сайта
Не найдено

Використовуємо Chrome DevTools як про

  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.

Напевно, мало для кого це виявиться відкриттям, але у вкладці «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: Екранна клавіатура Chrome DevTools: Екранна клавіатура

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

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

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

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

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

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

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

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

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

keys і values

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

Новости
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью