DevTools Showdown Edge F12 vs Firefox проти Chrome

Інструменти для розробників Microsoft Edge, новий веб-переглядач за промовчанням Windows 10, отримали сучасний дизайн і кілька нових функцій у порівнянні з попередником, F12 Dev Tools.

Питання про те, чи розроблювальні інструменти Microsoft Edge відповідають їхнім популярним конкурентам - інструментам розробки в інших сучасних браузерах, таких як Mozilla Firefox і Google Chrome - природно виникає у свідомості багатьох розробників.

У цій посаді ми намагаємося відповісти на це запитання, і з'ясуємо, чи дійсно варто використовувати Edge's F12 Dev Tools. Ми порівнюватимемо його функції з інструментами розробників Firefox і DevTools Google Chrome.

Відкрийте Інструменти Dev

Натискання клавіші F12 відкриває інструменти розробника у всіх 3 випадках: Інструменти розробників у Firefox, DevTools у Chrome та F12 Dev Tools у Microsoft Edge. Це комбінація клавіш, де офіційна назва F12 Dev Tools від Edge походить від.

Коли ви відкриваєте Ed Dev's Dev Tools, ви можете відчути відразу один з його найбільш відомих недоліків: в даний час це неможливо підключити інструменти до існуючого вікна. Хоча ви можете стежити за тим, що відбувається на екрані інструментів розробників Firefox і Chrome DevTools, закріпивши вікно інструментів dev в нижній частині екрана, ви (зараз) не можете зробити те ж саме з Edge.

Розробники Microsoft стверджують, що вони вирішать цю проблему в майбутньому.

Перевірте DOM

The DOM Explorer tool (ярлик: CTRL + 1) - перша вкладка F12 Dev Tools Microsoft Edge. Його компонування і загальний дизайн досить схожий на Елемент вкладки Chrome і Інспектор вкладки в Firefox, однак можливості помітно відрізняються.

В Edge ви можете подивитися на наданий HTML-документ, пов'язані стилі CSS і обробники подій, зареєстровані на кожному елементі. Також можна знайти невелику графіку про модель коробки CSS з обчисленими значеннями, які вже добре відомі з двох конкуруючих веб-переглядачів..

Ти можеш експериментувати з правилами CSS видаляючи поточні та додаючи нові, і ви можете бачити узагальнені зміни на окремому вкладенні “Зміни” (знаходиться на лівій стороні). Ця остання - функція, яка не побудована в Firefox Developer і Chrome DevTools. Це може дати швидкий підсумок користувачеві, тому це дійсно корисний варіант.

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

У Edge є прохолодний вибір кольору хоча це може компенсувати користувачеві.

Взаємодіяти з JavaScript

The Консоль Вкладка (ярлик: CTRL + 2) в Microsoft Edge дозволяє взаємодіяти з JavaScript вашого сайту, як і в Firefox і Chrome Dev Tools. Всі три дозволить вам слідувати за помилками JavaScript в режимі реального часу, а також можете аналізувати їх, ввівши власний вхід.

Інструмент консолі інструментів F12 Dev Edge має приємний функція автозаповнення це допоможе вам з командами, як би там не було менш обізнаний у порівнянні з Firefox і Chrome Dev Tools.

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

Консоль Firefox, здається, найбільш професійна з трьох інструментів dev, так само як і окремо відображаються інші види проблем: мережа, CSS, помилки безпеки і протоколювання повідомлень, і дозволяє взаємодіяти з ними за допомогою Інтерфейс консолі, не тільки з помилками JavaScript.

Зрозумійте, що робить ваш код

The Відладчик інструмент (ярлик: CTRL + 3) допомагає зрозуміти, що відбувається з вашим кодом під час пошуку потенційних помилок. Можна встановити годинник і точки зупину, а також переглянути стеки викликів.

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

Інструменти F12 Dev Edge дозволяють вам призупиніть код в середині виконання, і крок через нього рядок за рядком. Ви також маєте можливість підвищити читабельність скомпільованого або зменшеного файлу JavaScript, і ви можете налагоджувати різні ресурси (JavaScript, розширення тощо) по одному.

