налагодження

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

Налагодження за допомогою відладчика;

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

Незважаючи на те, що це корисно для швидкого додавання точок зупину, не шукаючи потрібний рядок в отладчике, проте будьте обережні, щоб не відправити код з debugger; на робочий сайт.

Умовні точки зупину

Умовні точки зупину корисні тоді, коли вам потрібно зупинити скрипт в певному місці, але не кожен раз. Наприклад, якщо ви знаєте, що у вас в коді баг на останньому елементі, ви можете скористатися умовним коментарем, щоб перевірити, чи останній це елемент, перш ніж активувати відладчик. Точка зупину буде спрацьовувати, тільки коли умова істинна (TRUE).

Щоб створити умовну точку зупину в Chrome, створіть звичайну точку зупину, а потім натисніть правою кнопкою миші на цю точку і виберіть «Редагувати точку зупину», щоб додати умова.

В Firebug умовні точки зупину можна створити шляхом створення спочатку звичайної точки зупину, а потім натисканням правою кнопкою миші. З'явиться поле введення, що дозволяє додати умова.

У Firefox натисніть правою кнопкою миші на рядку JavaScript, на якій ви хочете перервати скрипт, і виберіть «Додати умовну точку зупину».

В Internet Explorer створіть звичайну точку зупину. Натисніть правою кнопкою миші на точці зупинки і виберіть «Условие ...».

В Opera створіть звичайну точку зупину, а потім правою кнопкою миші натисніть на цій точці і виберіть «Додати умова»

У Safari переконайтеся, що обидві панелі скрипта і «отладчиков» відкриті. Створіть точку зупину, вибравши рядок коду, яку ви хочете налагодити. Потім в панелі «Отладчик» правою кнопкою миші натисніть на створену точку зупину і виберіть «Редагувати точку зупину»

Точки зупинки в DOM

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

Точки зупинки в XHR

У Chrome є можливість розмістити точку зупину на XmlHttpRequest, що дозволяє налагоджувати AJAX-запити. Можна додати точку зупинки, перейшовши у вкладку «Ресурси» і вибравши «Точки зупинки XHR». Натисніть іконку з плюсик і введіть частину або весь URL, для якого ви бажаєте додати точку зупинки. Точка зупину спрацює в той момент, коли запит буде повернений, що дозволяє з'ясувати, які дані були повернуті і проаналізувати наступні за цим кроки скрипта.

Точка зупинки може бути відключена зняттям відповідного прапорця або видалена вибором «Видалити точку зупину» по правому кліку.

У firebug ви можете зупинити скрипт при XHR-запиті, або натиснувши кнопку «Зупиняти на наступному» у вкладці «Сеть», або вибравши пункт «Зупиняти при XHR» по правому кліку миші. Також є можливість за бажанням вибрати умови для точки зупинки.

Досліджуйте область видимості під час точки зупину

У Chrome, коли виконання Javascript зупинено під час точки зупину, ви можете досліджувати всі змінні і об'єкти в поточній області видимості і взаємодіяти з ними, або наводячи на них курсор, або використовуючи консоль.

Точно також це працює і в Firebug, але в ньому потрібно вибрати «Показати замикання» в в меню «DOM».

Це потужна функція дозволяє легко досліджувати змінні всередині замикань, якщо ви встановите точку зупину відповідним чином.

У Firebug є додаткова функція, завдяки якій не потрібно переривати скрипт в точці зупинки, щоб отримати доступ до невидимих ​​змінним в замиканні. Розглянемо цей код:

function Person (name) {this.introduce = function () {console.log ( "Hello, my name is% s", name); }} // create an instance of Person: var someone = new Person ( "Arthur"); // we call a closure! someone.introduce (); // prints "Hello, my name is Arthur"

Синтаксис для доступу до змінних в замиканні наступний: closure.% Variable. У наведеному вище прикладі ви отримуєте доступ до назви, використовуючи цей вислів: someone.introduce.% Name // ==> "Arthur". Зауважте, що можна змінити значення: someone.introduce.% Name = "Trillian"; > Someone.introduce (); // prints "Hello, myname is Trillian"

