Выкарыстоўваем 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 ​​дазваляюць вывесці ў кансоль ключы або значэння аб'екта адпаведна Выснову ключоў і значэнняў аб'екта паасобку