Firefox і Chrome DevTools забезпечують всі ці функціональні можливості, тому Edge не пропонує винятковий досвід налагодження, але він надає користувачеві надійний і надійний інструмент, який відповідає його конкурентам.

Подивіться на браузер-сервер зв'язку

The Мережа Інструмент (ярлик: CTRL + 4) був повністю перероблений для Microsoft Edge з Internet Explorer 11. За допомогою цього зручного інструменту ви можете дотримуйтесь зв'язку між сервером і браузером, і перевіряти індивідуальні запити.

Ти можеш фільтрувати результати за типом вмісту такі, як таблиці стилів, зображення, медіа, шрифти, XHR та багато інших. Ви також можете налагодження AJAX за допомогою інструмента "Мережа".

На вкладці "Мережа" та "Мережа Firefox" пропонуються досить схожі можливості та інтерфейс користувача. Обидва вони мають зручну панель бічної панелі, яка дозволяє переглядати заголовок HTTP обраного ресурсу, тіло HTTP, параметри, пов'язані файли cookie та тимчасові параметри..

На вкладці Мережі Chrome DevTools немає такої панелі, але якщо ви натискаєте на запити один за одним, можна побачити ту ж саму інформацію. Це менш інтуїтивне рішення.

Відстежуйте повільні сторінки

The Продуктивність Вкладка (ярлик: CTRL + 5) допомагає зрозуміти причини повільної веб-сторінки. За допомогою інструменту продуктивності Microsoft зробила величезний крок вперед, поєднавши попередні Відповідальність інтерфейсу користувача та профілі інструменти для створення наскрізного перегляду всіх ваших сценаріїв і візуалізації продуктивності.

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

Під час процесу тестування ми виявили, що інструмент Performance в Edge надав нам доступ докладніше про проблеми швидкості ніж розробник Firefox або Chrome DevTools. Користувальницький інтерфейс вкладки Performance в Edge досить добре розроблений, допомагаючи нам з багатьма візуальними підказками, і це відносно простий у використанні. Якщо ви хочете дізнатися більше про те, як його використовувати, прочитайте докладні документи.

Діагностика проблем із пам'яттю

The Пам'ять Інструмент (ярлик: CTRL + 6) дає можливість знайти витоки пам'яті що також може уповільнити роботу веб-сторінки, крім того, можна вплив на стабільність вашого сайту.

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

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

Перевірте свій сайт на різних розмірах екрану

The Емуляція tool (ярлик: CTRL + 7) дозволяє перевірити ваш сайт за різних обставин. Ви можете вибрати один із двох профілів веб-переглядачів, Desktop і Windows 10 Mobile, а також від багатьох різних агентів користувачів, включаючи всі версії Internet Explorer для настільних і мобільних пристроїв, до IE6, а також багатьох конкурентів Edge, Chrome, Firefox, Safari і т.д..

Цікаво, що у вас є можливість взяти подивіться на свою сторінку як Bing Bot. Ви також можете емулювати GPS, і встановіть різні резолюції та орієнтації.

Інструменти для розробників Firefox не мають інструменту емуляції пристроїв, але у Chrome DevTools є такий складний емулятор, який Edge навряд чи зможе конкурувати з ним.

Наприклад, екран емуляції Chrome має точна сітка, в яку вставлено емуляційний вигляд, і ви не тільки можете вибрати з профілів браузера і агентів користувачів, але і з багатьох пристроїв, таких як різних версій iPhone або Samsung Galaxy та багато інших. Емулятор Chrome DevTools також зручно Опція масштабування і ви можете перевірити свій сайт на різних мережах, таких як 3G, 4G, DSL, WiFi і т.д..

Резюме

В цілому, F12 Dev Tools від Microsoft Edge виглядає дивно добре. Він надає функції, дуже схожі на популярні інструментальні засоби веб-розробки інших сучасних браузерів. Існують дві області, де інструменти F12 Dev Edge є досить сильними: користувацький інтерфейс це дійсно інтуїтивно зрозумілий, зручний і добре продуманий, і інструменти діагностики продуктивності.

Для цих двох функцій варто розглянути можливість переходу на, або принаймні тестування Edge. Найбільшим недоліком є ​​відсутність можливості закріпити інструменти Dev в нижній частині екрана, але сподіваємося, що Microsoft швидко вирішить цю проблему.