Firebug - это плагин или расширение Firefox, созданный для тестирования кода и оптимизации при программировании веб-сайта. Это набор инструментов, с помощью которых вы можете анализировать скорость загрузки различных элементов, составляющих сеть, структуру сети. редактировать, находить ошибки, отлаживать исходный код и видеть, как работает код CSS, HTML или JavaScript, мы также можем редактировать или изменять любой аспект, и он будет сразу же просматриваться.
Firebug - отличное дополнение к другому плагину, такому как Web Developer . Его интерфейс прост в использовании и активируется только тогда, когда он нам нужен, он также бесплатный. Цель этого учебника - показать подробное и профессиональное использование Firebug, мы также можем увидеть другие учебники Firebug Tool для веб-разработчиков и изучить HTML с помощью Firebug.
Firebug является важным инструментом для тех, кто программирует или оптимизирует веб-сайты, будь то дизайнеры или веб-мастера. Таким образом, мы можем устранить ошибки программирования или дизайна, знать, как они работают и как устроена веб-страница, как все элементы ее составляют.
Устанавливаем плагин Firebug
Чтобы установить плагин, мы заходим на сайт загрузки Firebug и ищем последнюю версию инструмента для скачивания.
После установки перезагрузите компьютер и посмотрите, что добавляется при запуске сети, чтобы активировать его, мы щелкаем правой кнопкой мыши и ищем опцию Inspect element :
Как только мы активируем инструмент, давайте посмотрим на самые важные функции:
Вкладка консоли
Консоль Firebug - это место, где будут отображаться сообщения о том, что делает сеть, и об ошибках, которые происходят. Мы можем видеть сообщения о вызовах к функциям или страницам, которые веб делает во время нашего взаимодействия, показывая функции, вызовы обратного вызова или веб-сервисы и значения, которыми обмениваются во время выполнения, контролируя поток приложения.
Давайте посмотрим несколько примеров, зайдите на сайт demotores.com.ar, щелкните правой кнопкой мыши и активируйте Firebug .
На вкладке консоли при поиске по товарным знакам мы увидим, что в консоли показано, что в Ajax вызывается функция, которая выполняет запрос к базе данных с использованием php, возвращает модели в формате JSON и добавляет их в комбинированный список моделей Мы также можем видеть отправленные параметры, заголовок, возвращаемый get или post, и ответ. Давайте посмотрим на другой случай интернет-магазина.
В этом случае мы видим, что в консоли указано, что в папке / css / font отсутствуют три шрифта или шрифта, возможно, дизайнер забыл добавить их или изменить шрифты, и я не удаляю предыдущие ссылки.
Мы также можем увидеть, как при добавлении товара в корзину отправляются следующие параметры: количество товара и идентификатор товара.
Вызов Ajax-функции insertItem не может 1 Id 5850326Хотя мы видим, что он будет добавлен только в том случае, если мы вошли в систему, поскольку пользователи в противном случае запросят регистрацию.
Таким образом, мы можем увидеть, как приложение работает и какой параметр оно отправляет или получает и какие ответы оно предоставляет и каково было время ответа, например, для добавления продукта, который занял 335 миллисекунд.
Вкладка HTML
Это позволяет вам просматривать веб-структуру и редактировать код веб-страницы в режиме реального времени. Мы можем, например, изменить HTML- код веб-сайта или CSS-код и увидеть его напрямую, но эти изменения не будут постоянными. Например, если мы заходим на веб-сайт Ebay, мы можем использовать Firebug, чтобы изменить цвет блока веб-контента или основного.
Для этого на вкладке HTML мы ищем строку кода HTML, которая выглядит следующим образом:
На правой панели Style отобразится стиль CSS этого элемента, дважды щелкните строку, следующую за инструкцией width: 980px, и напишите следующее:
фон: красный нет повтор прокрутки 0 0;Когда вы закончите писать центральный блок, он станет красным, если мы обновим страницу, изменения будут потеряны и вернутся к своему первоначальному дизайну.
Мы также можем попробовать манипулировать html-кодом и css-кодом, чтобы изменить логотип Ebay на логотип Google, это делается путем изменения URL-адреса изображения логотипа Ebay на другой URL-адрес изображения, которое мы хотим.
Ищем строку кода в HTML и меняем ссылку src = "urlimagen ", затем корректируем размеры
Эта функция работает не для изменения всего проекта, а для проведения небольших тестов и визуализации изменений без доступа к редактору.
Вкладка CSS
На вкладке панели CSS отображаются все классы CSS и идентификаторы, которые мы создаем или которые мы анализируем в сети. На этой панели мы можем изменить наши классы и операторы CSS, как мы делали это ранее на вкладке «Стили» панели HTML. $config[ads_text5] not found
Вкладка «Сценарий»
Эта панель используется для отладки кода JavaScript или jQuery . Он показывает нам все, что делает скрипт, его переменные, его функции, отладку по точкам останова, пошаговое выполнение скрипта, экран для управления стеком переменных, и мы также можем видеть поведение функций.
Вкладка DOM
Панель DOM или Document Object Mode - это панель, которая получает информацию обо всех различных свойствах DOM и их методах. DOM является частью элементов веб-сайта и позволяет программистам получать доступ к веб-страницам XHTML и манипулировать ими.
JQuery предоставляет методы для эффективного управления DOM. Мы можем получить доступ к любому атрибуту любого элемента или извлечь код HTML из абзаца или блока. В дополнение к этому он предоставляет такие методы, как .attr (), .HTML () и .val (), которые действуют как сборщики и извлекают информацию из элементов DOM для последующего использования.
Давайте посмотрим в этом примере jQuery и DOM, как управлять div и извлекать текст:
Jquery и DOM $ (document) .ready (function () {$ ("# blocktext"). Click (function () {var text = $ (this) .html (); $ ("# content"). Text ( 'Извлеченный текст:' + текст);});}); #bloquetexto {margin: 10px; отступ: 10px; ширина: 150 пикселей; background: -webkit-linear-Gradient (# f7f7f7, # 8AC007); / * Для Safari 5.1 до 6.0 * / background: -o-linear-Gradient (# f7f7f7, # 8AC007); / * Для Opera с 11.1 по 12.0 * / background: -moz-linear-Gradient (# f7f7f7, # 8AC007); / * Для Firefox от 3.6 до 15 * / background: linear-Gradient (# f7f7f7, # 8AC007); / * Стандартный синтаксис * / курсор: указатель;}Извлечь текст из блока:
Это тестовый текст DOM
К тегам HTML обращаются класс или id css, а затем к свойству, которое может быть текстовым или каким-либо другим, позволяющим использовать jQuery и DOM.
Красная вкладка
Назначение панели «Сеть» состоит в том, чтобы отслеживать веб-трафик, загрузку и потребление каждого веб-запроса HTTP. Этот отчет состоит из списка записей, где каждая из них представляет запрос / ответ в оба конца. за страницу
В окне сетевой панели представлен список запросов по мере загрузки и использования сети. Каждый элемент в списке показывает информацию, созданную запросом, и графическую временную шкалу, показывает количество использованных байтов, время, необходимое для ответа, которое представляет фазы загрузки с течением времени. Ниже приведен список информации, которая отображается для каждого запроса: - Метод HTTP-запроса
- HTTP код ответа и описание (200, 301, 404 и т. Д.)
- Имя файла вызвано
- Доменное имя откуда ответ
- Размер ответа в байтах
- Время в миллисекундах, необходимое для ответа.
Мы также можем фильтровать, чтобы видеть такие части, как изображения или только файлы js или css, и таким образом определять, какой вес больше и как его оптимизировать.
- 0
СТАТЬИ