Той же синтаксис в Firebug працює всюди де необхідна функція JavaScript, наприклад, в «Панелі відстеження» і умовних точках зупинки.

відстеження змінних

Звичайний інструмент в .NET-розробці «Відстеження» дозволяє відстежувати список змінних з однієї зручної області, у верхній частині правого боку панелі у вкладці «скрипти». Відстеження змінних - це дійсно легко, просто введіть назву змінної і «відстеження» буде оперативно відображати всі його зміни.

Налагодження мініфіцірованного JavaScript

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

У Chrome і Safari просто виберіть вкладку «Скрипти», знайдіть відповідний файл, а потім натисніть іконку «{}» (відобразити в читається) розташовану в нижній панелі.

В Internet Explorer клацніть на іконку інструменту, вибравши з меню, що випадає скрипт, який дасть можливість форматувати JavaScript.

Opera автоматично призведе до якого читають вид мініфіцірованний JavaScript.

Використовуйте карти коду в JavaScript

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

Щоб створити карти коду JavaScript, скачайте Google Closure Compiler , Який створить для вас .map-файл.

Запустіть Closure Compiler за допомогою властивостей карт коду.

java -jar compiler.jar --js common.js --create_source_map ./common.js.map --source_map_format = V3 --js_output_file common.min.js

Додайте sourceMappingURL з назвою карти-файлу внизу мініфіцірованного JS-файлу.

// @ sourceMappingURL = common.js.map

В інструментах розробника Chrome відкрийте меню «Налаштування», далі у вкладці «Загальні» активізуйте «Включити карти коду».

Тепер при налагодженні JavaScrip ви можете використовувати мініфіцірованную версію, щоб побачити, що відбувається насправді.

Підміна рядки User-agent

Іноді може бути корисно «прикинутися» іншим браузером або пристроєм для налагодження, особливо якщо ви працюєте над сайтом, робота якого залежить від обумовленого пристрою.

У Chrome відкрийте панель «Налаштування» (іконка з шестерінки внизу праворуч) і виберіть опцію «Перевизначення», щоб знайти опцію «User Agent». Ви можете вибрати один з вбудованих варіантів або «Інші», щоб написати свій власний. Chrome люб'язно змінить розміри браузера при виборі мобільного або планшетного пристрою - якщо це являє для вас проблему, то приберіть прапорець з пункту «Метрики пристроїв» і ця проблема більше не буде вас турбувати.

В Opera клікніть на стрілку «Панелі» внизу зліва вікна браузера (над інструментами розробника). Виберіть «+», а потім «Настройки». Перейдіть у вкладку «Кнопки», виберіть «Параметри» і перетягніть меню, що випадає «Ідентифікувати як Opera» на панель інструментів браузера.

Safari пропонує можливість змінити «User Agent» в головному меню «Розробка». Тут ви знайдете список пристроїв за замовчуванням разом з варіантом «Інші ...», щоб додати ваше власне.

Емуляція сенсорного пристрою

У Chrome є можливість імітувати сенсорний пристрій і емулювати сенсорні події прямо в браузері. Щоб це зробити, відкрийте панель «Налаштування» (іконка з шестерінки справа внизу інструментів розробника Chrome), виберіть варіант «Перевизначення», а далі «Емуляція сенсорних подій»

У Chrome Canary це замінить курсор на коло, тому ви можете вказати не тільки режим, в якому ви перебуваєте, але також і задати розмір активної області для сенсорного кліка.

У Firefox режим адаптивного дизайну надає варіант для емуляції сенсорних подій.

перевизначення геолокації

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

Можна отримати довгота і широта місця розташування з Google Maps, включивши підказку LatLng на сторінці Google Maps Labs .

Перевизначення орієнтації пристрою

У Chrome можна емулювати зміни орієнтації пристрою в просторі. Відкрийте меню «Налаштування», натиснувши на іконку з шестерінки в нижньому правому куті інструментів розробника і виберіть вкладку «Відхилити». Далі встановіть прапорець біля пункту «Перевизначення орієнтації пристрою» і введіть в поля введення нових значень.

