Як я можу налагоджувати свій код JavaScript? [зачинено]

Коли я виявляю, що у мене є проблематичний фрагмент коду, як я повинен зайнятися його налагодженням?

Firebug - один з найпопулярніших інструментів для цієї мети.

Усі сучасні браузери оснащені певною формою вбудованого додатка для налагодження JavaScript. Детальна інформація про них буде висвітлена на веб-сторінках відповідних технологій. Мої особисті переваги для налагодження JavaScript - це Firebug у Firefox. Я не кажу, що Firebug кращий за будь-який інший; це залежить від ваших особистих уподобань, і ви, ймовірно, все-таки повинні перевірити свій сайт у всіх браузерах (мій особистий перший вибір - це завжди Firebug).

Нижче я розповім про деякі рішення високого рівня, використовуючи Firebug як приклад :

Firefox

Firefox оснащений власним вбудованим інструментом налагодження JavaScript, але я рекомендую вам встановити додаток Firebug . Це надає кілька додаткових функцій на основі зручної базової версії. Я збираюся тут говорити лише про Firebug.

Після встановлення Firebug ви можете отримати доступ до неї, як показано нижче:

По-перше, якщо ви клацніть правою кнопкою миші на будь-якому елементі, ви можете перевірити елемент за допомогою Firebug :

Натиснувши на це, відкриється панель Firebug у нижній частині браузера:

Firebug надає кілька функцій, але те, що нас цікавить, це вкладка сценарію. При натисканні на вкладку сценарій відкриється це вікно:

Очевидно, для налагодження потрібно натиснути перезавантажити :

Тепер ви можете додати точки перерви , натиснувши рядок ліворуч від фрагмента коду JavaScript, до якого потрібно додати точку перерви:

Коли ваша точка розриву буде досягнута, вона буде виглядати приблизно так:

Ви також можете додавати змінні годинника і, як правило, робити все, що ви очікували, в сучасному інструменті налагодження.

Для отримання додаткової інформації про різні варіанти, пропоновані в Firebug, ознайомтеся з поширеними питаннями Firebug .

Хром

У Chrome також є своя вбудована опція налагодження JavaScript, яка працює дуже подібним чином, клацання правою кнопкою миші, перевірка елемента тощо . Погляньте на Інструменти для розробників Chrome . Я зазвичай знаходжу сліди стека в Chrome краще, ніж Firebug.

Internet Explorer

Якщо ви розробляєте в .NET і використовуєте Visual Studio за допомогою середовища веб-розробки, ви можете налагоджувати код JavaScript безпосередньо, розміщуючи точки прориву тощо. Ваш код JavaScript виглядає точно так само, як якщо б ви налагоджували код C # або VB.NET .

Якщо у вас цього немає, Internet Explorer також надає всі наведені вище інструменти. Прикро, замість того, щоб правою кнопкою миші перевірити елементи елементів Chrome або Firefox, ви отримуєте доступ до інструментів розробника, натискаючи F12 . Це питання охоплює більшість питань.

• Internet Explorer 8 (Інструменти для розробників - F12). Все інше - це другий тариф на землі Internet Explorer
• Firefox та Firebug . Натисніть F12для відображення.
• Safari (Показати рядок меню, Налаштування -> Додатково -> Показати Розвиток рядка меню)
• Консоль JavaScript Google Chrome ( F12або ( Ctrl+ Shift+ J)). Переважно той самий браузер, що і Safari, але Safari - краще IMHO.
• Opera ( Інструменти -> Додатково -> Інструменти для розробників )

Для налагодження коду JavaScript існує ключове слово налагодження в JavaScript. Поставити налагоджувач; фрагмент у вашому коді JavaScript. Він автоматично почне налагоджувати код JavaScript у цій точці.

Наприклад:

Припустимо, це ваш файл test.js

function func(){
    //Some stuff
    debugger;  //Debugging is automatically started from here
    //Some stuff
}
func();

• Коли браузер запускає веб-сторінку в опції розробника з увімкненим налагоджувачем, він автоматично починає налагодження з налагоджувача; бал.
• Там має бути відкрито вікно розробника браузера.

Я використовую старий хороший printfпідхід (старовинна техніка, яка буде добре працювати в будь-який час).

Подивіться на магію %o:

console.log("this is %o, event is %o, host is %s", this, e, location.host);

%oдамп, доступний для друку, вміст об'єкта JS з можливістю глибокого перегляду . %sпоказували просто для запису.

І це:

console.log("%s", new Error().stack);

дає вам схожий на Ява стек стека до точки new Error()виклику (включаючи шлях до файлу та номер рядка !!).

Як %oі new Error().stackдоступні в Chrome і Firefox.

За допомогою таких потужних інструментів ви робите припущення, що в вашому JS відбувається не так, ставите вихід налагодження (не забудьте обговорити ifзаяву, щоб зменшити кількість даних) і перевірити своє припущення. Виправте проблему або зробіть нове припущення або поставте більше налагодженого виводу для бітової проблеми.

Також для слідів стека використовуйте:

console.trace();

як кажуть консолі

Щасливий злом!

Почніть з Firebug та IE Debugger.

