У цьому Посібнику ти отримаєш вичерпний огляд використання Фрагментів коду та функції вимірювання часу всередині Інструментів розробника Chrome. Фрагменти дозволяють створювати повторно використовувані фрагменти коду, які можуть бути корисні при програмуванні та тестуванні твого коду. Крім того, ми покажемо тобі, як вимірювати час виконання JavaScript-коду, щоб оптимізувати продуктивність своїх застосунків. Такі функції можуть бути вирішальними для отримання кращого уявлення про твоє середовище розробки на JavaScript.
Головні висновки
- Фрагменти - це повторно використовувані фрагменти коду, які зберігаються в Інструментах розробника Chrome.
- Ти можеш створювати, редагувати та виконувати фрагменти для автоматизації часто виконуваних завдань.
- За допомогою функцій console.time() та console.timeEnd() ти можеш вимірювати час виконання фрагментів коду.
- Правильна обробка викликів time та time end є вирішальною для отримання коректних значень вимірів.
Посібник з покроковими інструкціями
Створення та управління фрагментами
Спочатку ми розглянемо, як ти можеш створювати та управляти фрагментами в Інструментах розробника Chrome.
Щоб отримати доступ до фрагментів, відкрий Інструменти розробника Chrome, клацни на вкладку «Джерела» та знайди панель Фрагменти. Ти можеш викликати панель Фрагментів або відповідно настроїти вигляд або за допомогою меню.
Тут ти можеш створювати нові фрагменти. Клацни на «Новий фрагмент», щоб створити новий фрагмент. Тобі буде запропоновано назву для свого фрагмента; назви її, наприклад, «Тест».
Як тільки ти назвеш фрагмент, ти можеш відразу його редагувати. Тут ти можеш ввести потрібний JavaScript-код, який потім буде виконаний при виконанні фрагменту.
Зміни зберігаються тимчасово, поки ти не збережеш їх, натиснувши Ctrl + S (або Command + S на Mac). Зверни увагу, що фрагменти зберігаються незалежно від відвіданих веб-сторінок, що означає, що ти можеш використовувати фрагменти на будь-якій сторінці.
Щоб запустити фрагмент, ти можеш просто клацнути на символ відтворення або використати комбінацію клавіш Ctrl + Enter (або Command + Enter на Mac).
Виконавши фрагмент, ти одразу отримаєш вихідні дані в області консолі Інструментів розробника.
Вимірювання часу з console.time() та console.timeEnd()
Тепер, коли ти успішно створив фрагменти, давай подивимось, як ти можеш вимірювати продуктивність свого JavaScript-коду за допомогою функцій console.time() та console.timeEnd().
Ти можеш розпочати вимірювання часу, вставивши console.time('Цикл') в початок частини коду, яку ти хочеш виміряти. Переконайся, що використовуєш той самий рядок у console.timeEnd('Цикл') в кінці відповідного коду. Час між ними буде виведений в мілісекундах.
Якщо два рядки не збігаються або ти забув викликати функцію timeEnd, ти отримаєш попередження.
Приклад вимірювання часу
Давай розглянемо простий приклад, де ти робиш цикл по 100 000 елементів та записуєш їх в масив.
Постав console.time('Цикл') перед циклом та console.timeEnd('Цикл') після циклу. Це дозволить тобі виміряти час, який необхідний для виконання цього циклу.
Якщо ти одного разу спробуєш цю функціональність, ти побачиш, що вимірювання часу допоможе тобі виявити та оптимізувати Engpässe.
Важливі вказівки щодо використання
Май увазі, що використання console.time() та console.timeEnd() не є рекомендованим для виробничих середовищ. Ці функції повинні використовуватися виключно для тестування, так як вони можуть мати різну підтримку в різних середовищах JavaScript.
Висновок щодо використання Snippets та вимірювання часу
Ти зараз освоїв основи використання Snippets, а також методів console.time() та console.timeEnd() в Chrome Developer Tools. Ці функції дуже потужні для більш ефективної роботи та кращого розуміння продуктивності твоїх додатків.
Резюме
У підсумку можна сказати, що використання Snippets та вимірювання часу в Chrome Developer Tools надає тобі потужні інструменти для підвищення твоєї продуктивності у розробці та отримання глибшого розуміння часу виконання твого JavaScript-коду.
Часті запитання
Як створити Snippet в Chrome Developer Tools?Клацни на вкладці "Джерела", потім на "Новий вирізок" та назви свій вирізок.
Як запустити вирізок?Клацни на ігровому символі або використай комбінацію клавіш Ctrl + Enter або Command + Enter.
Як виміряти час виконання коду?Використовуй console.time('Мітка') в початку і console.timeEnd('Мітка') в кінці свого коду, щоб виміряти час.
Чи можна використовувати Snippets на будь-якому веб-сайті?Так, Snippets збережено у Chrome Developer Tools і можна використовувати на будь-якій веб-сторінці.
Чи є обмеження в використанні console.time()?Так, console.time() не слід включати в продуктивний код, оскільки це може спричинити непередбачувані помилки.
