Просмотр исходного кода HTML и CSS веб-страницы с помощью Firebug в Firefox »WebNots

Firebug — это надстройка в браузере Firebox, используемая для устранения неполадок любой веб-страницы, просматривая исходный HTML, CSS и JavaScript. Это похоже на консоль разработчика с более полезными опциями для веб-мастеров для проверки отдельных элементов на веб-странице.

Как установить Firebug?

Откройте надстройки Firefox, выбрав из меню «Инструмент à Надстройки» или напрямую откройте URL-адрес «about: addons».

Просмотр параметров CSS в Firebug

Просмотр параметров CSS в Firebug

Найдите надстройку «Firebug» и нажмите кнопку установки, чтобы добавить ее в свой браузер Firefox.

Установка Firebug в Firefox

После добавления значок Firebug можно увидеть вместе с другими значками инструментов, как показано ниже:

Значок Firebug в Firefox

Просмотр исходного кода HTML и CSS веб-страницы с помощью Firebug

Откройте любую веб-страницу, которую вы хотите проанализировать, и щелкните значок Firebug, чтобы включить панель консоли разработчика Firebug.

Просмотр HTML и CSS элемента

  1. Щелкните кнопку «стрелка» и наведите указатель мыши на область содержимого. Каждый отдельный элемент будет выделен, и вы выберете тот, который хотите проанализировать или устранить неполадки.
  2. Весь HTML-код, относящийся к выбранному элементу, будет показан на вкладке «HTML».
  3. Весь код CSS, относящийся к выбранному элементу, будет показан на вкладке «Стили». Вы можете включить или отключить каждое свойство CSS и изменить значения в Интернете, чтобы увидеть эффект в реальном времени на элементе. Например, вы можете изменить размер шрифта, цвет, поля и отступы выбранного элемента, чтобы проверить выравнивание.

Просмотр полных стилей

Щелкните вкладку «CSS» (рядом с вкладкой «HTML») и выберите нужный CSS из раскрывающегося списка, чтобы просмотреть полные стили.

Просмотр файлов CSS в Firebug

Просмотр блочной модели CSS

Когда элемент выделен, полная модель блока CSS с полями и отступами будет показана на вкладке «Макет».

Просмотр блочной модели CSS в виде сетки

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

Проверка скорости загрузки страницы

Другое важное использование надстройки Firebug — это проверка времени загрузки HTML / CSS / JavaScript на вкладке «Сеть». Это поможет вам проанализировать, какая часть кода долго загружается, и предпринять соответствующие корректирующие действия.

Анализ времени загрузки страницы с помощью Firebug

Скачать Firebug и начните совершенствовать свои дизайнерские навыки уже сегодня.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *