Разработка сайта для Вашего бизнеса. Веб дизайн. Дизайн логотипа, фирменного стиля, рекламная фотография . Комплексный рекламный креатив.

Ralex. We do the work.
На рынке с 1999го года. Средняя ценовая категория. Ориентация на эффективность решений.
Ознакомтесь с нашим портфолио
Узнайте больше о услугах
Свяжитесь с нами:
E-mail: [email protected]
Tel: (044) 587 - 84 - 78
Custom web design & дизайн и разработка сайта "под ключ"
Креативный, эффективный дизайн. Система управления сайтом (СУС).
Custom flexible разработка систем электронной коммерции
Система e-commerce разрабатывается под индивидуальные потребности. Гибкая функциональность.
Search Engine Optimzation & оптимизация под поисковые системы (SEO)
Постоянная оптимизация и мониторинг сайта в поисковых системах. Достигаем результата быстро и эффективно
Custom logo design & дизайн логотипа и фирменного стиля
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.
профессиональная рекламная фотография
креативно, смело, качественно
Custom logo design & рекламный креатив. дизайн рекламы
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.

Інструменти розробника Chrome: розмітка і стилі

  1. вступ
  2. Початок роботи з інструментами розробника
  3. панель Elements
  4. додаткова інформація
  5. знаходження елементів
  6. Перегляд інформації про стилях
  7. Установка стильової інформації
  8. панель ресурсів
  9. додаткова інформація
  10. Перегляд вмісту окремого фрейма
  11. шрифти
  12. зображення
  13. скрипти
  14. стилі
  15. Ресурси, які не змогли завантажитися
  16. Збереження або перегляд Ресурсів
  17. кукі
  18. локальна пам'ять
  19. Кеш додатки
  20. скоро продовження

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

Для розробників важливо знати і розуміти як використовувати браузерні стредства розробки. У цьому уроці я представлю ознайомлю вас з Chrome Developer Tools. Вам необхідно освоїти основи, починаючи з розмітки і стилізації веб-сторінки.

Замітка для вже використовують вебінструменти. : Метою цього уроку є базове ознайомлення з інструментами розробника Chrome. Якщо ви використовуєте інші браузерні вебінстументи, такі як Firebug в Firefox або засоби розробки в IE, то багато з цієї інформації буде для вас знайомим.

вступ

Інструменти розробки дозволяють вам інспектувати все що тільки можна на сторінці. Наприклад ви можете:

  • переглядати елементи відповідні певному HTML коду (наприклад, який-небудь заголовок)
  • отримати загальний CSS використовується на сторінці і який CSS застосовується до елементу
  • модифікувати CSS в реальному часі і візуально побачити ваші зміни в браузері
  • побачити HTTP запити вироблені браузером
  • запускати JavaScript код в середині вмісту сторінки
  • визначати вузькі місця в продуктивності і виробляти її вимір
  • змінювати ресурси оффлайн, щоб зрозуміти які дані, що запитує сторінка, зберігаються локально

Початок роботи з інструментами розробника

Зверніть увагу: в цьому уроці використовується версія Canary Chrome. Таким чином, деякі функції з цієї статті можуть бути відсутніми в хром.

Спочатку давайте погляне на вміст панелі Elements, давайте розберемося з невеликими керуючими елементами зверху і знизу. На зображенні проставлена ​​нумерація для різних елементів Пользовательского інтерфейсу.

Для розробників важливо знати і розуміти як використовувати браузерні стредства розробки
  1. Закрити інструменти розробника
  2. Кнопка вибору різних інструментальних панелей (в даний момент обрана панель Elements).
  3. Призначений для користувача інструмент встановлений 3ей стороною ( PageSpeed ).
  4. Зміна виведення інструментів розробника.
  5. Показує консоль (розкажу про неї в іншому уроці).
  6. Вибір елемента в інструменті простим натисканням на нього на сторінці.
  7. Помилки JavaScript на сторінці.
  8. Відкриття оверлею налаштувань.

Непогано було б вибрати висновок, який вам звичний. Натисніть внизу-зліва на куточок і зверніть увагу як панель інструментів відкріплюється від основного вікна - що відмінно підхід для використовують кілька моніторів. Натиснути та утримувати лівою іконки дозволяє прикріпити її справа:

Натиснути та утримувати лівою іконки дозволяє прикріпити її справа:

