Если вы следили за моим jQuery туториалов дальше, возможно, вы уже столкнулись с некоторыми проблемами в коде и не знаете, как их исправить. Когда мы сталкиваемся с нефункциональным фрагментом кода, очень трудно точно определить оскорбительную строку кода — вот где появляются инструменты для отладки и разработки.
Поэтому, прежде чем продолжить работу с более сложным кодом jQuery, я подумал, что мы рассмотрим инструменты, доступные в самом популярном в мире браузере — Chrome. Эти инструменты предназначены не только для Javascript — они также могут помочь вам отлаживать любые запросы AJAX, ресурсы, которые должен загружать ваш сайт, исследовать структуру DOM и целый ряд других вещей.
Нет любви к Firefox?
Хотя я специально собираюсь сослаться на инструменты разработчика Chrome сегодня, исходя из личных предпочтений и того факта, что они встроены в браузер, такая же функциональность доступна в плагине для Firefox под названием Firebug — интерфейс почти идентичен, поэтому это руководство должно применяться.
Запуск инструментов отладки
Это не может быть проще. В Chrome просто нажмите CTRL-SHIFT-I (CMD-ALT-I на Mac ) или щелкните правой кнопкой мыши в любом месте и выберите « Проверка элемента» . Вы должны увидеть что-то похожее на следующее:
Между этими двумя способами запуска консоли отладки есть небольшая разница. Сочетание клавиш просто откроет его в представлении по умолчанию, а Inspect Element сфокусирует дерево DOM на конкретном элементе, на котором вы щелкнули правой кнопкой мыши. Это подводит нас к первому удивительному функционалу, который мы получаем от этих инструментов.
Элементы и CSS
Вкладка « Элементы » разделена на две части; Слева находится полное дерево DOM. Это похоже на исходный код страницы, но явно более полезно.
Для начала, он был разобран в древовидную структуру, поэтому элементы можно свернуть и развернуть, что позволяет вам более явно исследовать дочерние элементы, родителей и братьев и сестер, чем просто читать исходный код. Во-вторых, он отражает любые динамические изменения на странице, вызванные Javascript. Например, если ваш jQuery должен был добавить класс к определенным элементам в pageLoad, вы увидите, что это отражено в дереве DOM, но не в источнике страницы.
Вы также можете редактировать DOM прямо здесь, просто дважды щелкнув по нему. Да, вы можете использовать это, чтобы поиграть и отредактировать веб-сайты, чтобы сделать глупые скриншоты, так что это отлично подходит для простых экспериментов.
Вот я возиться с домашней страницей новостей BBC …
В правой части вы можете просмотреть любые правила CSS, применяемые к текущему элементу, в том числе те, которые были переопределены правилами более высокого порядка (через них есть строка):
Вы можете настроить их или просто снять галочку с определенного правила, чтобы увидеть, что произойдет.
Развертывание «вычисленных стилей» покажет вам сводку каждого применяемого в настоящее время правила CSS. Номер строки и ссылка на файл в крайнем правом углу сразу перейдут к файлу ресурса, из которого он был загружен, хотя в некоторых случаях это может быть свернутый файл (поэтому все находится в одной строке).
Имейте в виду, что ни одно из внесенных здесь изменений не будет сохранено , поэтому при следующем обновлении страницы она вернется к нормальной работе. Если вы играете с CSS, обязательно запишите, что именно вы изменили, когда получите желаемый результат.
Консоль ошибок
Вторая наиболее важная вкладка, с которой я ежедневно использую эти фантастические инструменты, — это консоль ошибок и отладки, последняя вкладка в списке. Для начала, любые ошибки Javascript будут показаны здесь. Когда вы только начинаете с jQuery, вы можете обнаружить несколько экземпляров «$ is undefined» или «jQuery is undefined» — распространенная ошибка, которая означает, что вы забыли ссылку на jQuery в заголовке. Если вы видите ошибку, которую не можете расшифровать, просто скопируйте ее в окно поиска Google, и вы, скорее всего, найдете множество других людей, у которых была такая же проблема.
Ошибка также будет указывать на точную строку кода, в которой эта ошибка возникла впервые; нажмите на это, чтобы перейти прямо к этой строке и части кода. Если это в одном из ваших собственных сценариев, он может часто указывать вам прямо на нарушителя — если ошибка более расплывчата, это может указывать на исходный код jQuery, который полностью не читается.
Достаточно сказать, что консоль — это первое, что вы должны проверить, когда что-то не работает, так как, скорее всего, там напечатана ошибка.
Другое использование консоли — вывод собственных настраиваемых операторов отладки. Вы можете отправить немного текста, например, сообщить себе, что сценарий достиг определенной точки:
console.log ("Добрался до этого бита в коде, теперь пытаюсь ...");
Или вы можете вывести целые объекты и переменные так же просто, как:
console.log (MyVar);
Попробуйте сейчас, используя некоторые базовые jQuery, чтобы выбрать некоторые элементы, а затем выведите их, чтобы увидеть, как они выглядят. Вы можете использовать это, например, для проверки того, что нашли ваши селекторы.
сеть
Последний инструмент в наборе инструментов для разработчиков, который я хотел показать вам сегодня, — это вкладка « Сеть ». Для того, чтобы эта вкладка функционировала, вам нужно сосредоточиться на ней и обновить страницу — она будет затем фиксировать любые запросы, которые страница делает, для рекламы, Javascript, CSS, изображений — все — и даст вам разбивку информации об этом взаимодействии, в том числе:
- имя файла.
- тип запроса (GET или POST).
- Код ответа, который сервер отправил обратно (200 OK, 304 Не изменено и т. д.).
- размер файла.
- время.
Нажав на отдельный файл, вы увидите еще более подробную информацию о взаимодействии вашего браузера и сервера. Для меня это особенно полезно при отладке AJAX-запросов — вы можете точно видеть, какие данные были отправлены вместе с запросом, и полный вывод ответа, полученного принимающим серверным сценарием.
Резюме
Я надеюсь, что я вооружил начинающих разработчиков некоторыми дополнительными инструментами. Если бы вы сочли этот пост полезным, я был бы очень признателен, потому что в нем мне было тепло и нечетко, и я сказал, что вы хотите, чтобы я писал больше так. Я также приветствую комментарии и отзывы — в частности, какие другие инструменты вы используете в качестве веб-разработчика? Есть ли в вашем распоряжении арсенал плагинов Firefox?