Признаюсь честно, я и сам достаточно долго просто выводил что-то в консоль, пытаясь понять, что пошло не так. Я понимал, что использовать breakpoint быстрее и продуктивнее, даёт больше возможностей, ну и в целом выглядит солиднее, но по-прежнему пользовался консолью.
Пример использования console.log для отладки.
В общем, эта статья должна облегчить ежедневную работу таким, как я, и тем, кто только постигает науку отладки JS. Здесь не будет хардкора, только самые основы.
Что такое breakpoint?
Во многих языках программирования, если не во всех, существует специальная команда, которая останавливает выполнение кода. При этом доступно состояние программы в момент остановки. Чуть более подробно можно почитать на Википедии.
Как можно увидеть на скриншоте или на работающем прототипе (только не забудьте открыть Chrome DevTools), приложение не просто открылось в нужный момент, но и подсветило значение переменных, с которыми можно работать, например, введя их в консоль или как-то поработав с их значениями.
Но у этого способа установки breakpoint есть один очевидный недостаток: каждый раз при попытке что-то отобразить придётся пересобирать приложение. Поэтому в Chrome DevTools есть другой способ.
Установка breakpoint при помощи Chrome DevTools.
Остановка в случае изменения DOM
Теперь давайте рассмотрим пример посложнее. Допустим, на нашей странице что-то происходит и появляется ошибка. Чтобы разобраться, необходимо в инспекторе выбрать DOM-узел, за которым вы хотите наблюдать, и после этого кликнуть правой кнопкой «Break on => Subtree modification». После чего код остановится и подсветит нужную нам функцию.
Установка breakpoint на изменение DOM-элемента.
Типы точек остановки на DOM-узлах:
Остановка после XHR/Fetch-ответа
Если что-то идет не так после ответа от сервера, то на этот случай есть инструмент для создания точки остановки. Перейдите во вкладку Sources и в правой колонке в раскрывающемся списке “XHR/Fetch breakpoint” добавьте новое условие для остановки.
Установка breakpoint на XHR/Fetch-событие.
События с условиями
Чтобы не останавливать код каждый раз, когда интерпретатор доходит до точки остановки, можно добавить условия срабатывания breakpoint. Это чрезвычайно удобно делать в цикле.
Добавление условия к срабатыванию точки остановки.
А что дальше?
Прелесть использования точки остановки вместо console.log заключается не только в том, что можно получить исчерпывающую информацию о состоянии в месте остановки, но и в том, что исполнение программы можно продолжить по шагам. Для этого необходимо использовать правую панель во вкладке Sources.
Панель управления отладкой.
При помощи этой панели можно:
Заключение
На этом инструменты отладки в Chrome DevTools не заканчиваются, это только вершина айсберга. Несмотря на то, что поначалу использовать breakpoint кажется сложнее, чем вывод информации в консоль, в долгосрочной перспективе это сэкономит много времени и откроет большие возможности.
Если тема работы с Chrome DevTools будет интересна, я могу написать ещё одну статью с более хардкорными практиками и методами. А на этом у меня всё, спасибо.
Режим разработчика в Google Chrome
Современный браузер Google Chrome по умолчанию включает в себя много разных удобных функций, которые будут полезны веб-разработчику. С их помощью отладка кода становится более удобной, а скорость разработки увеличивается. В этой статье мы расскажем, как включить режим разработчика Google Chrome, а также об основных функциях и возможностях.
Зачем нужен режим разработчика в Google Chrome
Режим разработчика нужен следующей категории лиц:
Это часть браузера доступна из коробки и ничего кроме самого браузера устанавливать не нужно.
Как открыть Chrome DevTools
Открывается «Инструмент разработчика» через главное меню Хрома.
Основные кнопки меню и навигации
Инструменты разработчика открываются непосредственно на той странице, откуда вы их вызвали. Окно содержит в себе достаточно много элементов:
Search
Здесь есть дополнительные инструменты и полезные шорткаты, а также настройки и документация. Возле кнопки меню отображаются иконки предупреждения и ошибок, если они есть на странице. При клике на неё можно перейти к просмотру подробностей.
Адаптив
Кнопка активации инструмента для просмотра сайтов в различных разрешениях находится в левом верхнем углу. Это очень важный инструмент, который очень удобен при разработке адаптивных интерфейсов, мобильных версий сайтов, а также для тестирования интерфейсов в разных разрешениях мониторов и при разных ориентациях устройств.
После того как вы активировали этот режим вверху вы можете выбрать тип устройства, который вы хотите эмулировать. Здесь представлены несколько моделей Nexus, IPhone и IPod. Выбрав устройство, вы увидите его разрешение экрана, физический его размер относительно размера вашего экрана, а также появится возможность сменить ориентацию устройства с вертикальной на горизонтальную и наоборот.
В самом низу этого выпадающего списка есть пункт Edit, нажав на который мы попадаем в меню редактирования устройств, где мы можем добавить другие заготовленные устройства или удалить любое из уже выбранных.
Если вам не подходят варианты предложенных устройств, то вы можете выбрать вариант Responsive и задать разрешение экрана вручную.
Вкладки инструмента разработчика
Здесь очень много вкладок, каждая из которых отвечает за тот или иной инструмент или помогает в работе над конкретным участком кода. Вкладки можно перемещать относительно друг друга. Различные расширения для браузера могут добавлять сюда новые вкладки.
Elements
Первая вкладка представляет из себя то что называется «дом дерева»:
Кликом по ноде правой кнопкой мыши на теговой части вызывается контекстное меню, где можно:
Скопировать:
Можно принудительно перевести ноду в различные режимы:
Scroll into view – переход к ноде в области просмотра. Удобная штука особенно когда разбираешься в чужом коде.
Поставить breakpoint (Break on) на события:
Последний пункт меню позволяет создать точку остановки внутри DOM, что часто является удобной функцией при отладке.
В нижней части окна разработчика есть что-то вроде хлебных крошек. Это строка с полным селектором для выбранной ноды со всеми промежуточными элементами, начиная от корневого HTML.
Кнопка со стрелкой в левом верхнем углу позволяет выбрать любой элемент в области просмотра страницы. После активации этой кнопки и при наведении на любой элемент он подсвечивается, над ним появляется всплывающее окно с подробной информацией о данном объекте. Также он будет подсвечен в древовидной структуре кода.
В правой части вкладки мы видим каскад CSS свойств выбранного элемента. В самом низу вычисленная блочная модель элемента: position, margin, border, padding и внутренняя концертная область. Выше всегда расположены псевдоэлементы after и before, если они есть.
Выше начинается сам каскад. Стили наследуются от элементов верхнего уровня, присвоенным к выделенной ноде. То есть по принципу – от общего к частному. Здесь же можно отследить какие свойства перетираются, какие свойства неприменимы к этому элементу или вовсе написаны с ошибкой.
Справа от описания стилей можно видеть название файла, откуда взяты эти стили. Кликаем и попадаем в место и файл, в котором определено само стилевое правило.
В некоторых случаях можно здесь можно заметить строку user agent stylesheet, это стили браузера по умолчанию. Они наименее приоритетные и переопределить их можно практически любым способом задания CSS правил.
В самом верху секция element.style позволяет нам удобным образом определить содержимое элемента style текущего выделенного элемента.
Также здесь есть дополнительные функции:
Computed
Следующая вкладка Computed на этой панели показывает полную вычисленную блочную модель и стили для текущего выделенного элемента.
DOM Breakpoints
Вкладка DOM Breakpoints — это описанные выше брейкпоинты на модификацию или удаление ноды. Если поставить брейкпоинт описанным ранее способом здесь он отобразиться. Здесь собраны все брейкпоинты для всех нод. Ими можно удобно управлять: включать/выключать без удаления.
Это работает следующим образом. Когда условия указанного брейкпоинта выполняется, то браузер останавливает выполнение кода в том месте, которое было инициатором.
Properties
На вкладке Properties вы можете ознакомиться со всеми доступными свойствами текущего HTML элемента DOM дерева, просмотреть их значения и зависимости.
Network
Следующая вкладка, которую мы рассмотрим называется Network. Функции доступные на этой вкладке очень полезны, так как позволяют отследить загрузку страницы и всех файлов, которые данная страница подтягивает при загрузке.
Давайте разберем весь функционал по порядку:
При загрузке страницы, как правило, будут загружены и другие файлы — это файлы стилей, скрипты, изображения, шрифты и различные другие файлы. Информацию о них мы можем видеть в данной таблице.
Здесь будет отображена следующая информация:
Ниже таблицы строка, которая оповещает нас о общем количестве запросов, сделанных к серверу. Общем количестве переданных данных, а также общее время загрузки всех файлов.
Следом отображаются две очень важные цифры DOMContentLoaded — это время за которое был загружен весь html и построено DOM дерево страницы. А вторая цифра, это загрузка всех необходимых ресурсов, влияющих на отображение страницы.
Сразу выше таблицы расположен фильтр, где можно выполнять фильтрацию по имени или же по регулярному выражению. Или здесь же выбрать из уже заготовленных фильтров по типам данных и отслеживать информацию конкретно по ним.
Еще выше над фильтрами есть более интересные и полезные функции.
В конце панели есть кнопка в виде шестеренки, где можно активировать дополнительные инструменты, такие как: запись скриншотов, дополнительная информация в файлах, общий таймлайн страницы, на котором вы можете выделить необходимый участок и в таблице останутся только те файлы, которые были загружены в этот промежуток времени.
Теперь рассмотрим две опции, первая называется Preserve log, эта опция отвечает за очистку информации в случае, если мы переходим на другую страницу. Иногда имеет смысл не очищать историю при переходе на другую страницу для того чтобы увидеть какие общие файлы используют эти две страницы а какие файлы были загружены впервые.
Вторая опция называется Disable cache, она указывает использовать или не использовать кэш браузера, это зачастую нужно чтобы отследить скорость загрузки страницы, когда она впервые загружается пользователем, а после отследить её скорость при загрузке с использованием кэша.
Опция которую мы рассмотрим далее тоже очень важна, так как она позволяет имитировать скорость соединения пользователя. Допустим вы можете выставить скорость соединения сети 3G и, перезагрузив вашу страницу, наблюдать с какой скоростью ваша страница будет загружаться на мобильных устройствах пользователей. Это очень важно с точки зрения построения отображения, так как на этапах медленной загрузки пользователь может увидеть вашу страницу в таком виде, в котором вы бы не хотели её показывать. Это будет очередной подсказкой вам к тому что стоит оптимизировать, и что именно тормозит загрузку вашей страницы.
Также рядом с выбором скорости соединения есть опция Offline, которая имитирует отключение интернета для того чтобы вы могли проверить как поведет себя ваш сайт в случае потери соединения, какие файлы будут подгружены из кэша и что увидит пользователь.
Console
Консоль, это один из основных инструментов разработчика. В нее могут выводиться важные сообщения о работе вашего кода, ошибки, а также логи прописанные разработчиком. Прямо здесь можно выполнять JavaScript код, и пользоваться другими её скрытыми возможностями.
Рассмотрим более подробно функции консоли разработчика:
Чтобы очистить консоль нужно кликнуть правой клавишей в консоли и выбрать пункт clear console, или вызвать метод clear() прямо в консоли, или из кода, использовав для этого console.clear();
Пункт Log XMLHttpRequest в контекстном меню — это функция включает логирование всех XHR запросов в консоли.
У консоли есть много различных методов, мы познакомились с одним из них который называется clear(). Так же существуют другие методы:
В верхней части консоли есть возможность фильтровать вывод консоли. Вы можете написать свой фильтр, используя регулярные выражения или же использовать заготовленные, которые отфильтруют отельно только ошибки, предупреждения, логи и другие типы вывода в консоль.
Source
Фактически на этой вкладке мы можем просмотреть все файлы, которые подключены к нашей странице и посмотреть их содержимое.
Также здесь существует очень удобная возможность создавать точки остановки, так называемые брейкпоинты. Мы можем выбрать определенную строку, отметить её как точку остановки и тогда при исполнении всего кода, выполнение остановится именно на этой строке.
Использовать такие точки очень удобно при отладке кода. Более того их можно создавать внутри из кода. Достаточно в том месте, где вы хотите создать точку остановки, вставить команду debugger. После того как срабатывает точка остановки, исполнение кода в браузере замирает, и появляется возможность продолжить выполнение кода, нажав на стрелку. Выполнение продолжится до следующей точки, если таковой нет, то код выполнится до конца.
Справа в этой вкладке вы можете видеть кнопки навигации, с помощью которых как раз таки можно останавливать исполнение, переключаться к следующей точке или же отключить все существующие точки.
Preferences
На этой вкладке дублируется та же строка Timeline, которую мы видели на вкладке Network, однако в более развернутом варианте, что повышает степень удобства использования этого инструмента.
Также здесь можно отслеживать таймлайн как сети, так и выполнения джаваскрипт кода и загрузку памяти. После того как произойдет запись, вы получите подробные данные о выполнении вашего кода. Сможете ознакомиться с временем исполнения каждого этапа работы кода, а также выделить конкретный промежуток во временной шкале и посмотреть какие процессы происходили в этот момент.
Memory
Внутри вкладки Memory неё есть несколько профайлеров, с их помощью можно отслеживать нагрузку, которую оказывает выполнение кода на ваш компьютер:
Их полезно использовать для того, чтобы определить какие части вашего кода оказывают наибольшую нагрузку на устройство в котором он исполняется, и какие из них возможно нуждаются в оптимизации.
Application
На вкладке Application мы можем получить информацию о некоторых хранилищах, которые нам доступны. А именно: это Local Storage, заглянув в который мы можем посмотреть какие переменные хранит страница и их значения. Также Session Storage в котором также хранятся данные по принципу ключ — значение, как правило это данные о сессии пользователя. Здесь же у нас хранилище в котором хранятся Куки, а также Cache Storage.
Если вы используете какие-то из этих хранилищ, и содержимое вы всегда можете удобно просмотреть на данной вкладке.
Security
На этой вкладке вы можете ознакомиться с протоколом безопасности, если таковой имеется, а также просмотреть данные о сертификате данного подключения.
Audits
Это полезная вкладка которая делает за вас много полезных дел, а именно определяет некоторые проблемы вашего сайта. Проводятся проверки на то включено ли сжатие, включено ли кеширование, также определяются неиспользуемые CSS правила, что означает, что вы подтягиваете какую-то часть ненужного кода.
С помощью этого инструмента можно провести аудит вашей страницы и он вам укажет проблемные места, которые влияют на скорость его работы.
Вся правда о Chrome (и не только) Web Inspector. Часть 1
Я постараюсь сделать самое полное и подробное описание возможностей Web Inspector, на русском языке.
В первой серии мы залезем в настройки, посмотрим, что умеет консоль и поиграемся с панелью «Elements».
Так как Web-Inspector не переведен на Русский, я буду сохранять оригинальные названия.
В качестве бонуса, приложу скриншот одной и самых первых версий, из далекого 2006го.
Какой версией пользоваться?
Почти все описанное здесь, тем не менее, будет работать и в других версиях Web Inspector.
Запускаем Web Inspector
Есть несколько способов открыть Web Inspector:
Вы можете открыть Web-Inspector для Web Inspector, для этого нужно открыть его в отдельной окошке:
, а затем запустить его снова одним из приведеннм выше способов.
Настраиваем Web Inspector
Экспериментальные функции
Все новые инструменты сначала попадают в «экспериментальные функции». Чтобы включить их, зайдите в «about:flags», найдите там опцию Enable Developer Tools experiments (Включить экспериментальные инструменты разработчика).
После этого перезапустите браузер.
Будьте осторожны с экспериментальными функциями, они могут работать не так как ожидается и вызывать ошибки.
Я буду рассматривать экспериментальные функции в одной из следующих статей.
Настройки
Давайте откроем диалог настроек нажав на эту кнопку , в правом нижнем углу и посмотрим, что там есть интересного.
Dock to the right
Закрепляет Web Inspector в правой части страницы.
На больших мониторах это позволяет лучше использовать горизонтальное пространство, к тому же, позволяет легко менять широту видимой области браузера, что полезно для быстрого тестирования media queries.
По умолчанию Web Inspector снизу. Можно вытащить его в отдельное окошко, нажав на
Disable Cache
Выключает кэш. Весьма полезная опция, при отладке скриптов и стилей.
Еще можно очистить кэш из панели «Network», нажав там правой кнопкой и выбрав «Clear Browser Cache»
Disable JavaScript
Override device metrics
Более серьезный способ, для тестирования media queries (англ.). Позволяет задать ширину и высоту экрана, а так же маштаб шрифта. В идеале хотелось бы несколько готовых пресетов для популярных мобильных платформ.
Emulate touch events
Позволяет эмулировать touch-события. Полезно, для тестирования мобильных приложений.
Enable source maps
Представьте себе, что можно было бы выкладывать на сайт минифицированную/собранную из частей/скомпилированную версию скрипта, а браузер сам бы мог найти исходник для отладки.
Log XMLHttpRequests
Preserve log upon navigation
Если выбрана эта опция, содержимое консоли будет сохранено даже при обновлении страницы.
Горячие клавиши
Чтобы посмотреть список горячих клавиш, откройте любую вкладку кроме консоли и нажмите там » ? » (В английской раскладке).
Обратите внимание, что если окошко не влезает полностью, оно обрезается и может скрыть часть информации.
Здесь все довольно очевидно, важно знать, что практически везде работает автодополнение.
Консоль
Что показывать
Можно выбрать, что именно хотим видеть в консоли с помощью этой панели снизу:
Избавляемся от сообщений об ошибках в расширениях
Если у вас установлены расширения, содержащие ошибки, эти ошибки будут постоянно отображаться в консоли.
К сожалению, в данный момент нет простого способа их отключить. В качестве временных мер можно:
Изменяем размер шрифта
Почему-то CTRL+Scroll в консоли не работает.
Зато можно использовать CTRL + для увеличения шрифта, CTRL — для уменьшения и
CTRL + 0 для изначального масштаба.
У меня это работает только в Chrome Canary build, в стабильной версии увеличивается только сам документ.
Команды консоли
Очищаем консоль
Есть несколько способов очистить консоль:
Взаимодействие со вкладкой «Elements»
Выбираем элементы
Изучаем объекты
Есть несколько функций, ползволяющих узнать больше, об элементе. В основном они дублируют функционал панелей из вкладки «Elements».
Следим за событиями
Можно следить за всем, что происходит с элементом, с помощью функции
С помощью второго аргумента можно выбрать тип событий, за которыми вы ходите следить:
Копируем информацию в буфер обмена
Вкладка «Elements»
Эта панель содержит в себе все DOM-Дерево нашей страницы, обновляющееся в режиме реального времени.
Каждый раз, когда на странице изменяются элементы, они обновляются в дереве и наоборот.
Если вы хотите выбрать какой-то элемент из документа, нажмите на кнопку с лупой внизу или CTRL+SHIFT+C и выберите любой элемент.
При наведении мышкой будут показан CSS пусть до элемента, его размеры и отступы.
Путь до элемента
В самом низу панели можно увидеть путь до Элемента. Можно выбрать любой родительский элемент, кликнув на него.
Работа с деревом
Передвигаться по дереву можно стрелками (если вы в другой секции, то можно вернуть фокус, с помощью CTRL+ вверх/вниз ).
Редактирование
Drag&Drop
Можно перетащить элементы мышкой из одного контейнера в другой и они автоматически перенесутся в самом документе.
Также любой элемент можно перетащить в ваш текстовый редактор. Правда при этом скопируется только код самого элемента, все что в него вложено потеряется.
Контекстное меню
Подробная информация
Выделив элемент, можно посмотреть информацию про него, в панели справа.
Computed style
Styles
Можно выключить любое выражение, убрав галку из чекбокса слева.
Раздел element.style показывает стили прописанные в style атрибуте в HTML коде документа,
а раздел Matched CSS Rules показывают все селекторы, заданные с CSS файлах и совпавшие с выбранным элементом.
Добавление правил и выражений
Вы можете добавить свой селектор, нажав на кнопку , а удалить потом не сможете.
Можно добавить новое выражение в уже имеющийся селектор, нажав на закрывающую фигурную скобку правила (или начав изменять последнее выражение нажать Tab ).
Псевдоклассы
Отображение цветов
Нажав на кнопку с шестеренкой , As authored — покажет цвета в том формате котором они были заданы.
Изменение числовых значений
Числовые значения можно изменять с помощью клавиатуры.
Metrics
Здесь можно увидеть размеры и отступы элемента (А если для элемента задан position, то и положение).
Вы можете изменить здесь любое значение, нажав на него дважды.
Интересно, что все размеры показываются в пикселях, даже если вы пропишете размеры в EM, они будут переведены в пиксели автоматически.
Properties
В этом разделе показаны все свойства объекта, что, наверное, полезно в образовательных целях. Их так же можно менять, но мне это пока ни разу не пригодилось
DOM-Breakpoints
Здесь список установленных Dom-Брейкпоинтов.Можно быстро найти элемент, кликнув на название, выключить брейкпоинт, убрав галку, удалить брейкпоинт, нажав на него правой кнопкой мыши.
DOM-Брейкпоинты позволяют отслеживать изменения, происходящие с DOM-элементом или его атрибутами. Мы будем разбираться с ними подробнее, когда доберемся до отладки скриптов.
Сохранение изменений
Web Inspector позволяет нам легко модифицировать CSS код. К сожалению, простого способа, позволяющегобыстро сохранить изменения не существует. Есть несколько вариантов
Что дальше?
Немного полезных ссылок
В следующий серии
Я часто использую Web Inspector в работе, но могут быть вещи, которые я не знаю, или забыл упомянуть, поэтому я буду рад любым исправлениям или дополнениям.
