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

Оглавление:

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

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

Видео: Как использовать инструменты для веб-разработчиков Firefox
Видео: Можно ли сделать из Linux Mint Windows? - YouTube 2024, Марш
Anonim
Меню веб-разработчиков Firefox содержит инструменты для проверки страниц, выполнения произвольного кода JavaScript и просмотра HTTP-запросов и других сообщений. В Firefox 10 появился новый инструмент Inspector и обновленный Scratchpad.
Меню веб-разработчиков Firefox содержит инструменты для проверки страниц, выполнения произвольного кода JavaScript и просмотра HTTP-запросов и других сообщений. В Firefox 10 появился новый инструмент Inspector и обновленный Scratchpad.

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

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

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

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

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

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

HTML-инспектор

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

Image
Image

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

Image
Image

Инспектор CSS

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

Image
Image

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

Image
Image

Вы можете редактировать CSS элемента на лету с панели правил. Снимите флажок, чтобы отключить правило, щелкните текст, чтобы изменить правило, или добавьте свои собственные правила в элемент вверху панели. Здесь я добавил font-weight: bold; CSS, делая текст элемента жирным.

Image
Image

Скриншот JavaScript

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

Image
Image

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

Image
Image

Веб-консоль

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

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

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

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

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

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

Получить дополнительные инструменты

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

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

Рекомендуемые: