Деякі можливості інструменту розробника в Chrome

1. особливості DevTools
2. Як відкрити інструмент розробника?
3. Через меню браузера
4. Через натискання правої кнопки миші
5. За допомогою гарячих клавіш
6. Поради та прийоми для роботи з інструментами розробника.
7. Швидкий перехід по файлах.
8. Форматування за допомогою {}
9. Редагування HTML - елемента
10. Редагування CSS - властивостей
11. Пошук в вихідному коді
12. Точки зупинки в Javascript Breakpoints
13. Перехід по номеру рядка
14. безліч курсорів
15. Зміна положення вікна
16. очищення куки
17. Перевірка на різних пристроях
18. Колірна палета і піпетка
19. Зміна формату кольору
20. Емуляція сенсорного екрану
21. Перемикання між станами елемента
22. Збереження зображення як Data URI (base64 кодування)
23. Перегляд User Agent Shadow DOM
24. Вибір наступного входження
25. робоче оточення
26. Діафільм прогрузкі
27. Час завантаження DOM
28. Профілі для швидкості мережі
29. панель безпеки
30. Валідація Google AMP HTML
31. Використання інструментів розробника з Firefox в Google Chrome
33. підсумки

Наша взаимовыгодная связь https://banwar.org/

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

особливості DevTools

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

Також для роботи з окремими фішками можливо ви захочете використовувати Google Chrome Canary - експериментальну версію Chrome. Дана версія може бути легко запущена поруч зі звичайним Chrome.

Для використання і експеременту з окремими інструментами розробника вам знадобиться в адресному рядку браузера ввести

chrome: // flags

і вибрати весь необхідний інструментарій.

З повним набором можливостей ви можете ознайомитись на офіційному сайті .

Як відкрити інструмент розробника?

Для цього можна скористатися одним з варіантів:

1. Через меню браузера

Увійдіть в меню, клікнувши на іконку , Клікніть на "More tools" і виберіть "Developer Tools."

1. Через натискання правої кнопки миші

Натисніть на будь-якому елементі сторінки правою кнопкою миші і виберіть "Inspect element".

1. За допомогою гарячих клавіш

Натисніть клавіші в залежності від вашої операційної середовища

• Windows: F12 or also Ctrl + Shift + I
• Mac: Cmd + Opt + I

Поради та прийоми для роботи з інструментами розробника.

Тут наведені лише деякі можливості з безлічі доступних. Для деяких з них використовується Canary.

Швидкий перехід по файлах.

У відкритій вкладці з вихідними файлами натисніть Ctrl + P (Cmd + P) і шукайте необхідні файли.

Форматування за допомогою {}

Натиснувши на {} ви можете змінити форматування вихідного коду і повернутися до нормального вигляду.

Редагування HTML - елемента

Ви можете на льоту редагувати HTML вибираючи будь-якому елемент всередині DOM і дважни клікнувши на нього. Закриваються теги будуть автоматично відредаговані. Всі зміни будуть відразу ж відображені.

Редагування CSS - властивостей

Аналогічно як і HTML, точно так же ви можете редагувати і CSS.

Пошук в вихідному коді

Ви можете швидко робити пошук в вихідному коді за допомогою комбінації Ctrl + Shift + F (Cmd + Opt + F), а також проводити пошук по css - селектору натиснувши Ctrl + F (Cmd + F).

Точки зупинки в Javascript Breakpoints

При дебаге Javascript часто буває корисним використовувати точки зупину. В інструменті розробника ви можете вибрати номер рядка, де хочете зупинитися і натиснути Ctrl + R (Cmd + R) для перезавантаження сторінки. Саме в цьому місці і прервётс завантаження.

Перехід по номеру рядка

Натиснувши Ctrl + O (Cmd + O) і використавши спеціальний синтаксис, ви можете швидко перейти на потрібний рядок. У прикладі введено: 200: 10, це означає, що перехід пройшов на рядок 200 і колонку 10.

безліч курсорів

Якщо вам треба одночасно вводити значення в декількох місцях або редагувати той же font-size, то натиснувши Ctrl + Click (Cmd + Click) можна одночасно вводити інформацію в декількох місцях.

Зміна положення вікна

Вікно DevTools має три положення: з однієї зі сторін, внизу і плаває. Ви можете перемикатися між ними за допомогою Ctrl + Shift + D (Cmd + Shift + D) або через спеціальне меню в правому верхньому куті вікна.

очищення куки

Для роботи зі сторонніх плагінів іноді буває необхідним очистити cookies. На вкладці "Resources" ви можете знайти необхідні куки і видалити їх через контекстне меню.

Перевірка на різних пристроях

Якщо у вас адаптивний дизайн, то ви можете перевірити свій додаток на різних пристроях. За допомогою цього режиму ви зможете перевірити наявність проблем з версткою на мобільних пристроях або при різних розмірах браузера. Для входу в цей режим натисніть на або комбінацію клавіш Ctrl + Shift + M (Cmd + Shift + M). Там ви зможете вибрати потрібний пристрій, орієнтацію екрану і його розмір.

Колірна палета і піпетка

Натиснувши в css - стилях на потрібний колір в розмітці ви відразу потрапите в колірну паллету, де для будь-якого елемента зможете вибрати найбільш підходящий під ваш дизайн колір. За допомогою піпетки можна швидко подивитися колір будь-якого елемента на сторінці.

Зміна формату кольору

