Как отлаживать веб-приложения с помощью Firefox

1. Укрощение CSS: панель инструментов веб-разработчика
2. Держать JavaScript в очереди: Firebug
3. Погрузитесь в детали: живые HTTP-заголовки
4. Отладка IE: потерянная глава
5. Продолжай становиться лучше
6. Другие сообщения в этой серии

Отладка - одна из самых болезненных частей разработки веб-приложений. Вам приходится иметь дело с несоответствиями браузера с HTML, CSS и javascript, не говоря уже о сложности отладки самого javascript.

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

Укрощение CSS: панель инструментов веб-разработчика

Установить панель инструментов веб-разработчика , Просто сделай это ,

Отладка CSS может быть очень неприятной. Панель инструментов веб-разработчика позволяет вам просматривать и редактировать (в режиме реального времени) HTML и CSS вашей страницы, чтобы вы могли видеть, что происходит, когда вещи не совпадают. Он может сделать намного больше, но вот для чего я его использую:

Ctrl + Shift + F : показать информацию об элементе. Это ставит красную рамку под мышку. Наведите курсор на элемент, и его атрибуты появятся во всплывающем окне: имя, класс, размеры в пикселях, шрифты, все. Вот что вы можете сделать:

• Выясните, какие классы создают стили, которые вы видите
• Легко получить идентификатор div для использования с Firebug (ниже)
• Выясните, насколько велико изображение (высота и ширина пикселя)

Ctrl + Shift + E : редактировать CSS. Откроется вкладка боковой панели с текущими таблицами стилей. Вы можете редактировать любые атрибуты и видеть эффект в режиме реального времени (например, дать Google черный фон):

Мой любимый стиль CSS это border: 1px solid red;

Я делал следующие сотни раз в ходе веб-разработки:

• Найти div с помощью мыши (Ctrl + Shift + F)
• Получить его идентификатор
• Редактировать CSS (Ctrl + Shift + E)
• Поместите границу в div: #mydiv {border: 1px solid red;}
• Играйте с шириной, высотой, полями и отступами, пока они не выстроятся в линию
• Удалить границу

Но вместо того, чтобы удалить границу, поставьте перед собой «x»: «xborder: 1px solid red». CSS не будет действительным, поэтому граница игнорируется, но сохраняет стиль на случай, если вы захотите включить его позже.

Выделите весь текст в отредактированном файле CSS и вставьте его в настоящий файл CSS. Бэм, твои изменения теперь живы. Это почти противоположность создания файла в DreamWeaver и просмотра его в Firefox. Вы просматриваете живой файл в Firefox, вносите изменения и копируете их обратно в текстовый редактор. Я обнаружил, что это очень эффективно для редактирования CSS, вы избегаете постоянного переключения вперед-назад, потому что в Firefox теперь есть редактор CSS.

Бонус : ColorZilla выбирает цвета