Будьте обережні з налагоджувачами в JavaScript. Час від часу вони впливатимуть на навколишнє середовище просто так, щоб викликати деякі помилки, які ви намагаєтеся налагодити.

Приклади:

Для Internet Explorer це, як правило, поступове уповільнення та є деяким видом витоку пам'яті. Через півтори години мені потрібно перезапустити. Здається, це досить регулярно.

Для Firebug, мабуть, минуло більше року, тож, можливо, це була і старша версія. Як результат, я не пам’ятаю конкретики, але в основному код працював неправильно, і після спроби налагодити його на деякий час я відключив Firebug і код працював нормально.

Хоча alert(msg);працює за тими сценаріями "я просто хочу дізнатися, що відбувається" ... кожен розробник стикався з тим випадком, коли опинишся у (дуже великому чи нескінченному) циклі, з якого не можеш вирватися.

Я б рекомендував під час розробки, якщо вам потрібна дуже налагоджена опція налагодження, скористайтеся параметром налагодження, який дозволяє вам вибухнути. (PS Opera, Safari? І Chrome? Всі вони доступні у своїх рідних діалогах)

//global flag
_debug = true;
function debug(msg){
  if(_debug){
    if(!confirm(msg + '\n\nPress Cancel to stop debugging.')){
      _debug = false;
    }
  }
}

З урахуванням вищесказаного ви можете потрапити у великий цикл налагодження спливаючих вікон, де натискання Enter/ Okдозволяє переходити через кожне повідомлення, але натискання Escape/ Cancelдозволяє вирватись добре.

Я використовую меню / консоль для розробників WebKit (Safari 4). Він майже ідентичний Firebug.

console.log()це новий чорний - набагато краще, ніж alert().

Мій перший крок - це завжди перевірити HTML і перевірити синтаксис з JSLint . Якщо у вас є чиста розмітка та дійсний код JavaScript, настав час Firebug або інший налагоджувач.

У Visual Studio 2008 є дуже хороші інструменти налагодження JavaScript. Ви можете опустити точку перерви в коді JavaScript свого клієнта і перейти через неї, використовуючи ті самі інструменти, що і код коду сервера. Не потрібно приєднуватися до процесу чи робити щось складне, щоб його активувати.

Я використовую кілька інструментів: Fiddler , Firebug та Visual Studio. Я чую, що в Internet Explorer 8 є вбудований налагоджувач.

Раніше я користувався Firebug , поки не вийшов Internet Explorer 8. Я не є великим шанувальником Internet Explorer, але, провівши деякий час із вбудованими інструментами для розробників, до яких входить дійсно приємний налагоджувач, видаватися безглуздо використовувати щось інше. Я маю накинути капелюх на Microsoft, вони зробили фантастичну роботу над цим інструментом.

Ви також можете перевірити YUI Logger . Все, що вам потрібно зробити, - це включити пару тегів у ваш HTML. Це корисне доповнення до Firebug, яке є більш-менш необхідним.

Я знайшов нову версію Internet Explorer 8 (натисніть F12) дуже добре для налагодження коду JavaScript.

Звичайно, Firebug добре, якщо ви використовуєте Firefox.

Крім використання налагоджувача JavaScript Visual Studio, я написав власну просту панель, яку я включаю до сторінки. Це просто як негайне вікно Visual Studio. Я можу змінити значення своїх змінних, викликати свої функції та побачити значення змінних. Він просто оцінює код, написаний у текстовому полі.

Я використовую Venkman , налагоджувач JavaScript для додатків XUL .

На додаток до Firebug та розширень для розробників, що належать до браузера, JetBrains WebStorm IDE поставляється з підтримкою віддаленої налагодження для Firefox та Chrome (необхідне розширення).

Також підтримує:

• coffescript: як налагодити coffeescript у node.js за допомогою 6-карт вихідних карт веб-шторму
• node.js

Можливість перевірити це безкоштовно: пробна версія 30 або використання версії раннього доступу .

Якщо ви використовуєте Visual Studio , просто поставте debugger;вище коду, який ви хочете налагодити. Під час виконання контроль на цьому місці буде призупинено, і ви можете налагоджувати крок за кроком звідти далі.

Як і у більшості відповідей, це насправді залежить: чого ви намагаєтеся досягти за допомогою налагодження? Основна розробка, виправлення проблем продуктивності? Для базового розвитку всі попередні відповіді більш ніж адекватні.

Для тестування продуктивності я рекомендую Firebug Можливість визначити, які методи є найдорожчими за часом, була неоціненною для ряду проектів, над якими я працював. Оскільки бібліотеки на стороні клієнта стають все більш надійними, і в цілому більше відповідальності покладається на сторону клієнта, такий тип налагодження та профілювання стане лише кориснішим.

API консолі Firebug: http://getfirebug.com/console.html

НатискаючиF12 веб-розробники, можна швидко налагодити JavaScript-код, не виходячи з браузера. Він вбудований у кожну інсталяцію Windows.

В Internet Explorer 11 , F12 інструменти надає засоби налагодження , такі як точки зупину, годинник і локальний перегляд змінного і консоль для повідомлень і негайного виконання коду.