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