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

Меню веб-розробника Firefox містить інструменти для перевірки сторінок, виконання довільного коду JavaScript і перегляду запитів HTTP та інших повідомлень. Firefox 10 додав новий інструмент інспектора та оновив Scratchpad.

Нові можливості веб-розробника Firefox у поєднанні з дивовижними розробниками веб-розробників, такими як Firebug і панель інструментів Web Developer, роблять Firefox ідеальним браузером для веб-розробників. Усі інструменти доступні під веб-розробником у меню Firefox.

Інспектор сторінки

Перевірте певний елемент, клацнувши його правою кнопкою миші та вибравши Перевірте (або натискання Q). Ви також можете запустити Інспектор з меню веб-розробника.

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

Якщо потрібно вибрати новий елемент, натисніть кнопку Перевірте на панелі інструментів, наведіть курсор миші на сторінку та натисніть елемент. Firefox виділяє елемент під курсором.

Ви можете переміщатися між батьківськими та дочірніми елементами, натискаючи на сухарі на панелі інструментів.

HTML інспектор

Натисніть кнопку HTML для перегляду HTML-коду поточного вибраного елемента.

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

Інспектор CSS

Натисніть кнопку Стиль , щоб побачити правила CSS, застосовані до вибраного елемента.

Також існує панель властивостей CSS - перемикання між двома кнопками Правила і Властивості кнопки. Щоб допомогти вам знайти конкретні властивості, панель властивостей містить вікно пошуку.

Ви можете редагувати CSS елемента на льоту з панелі "Правила". Зніміть прапорець, щоб вимкнути правило, клацніть текст, щоб змінити правило, або додайте власні правила до елемента у верхній частині області. Тут я додав font-weight: bold; Правило CSS, що робить текст елемента жирним.

Скрипт JavaScript

Scratchpad також побачив оновлення з Firefox 10 і тепер містить підсвічування синтаксису. Ви можете ввести код JavaScript для запуску на поточній сторінці.

Після цього натисніть кнопку Виконати і виберіть Запустити. Код виконується на поточній вкладці.

Веб-консоль

Веб-консоль замінює стару консоль помилок, яка застаріла і буде видалена у майбутній версії Firefox.

Консоль відображає чотири різні типи повідомлень, які можна перемикати видимість - запити мережі, повідомлення про помилки CSS, повідомлення про помилки JavaScript та повідомлення веб-розробника.

Що таке повідомлення веб-розробника? Це повідомлення надруковано на об'єкт window.console. Наприклад, ми можемо запустити window.console.log ("Вітаю Світ"); Код JavaScript на Scratchpad для друку повідомлення розробника на консоль. Веб-розробники можуть інтегрувати ці повідомлення у свій код JavaScript, щоб допомогти з налагодженням.

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

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

У Firefox 10 веб-консоль може працювати в парі з інспектором сторінки. Змінна $ 0 представляє поточний вибраний об'єкт у інспекторі. Так, наприклад, якщо ви хочете приховати поточно вибраний об'єкт, ви можете запустити його $ 0.style.display = ”none” в консолі.

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

Отримати більше інструментів

The Отримати більше інструментів параметр переходить до колекції додаткових компонентів Інструментів веб-розробника на веб-сайті додатків Mozilla. Він містить деякі з кращих доповнень для веб-розробників, включаючи Firebug та панель інструментів Web Developer.

Якщо ви використовуєте Firefox протягом декількох років, ви можете згадати інспектора DOM. Інтегровані засоби для розробників Firefox пройшли довгий шлях.