• Альфа позначає рух пристрою навколо осі z від 0 до 360 градусів
• Бета позначає рух пристрою навколо осі x від -180 до 180 градусів - рух взад і вперед.
• Гамма позначає рух пристрою навколо осі y від -90 до 90 - рух вліво і вправо.

Зміна значень викличе подія deviceorientation.

Налагодження елемента Canvas

У Chrome можна налагоджувати і профілювати елемент canvas прямо з інструментів розробника. Це можна використовувати для проектів на canvas як з 2D-, так і з WebGL-графікою.

Запуск фрагментів коду

Якщо вам доводиться запускати один і той же код раз по раз, Chrome Canary надає зручну область під назвою «Фрагменти», де ви можете зберігати код для запуску його з консолі.

Щоб знайти «Фрагменти», відкрийте вкладку «Код», і вони будуть знаходитися поруч з «Код» і «Скрипти для контенту». Клацніть правою кнопкою миші на порожню область, щоб створити новий фрагмент, напишіть код, а потім щоразу, коли вам потрібно буде його викликати, клікайте правою кнопкою миші і вибирайте «Запустити».

Інструмент тимчасового буфера має схожий функціонал і вбудований в Firefox, починаючи з 6-ї версії.

продуктивність

Поліпшите продуктивність вашого сайту або програми за допомогою цих секретів.

Відключити кеш браузера

Будь-браузер дозволяє відключити кеш сторінки, гарантуючи, що ваші ресурси щоразу приходять від сервера.

У Chrome знайти цю опцію можна в налаштуваннях іконки з шестерінки.

В Internet Explorer ця опція знаходиться в панелі меню під назвою «Кеш».

Щоб очистити кеш в Opera, клікніть вкладку «Мережа», виберіть середню вкладку «Параметри мережі» і далі перший варіант.

У Safari можна відключити кеш браузера в меню інструментів розробника в головному меню.

В Firebug відключити кеш в браузері можна в меню у вкладці «Сеть».

Щоб викликати діалогове вікно очищення кешу (або інших даних) в будь-якому браузер, натисніть Ctrl, Shift і Delete в Windows, і Shift, Cmd і Backspace в Mac.

Сортування мережевих запитів для пошуку вузьких місць

Вкладка «Мережа» показує ресурси в порядку запуску кожного мережевого запиту, клікнувши на стовпець у вкладці «Сеть», можна відсортувати дані за значенням стовпця.

У більшості браузерів є загальні поля в їх вкладках «Мережа». Можна сортувати запити за такими полями, як ім'я файлу; домен; тип ресурсу; стан HTTP; метод і розмір ресурсу.

В Internet Explorer ім'я файлу і домен об'єднані.

Chrome робить крок вперед і дозволяє клікнути на заголовок «Шкала часу», щоб подивитися додаткові параметри сортування.

• Час початку - сортування за замовчуванням, сортує мережеві запити по часу початку кожного з них.
• Час відгуку сортує по часу, який пройшов до отримання відгуку мережевого запиту.
• Час завершення сортує за часом, до якого запит завершився.
• Тривалість сортує за часом, зажадала на завершення запиту.
• Затримка - кількість часу, який буде потрібний браузеру для отримання відгуку після початкового запиту. Цей варіант дозволяє сортувати по затримці, щоб визначити, який ресурс вимагає самого довгого очікування відгуку. Затримка може залежати від відстані між користувачем і сервером, і її можна поліпшити вибором найближчої до користувача CDN. Об'єднуючи CSS- і JS-файли і використовуючи спрайт для зображень, можна зменшити кількість запитуваних ресурсів і тим самим зменшити загальну затримку.

Експорт шкали часу мережі в якості файлів з розширенням HAR

Файли HAR (архів HTTP) можуть використовуватися для різних методів аналізу продуктивності, а також для налагодження. Файли HAR можуть прикріплятися до помилки, отриманої в ході тестування - потім розробник може запустити дані HAR локально, щоб дізнатися, що пішло не так.

