Як відкрити консоль у хромі

Популярний браузер Google Chrome застосовують багато користувачів, і не тільки ті, хто просто відвідує ресурси, розробники сайтів та тестувальники теж давно вже оцінили його переваги. Автори web-браузера подбали у тому, щоб полегшити роботу цієї категорії користувачів, їм у програмі є консоль розробника Development Console. Її наявність дозволяє безпосередньо у браузері працювати зі змістом того чи іншого web-ресурсу безпосередньо в браузері. Але знати, як відкрити консоль розробника в Google Хром, рекомендується не тільки професіоналам, але і всім користувачем, адже це здатне принести чимало користі в процесі застосування програми.

Що таке консоль розробника

У Google Chrome присутні й інші інструменти розробників - наприклад, "Elements", "Network", "Sources", проте тестувальники найчастіше застосовують у своїй роботі саме Console. Основне призначення даної консолі полягає у відстеженні помилок, допущених у ході написання будь-якого коду.

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

Консоль розробника Google Chrome

Базові функції

Консоль розробника в браузері виконує дві основні функції. Одна з них полягає у виведенні налагоджувальної інформації, інша – у введенні команд.

Є безліч інших методів:

Це лише частина методів, які у консолі розробника реалізації її базових функций.

Як відкрити консоль у браузері

Як можна відкривати консоль браузера Google Chrome, залежить від того, про який пристрій мова йде, і яка саме операційна система на ньому встановлена. Процедура буде відрізнятися залежно від того, чи маєте ви справу з телефоном або персональним комп'ютером, а у випадку з ПК має значення, чи працює він на Windows або MacOS.

Windows

У випадку з операційною системою Windows отримати доступ до консолі Development Console можна у різний спосіб, задіявши меню програми, гарячі клавіші або пункт «Переглянути код».

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

Втім, натискати три клавіші навіть не обов'язково, можна зробити все набагато простіше шляхом натискання однієї-єдиної клавіші, а саме – «F12».

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

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

Після завершення цих нескладних дій на екрані з'явиться консоль розробника. Правда, іноді вона відкривається не відразу, з'являється вкладка "Elements", і в цьому випадку до консолі доведеться переходити, натискаючи на пункт "Console" в цій вкладці.

Пункт "Подивитися код"

Цей пункт вибирається у контекстному меню, для виклику якого потрібно клацнути правою кнопкою миші у будь-якому місці сторінки.

MacOS

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

Зрозуміло, перш ніж натискати це поєднання, додаток теж необхідно запустити.

На телефоні

На жаль, запустити консоль розробника в мобільній версії браузера не вийде. Але можна опосередковано задіяти можливості ПК працювати через консоль з мобільними версіями сайтів.

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

Можна увімкнути режим розробника за допомогою секретного меню:

Робота в такому режимі відрізнятиметься від використання консолі розробника, але цю функцію також можна використовувати для налагодження.

Кожен браузер має консольну панель, за допомогою якої розробники проводять тестування веб-сайту. Вкладка Elements містить всю інформацію про HTML-файл, що інспектується: теги, таблиці стилів і т.д. Але в консолі є інші розділи, такі як Console, Sources, Network та інші.

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

Як відкрити консоль на різних браузерах

Алгоритм запуску консолі (інспектора) у всіх браузерах ідентичний. Є два шляхи: перший – запуск через спеціальну клавішу на клавіатурі, другий – за допомогою функції «Подивитися код сторінки/елемента».

Наприклад, якщо скористатися в Chrome клавішею F12, відкриється додаткове вікно з консоллю.

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

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

Насамперед нам потрібно включити меню розробника – для цього переходимо до розділу «Налаштування» та відкриваємо підрозділ «Просунуті». Знаходимо пункт «Показати меню «Розробка у рядку меню» та відзначаємо його галочкою.

Тепер можна запустити консольне вікно – достатньо скористатися комбінацією клавіш Cmd+Opt+C.

Як бачите, запустити консоль у браузері – справа кількох секунд. Опція корисна, коли ви верстаєте новий сайт, виправляєте помилки, проводите різні тести.

Які вкладки є в консолі та за що вони відповідають

Консоль кожного браузера містить практично ідентичні вкладки з тим самим функціоналом, тому розглянемо кожен із блоків на прикладі веб-браузера Google Chrome.

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

В результаті ліва частина вікна буде трохи змінена: додадуться кнопки для вибору роздільної здатності під потрібний девайс. Наприклад, виберемо пристрій iPhone X, і сайт відразу ж виглядатиме так, як він виглядав би на телефоні.