панель Elements

Панель Elements показує розмітку сторінки точно так само як і рендерится вона в браузері. Будь-яка зміна зроблене з DOM через JavaScript відображає на елементах знайдених в цій панелі.

Давайте ознайомимося з цією панеллю. Взляніте НЕ скрін, цифрами відзначені частини панелі Elements, які поясню нижче:

  1. Елементи, як вони Рендер всередині документа.
  2. Стрілка показує, що елемент має спадкоємців. Позиція стрілки показує складний елемент або розкладений.
  3. Прості хлібні крихти починаються з елемента документ (<html />) і закінчуються поточним вибраним елементом. При наведенні на кожну "крихту" підсвічується відповідний елемент у вікні браузера
  4. Пересувається роздільник для поділу елементів списку виведення стилістичної інформації
  5. Панелі, які містять стилістичну (і іншу) інфу.
  6. Computed Styles показує інфу про стилях, обчислену браузером для обраного елементи.
  7. Показує вам успадковані стилі від браузера за замовчуванням і застосовані до поточного елементу
  8. Показує стилі користувача, такі як: стилі отримані від відповідного сторінці файлу styles.css, стилів доданих чарез JavaScript і стилів доданих через інструменти розробника
  9. Кнопка "New style rule". Вона створює нове правило стилю для обраного елемента.
  10. Toggle Element State дозволяє вам запускати стану ініційовані користувачем, такі як: hover (при наведенні користувачем курсором мишки на що-небудь,: active та інші. Зображення показиват кнопку в її "on" стані, зазвичай вона в "off".
  11. Розділ font section виводить тільки шрифти, які повинен завантажити браузер.

  12. Дозволяє вам встановити бажаний формат для значень кольору. Ви можете залишити ( "as authored"), змінити в hex, RGB і навіть в HSL.
  13. Візуалізація коробки елемента враховуючи відступ, кордон.

додаткова інформація

  • Що: Панель Елементів дозволяє перегляд і редагування елементів і стилів.
  • Де: Це перша панель. До неї також можна отримати доступ по правому кліку на сторінці і вибрати Inspect element.
  • Чому Існує безліч варіантів застосування. Можна змінювати DOM видаленням нода або додаванням нового. Розмітка на стороні, панель елементів дозволяє побачити застосовані стилі до певного ноду. Також ви можете додати або поміняти стилі або створити нові правила і додати їх до ваших стилям.

зміна DOM

Зміна DOM всередині панелі Elements досить-таки зрозумілий процес. Для видалення нода, клікніть на ньому правим кліком і виберіть Delete node. Очевидно, що видалення батьківського нода видалить його спадкоємців. Корисне: Ви також можете натиснути кнопку Del на клавіатурі для видалення обраного нода.

Зміна типу елемента можлива при подвійному натисканні на назву елемента. Наприклад: p-тег параграфа. При зміні елемента з одного в інший тім автоматично змінює відкриває і закриває теги.

Перегляд ресурсів сторінки необхідний для налагодження

Додати атрибути можна правим кліком на елементі і вибравши Add attribute. Курсор негайно розташується в потрібному місці і ви можете почати додавати до елементу необхідні атрибути, наприклад: class = "title". Натискання кнопки tab розташує курсор на наступній позиції атрибута.

Редагування атрибутів схоже з додаванням. Знайдіть атрибут для редагування і двойниі клацанням змініть його ім'я або значення.

Редагування сирого HTML можна зробити правим клацанням на елементі і вибрати Edit as HTML.

знаходження елементів

Інструменти розробника мають в розпорядженні корисні техніки для знаходження елементів в документі. При наведенні на елементи в панелі Elements починає підсвічуватися відповідний елемент на сторінці.

При наведенні на елементи в панелі Elements починає підсвічуватися відповідний елемент на сторінці

Іноді шукані елементи бувають невеликі, тоді рятує функція Прокрутити для огляду Scroll into view - її можна знайти всередині контекст-меню.

Іноді шукані елементи бувають невеликі, тоді рятує функція Прокрутити для огляду Scroll into view - її можна знайти всередині контекст-меню

Інструменти розробника мають функцію пошуку. При фокусі на панелі інструментів розробника натисніть Control + f, щоб відкрити вікно пошуку. Або в маках Command + Option + f (?? + f) Це просте вікно пошуку.

+ f) Це просте вікно пошуку

