Инструменти за разработчици в новия Microsoft Edge

Новият браузър, базиран на Chromium на Microsoft, наскоро имаше второто си публично стабилно издание, разкривайки Edge 80 с пълна поддръжка на ARM64, както и подобрени инструменти, които да ви помогнат да създавате и работите с уеб съдържание. Подобно на по-ранните версии на вече наследения Edge, новият браузър на Microsoft поддържа познатия пряк път F12 за стартиране на инструментите за разработчици, прикрепен към браузъра или в отделен панел.

Струва си да се запознаете с новите неща, тъй като въпреки че има прилики с наследения Edge, сега работите в свят на Chromium и има много повече общи неща с Chrome и други браузъри, базирани на Chromium. Това не е лошо нещо. По-лесно е да прехвърляте умения между браузърите и ако сте използвали Chrome като браузър за разработка, ще бъде лесно да започнете да работите в новия Edge. Въпреки това, Microsoft направи някои собствени промени и работи за разширяване на опита на Edge за разработчици в Visual Studio код, така че да можете да разработвате и тествате JavaScript приложения в една среда.

Опит за разработчици на различни платформи

С новия Edge, наличен за Windows 7 и macOS, и с Linux версия в процес на разработка, има достъп до същите инструменти за разработка на различни платформи. Получавате едни и същи инспектори, програми за отстраняване на грешки и конзоли, така че е лесно да провеждате едни и същи тестове, където и да работите, и на която и да е операционна система, която използвате. Разработчик, запознат с Edge в Windows, трябва да може да премине към Mac за тестване на код, без да се налага да чака разработчик на Mac да помогне.

Подобно на наследствения Edge, новите инструменти за разработка на Edge, базирани на Chromium, ви помагат да разгледате HTML, CSS и JavaScript на вашия сайт, с дебъгер на JavaScript и конзола за преглед на изходни данни от конзолата при стартиране на JavaScript. Можете да използвате инструментите за бързо включване на лентата с инструменти на браузъра, която добавя режими на изглед на устройство, като ви дава възможност да тествате отзивчив дизайн, без да напускате компютър за разработка.

Използване на инструментите за разработчици на Edge

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

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

Екранът Elements също е достъпен като разширение на Visual Studio Code, като придружава проверката на оформлението заедно с редактирането на HTML. Това е полезен начин бързо да видите как промените в кода ви влияят върху оформлението на страниците ви. Можете дори да прикачите код към екземпляр на браузър, като ви дава директен достъп до всички отворени HTML документи.

Подготовка за PWA

Един от най-полезните инструменти е панелът Performance. Оттук можете да записвате дейностите на браузъра си. След като тестовата последователност приключи, можете да използвате времевата линия на инструмента, за да профилирате ресурсите, които приложението ви използва. Най-добре се използва заедно с инструментите за мрежа и памет, особено ако използвате много JavaScript. Разбирането на ефективността на уеб приложението е особено важно, ако планирате да го използвате като PWA (прогресивно уеб приложение) и тук панел за приложения добавя инструменти за изследване на ключови компоненти на PWA, включително местни служители за съхранение и обслужване.

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

Използване на приставки в Edge DevTools

Друга характеристика на преминаването към базирано на Chromium изживяване за разработчици е поддръжката за приставки на трети страни. Някои вече са налични в собствения магазин за добавки на Edge (макар в момента само чрез частни дълбоки връзки в магазина). За по-широк избор, ако сте активирали поддръжка на магазини на трети страни в Edge, имате достъп до всички разширения в уеб магазина на Chrome. Тук има много, включително инструменти, които добавят фокусирана поддръжка за конкретни JavaScript рамки или помощ при отстраняване на грешки. Те включват React на Facebook, gRPC с отворен код, инструменти за работа с API на GraphQL и поддръжка за линтери като webhint.

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

Добавянето на разширение към инструментите за разработчици е като добавяне на разширение към браузъра. Отидете до магазин, кликнете върху инструмента, който искате да добавите, и го оставете да се изтегли и инсталира. Той ще се инсталира в браузъра и може да искате да скриете иконата на разширението в менюто на браузъра, преди да отворите инструментите за програмисти, за да видите нов раздел. Изпълнението на webhint върху даден сайт показва набор от ключови показатели, като ви дава подсказки за важни функции като достъпност или за поддръжка за PWA функции.

Добре е да видите персонализирането най-накрая част от инструментите на Edge. Всички ние използваме различни вериги от инструменти и предоставянето на това, от което се нуждаете, за да поддържате технологиите, които използвате, е много лесен за разработчици подход. Още когато Microsoft обяви преминаването към Chromium за своя браузър, той посочи, че една от причините му е да даде на разработчиците функциите, които са им необходими за изграждане на приложенията, които искат. Това може да означава само подобряване на поддръжката на браузъра за HTML5, CSS и JavaScript, така че предоставянето на пълната гама инструменти за разработчици на Chromium в Edge, във всичките му поддържани операционни системи, е добре дошъл ход.

Промените на Microsoft в опита на разработчиците на Chromium

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

Понастоящем други нови функции са скрити зад експериментални флагове в настройките на Edge, включително поддръжка за допълнителни езици. Ако активирате тази функция и използвате един от 10-те поддържани езика, локализацията на инструментите за програмисти ще съответства на локализацията на вашия браузър.