Якщо вибрати опцію «Responsive», то ліворуч від сторінки з'явиться додаткова лінія, яку ми можемо тягнути ліворуч або праворуч – за допомогою неї можна підібрати необхідну роздільну здатність сторінки. Також налаштувати роздільну здатність ми можемо і у верхній частині вікна.

І ще одна опція, яка може бути корисною – зміна розташування консольної панелі. Щоб їй скористатися, необхідно у верхній правій частині натиснути кнопку у вигляді трикрапки і в рядку «Dock side» змінити орієнтацію. Доступні положення: праворуч, ліворуч, знизу в окремому вікні.

На цьому стандартний набір функцій консольної панелі закінчується. Давайте подивимося, які в ній є вкладки та за що вони відповідають.

Elements

Основний компонент для верстальників. Він включає всю інформацію про відкриту HTML-сторінку. Тут ми можемо не тільки переглянути поточні теги та атрибути, але й змінити їх – у такому випадку відбудеться автоматична зміна дизайну на сторінці. Якщо її оновити, то все повернеться на свої місця. Також відкритий доступ до перегляду CSS та інших елементів – для цього у правій частині розділу йдуть вкладки Styles, Computed, Layout, Event Listeners, DOM Breakpoints, Properties та Accessibility.

Console

Ще одна найважливіша вкладка для верстальників - Console. В ній ми можемо дізнатися інформацію про поточні помилки на сайті, подивитися JavaScript, що виконується, якщо він виведений в консоль за допомогою методу console.log, і багато іншого.

Якщо вам потрібно очистити інформацію, виведену в консоль, зробити це легко.Достатньо у верхньому лівому куті натиснути кнопку у вигляді знака заборони.

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

Sources

Цей розділ відкриває доступ до всієї ієрархії сайту: тут ми можемо подивитися, які використовуються картинки, файли CSS, шрифти та інше.

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

Network

З назви вже зрозуміло, що цей розділ призначений для відстеження трафіку мережі. Його основна функція – запис мережевого журналу. Можна виявити час завантаження та обробки різних файлів, щоб згодом оптимізувати сторінку.

Performance

Панель відображає таймлайн використання мережі, виконання JavaScript-коду та завантаження пам'яті. Після початкової побудови графіків будуть доступні докладні дані про виконання коду та весь життєвий цикл сторінки.

Memory

У цій вкладці можна відстежувати використання пам'яті веб-програмою або сторінкою. Ми можемо дізнатися, де витрачається багато ресурсів – цю інформацію можна використовувати для оптимізації коду.

Application

Даний розділ дозволяє перевіряти та очищати всі завантажені ресурси. Ми можемо взаємодіяти з HTML5 Database, Local Storage, Cookies, AppCache та іншими елементами.

Основна особливість настройки – чищення куки. Якщо вам необхідно виконати цю процедуру, просто відкрийте в лівій частині розділ «Cookies» і натисніть праворуч на значок заборони.Куки для вибраного посилання будуть очищені.

Security

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

• перевірки сертифіката – чи підтвердив сайт свою автентичність TLS;
• tls-з'єднанні – чи використовує сайт найсучасніші безпечні протоколи;
• безпеки другорядних джерел.

Lighthouse

Останній розділ є інструментом аудиту з відкритим вихідним кодом. Завдяки цьому розробники можуть підвищити продуктивність та доступність своїх веб-сайтів.

Виявлення основних помилок

При виникненні можливих помилок ми одразу будемо про це повідомлено у вкладці Console – у ній з'явиться інформація з червоним рядком тексту. Розглянемо найпоширеніші помилки, які можуть виникати в Google Chrome, Safari та Internet Explorer:

1. Uncaught TypeError: Cannot read property. Помилка виникає в Хром при виклику методу або читанні властивості для невизначеного об'єкта.
2. TypeError: 'undefined' is not an object (evaluating). Аналогічна попередня помилка, але тільки в Safari.
3. TypeError: null is not an object (evaluating). Виникає у Сафарі під час виклику методу чи читанні властивості для нульового об'єкта.
4. (unknown):Scripterror. Визначає помилку скрипта.
5. TypeError: Object doesn’t support property. Зустрічається в Internet Explorer – виникає під час виклику певного методу.
6. TypeError: 'undefined' is not a function. Вказує на невизначену функцію (Chrome).
7. Uncaught RangeError: Maximum call stack. Помилка Chrome, що означає перевищення максимального розміру стека.
8. TypeError: Cannot read property 'length'. Неможливо прочитати властивість.
9. Uncaught TypeError: Cannot set property.Виникає, коли скрипт не може отримати доступу до невизначеної змінної.
10. ReferenceError: event is not defined. Позначає неможливість доступу до змінної, що не входить до поточної області.

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