Перегляд інформації про стилях

Перш ніж ми перейдемо до панелі стилів (праворуч) від вкладки Elements, ми можемо отримати деяку інформацію про стилях прямо від елемента, якщо в стилях для нього вказані поля, відступи і межі. При наведенні на один з цих елементів дає нам таку прямокутну модель:

При наведенні на один з цих елементів дає нам таку прямокутну модель:

Коли ви думаєте про те, чому деякі обтічні елементи поводяться не так як очікувалося, то перегляд інформації про полях / відступи може виявити проблему. Наприклад, ви побачите, що елемент ширше, ніж очікувалося через додаткових полів.

Давайте перейдемо на панель Elements вкладка "Metrics".

Вона дозволяє вам дивитися глибше і з'ясовувати чому елемент рендерится саме так. Також це відмінний інструмент для навчання; якщо ви ще не бачили CSS Box Model , Тоді диаграма Metrics - це відмінний візуальний помічник.

Панель Metrics дозволяє переглядати габарити елементів, поля, межі та відступи. Зверніть увагу як ви можете підсвічувати окремі шматки для візуального відображення в браузері. Діаграма Metrics також видає піксельні розміри для кожної частини елемента, наприклад правило стилю padding: 10px 5px (10px знизу і зверху, 5px справа і зліва) покажуть точні вимірювання для кожної сторони елемента.

Установка стильової інформації

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

Переконайтеся, що панель Styles відкрита і клацніть трохи правіше фігурної дужки. Ви побачите, що курсор автоматично розташує себе так, що можна відразу написати параметр для стилю. Введіть ім'я параметра, натисніть tab, щоб пересунути курсор на наступну позицію і введіть значення. Я збираюся додати такий CSS:

border: 1px solid green border: 1px solid green

При наборі назви параметра, Chrome видає підказку і можна використовувати автозаповнення. Натискання tab вибирає блізжайшее соответсвтіе надрукування і пересуває курсор на місце значення. При натисканні правої стрілки курсор залишиться на позначці параметра але заповниться блізжайшіх відповідним значенням надрукування.

Заповнити форму також працює і з параметрами. Наприклад, комбінація "pos" * tab * "fi" * tab * створить параметр стилів position: fixed. При введенні пікселів / відсотків, наприклад 15% або 10px, можна збільшувати або зменшувати ці значення використовуючи стрілки вгору-вниз. Для збільшення на 10 використовуйте шифт + стрілка вгору.

Зміна значень кольору можлива після його введення і натисканні на кольоровому квадратику зліва від значення - з'явиться це the small, colored square to the left of the value to bring up the color picker tool. You can also toggle between color value formats by shift + clicking the small colored square.

ви можете створити нове правило стилів натиснувши на іконку + в панелі стилів. Розмітка має вигляд:

<H1 id = "something"> Hello </ h1>

згенерує:

#something {}

Розмітка виду:

<H1 class = "some-class"> Hello </ h1>

Автоматично сегенерірует наступне:

.some-class {}

Розмітка виду:

<H1> Hello </ h1>

згенерує:

.h1 {}

Розмітка виду:

<H1 class = "class1 class2 class3"> Hi there </ h1>

Автоматично сегенерірует наступне:

.class1.class2.class3 {}

Звичайно ж стильові правила можуть бути змінені за бажанням. Панель Elements дає багато можливостей управління структурою і стилем сторінки, але інструменти розробника дають набагато більше необхідного для нашої роботи.

панель ресурсів

Панель Resources показує який ресурс використовує сторінка. Давайте поглянемо на те, як це відбувається.

Давайте поглянемо на те, як це відбувається

  1. Кнопка активації панелі Resources.
  2. Панель категорії, яка показує різні типи ресурсів для інспектування. Тема ресурсу (такий як "Frames" або "Session Storage") може показувати помилку біля себе. Це означає, що є більше інформації і при натисканні на заголовок виведеться ця інформація. Ця панель може змінювати розмір, тому можете зробити її більше.
  3. Сторінки ресурсів, включаючи шрифти, зображення, JS, CSS і сама сторінка можуть тут відображатися. Еслі сторінка використовує різні фрейми, то тоді кожен фрейм виводиться в окремому каталозі всредіне родіетльского "Frames" каталогу. Це корисно для розуміння відносин між фреймом і його ресурсами.
  4. Якщо веб SQL бази даних використовуються на сторінці, то це виведе їх вміст.
  5. Так само як і веб SQL, IndexedDB показує вміст IndexedDB бази даних.
  6. Виводить пари ключ / значення збережені в localStorage.
  7. Виводить пари ключ / значення збережені в sessionStorage.
  8. Виводить список кукіз створених доменом.
  9. Виводить об'єкти кешовані згідно маніфесту кеша. Ця секція містить багато корисної інформації. Наприклад, такий ресурс як JS бібліотека покаже шлях до ресурсу, його розмір і тип файлу.
  10. Виводить деталі про обраний ресурсі в лівій панелі.