Можна перемикатися між різними відображеннями квітів: RGBA, HSL і шестандцатірічним. Натискання Shift + Click на блоці з кольором поміняє формат.

Емуляція сенсорного екрану

Класна фіча DevTools допомагає симулювати тачскрін і акселерометр. Для цього перейдіть по шляху "Console -> Emulation -> Sensors".

Перемикання між станами елемента

Часто необхідно перевірити прихований стиль, наприклад,: hover атрибут. У Firefox місцева середовище розробки дозволяє перевірити його безпосередньо, коли він викликаний. Але в Chrome все інакше. Тут є штука під назвою "toggle element state". Вона дозволяє подивитися властивості аттрибута безпосередньо в панелі стилів.

Збереження зображення як Data URI (base64 кодування)

Можна зберегти зображення зі сторінки як Data URI або конвертувати в base64. При цьому не потрібно використовувати будь-які сторонні сервіси. Для цього перейдіть у вкладку "Network", виберіть потрібне зображення, клацніть правою кнопкою миші по ньому і натисніть на "Copy image as Data URL".

Перегляд User Agent Shadow DOM

Коли ви працюєте з контролю типу кнопки або рядка введення, браузер автоматично додає приховані атрибути. Щоб їх побачити натисніть F1 (?) І виберіть "Show user agent DOM". Як показано на прикладі, в нашому DOM - дереві з'явився прихований атрибут # shadow-root div. Тепер, при необхідності можна повісити на нього якісь CSS - стилі.

Вибір наступного входження

Коли вам треба поміняти одне і те ж властивість для декількох елементів, то інструмент розробника може прискорити цей процес. Зробіть подвійний клік на потрібному властивості, за допомогою Ctrl + D (Cmd + D) позначте всі необхідні входження. Тепер змінюючи значення в одному місці, воно змінюється одночасно і в інших обраних місцях.

робоче оточення

Типово когда ви щось менят в інструменті розробника, то при перезавантаження сторінки все пропадає. За допомогою робочого оточення можна необхідні зміни зберегти на диск. Правою кнопкою миші натисніть на папку і в меню натисніть на "Add folder to local workspace", далі зробіть те ж саме для потрібного файлу, але в меню тисніть на "Map to file system resource ...".

Діафільм прогрузкі

Не можна обійти стороною класну можливість створення діафільму з станів при прогрузкі вашого сайту. Щоб перевірити як рендоріться ваш сайт протягом кожного етапу його прогрузкі зайдіть в панель "Network", натисніть на картинку з камерою і потім натисніть Ctrl + R (Cmd + R), щоб перезавантажити сторінку. У підсумку ви отримаєте скріншоти завантаження вашої сторінки в кожен момент часу.

Час завантаження DOM

Chrome DevTools дозволяють перевірити швидкість завантаження DOM - структури і загальну швидкість завантаження сторінки. Для цього йдемо у вкладку "Network", натискаємо на "Show Overview" і тиснемо Ctrl + R (Cmd + R) для перезавантаження сторінки. Синя лінія показує час завантаження DOM - структури, а червона - загальний час. Все що зліва і на синій лінії - це блокери для завантаження DOM і є причиною повільного рендеринга сторінки.

Профілі для швидкості мережі

Для тестування завантажити програму по мобільній мережі або в умовах лімітованої швидкості Інтернету є можливість створити спеціальний профіль, в якому буде вказана потрібна швидкість завантаження. Для цього переходимо в нісподающее меню "Throttling" на вкладці "Network" і натискаємо на "Add a custom profile ..." для створення свого профілю або вибираємо один із запропонованих.

панель безпеки

З її допомогою можна протестувати міграцію на HTTPS і швидко виправити можливі попередження. Йдемо в "Security" панель і тиснемо Ctrl + R (Cmd + R). Зеленим кольором будуть позначені безпечні скрипти і червоним викликають підозру.

Валідація Google AMP HTML

Google Accelerated Mobile Pages (AMP) - опенсорсний проект для збільшення швидкості завантаження програми на мобільному пристрої за рахунок використання легковагих HTML сторінок. Щоб Google проіндексував AMP версію ваше сторінки ви повинні її провалідіровать. Для цього клікніть на панелі "Console", далі необхідно додати # development = 1 до AMP версії в адресної рядку браузера. Тиснемо Ctrl + R (Cmd + R) для перезавантаження. У разі успішної валідації ми побачимо нотіфікашку. Далі можна більш детально прочитати помилки при AMP валідації .

Використання інструментів розробника з Firefox в Google Chrome

Якщо раптом так сталося, що вам знадобився інструмент розробника з Firefox, то можете спробувати Valence - експерементальний плагін від команди Firefox. Він призначений для дебага в різних браузерах. Потрібно 37 версія хрому і вище.

Наприклад, в OSX ви за допомогою наступної команди можете запустити версію Chrome для дебага

$ / Applications / Google \ Chrome. app / Contents / MacOS / Google \ Chrome - remote -debugging -port = 9222 - no -first -run - no -default -browser -check - user -data -dir = $ (mktemp -d -t ' chrome-remote_data_dir ')

Як тільки з'єднання встановлено, ви можете відкрити Firefox WebIDE , Вибрати "Chrome Desktop" і тим самим отримати доступ Firefox Developer Tools з Chrome.

підсумки

Як бачите, Chrome надає широкий набір можливостей для розробки та тестування ваших програм. Однак, тут перераховано лише мала частина від усіх доступних, за більш детальною інформацією звертайтесь на офіційний сайт.