Наша взаимовыгодная связь https://banwar.org/
Привіт, читачі https://max1net.com/ . Сьогодні я знову торкнуся технічного боку діяльності, тому що практично кожен день, розсікаючи по просторах інтернету, виникає тисяча і одна задача вебмастерского плану. А чим більше різних навичок у тебе, тим успішніше ти будеш працювати.
Йтиметься про консолі Google Chrome, а також про корисний плагін Firebug. За допомогою плагіна Firebug можна вивчати стилі CSS прямо на сайті, або вносити правки на сайті прямо з консолі плагіна в браузері.
Аналогічну роботу можна виконати за допомогою консолі в браузері Google Chrome, яка оснащена майже таким же набором функціоналу, щоб було зручніше аналізувати сторінки сайту.
Консоль Google Chrome
За допомогою згаданих вище інструментів можна прямо на сайті виділити якийсь елемент і якщо нам не сподобається, як він розташований або як він виглядає, підкоригувати його відразу на сторінці. Результат будемо бачити тільки ми, відразу ж після внесення змін (наприклад, ми змінили розмір шрифту), а потім ці зміни ми можемо внести в файл стилів css нашого сайту. На зображенні ми бачимо, як працює аналізатор від Google Chrome - при виділенні шматка тексту і переходу в контекстному меню в аналізаторі буде видно і css, і html коди саме виділеного фрагмента з усіма подробицями.
І Firebug, і розширення Google Chrome зручні тим, що вони дають досить детальний аналіз всієї сторінки або виділеного елемента. Тобто, ми можемо відразу побачити свої помилки в роботі з сайтом, які були допущені або при його створенні, або пізніше. Помилки в коді html і css, в блочному побудові сайту, і ще багато іншого, ну просто навіть тупо подивитися код будь-якого фрагмента на сайті конкурента.
Не потрібно ритися в багаторядковому файлі style.css нашого сайту, щоб знайти рядки, які нас не влаштовують, тому що вся необхідна інформація видна на екрані монітора після того, як ми виділимо елемент за допомогою цих інструментів. Крім звичайного аналізу css коду, інструменти цих двох браузерів мають і інші доповнення, які допомагають аналізувати сайт, показують різну інформацію по завантаженню медіафайлів і так далі. Все це можна побачити на часовій шкалі, а крім того - додаткову інформацію про завантаження, способи його передачі та інші корисні дані.
Наприклад, за допомогою аналізатора Google Chrome можна провести детальний аудит сайту і відразу отримати рекомендації щодо поліпшення показників. Зручно працювати з зображеннями, наприклад, відразу видно зайві оператори в файлі style.css.
Функціонал консолі Google Chrome
Для початку розберемося з першим інструментом - консоллю, яка реалізована за замовчуванням в Google Chrome. Щоб запустити аналізатор CSS коду, натискаємо правою кнопкою миші на нас елемент (або просто на будь-яке місце на сторінці, а потім вибираємо потрібний елемент) і вибираємо у випадаючому меню пункт «Перегляд коду елемента». Внизу екрана з'явиться панель інструментів, яка містить вихідний html код виділеного елемента. Тобто, в будь-якому випадку повністю завантажується вихідний код всієї сторінки, а всередині цього коду ми побачимо вихідний код виділеного елемента. Також цей елемент буде підсвічуватися синім кольором на сторінці, ось так:
Як бачите, працювати з розширенням просто - виділене зображення тут же розкладається по поличках - і HTML , І CSS коди видно і зрозумілі. У правому віконці в меню «Computed Style» можна поекспериментувати із зовнішнім виглядом зображення - зменшити його, змістити, додати рамку - так все, що завгодно. Стилі просто прописуються в цьому віконці, і тут же змінюється зовнішній вигляд нашого зображення. У лівому віконці ми побачимо підказки про те, де шукати наш елемент у файлі стилів, в якому з div-ів. Тут все зрозуміло - який з елементів div кому підпорядковується, і де його шукати. Домігшись бажаного результату, ми просто вносимо ці поправки в файл стилів, і все. Поки ми працюємо з будь-яким ділянкою коду в розширенні Google Chrome, цього ніхто з користувачів сайту не бачить, крім нас. Але після того як ми відредагуємо файл стилів, зміни будуть бачити все.
Аналіз коду CSS в браузері Google Chrome
Пересуваючи курсор по сторінці і наводячи його на різні елементи, ми побачимо, що вони по черзі підсвічуються синім кольором із зазначенням їх довжини, ширини і назви блоку в файлі стилів style.css нашої теми. Вибравши потрібний елемент, діємо по описаній схемі - панель «Computed Style» покаже всі властивості елемента (вирівнювання зовні і всередині, розмір вирівнювання кожного боку, шлях до зображення, колір об'єкта, колір фону, розмір шрифту і назва шрифту, висоту і ширину блоку) . Для прикладу я напишу в «Computed Style» нові властивості для цього зображення, але свідомо неправильні. Аналізатор відразу вкаже, що цей стиль неробочий, і застосовувати його не можна або просто не має сенсу - він не буде доступний широкому:
Зараз спробуємо на практиці змінити зовнішній вигляд будь-якого елемента на сторінці. Звичайно, не на цьому блозі, а на тестовому піддомені, на ньому і потренуємося чуйна. Візьмемо такий фрагмент сторінки:
Спробуємо змінити розмір зображення прямо в панелі інструментів від Google Chrome. Тут видно, що зображення стоять в ряд, а значить, об'єднані в один елемент div. Тобто, по ідеї, потрібно все зображення привести до однакового розміру. Але спочатку потрібно уявити собі, як вони повинні виглядати в новому оформленні. Тут видно, що розмір картинки - 178х200px, і обрамлена вона сірою рамкою. Розмір можна змінити в рядку, яка виділена синім кольором, а колір рамки - в інструменті «Computed Style». Після таких двохвилинний змін наші кішечки виглядають ось так:
Це видно тільки нам, і в файл стилів ці зміни ще не внесені. Щоб це зробити, нам потрібно дізнатися, де шукати елементи, що управляють зображенням. З аналізатора видно, що зображення знаходиться в div класу box featured_post. Тепер йдемо в файл style.css нашої теми, шукаємо там елемент box featured_post і правимо його з тими значеннями, які ми підібрали в аналізаторі. Ось так:
Все просто і швидко, якщо знати основи HTML і CSS . Таким чином, перевіркою будь-якого елементу можна дізнатися про нього все - стилі, вихідну інформацію, ім'я елемента, вихідний код, місце в блокової верстці, і т.д. А схема, наведена нижче, дасть уявлення про блоковому розташуванні елемента, і про те, що таке padding, margin і border:
Інші функції Google Chrome - аналіз завантажуваних елементів
Крім вихідного коду і коду CSS, в хром можна переглядати завантажені з сайту зображення, файли стилів, скрипти, і так далі. Також можна переглядати використання файлів cookie , БД і кеша сторінок. Але ці зміни ми можемо використовувати тільки в своєму браузері. Тобто, якщо ми відключимо візуалізацію зображень на сайті (при повільному з'єднанні є сенс відключити), то вони не будуть відображатися тільки у нас. Просто ми прискоримо завантаження якогось сайту у себе в браузері, і все. Якщо відключити виконання скриптів, то і в списку завантажених файлів вони не будуть відображатися.
Думаю, що все-таки більше згодиться вкладка «Network» в розширенні, яка відображає завантаження і всі дані до цих файлів (тип, метод передачі (GET або POST), статус файлу, ініціатор завантаження, розмір файлу і час по часовій шкалі) . Всі елементи сторінки в тому порядку, в якому вони збудовані в шаблоні, тобто, якщо першим елементом був скрипт, то і в таблиці першим ми побачимо скрипт, а потім всі інші елементи сайту - зображення, контент, файли, і т.д.
Тут видно, що є і тимчасова шкала, окрема для кожного завантаження елемента. Тобто, нам вже в принципі можна не користуватися різними інтернет-сервісами, обчислює дані нашого сайту - у нас все під рукою, і ми можемо цим керувати.
Як аналізувати час завантаження сайту
Оригінальна і цікава функція - «Timeline», яка працює в реальному часі. Тут можна детально розглянути, скільки завантажується кожен елемент сторінки, дізнатися початок і кінець завантаження, і багато чого ще. У нас в руках - чудове доповнення для інструменту «Network». Тут побачимо все завантажувальні процеси, як використовується пам'ять, і повний час завантажень.
І останнє, що ми розглянемо для розширення Google Chrome - це вкладка «Audit», з допомогу якої можна подивитися помилки на сайті і їх причини, рекомендації про те, як прискорити час завантаження сторінок, і ці рекомендації будуть стосуватися не нашого браузера, а саме нашого сервера. Тобто, користь для всіх наших відвідувачів очевидна. Внизу списку побачимо кнопку перевірки «Run Audit», натиснемо на неї (тільки потрібно буде перезавантажити сторінку) і наш аналізатор Google Chrome видасть рекомендації, як прискорити сайт, з причиною і наслідком. Всі пункти «Network Utilization» відкриваються і містять докладний опис проблем.
Для Google Chrome це, мабуть, все, якщо коротко. Тепер перейдемо до Мозілли і його плагіну - Firebug.
Плагін Firebug для аналізу коду сторінок
Прийшла черга плагіна Firebug, який можна встановити в браузер Firefox для аналізу контенту. Плагін встановити дуже просто - заходимо в «Доповнення», і там у вкладці «Знайти доповнення» пишемо назву плагіна. Браузер перенаправить нас на сторінку з усіма доповненнями Firebug, а там залишається тільки встановити плагін, ось так:
Тепер можна робити те ж саме, що і в браузері Google Chrome, тільки буде це трохи простіше - і інтерфейс зрозуміліше, і взагалі, все тут російською мовою. Запустити розширення можна правою кнопкою миші - клацаємо по цікавого для нас об'єкту і натискаємо «Перевіряти елемент за допомогою Firebug». Внизу екрана з'явиться вікно плагіна Firebug, яке теж буде розділене на дві частини - вікно з вихідним кодом сторінки в HTML коді, і вікно з CSS кодом елемента.
Що мені тут подобається, так це поділ стилів. У вихідному CSS коді вказуються всі значення, а також наводиться ієрархія стилів - що від чого успадковано. Ця функція добре допомагає, якщо блок контенту або якийсь елемент змінюється за новим прописаному стилю - тоді ми знаємо, де шукати вищий щабель, щоб поміняти стилі там. Також є функція підсвічування коду, як і в хром, тільки більш вдосконалена - по сторінці водити, щоб знайти відповідний блок або елемент, вже не потрібно. Просто натискаємо на кнопку і наводимо курсор на потрібний елемент або ділянку.
У вкладці панелі інструментів Firebug «Скомпільований стиль» знайдемо всю інформацію про виділеному фрагменті, включаючи і успадковані стилі. Вкладка «Макет» показує блочне побудову фрагмента з усіма вирівнювання. Якщо навести курсор на блок, то на сторінці побачимо напрямні лінії, які будуть відповідати виділеного фрагмента документа. На вкладці CSS панелі інструментів плагіна можна побачити код основного документа і його окремих елементів і плагінів.
Таким чином, практично використовувати Firebug можна точно так само, як і аналізатор від Google Chrome - проводити аналіз коду і вивчати його, правити і вносити будь-які зміни прямо на сторінці з подальшими змінами в файлі CSS шаблону. Але працювати з плагіном Firebug простіше і швидше, і особливо це стосується надання інформації про елемент. Це і зрозуміло - Firebug створювався як окремий функціонал, тому і інтерфейс, і розташування блоків з інформацією більш зрозуміло, як і відображення кодів HTML і CSS. Особливо симпатичний функціонал, за допомогою якого без проблем знайти потрібний елемент або блок на сторінці для аналізу і редагування - кнопка «Аналізувати елемент» 
в панелі браузера.
Ще від Firebug - завантаження flash відео з Youtube і інших відеосервісів
Ще одна цікава вкладка в Firebug, яка схожа на функцію в Google Chrome «Network» - це вкладка «Мережа». Тут все функціональніша, ніж в хром, набагато більше інформації. Вся інформація про сайт виводиться теж в порядку завантаження сторінки, від першого запиту до останнього, але тут ми відразу бачимо і часовий проміжок, і домен елемента, і розмір і статус відповіді. Можна включити фільтрацію цієї інформації, тобто, ми можемо зробити так, щоб відображались тільки HTML запити, CSS файли і коди, JS скрипти, картинки і Flash елементи сайту.
Для кожного елемента є свій опис, яке приховано в списку. Якщо розгорнути його, то побачимо всю інформацію про елемент - заголовок, в якому кодуванні, сервер, версія браузера, cookie, хост, кеш. І так - для кожного елемента.
На цьому, мабуть, буду закінчувати. Як ви, напевно, зрозуміли, працювати з цими інструментами можна не тільки для аналізу сайтів. Можна постаратися і знайти ще мільйон рішень, як застосовувати ці інструменти. Ви самі бачили, що їх дуже багато, і кожен має розгорнутий функціонал, тому неможливо в одній статті розповісти докладно про все. Якщо є інтерес, вивчайте самі, і запевняю вас, ви обов'язково знайдете для себе щось цікаве. Я, наприклад, люблю іноді побалуватися з вкладкою «Audit» в Google Chrome, а в Firefox - можливістю просто і швидко працювати з файлами стилів, так як не завжди зовнішній вигляд якоїсь теми цілком може влаштовувати. А користуватися послугами дизайнера, якщо сам можеш це зробити - щонайменше, нерозумно. Ось такі справи, друзі. У мене на сьогодні все. До зв'язку на хвилях https://max1net.com/
Оцініть статтю за 5-бальною шкалою:
Сподобалася запис? Підпишіться на оновлення поштою:
Facebook
Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.
