DevTools Showdown Edge F12 срещу Firefox срещу Chrome

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

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

В този пост се опитваме да отговорим на този въпрос и да разберем дали F12 Dev Tools на Edge наистина си струва да се използва. Ще сравним характеристиките му с тези на инструментите за разработчици на Firefox и DevTools на Google Chrome.

Отворете Dev Tools

Натискането на F12 отваря инструментите за разработчици във всички 3 случая: Инструменти за разработчици във Firefox, DevTools в Chrome и F12 Dev Tools в Microsoft Edge. Това е клавишната комбинация, където официално име на F12 Dev Tools на Edge идва от.

Когато отворите Dev Tools, можете да усетите едновременно най-известните му недостатъци: в момента е невъзможно е да прикачите инструментите към съществуващ прозорец. Макар че можете да проследите какво се случва на екрана в Инструменти за разработчици на Firefox и Chrome DevTools, като прикрепите прозореца на инструментите за разработчици към долната част на екрана, вие (в момента) не можете да направите същото с Edge.

Разработчиците на Microsoft твърдят, че ще решат този проблем в бъдеща актуализация.

Огледайте DOM

Най- DOM Explorer tool (Shortcut: CTRL + 1) е първият раздел на F12 Dev Tools на Microsoft Edge. Неговото оформление и цялостен дизайн са доста подобни на елемент на Chrome и на Инспектор в Firefox, но възможностите очевидно се различават.

В Edge можете да разгледате представения HTML документ, свързаните CSS стилове и обработващите събития, регистрирани на всеки елемент. Можете да намерите и малката графика за модела на CSS кутия с изчислените стойности, които вече са добре познати от двата конкуриращи се браузъра..

Можеш експериментирайте с правилата на CSS чрез изтриване на текущи и добавяне на нови и можете да видите обобщени промени на отделен subtab наречен “Промени” (намира се от лявата страна). Последното е функция, която не е вградена в Firefox Developer и Chrome DevTools. Тя може да даде бърз рекапитул на потребителя, така че това е наистина полезна опция.

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

В Edge има хладен избор на цвят макар че това може да компенсира потребителя.

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

Най- конзола (Shortcut: CTRL + 2) в Microsoft Edge ви позволява да взаимодействате с JavaScript на вашия сайт, точно както в Firefox и Chrome Dev Tools. И трите ви позволяват да следите JavaScript грешките в реално време и можете да ги анализирате, като въведете свой собствен вход.

Инструментът на конзолата на Edge F12 Dev Tools има хубаво функция за автоматично довършване това ви помага с командите, колкото и да изглежда по-малко информирани в сравнение с тази в Firefox и Chrome Dev Tools.

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

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

Разберете какво прави Вашия код

Най- Debugger tool (Shortcut: CTRL + 3) ви помага да разберете какво се случва с кода ви, докато откривате потенциални грешки. Можете да задавате часовници и точки на прекъсване и да преглеждате стакове за повиквания.

Панелът Watches (Часовници) показва стойности на променливи, режимът на Callstack показва веригата от повиквания на функции, водещи до текущото състояние, а режимът Breakpoints показва списък с точките на прекъсване, които сте задали.

Инструментите на Edge за F12 Dev ви позволяват поставете кода на пауза в средата на изпълнение и стъпка по ред. Можете също да имате възможност да подобри четимостта на компилиран или омаловажен JavaScript файл, и можете отстраняване на грешки в различни ресурси (JavaScript, разширения и т.н.) един по един.

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

Обърнете поглед към браузър-сървър комуникация

Най- мрежа tool (Shortcut: CTRL + 4) е напълно преработен за Microsoft Edge от Internet Explorer 11. С помощта на този удобен инструмент можете да следвайте комуникацията между сървъра и браузъра, и инспектират индивидуалните искания.

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

Разделът Edge's и Firefox в мрежата предлагат доста сходни възможности и потребителски интерфейс. И двата имат удобен панел за страничната лента, който ви позволява да разгледате HTTP заглавието на избрания ресурс, HTTP тялото, параметрите, свързаните с тях „бисквитки“ и тайминги поотделно..

Разделът за мрежата на Chrome DevTools няма подобен прозорец, но ако кликнете върху заявките един по един, можете да видите същата информация. Това е по-малко интуитивно решение.

Проследяване на бавни страници

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

Този удобен инструмент ви предоставя отчети за различни видове използване на процесора, ви дава представа за боята на рамката на вашия сайт и е възможно също така изолирайте различни потребителски сценарии, като зададете етикети на времевата скала.

По време на процеса на тестване открихме, че инструмента за представяне в Edge ни предостави повече информация относно скоростта от разработчиците на Firefox или Chrome DevTools. Потребителският интерфейс на раздела Performance в Edge е доста добре проектиран, като ни помага с много визуални подсказки и е сравнително лесен за използване. Ако искате да научите повече за това как да го използвате, прочетете подробните документи.

Диагностицирайте проблемите с паметта

Най- памет tool (Shortcut: CTRL + 6) прави възможно намерете изтичане на памет което също може да забави вашата уеб страница, освен това може въздействие върху стабилността на вашия сайт.

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

Chrome DevTools също има хубав профил на паметта в раздела „Профили“, докато разработчиците на Firefox не предоставят тази функция по подразбиране, но можете да изтеглите и инсталирате подобни, ако искате. Профилиращият паметта на Chrome DevTools е доста напреднал и предлага повече функции от Edge's, например ви позволява записва разпределението на JavaScript обекти във времето които могат да ви помогнат да изолирате изтичането на паметта.

Тествайте сайта си на различни размери на екрана

Най- съревнование tool (Shortcut: CTRL + 7) ви позволява да тествате сайта си при различни обстоятелства. Можете да избирате от два профила на браузъра, Desktop и Windows 10 Mobile, както и от много различни потребителски агенти, включително всички настолни и мобилни версии на Internet Explorer, до IE6, заедно с много от конкурентите на Edge, Chrome, Firefox, Safari и т.н..

Интересно е, че имате възможност да вземете a погледнете страницата си като Bing Bot. Можете също емулират GPS, и настройте различни резолюции и ориентации.

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

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

резюме

Като цяло F12 Dev Tools на Microsoft Edge изглежда изненадващо добро. Той предлага функции, доста сходни с популярните инструменти за уеб разработки на други модерни браузъри. Има две области, в които F12 Dev Tools на Edge е доста силен: потребителски интерфейс това е наистина интуитивен, лесен за употреба и добре проектиран, и инструменти за диагностика на производителността.

За тези две функции може да се наложи да обмислите преминаването към или поне тестване на Edge. Най-големият недостатък е липсата на възможност за закрепване на инструментите на Dev в долната част на екрана, но нека се надяваме, че Microsoft бързо ще реши този проблем..