додаткова інформація

Інструменти розробника also has a search feature.

  • Що: Панель ресурсів показує ресурси, асоційовані зі сторінкою.
  • Де: Друга панель прямо після панелі Elements і перед панеллю Network.
  • Чому: Перегляд ресурсів сторінки необхідний для налагодження. Ви повинно бути зацікавитесь тим, яку інформацію зберігають вебсайти в localStorage, кукіз або інший механізм зберігання даних. Додатково, звичайні ресурси, такі як localStorage можуть бути змінені через інструменти розробника.

Перегляд вмісту окремого фрейма

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

У наступному зображенні, зверніть увагу на сторінку з колонками, де кожна колонка є фрейм:

Можна зберегти ресурс на свій комп'ютер

Кожен фрейм розміщується в своїй папці. Кожна папка містить об'єкти своєї сторінки і можна клацати на кожній сторінці, щоб вивести її вміст. Перегляд вмісту HTML сторінки корисно, але можна пробратися ще глибше в сторінку і переглянути її ресурси. JS, CSS, зображення і навіть шрифти можуть просматріаться! Об'єкти, що містять код виводяться у вікні перегляду коду, який йде в комплекті з підсвічуванням синтаксису і нумерацією рядків.

шрифти

Важливо розуміти, що системні шрифти, такі як Arial або Helvetica не відображаються в Fonts; розділ шрифтів показує тільки шрифти завантажуються браузером.

Важливо розуміти, що системні шрифти, такі як Arial або Helvetica не відображаються в Fonts;  розділ шрифтів показує тільки шрифти завантажуються браузером

The font scales so that it can fit within the resource content area; therefore, resizing the resource content area also resizes the asset!

зображення

Очевидно, що тут ми обговоримо перегляд зображень.

Очевидно, що тут ми обговоримо перегляд зображень

Інструменти розробника показують зображення в області вмісту, і зображення масштабується відповідно до області вмісту. Зображення з прозорістю (таке як представлена ​​вище) показуються з шахматкою-бекграундом, для легкого перегляду. Іншою корисною інформацією, такий як розміри в пікселях, розміри файлу, MIME тип - виводяться після зображення.

скрипти

При натисканні на JS файл виводиться його вміст і більш нічого.

При натисканні на JS файл виводиться його вміст і більш нічого

Але не разочаровует, перегляд об'єктів це всього лише перегляд. У майбутніх уроках розглянемо підтримку JS і можливості браузера.

стилі

Ви можете переглядати різні стилі, завантажені браузером для веб-сторінки.

Ви можете переглядати різні стилі, завантажені браузером для веб-сторінки

Як і у випадку з JavaScript файлами у вас небагато можливостей з CSS об'єктами.

Ресурси, які не змогли завантажитися

У разі, якщо браузер не зміг завантажити окремий ресурс через проблеми з мережею або помилок розробника.

У разі, якщо браузер не зміг завантажити окремий ресурс через проблеми з мережею або помилок розробника

Коли це трапляється, то з'являється маленька червона повідомлення праворуч від об'єкта. Номер показує кількість помилок і вміст панелі видає більше інформації про помилку.

Збереження або перегляд Ресурсів

Кожен ресурс має контекст меню; при правом натисканні на ресурсі виникає меню, схоже на це:

Кожен ресурс має контекст меню;  при правом натисканні на ресурсі виникає меню, схоже на це:

Ви можете зберігати ресурс в свій комп'ютер, відкривати ресурс в новій вкладці і робити багато другий действи. При подвійному натисканні на ресурсі, відкривається об'єкт в новій вкладці.

кукі

Як я вже раніше говорив, ви можете переглядати інформацію про куки для певного сайту. Наприклад, для Твіттера як показано на цьому зображенні:

