Мало хто зі звичайних користувачів — так званих серферів на просторах інтернету та любителів соцмереж здогадується, що …… у кожному інтернет-браузері наявний свій потужний інструмент розробника (WEB Developer Tools) — вважаю, неправильно, його ще називають тільки «консоллю».

     Хто «в курсі» що ми обговорюємо, знає як відкрити інструменти розробника і оперувати у вікнах Developer Tools цей допис для Вас буде нецікавим, сміло можете переходити до ін. статей далі у наш БЛОГ

     ЗАПАМʼЯТАЙТЕ початківці Developer Tools  це інструмент №1, базові функції котрого потрібно освоїти у першу чергу! Неважливо куди Ви прямуєте у ІТ => у програмісти чи тестувальники? Фахівці користуються ним щодня. Він завжди під рукою і відкривається в 2 кліки у меню браузера або комбінацією гарячих клавіш виклику.

Перевіряємо разом:

Google Developer Tools

Google Chrome Mozila Tools  => Інші інструменти => Інструменти розробника або F12 або CTRL+Shift+I

Firefox Developer Tools | MDN

Google Chrome Mozila Tools => Веб-розробка (іконка з гаєчним ключем) => Панель розробника або Shift+F2

     Для Mac поєднання  Cmd+Opt+J

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

     За допомогою інструмента розробника: програмісти — дебажать (від терміну “debugging”), тестери — тестують їх код. Звісно специфіка використання у тестувальників трішки відрізнятиметься, але багато чого є спільного.

     Відповідно порівняйте вигляд  і функціонал у Google хром та Mozila — практично  однаковий:

Google Developer Tools
Стартова сторінка Google у браузері Chrome
MDN Developer Tool
Стартова сторінка інструментів розробника у браузері Firefox

    Для прикладу кілька варіантів, що ми можемо зобачити у Developer Tools:

  • Можна вивчати завантажені у даний момент сторінки, їх HTML, CSS і JavaScript код, переглянути в яких ресурсах потрібна сторінка відображена, як довго вона буде завантажуватися.
  • Іноді, щоб активізувати той або інший елемент на сайті для тестування, я використовую невеликий скрипт на JS. Вкладка консоль дозволяє виконувати скрипти, я навіть вивчала у ній Джава Скрипт свого часу (але про це трохи пізніше). 
  • Після виконання деяких операцій на вебсайті, завжди корисно переглянути запити, які надсилаються на сервер в результаті Ваших дій. Надмірна кількість запитів це погано, потрібно намагатися їх зменшити. Для цього дивіться вкладку Network. 
  • Можна з легкістю відредагувати або видалити cookie. Вкладка Resourses. 
  • Урізати швидкість з’єднання, щоб подивитися як буде поводити себе контент сторінки при повільному  інтернеті або коли узагалі не буде інтернету.
  • Є можливість підставити фейкові дані геолокації, це досить зручно при тестуванні різних сервісів з урахуванням карт і маршрутів. У цьому режимі можна й провести тестування юзабіліті мобільної версії сайту. А підтримка емуляції відразу пари десятків пристроїв на адаптивність, зробить перевірку ще більш надійною — та багато усього ін. Перерахована лише мала частина «плюшок».

Тепер, коротко розглянемо кожну вкладку відкритої панелі розробника Chrome, ми подивимося у якій із вкладок щось із вище переліченого вільно проробляти:

     Отже, панель Elements  знімок згори, показує розмітку сторінки точно так, як вона рендериться у браузері. Дозволяє переглянути візуально непомітні помилки. Як Ви, напевно помітили, в лівому віконці відображається html -документ, в правому -css. Проводячи нехитрі маніпуляції з даними можна змінити наповнення і дизайн відкритої сторінки. Наприклад, можна поміняти текст у вікні, якщо редагувати його в тілі html, а також змінити шрифт, кольори, псевдокласи на сторінці  помінявши значення в полі css. Але введені дані не збережуться, просто допоможе візуально оцінити застосовані зміни.

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

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

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

Console Google Developer Tools

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

     Очистити поле вкладки Console (в разі, якщо вам потрібно видалити повідомлення про попередні помилки) можна клікнувши іконку перекресленого кола. Вже згадувалося, у чистій консолі Ви зможете практикуватися у вивченні JS.

Консоль у Хромі
Елементарний приклад JS

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

      Панель Sources як правило, в даній вкладці проводиться налагодження коду програмістами. Вона має 3 вікна (зліва направо): Зона вихідних файлів. У ній знаходяться всі підключені до сторінки файли, включаючи JS/CSS. Зона тексту. У ній знаходиться текст файлів. Зона інформації та контролю. Цікаво, в зоні інформації та контролю можна запускати / зупиняти налагоджений код.

Source Google Chrom

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

Network Chrome Developer Tools

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

Performance Google Chrom Developer Tools

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

  • CPU profiler надає інформацію за часом, витраченому на виконання Javascript.
  • Heap profiler відображає розподіл пам’яті.
  • JavaScript profile деталізує, куди саме пішов час при виконанні скриптів.

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

Application Google Developer Tools

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

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

панель Security Google Chrome

      У інструментах розробника FireFox підкреслю на додачу ще FireBug він розширює можливості консолі DOM-інспектором JavaScript, XMLHttpRequest. У браузері Хром цей інструмент по замовчуванню не встановлений, але його без проблем інсталювати теж.  FireFox Web IDE. То є так як би влаштований всередину редактор коду. WebIDE дає можливість запускати і виконувати налагодження веб-додатків, використовуючи Симулятор Firefox OS або реальний пристрій, що працює на Firefox OS.

FireFox чи Chrome інструменти розробника?

    Неодноразово чула: “Фу, закрий там складно і нічого не зрозуміло. Або: “ О, ото найкращий браузер! Тільки його використовуй!” На мою думку — деякі зручніші фішки в одному браузері, а деякі в іншому. Плюс — це ще ЧИСТО справа звички. Ось, раніше завжди користувалася Хромом, потім якось він полетів і залишився Фаєрфокс — за деякий час наловчиилася працювати із ним.

     Завершуємо, але це не КІНЕЦЬ навчання, я постаралася обмежитися найголовнішим. Розумієте, щоб збагнути за яких умов слід відкрити потрібну вкладку і правильно інтерпретувати побачену інформацію — треба пробувати самому на конкретних прикладах сторінок. Також я можу описувати зі свого досвіду речі, які використовувала, вони мені допомагали, а зараз вилучені, потім хто зна чи з’являться? Є багато дрібнішого функціоналу й розширень про який не знаю, бо не потрібно було використовувати. Окрім того я не зможу описати коротко «необьятну» тему, ну яку ніяк не «впихнути» у обсяг нашої сторінки.

Тому раджу:

Запам’ятати адреси сторінок офіційної  документації, і як виникне питання на котре не знаєте відповіді в першу чергу заглядаєте туди:

Посилання на офіційну документацію Firefox
Посилання на офіційну документацію Chrome

Шукайте тематичні відео на ютубі, як тим чи ін. меню користуватися наглядніше, потім старайтеся відтворити дію.

До теми:  10 порад як перетворити ютуб на ідеальний інструмент для навчання

Якщо не знаєте чогось і користуєтеся пошуком Google, гугліть по запитах: трюки Developer Tools, підказки використання, хитрощі, мало кому відоме etc + інструменти розробника або Dev Tools.

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

Дізнайтеся, як: Як правильно шукати потрібну інформацію у Google

Related posts

Leave a Comment

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