Домашняя » как » Как использовать инструменты веб-разработчика Firefox

    Как использовать инструменты веб-разработчика Firefox

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

    Новые функции веб-разработчика Firefox в сочетании с удивительными надстройками для веб-разработчиков, такими как Firebug и панель инструментов веб-разработчика, делают Firefox идеальным браузером для веб-разработчиков. Все инструменты доступны в разделе Веб-разработчик в меню Firefox..

    Инспектор страниц

    Осмотрите определенный элемент, щелкнув его правой кнопкой мыши и выбрав Осмотреть (или нажав Q). Вы также можете запустить Инспектор из меню веб-разработчика.

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

    Если вы хотите выбрать новый элемент, нажмите Осмотреть Нажмите кнопку на панели инструментов, наведите указатель мыши на страницу и щелкните элемент. Firefox выделяет элемент под вашим курсором.

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

    Инспектор HTML

    Нажмите на HTML кнопка для просмотра HTML-кода выбранного элемента.

    Инспектор HTML позволяет разворачивать и сворачивать теги HTML, упрощая визуализацию. Если вы хотите увидеть HTML-код страницы в плоском файле, вы можете выбрать Просмотр исходной страницы из меню веб-разработчика.

    Инспектор CSS

    Нажмите на Стиль кнопка, чтобы увидеть правила CSS, примененные к выбранному элементу.

    Также есть панель свойств CSS - переключайтесь между ними, нажимая правила а также свойства кнопок. Чтобы помочь вам найти конкретные свойства, панель свойств включает в себя окно поиска.

    Вы можете редактировать CSS элемента на лету с панели «Правила». Снимите все флажки, чтобы деактивировать правило, щелкните текст, чтобы изменить правило, или добавьте свои собственные правила к элементу в верхней части панели. Здесь я добавил вес шрифта: полужирный; Правило CSS, делая текст элемента жирным.

    JavaScript Scratchpad

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

    После этого нажмите казнить меню и выберите Бежать. Код запускается в текущей вкладке.

    Веб-консоль

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

    Консоль отображает четыре различных типа сообщений, которые вы можете переключать видимость - сетевые запросы, сообщения об ошибках CSS, сообщения об ошибках JavaScript и сообщения веб-разработчиков.

    Что такое сообщение для веб-разработчика? Это сообщение, напечатанное в объекте window.console. Например, мы могли бы запустить window.console.log («Hello World»); Код JavaScript в Scratchpad для вывода сообщения разработчика на консоль. Веб-разработчики могут интегрировать эти сообщения в свой код JavaScript, чтобы помочь с отладкой.

    Обновите страницу, и вы увидите сгенерированные сетевые запросы и другие сообщения.

    Используйте окно поиска для фильтрации сообщений; нажмите на запрос, если вы хотите увидеть более подробную информацию.

    Начиная с Firefox 10, веб-консоль может работать в паре с инспектором страниц. Переменная $ 0 представляет текущий выбранный объект в инспекторе. Так, например, если вы хотите скрыть текущий выбранный объект, вы можете запустить не $ 0.style.display =»ни один» в консоли.

    Если вы хотите узнать больше об использовании консоли и ее встроенных функций, посетите страницу веб-консоли на веб-сайте Mozilla Developer Network..

    Получить больше инструментов

    Получить больше инструментов Эта опция позволяет перейти в коллекцию дополнений Toolbox для веб-разработчика на веб-сайте дополнений Mozilla. Он содержит некоторые из лучших дополнений для веб-разработчиков, включая Firebug и панель инструментов веб-разработчика..


    Если вы использовали Firefox в течение нескольких лет, вы можете вспомнить DOM Inspector. Интегрированные инструменты разработчика Firefox прошли долгий путь с тех пор.