info@webcook.pro Бесплатный анализ сайта

+7 (900) 241-99-93 Рабочий день: 10:00 - 21:00

Обзор использования DevTools для дебагинг JavaScript

Рейтинг:  0 / 5

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна
 

Эта фраза способна задеть за тонкие струны души любого разработчика, и тем более тестера: «Не кодь сегодня того, что не сможешь перекодить завтра». К счастью, есть инструменты, которые позволяют проводить дебагинг с легкостью. Время кодинга - время каджит! Итак, после того, как мы ознакомили вас с преимуществами сочетание представителей «семейства» JavaScript - Angular и Node.js - с Drupal, хотелось бы обратить ваше внимание на полезный инструмент для дебагинг (также известного как отладки или отладки) JavaScript. Это даже не инструмент, а набор инструментов под названием Chrome Dev Tools.

DevTools для дебагинг [removed] с чего начать

Chrome DevTools - один из самых современных «помощников» в поиске, анализе и исправлении багов. В него можно зайти следующими способами:

Кликнуть "More Tools" в правом верхнем меню и выбрать "Developer Tools".

Использовать клавишу F12 на клавиатуре.

Применить комбинации клавиш Ctrl + Shift + I или Cmd + Opt + I для Mac.

Кликнуть на нужный элемент правой мышкой и выбрать "Inspect element".

Хорошее начало! Теперь давайте рассмотрим хотя бы несколько возможностей DevTools для дебагинг JavaScript.

установление брейкпойнтив

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

Один из способов поставить брейкпойнт - найти нужный файл во вкладке "Sources", выбрать нужную строку кода в секции, содержащий код, и кликнуть левой мышкой на номер строки. Он должен изменить цвет.

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

Брейкпойнты, которые зависят от определенного условия - для этого кликните правой мышкой на номер строки и выберите «Edit breakpoint".

Брейкпойнты, которые зависят от определенного события. Вы можете выбрать эти события в Sources - Event Listener Breakpoints. Step over, step into, step out: уверенно шагаем по коду

Работая с брейкпойнтамы для дебагинг JavaScript, вы будете часто использовать удобную панель с интуитивно понятными иконками. С их помощью вы можете останавливать / восстанавливать дебагинг, делать шаги по коду, отключить брейкпойнты и останавливать выполнение кода в случае возникновения исключений.

Кнопка, напоминает все классические кнопки pause / play, предназначена для остановки / возобновления выполнения скрипта.

Кнопка с согнутой стрелой дает возможность переступить через следующий вызов функции (stepping over).

Кнопка со стрелой вниз ведет вас в следующий вызов функции (stepping into).

Кнопка со стрелой вверх выводит вас из текущей функции (stepping out).

Восстановление уменьшенного кода

От уменьшения кода JavaScript выигрывает скорость сайта или приложения, а вот дебагинг становится более проблемным. Решение есть! Если вы имеете дело с минификованим кодом, используйте опцию DevTools под названием "Pretty Print", которая восстановит его в обычный вид. Выберите файл и нажмите на иконку с фигурными скобками - {}.

Это были лишь несколько советов для вашего вдохновения. А на самом деле возможности JavaScript-дебагинг с DevTools намного больше. Желаем вам наслаждаться плодотворным процессом дебагинг, но не находить слишком много багов;) А если вам нужна помощь с дебагинг, или вы хотели бы крутой, мощный и быстрый приложение или сайт, доверьтесь нашим разработчикам!

Где мы находимся?

Мы находимся в городе Краснодаре. Связаться с нами можно любым удобным для Вас способом.

Наша почта:

info@webcook.pro

Телефон для связи:

+7 (900) 241-99-93

Время принятия заявок

Пн-Вс (10:00 - 20:00)
Без перерывов
© 2015-2017 Веб-студия «WebCook»