Висновок

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

Вивчайте та знаходите свої застосування цього інструменту – він може багато. Успіхів!

У кожному браузері є свій інструмент розробника – це те, що багато хто називає просто «консоллю», розглянемо Консоль у браузері Chrome. Виглядає так:

Консоль у браузері Chrome

Як відкрити консоль у браузері Chrome:

Розташовуватись вона може внизу сторінки або збоку, можна відкріпити в окреме вікно. Отже, розглянемо окремо кожну вкладку відкритої консолі.

У ній є 8 вкладок, кожна з яких відображає певні дані:

1 – Elements (містить весь html/css код сторінки та дозволяє вибрати елементи для дослідження, а також редагувати їх)

2 – Console (відображає наявність/відсутність помилок/попереджень у коді)

3 – Sources (дозволяє виконувати операції з кодом сторінки)

4 – Network (відстежує час виконання певних запитів та самі запити)

5 – Timeline (вимірює час завантаження сторінки)

6 – Profiles (дозволяє створювати JavaScript, профілі CPU)

7 – Resources (дозволяє переглянути певні збережені дані)

8 – Audits (Проводить перевірки певних параметрів)

Тепер пройдемося по кожній з них окремо та детальніше:

Панель Elements

Панель Elements показує розмітку сторінки так само, як вона рендерується у браузері. Можна візуально змінювати наповнення сайту за допомогою зміни html/css коду на панелі елементів. Як ви, напевно, помітили (а може й ні), у лівому вікні відображається html-документ, у правому – css. Проводячи нехитрі маніпуляції з даними, можна змінити наповнення та дизайн відкритої сторінки. Наприклад, можна змінити текст у вікні, якщо редагувати його в тілі html, а також змінити шрифт сторінки, змінивши його значення в полі css. Але це не збереже введених даних, а допоможе візуально оцінити застосовані зміни. Крім того, можна переглянути код конкретного елемента сторінки. Для цього потрібно райткликнути його та вибрати команду «Подивитися код».

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

Панель Console

Панель Sources

Як правило, в цій вкладці проводиться налагодження програмістами коду. Вона має 3 вікна (зліва направо):

1. Зона вихідних файлів У ній знаходяться всі підключені до сторінки файли, включаючи JS/CSS.
2. Зона тексту. У ній міститься текст файлів.
3. Зона інформації та контролю.

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

Панель Network

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

Також варто відзначити, що саме в цій вкладці в режимі Large request rows можна переглянути запити, які надсилаються на сервер, а також відповіді, які надходять з нього, їх зміст та характеристики.

Панель Performance

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

Панель Memory

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

CPU profiler надає інформацію за часом, витраченим виконання Javascript.

Heap profiler відображає розподіл пам'яті.

JavaScript profile деталізує, куди саме пішов час під час виконання скриптів.

Панель Application

Призначена на дослідження завантажених елементів. Дозволяє взаємодіяти з HTML5 Database, Local Storage, Cookies, AppCache тощо. У цій вкладці можна почистити куки, відкривши цю вкладку і натиснувши на іконку перекресленого кола

Панель Audits

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

Панель Secuirity

Security Panel показує інформацію про кожен запит і підсвічує ті, через які сайт не отримує заповітної зеленої іконки у статусі.

У першій частині циклу про інструменти розробника ми розібралися із вкладкою Elements, а тепер продовжуємо знайомити з іншими важливими частинами DevTools - вкладками Console, Sources та Network.

Бонус – розповімо, як зробити скріншот усієї сторінки в Chrome без плагінів.

Вкладка Console

Вкладка Sources

Тепер заглянемо у вкладку Sources. Вона показує всі підключені до сторінки ресурси. Найчастіше ця вкладка використовується при налагодженні коду.

Наприклад, виглядає мініфікований CSS-файл на вкладці Sources.

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

Вкладка Network

З її допомогою можна з'ясувати, скільки часу зайняло завантаження сторінки, які ресурси підключилися або не підключилися до сторінки, та багато іншого. При першому відкритті вкладка може виявитися порожньою — просто перезавантажте сторінку.

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