ColorZilla дает вам пипетку, которая может найти шестнадцатеричное значение RGB (# 123456) всего на странице. Это замечательно при разработке, и вы хотите, чтобы цвет шрифта соответствовал цвету на вашей странице. Это намного быстрее, чем снимать скриншот и открывать его в Photoshop.

Держать JavaScript в очереди: Firebug

Firebug, как я тебя люблю (или получить букмарклет для других браузеров). Если вы любите себя, вы установите его немедленно и сэкономите бесчисленные часы разочарования.

Firebug может отлаживать javascript, исследовать DOM и делать гораздо больше (вы можете и должны прочитать все об этом). Вот как я это использую:

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

Вкладка «Консоль»: написание быстрых команд на языке JavaScript - в ней даже есть автозаполнение имен и свойств переменных. Поиграйте со своими функциями, измените атрибуты CSS, добавьте элементы на страницу - все, что нужно для тестирования.

Вкладка «Сценарий» (отладка): лучше всего. Особенность. Когда-либо. Нажмите на номер строки, чтобы установить точку останова (красная точка) в вашем JavaScript. Перезагрузите страницу, и она сломается (остановится), когда встретится со строкой.

На этом этапе вы можете переключиться на консоль для проверки и изменения переменных и выяснить, что происходит, когда ваш код не работает. Затем вы можете нажать синюю кнопку «Play» и продолжить работу приложения до следующей точки останова.

Чистая вкладка: найти скачать производительность вашей страницы ,

Кнопка «Профиль» (на вкладке «Консоль»): определение производительности вашей страницы во время выполнения. Нажмите «Профиль», чтобы начать сбор информации, выполните некоторые команды и нажмите «Стоп». Вы получите отчет о том, где ваш код тратит свое время. Если вы должны оптимизировать, оптимизируйте общий случай в первую очередь.

Если вы более визуальный человек, попробуйте этот потрясающий коллаж:

Не удовлетворены? Проверьте примеры на главной странице ,

Погрузитесь в детали: живые HTTP-заголовки

Иногда вам нужно погрузиться в суету. Какие заголовки кэша отправляет мой сайт? Мои страницы действительно закодированы в формате gzip?

Я знаю, что эти вопросы держат тебя ночью, вот что ты можешь сделать:

1. Установите Live HTTP заголовки
2. Откройте его (Инструменты> Живые заголовки HTTP)
3. Посетить страницу / пресс-обновление
4. радоваться

Когда вы посещаете страницу, вы увидите, как HTTP-заголовки пролетают, когда ваш браузер запрашивает элементы. Если элементы кэшируются, браузер может вообще не запрашивать их (круто!) Или может запросить элемент и получить ответ 304 «Не изменено» (чуть менее круто, вам все равно пришлось проверить с сервером). Я написал больше на поведение кэша и Live HTTP Headers - отличный способ узнать о HTTP-кешах (то, что каждый webdev должен интересовать по соображениям производительности).

Более того, вы можете «переиграть» любой заголовок, редактируя отправленные данные. Это полезно при тестировании или отладке кэша или кодировка gzip поведение.

Отладка IE: потерянная глава

К сожалению, в IE нет этих замечательных инструментов. Eсть скрипт отладчика , но это не держит свечу к Firebug. На самом деле, я часто прибегаю к бдительным заявлениям, которые заставляют вас содрогнуться после того, как вас избаловал Firebug.

Один менее болезненный метод, который я использую, это:

В вашем HTML: <div id = "log"> </ div> В вашем Javascript: function log (str) {var log = document.getElementById ("log") if (log) {// давайте будем в безопасности ... log.innerHTML + = str + "<br/>"; }} Использование: log («Привет!»); Необязательно: создайте поле eval: <input name = "eval" id = "eval" /> <a href = "javascript: void (0);" OnClick = "Журнал (Eval (document.getElementById ( 'Eval') значение).);"> идти </a>

Ничего особенного, просто простая функция регистрации, которая добавляет текст в div. Да, это жестоко, но это лучше, чем операторы alert (), особенно если у вас есть цикл (если вы не любите повторяющиеся стрессовые травмы или хотите заставить себя бояться диалоговых окон). Если кто-нибудь знает хороший способ отладки JavaScript в IE, я бы хотел знать. Инструменты, которые я пробовал, были очень неуклюжими и непоследовательными, и вырвали вас из браузера.

Я пытаюсь сделать 95% своей разработки в Firefox и отладить специфичные для IE проблемы (например, ошибочное поведение ) используя этот метод.

Продолжай становиться лучше

Панель инструментов веб-разработчика и Firebug могут сделать гораздо больше, чем я описал здесь. Как и правило 80/20, эти команды, которые я использую чаще всего, дают мне лучший результат. Потратьте несколько минут, чтобы изучить эти инструменты, и вы сэкономите часы в будущем. И вот еще несколько инструментов для веб-разработки ,

Эти инструменты могут не избавить вас от нервного подергивания в одном глазу от создания веб-приложений, и это нормально. Они уберегут вас от того, что вы получите то и другое.

Другие сообщения в этой серии

1. Как оптимизировать ваш сайт с помощью HTTP-кеширования
2. Как оптимизировать ваш сайт с помощью сжатия GZIP
3. Как отлаживать веб-приложения с помощью Firefox
4. Ускорьте время загрузки Javascript
5. Ускорьте свой Javascript, часть 2: Загружаемые примеры!

Похожие

Комментарии