Хочу зізнатися, що я великий шанувальник браузерних інструментів для розробників. Це справді секретна супер зброя для веб-розробників.

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

Нещодавно я перейшов на щоденне використання Firefox і усвідомив, що практично нічого не знаю про інструменти розробника Firefox. Крім того, я зрозумів, наскільки сильно вони покращали за останні кілька років! Але їх часто оминають у тематичних статтях. На мій погляд, це несправедливо, тому я вважав за свій обов'язок розповісти вам про них.

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

Трюки зі скріншотами

Скріншот цілої сторінки

Відкрийте панель «Веб-розробка» в браузері. Виберіть зі списку «Інструменти розробника». Клацніть на вкладці «Налаштування інструментів» і поставте галочку поруч із «Зробити скріншот усієї сторінки». Потім на панелі інструментів натисніть на іконку камери. Скришот сторінки буде збережено в стандартній папці за допомогою поточної ширини сторінки.

Скріншот вузла

Відкрийте вкладку "Інструменти розробника", вибирайте режим "Інспектор", потім ліворуч від цього режиму вмикайте функцію "Вибрати елемент зі сторінки". Тепер ви можете знайти потрібний вам вузол, клацнути по ньому правою кнопкоюмишки та вибрати пункт «Скріншот вузла».

Видалення класу з елемента

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

Перетягування туди-сюди на панелі «Інспектор»

На панелі “Інспектор” можна перетягнути будь-який HTML-елемент та змінити його положення на сторінці. Просто затисніть ліву кнопкумиші на початку рядка, ви повинні з'явитися іконки руки, потім можна сіяти хаос на веб-сторінці.

Гарячі клавіші для Selectors API

Ще однією крутою особливістю"Консолі" є гарячі клавіші для Selectors API. Повертаємося в «Консоль» та вводимо:

$ ()- гаряча клавішадля document.querySelector()

$$ () - гаряча клавіша для document.querySelectorAll()

Використовуйте значення останньої операції у “Консолі”

Використовуйте $_, щоб повернутися до попередньої операції, виконаної в “Консолі”

Клацніть правою кнопкою миші на будь-якому елементі в “Інспекторі” та виберіть пункт “Використовувати в консолі”. Він буде призначений тимчасовою змінною.

Налагодження JavaScript

Ви можете встановити контрольні точки, і вирази для відстеження у вихідних файлах JS на панелі “Відладчик” у “Інструментах розробника”, щоб потім побачити всі зміни, що відбуваються.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Windows: F12 або 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

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

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

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

Вітаю, Любі друзі. Панель (консоль) розробника у браузері – це незамінний інструментдля кожного власника сайту, за допомогою якого можна швидко переглянути html кодсторінки та css стилі. А також дізнатися про помилки, що виникли під час завантаження сайту та перевірити сайт на адаптивність.

Саме роботу з html кодом, css стилями та адаптивністю в панелі розробника ми сьогодні й розглянемо. Це інструменти, які потрібні на вирішення більшості завдань.

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

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

Тоді ви дивитеся через панель розробника у браузері на потрібний елемент, де видно html код та css стилі до нього.

Інший варіант використання панелі – це коли ви хочете щось зробити на сайті, але поки не знаєте, як це буде виглядати.

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

Відкриття панелі вебмайстра та знайомство з інтерфейсом

Панель розробника є у кожному сучасному браузері. Для того, щоб її відкрити, потрібно натиснути на клавіатурі клавішу F12.

Інтерфейс панелі в різних браузерахвідрізнятиметься, але принципи роботи схожі.

Мені більше подобається панель у браузері Firefox.

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

У панелі можна переглядати HTML-код сторінки і редагувати його відразу. Для цього вибираєте потрібний елемент, натискаєте праву кнопку мишки та в меню вибираєте «Правити якHTML (EditasHTML)».

Для роботи зі стилями потрібно перейти до розділу панелі CSS, де можна додавати стилі або відключати наявні, прибравши чекбокс навпроти них. Змінювати можна все.

Тут можна дізнатися в якому файлі знаходяться стилі, і на якому рядку.

Як проаналізувати html елемент на сайті та дізнатися його стилі css

Давайте розглянемо приклад на моїй , яка знаходиться в кожній статті.

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

Весь принцип роботи з кодом в панелі полягає в тому, що потрібно вибрати код html в лівому вікні, а в правому будуть стилі для цього елемента.

І якщо зі стилями все досить просто, то під час роботи з кодом html потрібно розуміти його цілісність. Тобто, кожен елемент має теги, в яких він знаходиться. Це можуть бути абзаци, посилання, зображення тощо. Найчастіше це блоки DIV, які мають тег, що відкриває. < div>і закриваючий div>. І на панелі це все добре видно.

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

У відеоуроці цього моменту я зупинюся докладно. А якщо хочете швидко освоїти базові знанняза html та css, раджу перейти на сторінку «Безкоштовно»та скачати курси Євгена Попова.

Як скопіювати код html із панелі у файли сайту

Ідей для застосування панелі розробника може бути багато. Поекспериментувавши на панелі, отриманий результат потрібно перенести у файли сайту. І тут є певні труднощі. Справа в тому, що на панелі відображається html код, а більшість сучасних сайтів, у тому числі і на платформі WordPress, створені за допомогою мови. програмування PHP. А це як небо і земля.

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

Для цього потрібно відкривати панель розробника, досліджуючи потрібний елемент. Визначивши початок блоку ДІВ, натискаєте праву кнопку мушки та вибираєте пункт меню «Копіювати зовнішнійHTML»

Код скопійовано в буфер обміну, і тепер його потрібно вставити в місце, де ви хочете бачити цей банер.

Процес описувати досить складно, тому пропоную подивитися відеоурок, в якому все докладно розказано і показано.

Як перенести стилі з панелі розробника у файли сайту

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

, Для мене це зручніше. Так як при роботі в Notepad ++ є підсвічування коду та нумерація рядків. А це дуже допомагає, коли потрібно непросто скопіювати стилі, а внести зміни до наявних. За номером рядка ці стилі легко знайти.

Як перевірити адаптивність шаблону на панелі розробника

Для переведення панелі в адаптивний режим потрібно натиснути клавіші CTRL+SHIFT+M або кнопку в панелі розробника, яка в різних браузерах розташована по-різному.

Висновок

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

Використання панелі та навички роботи з кодом та стилями незамінні при роботі з сайтами та партнерськими програмами.

Беріть інструмент на озброєння, він вам знадобиться ще багато разів.

Якщо ж залишилися питання, радий відповісти на них у коментарях.

Друзі, бажаю вам успіхів. До зустрічі у нових статтях.

З повагою Максим Зайцев.

• Переклад

Сьогодні Google Chrome є самим популярним браузеромсеред веб-розробників. З швидким, шеститижневим, циклом релізів і потужним набором інструментів розробника, що постійно розширюються, перетворивши браузер на інструмент, який ви повинні мати. Більшість із вас, ймовірно, знайомі з багатьма його функціями, такими як «живе» редагування CSS, використовуючи консоль та відладчик. У цій статті ми з вами розглянемо 15 захоплюючих порад та хитрощів, які дозволять покращити вашу продуктивність ще більше.

1. Швидка зміна файлів

Якщо ви користувалися Sublime Text, то ви, ймовірно, не зможете жити без Go to anything ( Примітка перекладача:для користувачів Idea ця функція називається "Searching Everywhere" і викликається подвійним натисканням клавіші Shift). Ви будете раді дізнатися, що аналогічна функція є в інструментах розробника. Натисніть Ctrl+P (Cmd+P для користувачів Mac) коли відкрита панель розробника, щоб швидко знайти і відкрити будь-який файл у вашому проекті.

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

Але якщо ви хочете шукати у вихідному коді? Для пошуку у всіх завантажених файлах на сторінці натисніть Ctrl+Shift+F (Cmd+Opt+F). Цей метод пошуку також підтримує пошук за регулярним виразом.

3. Перехід до рядка

Після того, як ви відкрили файл у вкладці Sources, інструменти розробника дозволяють перейти до будь-якого рядка цього файлу. Для цього натискаємо Ctrl+G для Windows та Linux (або Cmd+L для Mac), та введіть номер рядка.

Ще один спосіб це натиснути Ctrl + O, але замість тексту для пошуку ввести ":" і номер рядка ( Примітка перекладача:а можна піти ще далі і ввести ім'я файлу і номер рядка використовуючи ":" як роздільник між ними, при цьому вводити ім'я файлу абсолютно не обов'язково, це ж пошук).

4. Вибірка DOM елементів за допомогою консолі

Консоль інструментів розробника підтримує кілька корисних «магічних» функцій та змінних для вибірки DOM:

• $() - еквівалентно document.querySelector(). Повертає перший елемент, що відповідає селектору CSSнаприклад, $ ("DIV") поверне перший елемент DIVна сторінці.
• $$ () - еквівалентно document.querySelectorAll (). Повертає список елементів ( Примітка перекладача:а саме NodeList), які відповідають даному CSS селектору.
• $0 - $4 - історія п'яти останніх елементів DOM, які ви вибирали у вкладці Elements, де $0 буде останнім.

Дізнатись більше функційконсолі можна.

5. Використання кількох кареток та виділень

При редагуванні файлу ви можете встановити кілька кареток, утримуючи Ctrl (Cmd для Mac) і натиснувши там де вам потрібно, таким чином, ви можете встановлювати каретки в багатьох місцях одночасно.

6. Preserve Log

При увімкненні параметра Preserve Log на вкладці Console результати зберігатимуться, а не очищатимуться при кожному завантаженні сторінки. Це зручно, якщо ви хочете переглянути історію помилок, які з'являються перед відходом зі сторінки.

(Примітка перекладача:аналогічна властивість є на вкладці Network. При його включенні історія запитів перестає очищатися під час переходів між сторінками. Однак, якщо на сторінці було встановлено переадресацію з допомогою JavaScriptі виконувався будь-який інший запит, практично завжди переглянути результат цього запиту неможливо. Не забувайте відключати подібні властивості при тривалому налагодженні! Інструменти розробника практично завжди споживають більше системних ресурсівчим сама сторінка!)

7. Прикрашання мінімізованих вихідних джерел

Інструменти розробника Chromeмають вбудований «прикрашувач» мінімізованих вихідних кодів до зручного для читання вигляду. Кнопка знаходиться в лівому нижньому кутку відкритого в Наразіфайлу у вкладці Sources.

(Примітка перекладача:часом не вистачає можливості включення цієї властивості автоматично, як, наприклад, це зроблено в FireFox)

8. Режим пристрою

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

9. Емуляція датчиків пристрою

Ще однією крутою особливістю режиму пристрою є можливість імітації датчиків мобільних пристроїв, таких як сенсорні екранита акселерометри. Ви навіть можете вказати ваші географічні координати. Об'єкт розташований у нижній частині вкладки Elements в Emulation -> Sensors.

10. Вибір кольору

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

11. Примусовий стан елемента

Інструменти розробки дозволяють симулювати такі CSS стану DOM елементяк:hover та:focus, спрощуючи написання стилів для них. Ця функція доступна в редакторі властивостей CSS.

12. Відображення shadow DOM

Такі елементи як поля введення та кнопки, браузери створюють з інших базових елементівякі зазвичай приховані. Тим не менш, ви можете перейти Settings -> General і увімкнути Show user agent shadow DOM, для відображення цих базових елементів у вкладці Elements. Це дасть вам можливість оформляти їх окремо.

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

Якщо ви натиснете Ctrl+D (Cmd+D) під час редагування файлів на вкладці Sources, додатково виділиться наступне входження поточного слова, дозволяючи вам редагувати їх одночасно.

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

З допомогою Shift+ Click за зразком кольору, в панелі редагування CSS, формат кольору буде змінено на RGBA, HSL шістнадцятковий ( Примітка перекладача:при цьому як шістнадцяткову скорочену форму, так і повну, і навіть у великому регістрі. Якщо вас і це не влаштує, то браузер намагатиметься знайти цей колір у списку стандартних колірних констант. Єдиним недоліком даної можливості є те, що для того, щоб вибрати потрібний формат, часто доводиться «проклацати» всі інші можливі варіанти).

15. Редагування локальних файлів у робочій області

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

Щоб налаштувати робочі області, перейдіть у вкладку Sources ( Примітка перекладача:увімкніть панель навігації, якщо вона прихована, для цього натисніть кнопку Show navigator у лівому верхньому кутку вкладки) і клацніть правою кнопкою миші в будь-якому місці панелі навігатора, або просто перетягніть всю вкладку проекту в панель розробника. Тепер вибрана папка, її підкаталоги та всі файли в них будуть доступні для редагування незалежно від того, на якій сторінці ви знаходитесь. Для ще більшої зручності, ви можете використовувати файли, які використовуються на даній сторінці, що дозволить редагувати та зберігати їх.

UPD. Примітка перекладача:

Додана папка буде доступна з усіх вкладок. Тому якщо у вашому проекті більше одного HTML файлу, достатньо буде відкрити його в сусідній вкладці браузера.

Ви можете дізнатися більше про робочі простори

Так склалося, що веб-розробники більшою мірою віддають перевагу Firefox, ніж іншим браузерам. Значну допомогу їх роботі надають ряд корисних аддонів. У цій статті ми розглянемо ті з них, які, на наш погляд, обов'язково знадобляться для успішного веб-програмування. Крім того, ми розповімо і про деякі найбільш значних властивостяхцих адднов.

Насамперед, потрібно встановити Firebug.

Firebug

Firebug - це аддон, який неодмінно має бути в арсеналі будь-якого веб-розробника. Якщо ви не знаєте, де його знайти, перейдіть по . Ймовірно, вам доведеться перезапустити Firefox, щоб активувати Firebug.

Після цього переглянути Firebug можна одним з наступних способів: в меню Інструменти > Web Developer s > Firebugабо натиснувши правою кнопкою миші і в меню вибрати "Inspect Element with Firebug".

Є й інший варіант: знайдіть у Firefox іконку Firebug, натисніть по ній - і з'явиться вікно аддону.

Firebug дуже схожий на інструменти для розробників у Chrome. У ньому є панель для перегляду HTML-структури та стилів, а також консольна панель для ознайомлення з помилками, застереженнями та реєстраційними журналами. Але це ще не все: у нас є ще кілька порад, які, ми сподіваємось, виявляться вам корисними.

Зміна розміру блоку

HTML-елемент зроблений із блочної моделі CSS, яка, у свою чергу, складається з межі, зовнішніх та внутрішніх відступів. Трапляється, що нам потрібно змінити ці показники. У даному випадкупотрібно вибрати елемент, який ви хочете змінити, і перейти до панелі «Розташування».

Тут ви знайдете ілюстрацію блочної моделі CSS, а також її характеристики як width і height. Хоча ці два значення не вказані в CSS, даний інструментдостатньо розумний, щоб визначити їх.

Якщо ви бажаєте перетворити їх, натисніть на значення і використовуйте стрілки вгору (щоб збільшити його) і вниз (щоб зменшити).

Обчислювані стилі

Напевно, вам цікаво, чому певні стилі часто виявляються непридатними. Найбільш простий і швидкий спосібдізнатися про це, особливо, якщо у вас є сотні стилів, - це вивчити панель «Стиль, що обчислюється». У наведеному нижче прикладі тег якорь текстового кольору змінено на клас.button, а він, у свою чергу, - на.button.add.

Вивчаємо Font Family (простий спосіб)

Напевно ви стикалися з безліччю сімейств шифрів як font-family в CSS. На жаль, дана опціяне допомагає нам дізнатися, який шрифт використовує браузер. Щоб вирішити цю проблему, можна встановити розширення Firebugпід назвою .

Після завершення інсталяції завантажте веб-сторінку. Тепер ви побачите, який шрифт застосовується в даний момент. У нашому випадку це Helvetica Neue.

Аналіз роботи

Це може здатися банальним, але у . Сайт, завантаження якого відбувається швидше, вважається грамотно розробленим і вище за рангом у плані контенту. Таким чином, швидкість не можна залишити без уваги.

Панель мережі

Перше, що потрібно перевірити, щоб оцінити роботу веб-сайту, це панель мережі. Вона записує HTTP-запит вашого сайту під час завантаження. На скріншоті внизу показана сторінка, яка завантажує 42 запити, а її завантаження йде близько 4,36 секунд.

Згодом ви можете класифікувати HTTP-запити за їх типом (HTML, CSS та Images).

YSlow!

Крім того, ви можете встановити розширення для Firebug від Yahoo!. Після його активації на екрані з'явиться додаткова панель, Яка так і називається - Yslow!

Yslow!, як і панель мережі, записуватиме роботу сторінки в процесі її завантаження, а потім вкаже вам причину повільності сайту та підкаже способи усунення цієї проблеми. У даному прикладіми протестували веб-сторінку і вона набрала 86 балів, що відповідає оцінці «ОК».

Page Speed

Можна також встановити плагін. Він, на зразок Yslow!, тестує швидкість завантаження сайту, хоча їх результати можуть трохи відрізнятися. Нижченаведений приклад показує, як ця ж сторінка у Page Speed ​​заробила всього 82 бали.

Web Developer Tools

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

Перегляд зображень

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

Але цей спосіб не можна назвати ефективним, якщо цю процедурупотрібно зробити з низкою зображень. У такому разі краще використовувати опцію аддону "Images". До неї легко можна отримати доступ через меню "Зображення" на панелі інструментів.

Даний приклад демонструє, як ми одночасно показуємо розмір зображення та файлу:

Вбудовані інструменти Firefox

В останніх версіях Firefoxз'явилося набагато більше вбудованих властивостей для веб-розробників, серед яких:

Inspect Element

На перший погляд може здатися, що Inspect Element від Firefox нічим не відрізняється від Inspect Element in Firebug, але це не так.

Ми не розповідатимемо про опції Inspect Element, оскільки вони ідентичні панелям Firebug HTML і CSS і відрізняються лише розташуванням та дизайном. Інструмент має одну відмінна риса, що обов'язково варто спробувати - 3D-перегляд. Скориставшись нею, можна побачити всі деталі веб-сторінки. Щоб активувати, натисніть кнопку «Firefox Native Inspect Element», розташовану в нижньому правому кутку сторінки. Ось як виглядає 3D-перегляд:

Незважаючи на те, що я не користуюся цією новою властивістю від Mozilla так часто, як усіма іншими, у деяких ситуаціях вона може виявитися дуже корисною.

Web Design View

Через зростаючу популярність Responsive Web Design, Firefox створив у своєму браузері відповідну закладурку. Завдяки цьому інструменту можна оцінити різні параметривеб-сайту, не змінюючи розмір вікна браузера.

Виберіть Інструменти > Web Developer > Web Design View. Ось що ви врешті-решт побачите:

Style Editor

І, нарешті, якщо ви часто працюєте з CSS, то вам обов'язково сподобається ця властивість. У версіях Firefox, наступних за 11, Style Editor став убудованим інструментом.

Ця властивість не менш цінна, ніж Web Design View. Воно дозволяє редагувати CSS, відразу бачити результат у браузері і зберігати зміни, які поширюються безпосередньо на Вихідний файл CSS.

Style Editor доступний у наступному меню: Інструменти > Web Developer > Style Editor.

І на закінчення

Аддони Firefox мають великою кількістюопцій, і ті, про які ми розповіли сьогодні, - це лише їхня невелика частина.