Зазвичай вкладку Network використовують, щоб дізнатися про стан ресурсу, який не відображається на сторінці, але був до неї підключений. Дивимося в таблицю — якщо є якась помилка, ресурс горітиме червоним.Якщо помилок немає, статус кожного запиту — 200. Це означає, що все добре.

Якщо натиснути кнопку фільтра, з'явиться можливість подивитися, як завантажуються певні ресурси, наприклад картинки або шрифти.

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

Перевірка верстки на мобільних

Легко перевірити, як виглядає верстка на мобільних. Заходимо в режим емуляції і все - можемо поміняти ширину екрану, вибрати конкретний девайс (наприклад, айфон), переглянути всі media-вирази, застосовані до сторінки, або вибрати щільність пікселів, щоб перевірити ретинову графіку.

Це незамінний інструмент у роботі над адаптивною версткою.

Скріншоти сторінок

Інша можливість – скріншоти сторінки. Заходимо в режим емуляції і в меню вибираємо «зробити скріншот» - зображення відразу зберігається на комп'ютер.

Також є можливість зробити скріншот усієї сторінки повністю – для цього виберіть пункт Capture full size screenshot.

На цьому все – у наступних випусках розповімо, як користуються DevTools справжні професіонали.

DevTools - інструмент розробника

Але сила над інструментах, а голові. Познайомтеся з версткою прямо зараз.

Консоль у браузері Chrome

У кожному браузері є свій інструмент розробника – це те, що багато хто називає просто «консоллю», розглянемо Консоль у браузері Chrome. Виглядає так:

Консоль у браузері Chrome

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

Як відкрити консоль у браузері Chrome:

- Натиснувши одночасно клавіші Ctrl + Shift + I;

- ПКМ по елементу сторінки -> Переглянути код;

- Меню браузера -> Додаткові Інструменти -> Інструменти Розробника.

Розташовуватись вона може внизу сторінки або збоку, можна відкріпити в окреме вікно. Отже, розглянемо окремо кожну вкладку відкритої консолі.

У ній є 8 вкладок, кожна з яких відображає певні дані:

1 – Elements (містить весь html/css код сторінки та дозволяє вибрати елементи для дослідження, а також редагувати їх)

2 – Console (відображає наявність/відсутність помилок/попереджень у коді)

3 – Sources (дозволяє виконувати операції з кодом сторінки)

4 – Network (відстежує час виконання певних запитів та самі запити)

5 – Timeline (вимірює час завантаження сторінки)

6 – Profiles (дозволяє створювати JavaScript, профілі CPU)

7 – Resources (дозволяє переглянути певні збережені дані)

8 – Audits (Проводить перевірки певних параметрів)

Тепер пройдемося по кожній з них окремо та детальніше:

Панель Elements

Панель Elements показує розмітку сторінки так само, як вона рендерується у браузері. Можна візуально змінювати наповнення сайту за допомогою зміни html/css коду на панелі елементів. Як ви, напевно, помітили (а може й ні), у лівому вікні відображається html-документ, у правому – css.Проводячи нехитрі маніпуляції з даними, можна змінити наповнення та дизайн відкритої сторінки. Наприклад, можна змінити текст у вікні, якщо редагувати його в тілі html, а також змінити шрифт сторінки, змінивши його значення в полі css. Але це не збереже введених даних, а допоможе візуально оцінити застосовані зміни. Крім того, можна переглянути код конкретного елемента сторінки. Для цього потрібно райткликнути його та вибрати команду «Подивитися код».

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

При натисканні на кнопку Select Model випаде дропдаун з найбільшим вибором аксесуарів. Вибираєте, що вам потрібно – і вуаля! Сторінка відображена так, ніби це був девайс. Таким чином, панель Elements можна використовувати не тільки для перегляду або редагування сторінки, але й для емуляції пристроїв відображення. Все уніфіковано та доступно у Хромі!

Панель Console

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

Очистити поле вкладки Console (у випадку, якщо потрібно видалити повідомлення про попередні помилки) можна клацнувши іконку перекресленого кола. Фільтрувати повідомлення в консолі можна на кшталт — помилки, попередження, інфо, стандартний висновок, повідомлення відладчика, виправлені — вибравши з доступних опцій консолі.

Панель Sources

Як правило, в цій вкладці проводиться налагодження програмістами коду. Вона має 3 вікна (зліва направо):

