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

Инструменты разработчика Microsoft Edge, нового браузера по умолчанию для Windows 10, получили современный дизайн и несколько новых функций по сравнению с его предшественником, Internet Explorer 11 F12 Dev Tools.

Вопрос о том, соответствуют ли инструменты разработчика Microsoft Edge своим популярным конкурентам - инструментам разработки в других современных браузерах, таких как Mozilla Firefox и Google Chrome, - естественно возникает у многих разработчиков.

В этом посте мы попытаемся ответить на этот вопрос и выяснить, действительно ли стоит использовать инструменты разработчика Edge F12. Мы сравним его возможности с возможностями инструментов разработчика Firefox и DevTools Google Chrome..

Откройте Dev Tools

Нажатие F12 открывает инструменты разработчика во всех трех случаях: Инструменты разработчика в Firefox, DevTools в Chrome и Инструменты разработчика F12 в Microsoft Edge. Это сочетание клавиш, где официальное название Edge's F12 Dev Tools происходит от.

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

Разработчики Microsoft утверждают, что исправят эту проблему в будущем обновлении.

Осмотреть DOM

DOM Explorer инструмент (ярлык: CTRL + 1) - первая вкладка Microsoft Edge F12 Dev Tools. Его расположение и общий дизайн очень похожи на Элемент вкладка Chrome и Инспектор вкладка в Firefox, однако возможности заметно различаются.

В Edge вы можете взглянуть на визуализированный документ HTML, связанные стили CSS и обработчики событий, зарегистрированные для каждого элемента. Вы также можете найти небольшую графику о блочной модели CSS с вычисленными значениями, уже известную из двух конкурирующих браузеров..

Вы можете экспериментировать с правилами CSS удалив текущие и добавив новые, и вы можете увидеть ваши обобщенные изменения на отдельной вкладке под названием “изменения” (он расположен на левой стороне). Эта последняя функция не встроена ни в Firefox Developer, ни в Chrome DevTools. Это может дать быстрое резюме пользователю, так что это действительно полезная опция.

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

В крае есть классная палитра цветов хотя это может несколько компенсировать пользователю.

Взаимодействовать с JavaScript

Приставка Вкладка (Ярлык: CTRL + 2) в Microsoft Edge позволяет вам взаимодействовать с JavaScript вашего сайта, как в Firefox и Chrome Dev Tools. Все три позволяют отслеживать ошибки JavaScript в режиме реального времени, а также вы можете анализировать их, вводя свой собственный ввод.

Консольный инструмент Edge's F12 Dev Tools имеет приятный функция автозаполнения это помогает вам с командами, однако, кажется, менее знающий по сравнению с таковым в Firefox и Chrome Dev Tools.

край разделяет ошибки, предупреждения и сообщения это большая помощь, хотя не то, чего нет у двух других наборов инструментов.

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

Понять, что делает ваш код

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

Панель Watches отображает значения переменных, режим Callstack показывает цепочку вызовов функций, которые привели к текущему состоянию, а режим Breakpoints показывает список установленных вами точек останова..

Инструменты Edge F12 Dev позволяют приостановить ваш код в середине исполнения, и шаг за шагом проходите по нему. У вас также есть возможность улучшить читаемость скомпилированного или свернутого файла JavaScript, и ты можешь отлаживать разные ресурсы (JavaScript, расширения и т. Д.) По одному.

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

Взгляните на связь браузер-сервер

сеть инструмент (ярлык: CTRL + 4) был полностью переработан для Microsoft Edge начиная с Internet Explorer 11. С помощью этого удобного инструмента вы можете следить за связью между сервером и браузером, и проверять индивидуальные запросы.

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

Вкладка Edge и Firefox Network предлагает довольно похожие возможности и пользовательский интерфейс. Оба имеют удобную панель боковой панели, которая позволяет взглянуть на заголовок HTTP выбранного ресурса, тело HTTP, параметры, связанные файлы cookie и тайминги постатейно..

Вкладка «Сеть» Chrome DevTools не имеет подобной панели, но если вы нажимаете на запросы один за другим, вы можете видеть ту же информацию. Это менее интуитивное решение, хотя.

Отслеживание медленных страниц

Спектакль Вкладка (ярлык: CTRL + 5) помогает понять причины медленной веб-страницы. С инструментом Performance Microsoft сделала огромный шаг вперед, объединив предыдущие UI Отзывчивость и Профилировщик инструменты для создания сквозного представления всех ваших сценариев и визуализации производительности.

Этот удобный инструмент предоставляет вам отчеты о различные типы использования процессора, дает вам представление о краске рамки вашего сайта, а также можно изолировать различные пользовательские сценарии, установив метки на временной шкале.

В процессе тестирования мы обнаружили, что инструмент Performance в Edge предоставил нам больше информации о проблемах со скоростью чем либо Firefox Developer, либо Chrome DevTools. Пользовательский интерфейс вкладки «Эффективность» в Edge достаточно хорошо разработан, что помогает нам с множеством визуальных подсказок, и он относительно прост в использовании. Если вы хотите узнать больше о том, как его использовать, прочитайте подробные документы.

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

объем памяти инструмент (ярлык: CTRL + 6) позволяет найти утечки памяти это также может замедлить вашу веб-страницу, кроме того может повлиять на стабильность вашего сайта.

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

Chrome DevTools также имеет хороший профилировщик памяти на вкладке «Профили», в то время как Firefox Developer не предоставляет эту функцию по умолчанию, но вы можете загрузить и установить дополнения, как это, если хотите. Профилировщик памяти Chrome DevTools достаточно продвинут и предлагает больше возможностей, чем Edge, например, он позволяет записывать размещения объектов JavaScript с течением времени это может помочь вам изолировать утечки памяти.

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

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

Интересно, что у вас есть возможность взять посмотрите на свою страницу как Bing Bot. Вы также можете эмулировать GPS, и установить разные разрешения и ориентации.

В Firefox Developer Tools нет инструмента эмуляции устройства, но Chrome DevTools имеет такой сложный эмулятор, что Edge вряд ли сможет с ним конкурировать.

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

Резюме

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

Для этих двух функций стоит подумать о переходе на Edge или его тестировании. Самым большим недостатком является отсутствие возможности закрепить инструменты разработчика внизу экрана, но будем надеяться, что Microsoft быстро исправит эту проблему.