Огляд анімації
Анімації прекрасні. Вони радують користувачів. Devtools анімацій дозволяє сповільнити всі анімації на сторінці до 25% або 10%.
Screenshoting
Коли ви перебуваєте в режимі пристрою, ви можете включити device frame і при натисканні кнопки capture screenshot буде зроблений знімок, включаючи рамку пристрою.
Результат буде приблизно таким.
$0 в консолі
Набравши $0 в консолі, ви отримаєте посилання на обраний в даний момент вузол DOM на панелі елементів. Це належне посилання на елемент для прикладу ви можете зробити $0.classList.add('touch-of') або $0.getBoundingClientRect(). Якщо у вас є JQuery на сторінці, ви могли б зробити щось на зразок $($0).data() для того щоб переглянути дані на ньому.
За умовчуванням Chrome представить вам об'єкти в DOM- стилі. Якщо ви хочете побачити елементи, як об'єкти JavaScript, Ви можете ввести console.dir($0).
Ось різниця:
Якщо ви досить крутий та використовуєте React і маєте розширення React Devtools, то $r буде давати посилання на React компоненти. Так, наприклад, Ви можете побачити об'єкти, набравши $r.props.
Підказка: Ви можете ввести ідентифікатор елемента в консолі і отримати посилання на цей елемент, так як ідентифікатори елементів є свого роду глобальними змінними. Дивина.
Стрілочні функції в консолі
Це насправді не зовсім Devtools підказка, але я впевнений, що вам це сподобається. З появою стрілочних функцій у нас з'явилось більше можливостей для написання one-liners в консолі. Наприклад performance.getEntries().filter(entry => entry.name.includes('static')) надає нам деяку цікаву інформацію про всі мої запити від домену зі статичним ім'ям.
Звісно якщо вам замало одного рядку, Ви можете натиснути Shift + Enter щоб перейти на новий рядок без виконання коду.
Селектор вибору
Вікно пошуку на панелі елементів не тільки шукає рядки, воно показує CSS селектори теж. Це може бути особливо зручно для не-веб-розробників, яким потрібно записувати селектори, наприклад, для автоматизації тестування.
Тут я з задоволенням шукаю .section-inner p:nth-of-type(2)
Експерименти з кольором
Коли ви експериментуєте з кольором, ви можете скористатися піпеткою, щоб вибрати колір будь-якого елемента на сторінці, або вибрати з палітри кольорів, яка вже знаходиться на сторінці.
Перевірка шрифту
Іноді не так просто розпізнати шрифт. У нижній частині вкладки Computed на вкладці Elements, ви можете побачити, який шрифт був використаний, навіть якщо це ім'я не в списку сімейств шрифтів.
Редагування будь-якого тексту на сторінці
Що ж, у вас є меню з фіксованою шириною і ви хочете знати, якщо текст буде трохи довшим, що станеться з ним. Відкрийте сайт в режимі desinger! Після цього можете натиснути і ввести всюди, де є текст.
Діафільм
Цей Devtool прекрасно підходить для того щоб оцінити наскільки оптимізований ваш сайт, знайти його можна у вкладці Network.
Він також відмінно підходить, якщо ви просто хочете поринути в іронію сторінки Adobe про завантаження шрифту.
Я спостерігаю це кожного разу, коли мені сумно. Моя улюблена частина, коли весь текст зникне.
Фільтрація на вкладці Network
Якщо ви хочете зробити максимально охайний сайт і знати в якому порядку, що завантажується то це можна дуже легко зробити на тій же вкладці Network. Для того щоб скоротити список, ви можете фільтрувати по типу (тримайте клавішу CTRL для того щоб вибрати декілька) і домену.
Темна тема
Просто темна тема -_-
Chrome фрагменти (сніппети)
Я люблю сніппети.( Дуже шкода, що вони не синхронізовані між браузерами Chrome)
От що здорово, так це те, що вони виконуються в контексті сторінки. Таким чином, фрагмент коду буде вести себе так само, як ваша програма з доступом до DOM, relative URL, cookies, та іншим.
Кінець
Вам напевно цікаво, що ви повинні робити далі зі своїм життям. У мене є пропозиція. Підрахуйте, скільки часу ви витратили на розробку протягом минулого року. Тепер відкладіть в сторону 0,5% від цього часу для читання цієї документації протягом наступного тижня.
Якщо ви хотіли б поділитися своїми порадами, будь ласка зробіть це нижче в коментарях.
І на останок маленька порада для тих хто дочитав до кінця. Коли ви встановлюєте Chrome Canary , увійдіть в систему і синхронізуйте його з вашим обліковим записом Google, але заберіть прапорець з Extensions.Таким чином ви синхронізуєте вашу історію, закладки та інше, але у вас не буде ваших DOM - розширень, які б псували ваше середовище розробки.
Дякую за увагу!
Ще немає коментарів