1. Зона вихідних файлів У ній знаходяться всі підключені до сторінки файли, включаючи JS/CSS.
2. Зона тексту. У ній міститься текст файлів.
3. Зона інформації та контролю.

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

Панель Network

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

Також варто відзначити, що саме в цій вкладці в режимі Large request rows можна переглянути запити, які надсилаються на сервер, а також відповіді, які надходять з нього, їх зміст та характеристики.

Панель Performance

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

Панель Memory

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

CPU profiler надає інформацію за часом, витраченим виконання Javascript.

Heap profiler відображає розподіл пам'яті.

JavaScript profile деталізує, куди саме пішов час під час виконання скриптів.

Панель Application

Призначена на дослідження завантажених елементів. Дозволяє взаємодіяти з HTML5 Database, Local Storage, Cookies, AppCache тощо. У цій вкладці можна почистити куки, відкривши цю вкладку і натиснувши на іконку перекресленого кола

Панель Audits

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

Панель Secuirity

Security Panel показує інформацію про кожен запит і підсвічує ті, через які сайт не отримує заповітної зеленої іконки у статусі.

Крім того, можна отримати таку інформацію:

• про перевірку сертифіката, чи підтвердив сайт свою дійсність TLS-сертифікатом;
• TLS-з'єднання, позначаючи, чи використовує ваш сайт сучасні безпечні протоколи;
• безпека підвантажуваних другорядних джерел.

Насправді, інструменти розробника (Консоль в браузері Chrome) - дуже корисна штука, яка і нам, тестувальникам, часто може стати в нагоді. Ще більше корисної інформації на сайті https://developers.google.com/web/tools/chrome-devtools/

Все про тестування та якість ПЗ

• Мобільний емулятор для тестування
• Інтеграційне тестування: що це і навіщо
• Тестування текстового поля
• Тестувальник може впоратися краще?
• Модульне тестування: все, що потрібно знати

ЯК ВІДКРИТИ КОНСОЛЬ У ГУГЛІ

Щоб відкрити консоль у Google Chrome, потрібно виконати кілька простих кроків. Консоль розробника дозволяє вам взаємодіяти з веб-сторінками, проводити налагодження та виконувати різні операції без необхідності залишати браузер. Для того щоб відкрити консоль, просто натисніть клавіші Ctrl + Shift + J (для ПК) або Cmd + Option + J (для Mac). Після цього з'явиться вікно консолі, де ви зможете виконувати різні команди та переглядати налагоджувальну інформацію.

Як відкрити DevTools на Android в Chrome?

Як відкрити консоль у Google?

1. Відкрийте веб-браузер Google Chrome.

2. Натисніть кнопку з трьома точками у верхньому правому куті вікна браузера.

3. У меню виберіть "Додаткові інструменти".

4. У підменю, що з'явилося, виберіть "Консоль" або натисніть комбінацію клавіш Ctrl + Shift + J (Windows/Linux) або Cmd + Option + J (Mac).

5. Консоль відкриється внизу вікна браузера, де ви зможете вводити та виконувати JavaScript-код, а також бачити різну налагоджувальну інформацію про завантаження сторінки.

6. Щоб закрити консоль, натисніть на хрестик праворуч вгорі консольного вікна або натисніть Esc.

15 гарячих клавіш, про які ви не здогадуєтеся

Відкриття консолі в Google Chrome може бути корисним для розробників та технічних фахівців, яким необхідний доступ до додаткових інструментів та функцій браузера. Існує кілька способів відкрити консоль у Google Chrome.Один із найпростіших способів – натиснути правою кнопкою миші на сторінці, вибрати "Дослідити елемент" і перейти на вкладку "Консоль". Інший спосіб - натиснути комбінацію клавіш Ctrl+Shift+J (або Cmd+Option+J на Mac) для відкриття консолі.

Консоль розробника дозволяє виконувати JavaScript-код, відстежувати помилки на сторінці, аналізувати мережевий трафік та багато іншого. Ви можете виводити інформацію, проблеми та попередження на консоль за допомогою команди console.log(). Не забувайте, що консоль - потужний інструмент, і будь-які зміни можуть вплинути на роботу сторінки, тому будьте обережні при проведенні експериментів.

6 СЕКРЕТНИХ функцій PS5 які розкривають консоль повністю

Консоль розробника в Chrome Що таке Chrome Dev Tools?

Як зареєструвати Google Play Console у 2023 році?

Як увімкнути JavaScript у хромі