Наприклад, для Твіттера як показано на цьому зображенні:

Тут ми бачимо:

  • Name - назва куки. Наприклад тут назву "remember_checked" з значенням 1. Воно показує стан зазначив користувач чекбокс "Remember me".
  • Value - значення куки. Для куки з ім'ям "_twitter_sess" показано довгий закодований ВД сесії для значення.
  • Domain - домен куки. .twitter.com дозволяє будь-які субдомени на twitter.com.
  • Path - як і в домені, поле шляху показує дійсні шляхи. "/" Дозволено для всіх шляхів.
  • Expires - дата коли браузер видалить куки.
  • Size - розмір куки в байтах.
  • HTTP - примусовий доступ до куки тільки через HTTP протокол. Це попереджає доступ кук через JavaScript і допомагає боротися з крадіжкою кук через кроссайскріптінг.
  • Secure - змушує браузер обмінюватися даними куки тільки через кодоване з'єднання, таке як HTTPS

Ви можете видалити кукі правим клацанням на куки і вибрати Delete з контекстного меню.

Цікаво те, як браузери використовують куки інформацію для визначення авторизовані ви чи ні. При залогіненним в Твіттері, якщо видалити "auth_token" і "_twitter_sess" куки, то після оновлення сторінки потрібно буде знову ввести логін і пароль. Таким чином Твіттер зберігає дані про статус користувача і іншу важливу інформацію в цих кукі.

локальна пам'ять

Зберігання та перегляд ключ / значення пар localStorage дуже просто. Давайте використаємо існуючий сайт як приклад. Наступне зображення показує перегляд локального сховища у Kitchen Sink Example App зробленого на основі фреймворку для мобільних додатків Sencha Touch.

При першому перегляді сторінки браузер робить запит на CSS файл. Оновлення сторінки відбувається дуже швидко тому що Sencha зберігає CSS в локальному сховищі. Додаток kitchen sink має деякі цікаві ключ / значення пари. Наприклад, один ключ виглядає ось так:

3a867610-670a-11e1-a90e-4318029d18bb-http: //dev.sencha.com/deploy/touch/examples/production/kitchensink/resources/css/app.css

Значення для цього ключа починається з:

/ * 45e6f4ffe818855b26f3dcbfc156025eca58e4f5 * / code, pre, pre * {font-family: Menlo, Monaco, Courier, monospace}

Steve Souders написав про зберігання об'єктів в локальному сховищі (англ.) ; це цікаве і чудове використання локального сховища, яке може поліпшити швидкодію сайту особливо на мобільних пристроях.

Кеш додатки

Кеш додатки повідомляє браузеру які ресурси він повинен кешувати і категорія Application Cache дозволяє переглядати що було закеширувалася.

Кеш додатки повідомляє браузеру які ресурси він повинен кешувати і категорія Application Cache дозволяє переглядати що було закеширувалася

Тут є три колонки які показують:

  • Resource - повний шлях до ресурсу. Розширення файлів - зазвичай об'єкти і хтмл файли. Один з ресурсів - це файл-маніфест!
  • Type - може відрізнятися. Тип "Manifest" - це унікальний тип файлу, який є тільки у маніфесту. Інший тип - explicit: ресурси, які явно визначені в маніфесті. Тип fallback показує ресурс, який діє як резерв для іншого ресурсу. Тип Master - це ресурс, який запускає кеш самої сторінки.
  • Size - розмір ресурсу в кілобайтах або байтах.

скоро продовження

У другій частині розглянемо ще панелі і зосередимося трохи на швидкодії для поліпшення користувальницького враження (так я перевів UX :)

Оригінал стаття Chrome Dev Tools: Markup and Style

Даю ще пару відео:

Новина.Курс Інструменти розробника Хром!

Крім цього відкрилася чудова школа Інструментів розробника Хром , В якій можна все це вивчити, від вас потрібно лише знання англійської мови.

Категории
  • Биология
  • Математика
  • Краеведению
  • Лечебная
  • Наука
  • Физике
  • Природоведение
  • Информатика
  • Новости

  • Новости
    https://banwar.org/
    Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.


    Наши клиенты
    Клиенты

    Быстрая связь

    Тел.: (044) 587-84-78
    E-mail: [email protected]

    Имя:
    E-mail:
    Телефон:
    Вопрос\Комментарий: