Меню веб-разработчика Firefox содержит инструменты для проверки страниц, выполнения произвольного кода JavaScript и просмотра HTTP-запросов и других сообщений. Firefox 10 добавил совершенно новый инструмент Inspector и обновил Scratchpad.
Новые функции Firefox для веб-разработчиков в сочетании с замечательными надстройками для веб-разработчиков, такими как Firebug и панель инструментов веб-разработчика, делают Firefox идеальным браузером для веб-разработчиков. Все инструменты доступны в разделе Web Developer в меню Firefox.
Инспектор страниц
Проверьте определенный элемент, щелкнув его правой кнопкой мыши и выбрав Осмотреть (или нажав Q ). Вы также можете запустить Инспектор из меню веб-разработчика.
Внизу экрана вы увидите панель инструментов, которую можно использовать для управления инспектором. Выбранный вами элемент будет выделен, а другие элементы на странице будут затемнены.
Если вы хотите выбрать новый элемент, щелкните значок Осмотреть на панели инструментов, наведите указатель мыши на страницу и щелкните свой элемент. Firefox выделяет элемент под курсором.
Вы можете перемещаться между родительскими и дочерними элементами, нажимая на хлебные крошки на панели инструментов.
Инспектор HTML
Щелкните значок HTML кнопку, чтобы просмотреть HTML-код текущего выбранного элемента.
Инспектор HTML позволяет разворачивать и сворачивать HTML-теги, что упрощает визуализацию с первого взгляда. Если вы хотите увидеть HTML-код страницы в виде плоского файла, вы можете выбрать Просмотреть исходный код страницы из меню веб-разработчика.
Инспектор CSS
Щелкните значок Стиль кнопку, чтобы увидеть правила CSS, примененные к выбранному элементу.
Также есть панель свойств CSS - переключитесь между ними, нажав кнопку Правила а также Свойства кнопки. Чтобы помочь вам найти определенные свойства, на панели свойств есть поле поиска.
Вы можете редактировать CSS элемента «на лету» на панели «Правила». Снимите любой из флажков, чтобы отключить правило, щелкните текст, чтобы изменить правило, или добавьте свои собственные правила к элементу в верхней части панели. Здесь я добавил font-weight: жирный; Правило CSS, делающее текст элемента жирным.
Блокнот JavaScript
Scratchpad также получил обновление Firefox 10 и теперь содержит подсветку синтаксиса. Вы можете ввести код JavaScript для запуска на текущей странице.
Как только вы это сделаете, нажмите Выполнить меню и выберите Запустить. Код запускается на текущей вкладке.
Веб-консоль
Веб-консоль заменяет старую консоль ошибок, которая устарела и будет удалена в будущей версии Firefox.
Консоль отображает четыре различных типа сообщений, видимость которых вы можете переключать: сетевые запросы, сообщения об ошибках CSS, сообщения об ошибках JavaScript и сообщения веб-разработчиков.
Что сказать веб-разработчику? Это сообщение, выводимое в объект window.console. Например, мы могли бы запустить window.console.log («Привет, мир»); Код JavaScript в Блокноте для вывода сообщения разработчика на консоль. Веб-разработчики могут интегрировать эти сообщения в свой код JavaScript, чтобы облегчить отладку.
Обновите страницу, и вы увидите сгенерированные сетевые запросы и другие сообщения.
Используйте поле поиска для фильтрации сообщений; щелкните запрос, если вы хотите увидеть более подробную информацию.
Начиная с Firefox 10, веб-консоль может работать в тандеме с Инспектором страниц. Переменная $ 0 представляет текущий выбранный объект в инспекторе. Так, например, если вы хотите скрыть текущий выбранный объект, вы можете запустить $ 0.style.display = "нет" в консоли.
Если вы хотите узнать больше об использовании консоли и ее встроенных функциях, ознакомьтесь с Страница веб-консоли на веб-сайте сети разработчиков Mozilla.
Получите больше инструментов
В Получите больше инструментов позволяет перейти к коллекции надстроек Toolbox Web Developer на веб-сайте надстроек Mozilla. Он содержит некоторые из лучшие дополнения для веб-разработчиков , включая Firebug и панель инструментов веб-разработчика.
Если вы используете Firefox несколько лет, возможно, вы помните DOM Inspector. С тех пор интегрированные инструменты разработчика Firefox прошли долгий путь.