Ми можемо експортувати шкалу часу у вкладці «Сеть» в HAR з інструментів розробника Chrome, клацнувши правою кнопкою миші на висновок мережі і вибравши «Зберегти як HAR з вмістом».

Firebug вимагає установки окремого доповнення під назвою «Експорт мережі», створений провідним розробником Firebug і творцем формату HAR.

chromeHAR - це онлайн-інструмент, який надає такий же інтерфейс шкали часу, як і Chrome, і його можна використовувати для цих цілей.

Перевірка подій DOMContentLoad і Load

Шкала часу мережі для Chrome і Safari (і панель «Мережа» для Firebug) відображає інформацію, яка показує, наскільки швидко була завантажена сторінка, зокрема, відображає лінії для моментів спрацьовування обох подій DOMContentLoaded і load.

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

У Safari лінії відображаються як пунктирні замість суцільних.

Повторити XHR-запит

Якщо ви хочете перезапустити XHR-запит без перезавантаження або перезапуску сторінки, то клікніть правою кнопкою миші на ресурс і виберіть «Повторити XHR» ( «Переслати» в Firebug).

Виміряти продуктивність відтворення і FPS

Chrome надає тимчасову шкалу частоти кадрів, що дає можливість налагодження сайту в покадровому режимі.

Щоб створити тимчасову шкалу кадрів, спочатку відкрийте інструменти розробника в Chrome і виберіть вкладку «Шкала часу». У нижній частині вкладки знаходиться ряд іконок, в т.ч. чорне коло, який представляє «запис». Натисніть на цю кнопку один раз, щоб включити запис кадрів і вдруге для її виключення. Під час запису можна взаємодіяти зі сторінкою в звичайному порядку, а режим кадрів буде записувати всі кадри дії.

Кожна лінія на графіку шкали часу представляє один кадр анімації, який забарвлюється в такий спосіб: синій для задач завантаження, жовтий для задач роботи скрипта, фіолетовий для задач компоновки, а зелений для задач відтворення. Біла область означає час очікування.

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

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

При наведенні курсора на ряди заголовка в шкалі часу можна подивитися тривалість кадру; лічильник FPS; час навантаження процесора, а також сумарний час всіх дій в кожній кадрі.

При наведенні курсора на записи зліва, можна побачити розподіл завдань по тривалості, разом з іншою корисною інформацією. Частина сторінки, до якої відноситься подія, теж повинна підсвічуватися. Деякі завдання згруповані і їх можна досліджувати, натиснувши на стрілку на каскадної діаграмі.

Мобільні пристрої

Як налагодити сайт на мобільних і планшетних пристроях.

Використання інструментів розробника на iOS

Підключіть iOS-пристрій до доступного Mac. Відкрийте Safari в Mac і iOS-пристрої.

Перейдіть в меню «Розробка» в Safari і після першого роздільника меню повинно бути назва iOS-пристрої, до якого ви хочете отримати доступ. У підміню виберіть сторінку для налагодження.

В інструментах розробника Safari з'явиться спливаюче вікно, що дозволяє налагодити мобільний сайт, який відображається на пристрої.

Використання інструментів розробника в Android

Щоб налагоджувати сайти, в т.ч. з локального сервера, на Android-пристрої, можна скористатися інструментами розробника в Chrome Canary на Mac-e, що дозволяють отримати доступ на мобільному телефоні до розширеного набору функцій в інструментах розробника Chrome.

Насамперед необхідно встановити Chrome BETA на Android-пристрій.

Розширення

перевизначення геолокації

У Firefox можна перевизначати координати API геолокації, як і в Chrome. В цьому випадку вам доведеться покластися на розширення «Geolocater». Встановіть його з офіційного сайту розширень Mozilla .

Після установки, відкрийте меню «Інструменти», «Geolocater», «Управління». Тут ви можете безпосередньо додати «імітовану» геолокацію, скориставшись картою і пошуком місця. Після цього у вас буде можливість перевизначити геолокацію і навіть перемикатися між зумовленими геолокації. Можна переконатися, що це працює, зайшовши на сторінку геолокації на html5demos.com .

PS Це теж может буті цікаво: