- Chrome Devtools гарячі клавіші і інші корисності при розробці від Google:
- Що таке Google Chrome DevTools?
- Відкриття Chrome DevTools
- 1. Відкрийте меню браузера
- 2. Відкрити натисканням правої кнопки миші
- 3. Відкрити за допомогою клавіш швидкого доступу
- Поради та прийоми
- Швидке перемикання файлів
- Pretty Print {}
- Редагування HTML-елемента
- Змінити властивості CSS
- Пошук в вихідному коді
- Точки зупинки Javascript
- Перейти до номера рядка
- кілька курсорів
- Зміна положення стикування DevTools
- Очищення файлів cookie
- режим пристрої
- Призначені для користувача колірні палітри і набір квітів
- Змінити формат кольору
- Датчики емуляції пристрою
- Виберіть одне елемента
- Копіювати зображення як URI дані (закодовані в base64)
- Показати агент користувача Shadow DOM
- Виберіть наступне подія (вія)
- Workspaces - підключення локальних файлів до проекту
- Мережевий диафильм
- Моніторинг продуктивності мережі
- DOMContentLoaded
- Профілі демпфірування мережі
- панель безпеки
- Перевірка Google AMP HTML
- Використовувати інструменти розробника Firefox в Google Chrome
Google Chrome в даний час є одним з найпопулярніших веб-браузерів, що використовуються сьогодні розробниками. Chrome DevTools може значно поліпшити ваш робочий процес, допомагаючи вам розробляти, тестувати і налагоджувати свої сайти прямо в вашому браузері. Багато з вас, ймовірно, регулярно використовують Chrome DevTools, але ознайомтеся з цими додатковими порадами і трюками і Ви підвищите свою працездатність в кілька разів.
Chrome Devtools гарячі клавіші і інші корисності при розробці від Google:
http://anti-code.com/devtools-cheatsheet/
Що таке Google Chrome DevTools?
Інструменти розробника Google Chrome, також відомі як Chrome DevTools, - це інструменти для створення і налагодження веб-сайтів, вбудовані прямо в браузер. Вони забезпечують розробникам більш глибокий доступ до їх веб-додатків і браузеру. Ви можете робити все, починаючи з тестування вашого видового екрану на мобільному пристрої і закінчуючи редагуванням HTML / CSS на льоту, використовуючи навіть для виміру продуктивності окремих активів вашого сайту.
Щоб використовувати останню версію інструментів розробника, вам знадобиться використовувати Google Chrome Canary , Яка є експериментальною версією Chrome. Канарку можна запускати поруч з Chrome, щоб ви могли перевірити будь-які проблеми, що виникають.
Ви можете поліпшити свою розробку, використовуючи chrome: // flags дозволяючи експериментальні функції в інструментах розробника. Потім ви можете використовувати панель налаштувань в інструментах розробника для перемикання окремих експериментів.
Для активації експериментальних функцій dev панелі включите даний пункт:
Відкриття Chrome DevTools
Є кілька способів відкрити Chrome DevTools.
1. Відкрийте меню браузера
Ви можете відкрити Chrome DevTools з меню Chrome, натисніть «Додаткові інструменти», а потім натисніть «Інструменти розробника».
2. Відкрити натисканням правої кнопки миші
Ви також можете натиснути правою кнопкою миші по будь-якого елементу на веб-сторінці і натиснути «Подивитися код», який запустить Chrome DevTools.
3. Відкрити за допомогою клавіш швидкого доступу
Ви також можете використовувати наступні комбінації клавіш:
- Windows: F12 або Ctrl + Shift + I
- Mac: Cmd + Opt + I
Поради та прийоми
Нижче наведено кілька з декількох сотень речей, які ви можете зробити з Chrome DevTools . Це також сприяє хорошим курсом на інструменти, якщо ви не використали їх раніше. Примітка. Ми використовуємо Google Canary для всіх цих прикладів, оскільки є більш нові функції, такі як палітри дизайну матеріалів і агреговані дані тимчасової шкали.
Швидке перемикання файлів
Ви можете легко отримати доступ до будь-якого файлу в поточному проекті або веб-сторінці, натиснувши Ctrl + P (Cmd + P), коли Chrome DevTools відкритий і шукає ім'я.
Pretty Print {}
Чи знаєте ви, що в Chrome DevTools є гарне форматування як стислих стилів, так і стислих java script? Ви можете легко змінити форматування вводиться коду, натиснувши {}, який поверне до нормального вигляду насправді стислий код.
Редагування HTML-елемента
Ви можете редагувати HTML на льоту бачачи попередні зміни, вибираючи будь-який елемент, вибираючи елемент DOM всередині панелі і двічі клацаючи по відкриває тегу, щоб відредагувати його. Закривають теги автоматично оновляться для вас. Будь-які зміни будуть відображатися в вашому браузері так, як якщо б зміни були зроблені в вихідному коді.
Змінити властивості CSS
Як і при редагуванні HTML, ви також можете змінити CSS в Chrome DevTools і переглянути, як буде виглядати результат. Це, ймовірно, одне з найпоширеніших застосувань для цього інструменту. Просто виберіть елемент, який ви хочете відредагувати, і під панеллю стилів ви можете додати / змінити будь-яку властивість CSS, яке ви хочете.
Пошук в вихідному коді
Ви можете швидко виконати пошук в своєму вихідному коді, натиснувши Ctrl + Shift + F (Cmd + Opt + F).
Ви також можете виконати пошук за допомогою селекторів CSS, натиснувши Ctrl + F (Cmd + F
Точки зупинки Javascript
При налагодженні Javascript іноді буває корисно встановити контрольні точки. Ви можете встановити контрольні точки в Chrome DevTools, клацнувши по номеру рядка, який ви хочете розбити, і натисніть Ctrl + R (Cmd + R), щоб оновити сторінку. Потім сторінка буде працювати прямо до цієї точки зупинки.
Перейти до номера рядка
Ви можете автоматично перейти до рядка вашого коду, натиснувши Ctrl + O (Cmd + O) і використовуючи синтаксис рядка. У наведеному нижче прикладі ми набрали: 200: 10 і натиснули enter, щоб перейти до рядка 200 колонки 10.
кілька курсорів
Чи є у вас кілька рядків, які потрібно додати? Можливо, ви хочете додати font-size в кілька класів. Ви можете легко додати кілька курсорів, натиснувши Ctrl + Click (Cmd + Click) і одночасно вводячи інформацію на кілька рядків. Це дуже зручний трюк.
Зміна положення стикування DevTools
Ви також можете змінити положення стикування Chrome DevTools. Є три варіанти вибору: Bottom, Side і Undocked (плаваючий). Для перемикання між положеннями док-станції ви можете натиснути Ctrl + Shift + D (Cmd + Shift + D). Потім в правому верхньому куті виберіть положення в якому повинна знаходиться док-станція.
Очищення файлів cookie
Ви також можете легко очистити файли cookie за допомогою Chrome DevTools. Це може бути особливо корисно при тестуванні й налагодженні сторонніх плагінів. Просто перейдіть на вкладку «Ресурси» і в розділі «Кукі» ви можете натиснути правою кнопкою миші і видалити всі файли cookie, що зберігаються у вашому браузері.
режим пристрої
Ви можете протестувати свій веб-сайт і мультимедійні запити що б переконатися що спрацьовує адаптивна верстка, перейшовши в режим пристрою. Або, можливо, вам потрібно побачити, на який дозвіл екран як відображається сторінка, тому ви знаєте, де застосовувати медіа-запити. Щоб увійти в режим пристрою, клацніть значок маленького телефону в Chrome DevTools або ви можете натиснути Ctrl + Shift + M (Cmd + Shift + M). Потім ви можете вибрати, який пристрій ви хочете емулювати, орієнтацію і навіть дозвіл. Ви також можете змінити дросселирование мережі, щоб побачити, як ваш веб-сайт буде відображатися на звичайному 2G-з'єднанні.
Призначені для користувача колірні палітри і набір квітів
У Google Chrome Canary творці представили нові призначені для користувача колірні палітри і палітри матеріалів, які витягуються з CSS вашого сайту. Ви можете отримати до них доступ, просто натиснувши на кольоровий блок на панелі стилю. Існує також вибір кольору, який ви можете використовувати для виділення кольорів зі своєю веб-сторінки.
Змінити формат кольору
Ви можете перемикатися між RGBA, HSL і шістнадцятковим форматуванням, натиснувши Shift + Click на кольоровий блок.
Датчики емуляції пристрою
Приємною особливістю Chrome DevTools є те, що ви можете навіть імітувати сенсорні екрани. Для цього натисніть Консоль, емуляція і датчики.
Виберіть одне елемента
Ви коли-небудь намагалися з'ясувати, звідки приходить прихований стиль, скажімо: атрибут hover? У Firefox інструментарій dev дозволяє побачити це при виборі елемента, але не в Chrome DevTools. Однак в Chrome DevTools є дещо краще, зване станом елемента перемикання. Це дозволяє примусово ввести стан елемента:
Копіювати зображення як URI дані (закодовані в base64)
Ви можете зберегти будь-яке зображення з веб-сторінки у вигляді URI даних або, скоріше, закодувати в base64. Немає необхідності використовувати безкоштовний онлайн-конвертер, оскільки він вже вбудований в Chrome DevTools. Для цього просто натисніть на панель «Мережа», клацніть зображення, а потім клацніть його правою кнопкою миші та виберіть «Копіювати зображення в якості URL-адреси даних».
Потім ви отримаєте зображення в наступному форматі: "URURIsdata: image / png; base64, iVBORw0KGgoAAAANSUhEUgAABAAAAAFt ...»
Показати агент користувача Shadow DOM
Коли ви маєте справу з речами, такими як кнопки і входи, веб-браузер зазвичай створює приховані атрибути. Щоб побачити ці клацання в настройках, натисніть F1 (?), Ви можете включити «Показати призначений для користувача агент DOM». Як ви можете бачити в цьому прикладі, ми тепер можемо бачити, що будується тіньової корінь #, який будується. Ви навіть можете зробити цей крок далі і застосувати стилі CSS до прихованих атрибутів.
Виберіть наступне подія (вія)
Chrome DevTools дозволяє легко вибрати наступний збіг, а потім застосувати зміни одночасно по всіх розділах. Щоб зробити це, просто двічі клацніть то, що ви хочете змінити, і натисніть Ctrl + D (Cmd + D) для кожної події, яке ви хочете вибрати, а потім, коли ви введете його, одночасно змініть все з них.
Workspaces - підключення локальних файлів до проекту
Дуже потужна функція Chrome DevTools - це робочі області . За замовчуванням, коли ви міняєте щось в інструментах розробника, вони зникають після оновлення сторінки. Це прекрасно для невеликих налаштувань тут і там, але робочі області фактично дозволяють вам зберегти ці зміни, зберігши їх на вашому диску.
Для цього клацніть правою кнопкою миші по папці і виберіть «Додати папку в локальну робочу область». Потім, щоб зробити її постійною, клацніть правою кнопкою миші файл і виберіть «Карта для файлового системного ресурсу ...».
Мережевий диафильм
Функція мережевої диафильма дозволяє вам бачити, як ваша сторінка відображається від початку до кінця, захоплюючи скріншоти в процесі завантаження. Це може бути відмінний спосіб побачити, як ваш шрифт рендерится, і якщо ви маєте справу з такими проблемами, як FOIT або FOUT .
Для цього клацніть панель «Мережа», клацніть значок камери і натисніть Ctrl + R (Cmd + R), щоб оновити сторінку. Потім він покаже вам, як ваша сторінка відображається від початку до кінця.
Моніторинг продуктивності мережі
З останніми оновленнями інструментів для розробників було додано панель даних в тимчасову шкалу завантаження. Це дозволяє вам легше побачити, що вам найбільше потрібно, і потім ви можете розбити на домени, піддомени і т. Д.
Щоб запустити цей клікніть на панелі «Тимчасова шкала» і натисніть Ctrl + R (Cmd + R), щоб оновити сторінку. Потім ви можете клацнути на панелі «Зведення» в панелі «Агреговані».
DOMContentLoaded
В інструментах розробника ви можете точно побачити час DOMContentLoaded і загальний час завантаження. Щоб запустити це клікніть на панелі «Мережа», натисніть «Показати огляд» і натисніть Ctrl + R (Cmd + R), щоб оновити сторінку. Синя лінія з'явиться для DOMContentLoaded разом з червоним рядком для загального часу завантаження. Зазвичай все, що залишилося від синьої лінії або ж до її, - це активи, які блокують DOM або називаються ресурсами блокування рендеринга.
Профілі демпфірування мережі
Тепер ви можете додати настроюються профілі дросселирования мережі. Це може бути корисно, якщо ви хочете більш точно протестувати совй проект з певною швидкістю.
Щоб додати настроюється профіль, клацніть панель «Мережа» і виберіть список, що розкривається «Дроселювання». Потім ви можете натиснути «Додати настроюється профіль ...» і ввести ім'я, пропускну здатність і затримку.
панель безпеки
Chrome додав ще одну відмінну особливість в засобах розробника під назвою «Панель безпеки» Дана панель може бути дуже корисною для налагодження HTTPS-міграцій і швидкого виправлення попереджень про змішаному змісті. Щоб запустити клікніть на панелі «Безпека» і натисніть Ctrl + R (Cmd + R), щоб оновити сторінку. Потім він відобразить захищені сценарії в зеленому кольорі і незахищені сценарії в червоному кольорі.
Перевірка Google AMP HTML
Google Accelerated Mobile Pages (AMP) - нова ініціатива з відкритим вихідним кодом для прискорення роботи мобільної мережі з використанням полегшених HTML-сторінок. Щоб Google індексував версію вашої версії AMP, ви повинні переконатися, що вона перевірена. Для запуску клацніть на панелі «Консоль». Потім вам потрібно додати # development = 1версію AMP в адресний рядок браузера. Потім натисніть Ctrl + R (Cmd + R), щоб оновити сторінку. Потім відбудеться відображення. Дізнайтеся більше про помилках перевірки AMP .
Використовувати інструменти розробника Firefox в Google Chrome
Чи знаєте ви, що ви можете запускати Firefox Developer Tools в Google Chrome? Valence - експериментальний додаток від команди Firefox, яка дозволяє Firefox Developer Tools налагоджувати більш широкий спектр браузерів. Valence вимагає Chrome 37.0 або вище.
Основна частина вмісту - переклад цієї статті:
https://www.keycdn.com/blog/chrome-devtools/
Chrome Devtools - корисності при розробці
5 (100%)
Всього проголосувало: 1