Debugging JavaScript


2
Здравейте колеги, тъй като до сега с JavaScript не съм се занимавал ми е интересно как вие си дебъгвате кода и с какво IDE пишете. Аз си сложих WebStorm и NodeJS за да си изкарам конзолка на WebStorm, но там не съм сигурен дали мога да дебъгвам функции, като за момента не намерих от къде да ми step into в функцията. 
Отворих си днес и VS да разцъкам и там как е и intellisense в VS ми допада супер много повече, защото методите имат обяснение, for [tab tab] си работи forin [tab tab] и много други функционалности, но дебъгера ми остава в браузъра. 
Та.. идеята ми е да споделите какво ползвате и защо го ползвате както и ако може някой да ми каже как да си step into - на функциите ще съм му благодарен. С това инфо смятам, че бихме били доста полезни на хората, които сега са записали FrontEnd трак-а .
Поздрави



Отговори



1

За по-прости неща ползвам console.log(), в противен случай - debugger-a на WebStorm. :)

Ето го и step into-то:

WebStorm debugger


от dentia (12519 точки)


0
Благодаря, но при мен не работи в функция и shortkey-a ми е F7  | на Alt + Shift + F7 е "force step into" което ми влиза в node.js library :D

от a.sideriss (450 точки)


0

Аз също пиша на WebStorm и използвам Chrome DevTools, за да си дебъгвам директно в браузъра. Така ми е най-удобно. :)

Когато дебъгваш в WebStorm, трябва да натиснеш F7 (или синята, сочеща надолу и надясно стрелкичка), за да влезеш във функция /мисля обаче, че това зависи от keymap настройките, които се избират при първото стартиране/.

За да работи for [tab] в WebStorm-а, трябва да се добавят Live Templates. Можеш да видиш как става това тук.


от IlianaB (1137 точки)


0

 Пробвах да пиша с Уеб Сторм и дебъгера му в конзолата, но ми се стори неудобно.

Предпочитам Visual Studio, един празен html с референция на скрипт-а и дебъгер-а в Chrome.

В общия случай когато в практиката пишем клиентски JavaScript най-често се налаге дебъгване в Chrome, хубаво е да свикваме.


от ivan.mihov1 (4988 точки)


1

Аз пиша и дебъгвам на VS Code - обединява добрия intellisense на VS с бързо действие. Output-a ми го показва в конзолата на node.js. Освен това подкарва филми и музика :Д


от kon.simeonov (5238 точки)


0

Здравей!

Стандартните debug hotkeys в WebStorm са следните (default keymap):

Debug current file --> Shift + F9

Step Over --> F8

Step Into --> F7

Force Step Into --> Alt + Shift + F7

Step Out --> Shift + F8

За да можеш да навигираш нормално във функция в debug mode, трябва да сложиш отметки пред:

  • Do not step into library scripts
  • Do not step into scripts

Последните две можеш да откриеш в Settings --> Build, Execution, Deployment --> Debugger --> Stepping.


от lnikod4s (6538 точки)


0
Благодаря, сега ще ги чекна 
ПС: Отметките ги имам и пак не влиза в функциите :D

от a.sideriss (450 точки)

0
Пусни някакъв скрийншот със семпли функции, така че да се вижда къде си поставил breakpoints.

от lnikod4s (6538 точки)


4
Аз съм със Sublime и дебъгвам в Chrome. Tова видео ми беше страшно полезно и изчерпателно, след него спрях да се чудя кое как става - Debugging JavaScript - 0 to Heisenberg. Поздрави :)

от ElinaS (575 точки)


1
Видеото е наистина много добро, погледнах го набързо и смятам, че би било адски полезно на хората, които са се записали за FrontEnd трака :)

от a.sideriss (450 точки)


0

Аз използвам Webstorm.Дебъгвам като сложа 'whatches' на всички променливи които ме интерисуват и brakepoint na циклите които са ми важни.Дали е във функция или не , няма значение - винаги си влиза и проверява,аз слагам brakepoint-а на цикли,условни конструкций.Ако искам дебъгването да започне от трети индекс на  цикъла,ами просто го променям в цикъла от i=0 да е i=3,след което дебъгването се рестартира и натискам F6- настроил съм с този бутон да е step into.Това ми е достатъчно да си открия грешката,същото е като във Visual Studio .


от Pavel.Aslanov (428 точки)