Як відкрити консоль і інструменти розробника в Яндекс браузері? | GuideComp.ru

Веб-оглядачі мають набагато більшою кількістю функцій, ніж потрібно для звичайного серфінгу по мережі. Є функції, що спрощують пошук інформації, маса сховищ, інструменти для управління даними і навіть засоби для тестування і розробки веб-сайтів. Консоль браузера Яндекс вміщує різні інструменти для роботи з невидимою стороною сайтів: JavaScript-кодом, що підключаються даними і пристроями, cookie, cache, сертифікатами безпеки і т.п. Консоль розробника – це вкрай корисний засіб не тільки в руках програміста, часом і не фахівцеві доводиться використовувати цю панель.

Чим корисна консоль розробника Яндекс браузера?

Панель розробника реалізована для вирішення п’яти основних завдань:

  • Налагодження роботи веб-сайту. Практично всі сайти мають помилки в коді, які візуально визначити дуже складно, а ще складніше їх знайти. В даному засобі для розробки показуються всі помилки коду і рядки, в яких вони з’явилися. Хоч браузер не завжди вказує правильний рядок з помилкою, але хоча б приблизно підказує область пошуку несправності,
  • Поліпшення розуміння роботи сайту. Щоб зробити якісний сайт, стійкий до всіх видів зломів, потрібно отримати вичерпне розуміння принципу роботи веб-ресурсу. Даний розділ якраз і вміщує все необхідне для поглибленого розуміння будови веб-сторінок,
  • Тестування сайту на наявність вразливостей. В JavaScript-консоль можемо вводити різні команди, які обробляються в режимі реального часу. Цим трюком часто користуються хакери. На етапі тестування як раз і слід перевірити стійкість до подібних загроз,
  • Перегляд і управління підключаються, що генеруються даними. Серед інструментів розробника можемо знайти все cookie-файли, дані сесії і локального сховища. Функція корисна в основному для тестування, але часом видалення цих даних допомагає і звичайному користувачеві обійти блокування, вийти зі свого облікового запису і т.п.,
  • Аудит веб-сайту – це кінцева стадія тестування перед запуском веб-ресурсу. Головне завдання полягає в тестуванні швидкості роботи сайту. Ще одна важлива роль – визначення, як сайт відображається на пристроях з різною діагоналлю екрану. Звідси можемо подивитися зовнішній вигляд і поведінку веб-ресурсу на смартфонах, планшетах, міні-ноутбуках і на великих екранах.

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

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

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

  • Через «Налаштування яндекс.браузер»,
  • З контекстного меню сторінки,
  • За допомогою гарячих клавіш.

Через меню браузера

Всі потрібні кошти розміщені в одному розділі «Додаткові інструменти». Звідси можемо перейти відразу в консоль, інструменти розробника або просто відкрити HTML-код сторінки.

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

  1. Натискаємо на стек з трьох смуг в правому верхньому куті.
  2. Наводимо курсор миші на пункт «Додатково», а потім на елемент «Додаткові інструменти».
  3. Кількома на кнопку «Консоль JavaScript».

Таким же способом можемо відкрити і HTML-код після кліка на «Переглянути код сторінки», а також перейти в «Інструменти розробника», клікнувши по відповідному пункту.

З контекстного меню

Це один з найпростіших способів відкрити потрібний розділ, для його реалізації від нас потрібно зробити лише 3 кліка:

  1. Робимо клік ПКМ по будь-якого місця на сторінці сайту.
  2. Вибираємо «Дослідити елемент».
  3. У меню, в панелі,, натискаємо на «Console».

За допомогою гарячих клавіш

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

Як включити консоль за допомогою комбінацій клавіш:

  • Ctrl + Shift + J – це гарячі клавіші для відкриття консолі JavaScript,
  • Ctrl + Shift + I – ця комбінація відкриває кошти для розробки,
  • Ctrl + U комбінація дозволяє запросити нову сторінку з HTML-кодом сторінки.

Ще один спосіб перейти в потрібну панель – натиснути клавішу F12.

Опис елементів панелі розробника

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

Виберіть панелі розробника:

  • «Elements» відображає структурований HTML-код. У ньому підтримується точна структура коду і правила вкладень. Крім HTML-коду, тут відображається стилі CSS для кожного блоку або елементу. Дозволяє зрозуміти структуру, подивитися класи елементів і задані їм стилі,
  • «Console» відображає помилки в коді сторінки і дозволяє запускати власноруч написаний JavaScript-код, який моментально буде опрацьовано в браузері,
  • «Sources» це вкладка, на якій зібрані всі підключаються до ресурсу файли з JavaScript і CSS-кодом. Дозволяє подивитися, як локально підключається код, так і файли, розміщені на інших ресурсах (це може бути JQuery, метрика Google, Yandex та інші файли тим, скрипти),
  • «Network» є дуже важливою вкладкою, так як інформацію з неї можемо використовувати для збільшення швидкодії сайту. Тут відображається час, необхідний для завантаження медіаконтенту і зовнішніх JS-файлів. Якщо на сайті використовуються картинки з високою роздільною здатністю або вони завантажуються з зовнішнього ресурсу, сайт почне довше прогружаются. На даній вкладці показується, який саме контент призводить до уповільнення веб-ресурсу,
  • «Performance» це сторінка для докладної перевірки продуктивності ресурсу. Після процедури тестування веб-сайту з’являється статистика по кожному елементу сторінки з повною інформацією по швидкості завантаження,
  • «Memory» є аналогом попередньої вкладки, але в ній відображається інформація по вазі сторінки. Дані можемо розгорнути і детально вивчити вага всіх елементів сторінки. Враховується не тільки вага картинок або тексту, а й усіх об’єктів, HTML- і CSS-елементів тощо,
  • «Application» надає доступ до всіх сховищ: cookie, cache, локальному сховищу, сесій, шрифтів, скриптів і до решти. Ще тут є корисний інструмент «Clear Storage», він призначений для очищення всіх сховищ,
  • «Security» пропонує інформацію за сертифікатами безпеки і надійності підключення,
  • «Audits» це інструмент для швидкого аудиту сайту. По закінченню роботи показується результат в 5 категоріях: «Продуктивність», «Прогресивність веб-додатки», «Зручність використання», «Краща практика» (підказки щодо поліпшення сторінки) і «SEO».

Ще пара моментів:

  • До назв розділів є ще 2 кнопки: із зображенням блоку зі стрілкою, а також картинка мобільного телефону, планшета. Вони знаходяться в самому початку списку вкладок. Перша кнопка допомагає моментально переходити до коду конкретного елемента, обраного на сторінці (всі блоки на сайті починають підсвічуватися при наведенні на них курсора). Кнопка з мобільним телефоном відповідає за відображення сторінки на пристроях з різною діагоналлю,
  • На панелі можуть розміщуватися і інші вкладки, які генеруються додатками на комп’ютері або розширеннями самого браузера.

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

Ссылка на основную публикацию