Как да използвате инструментите за разработчици на уеб браузър

2025 Автор: Abigail Brown | [email protected]. Последно модифициран: 2025-01-24 12:03

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

Отминаха дните, в които единствените инструменти за програмиране и тестване в браузъра ви позволяваха да видите изходния код на страницата и нищо повече. Днешните браузъри ви позволяват да се гмурнете много по-дълбоко, като правите неща като изпълнение и отстраняване на грешки в JavaScript фрагменти, проверка и редактиране на DOM елементи, наблюдение в реално време на мрежовия трафик, докато приложението или страницата ви се зареждат, за да идентифицирате тесните места, анализиране на ефективността на CSS, гарантиране, че вашият код е неизползване на твърде много памет или твърде много процесорни цикли и много повече.

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

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

Google Chrome

Инструментите за разработчици на Chrome ви позволяват да редактирате и отстранявате грешки в кода, да проверявате отделни компоненти, за да разкриете проблеми с производителността, да симулирате различни екрани на устройства, включително тези с Android или iOS, и да изпълнявате няколко други полезни функции.

1. Изберете главното меню на Chrome, маркирано с три хоризонтални линии и разположено в горния десен ъгъл на браузъра.

2. Когато се появи падащото меню, задръжте курсора на мишката над опцията Още инструменти.

   

3. Сега трябва да се появи подменю. Изберете опцията с етикет Инструменти за разработчици. Можете също да използвате следната клавишна комбинация вместо този елемент от менюто: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(ОПЦИЯ) +COMMAND+I)

   

4. Интерфейсът на Chrome Developer Tools вече трябва да се показва, както е показано на тази примерна екранна снимка. В зависимост от вашата версия на Chrome първоначалното оформление, което виждате, може да е малко по-различно от представеното тук. Основният център на инструментите за разработчици, обикновено разположен в долната или дясната част на екрана, съдържа следните раздели.

5. В допълнение към тези секции можете също да получите достъп до следните инструменти чрез иконата >>, разположена вдясно от Performance раздел.

   • Memory: Наблюдавайте и записвайте използването на паметта на уеб страница. Можете да видите колко тежък е JavaScript на вашия сайт.
   • Сигурност: Откроява проблеми със сертификати и други проблеми, свързани със сигурността на активната страница или приложение.
   • Приложение: Проверете ресурсите, използвани от уеб приложение. Получете пълна разбивка на това, което се използва.
   • Одити: Предлага начини за оптимизиране на времето за зареждане на страница или приложение и общата производителност.

   

6. Device Mode ви позволява да видите активната страница в симулатор, който я изобразява почти точно както би изглеждала на едно от над дузина устройства, включително няколко добре познати Android и iOS модели като iPad, iPhone и Samsung Galaxy. Също така ви се дава възможност да емулирате персонализирани разделителни способности на екрана, за да отговарят на вашите конкретни нужди за разработка или тестване.

   За да включите и изключите Device Mode, изберете иконата на мобилен телефон, разположена точно вляво от Елементи раздел.

   

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

   От това падащо меню можете да преместите дока, да показвате или скривате различни инструменти, както и да стартирате по-разширени елементи, като инспектор на устройства. Ще откриете, че самият интерфейс на инструментите за разработка може да се персонализира много чрез настройките, намерени в този раздел.

   

Mozilla Firefox

Секцията за уеб разработчици на Firefox включва инструменти както за дизайнери, разработчици, така и за изпитатели, като стилов редактор и капкомер за насочване на пиксели.

1. Изберете главното меню на Firefox, представено от три хоризонтални линии и разположено в горния десен ъгъл на прозореца на браузъра.

2. Когато се появи падащото меню, изберете Уеб програмист.

   

3. Менюто Web Developer вече трябва да се покаже, съдържащо следните опции. Ще забележите, че повечето елементи от менюто имат свързани с тях клавишни комбинации.

   • Toggle Tools: Показва или скрива интерфейса на инструментите за разработчици, обикновено разположен в долната част на прозореца на браузъра. Клавишна комбинация: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspector: Позволява ви да проверявате и/или настройвате CSS и HTML кода на активната страница, както и на преносимо устройство чрез отдалечено отстраняване на грешки. Клавишна комбинация: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Уеб конзола: Позволява ви да изпълнявате JavaScript изрази в рамките на активната страница, както и да преглеждате разнообразен набор от регистрирани данни, включително предупреждения за сигурност, мрежови заявки, CSS съобщения и други. Клавишна комбинация: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: JavaScript Debugger ви позволява да установявате и поправяте дефекти чрез задаване на точки на прекъсване, проверка на DOM възли, черни кутии външни източници и много други. Както в случая с Inspector, тази функция също поддържа отдалечено отстраняване на грешки. Клавишна комбинация: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Редактор на стилове: Позволява ви да създавате нови таблици със стилове и да ги включите в активната уеб страница или да редактирате съществуващи таблици и да тествате как вашите промени се изобразяват в браузър само с едно щракване. Клавишна комбинация: Mac OS X, Windows (SHIFT+F7)
   • Производителност: Предоставя подробна разбивка на мрежовата производителност на активната страница, данни за честотата на кадрите, време и състояние на изпълнение на JavaScript, мигане на боя и много повече. Клавишна комбинация: Mac OS X, Windows (SHIFT+F5)
   • Network: Изброява всяка мрежова заявка, инициирана от браузъра, заедно със съответния метод, домейн на произход, тип, размер и изминало време. Клавишна комбинация: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Инспектор за съхранение: Разгледайте кеша и бисквитките, съхранявани от уебсайт. Клавишна комбинация: (SHIFT+F9)
   • Лента с инструменти за програмисти: Отваря интерактивен интерпретатор на командния ред. Въведете help в интерпретатора за списък с всички налични команди и правилния им синтаксис. Клавишна комбинация: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Осигурява възможност за създаване и изпълнение на уеб приложения чрез действително устройство, работещо с Firefox OS или чрез Firefox OS Simulator. Клавишна комбинация: Mac OS X, Windows (SHIFT+F8)
   • Конзола на браузъра: Осигурява същата функционалност като уеб конзолата (вижте по-горе). Всички върнати данни обаче са за цялото приложение на Firefox (включително разширения и функции на ниво браузър), а не само за активната уеб страница. Клавишна комбинация: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Изглед на адаптивния дизайн: Позволява ви незабавно да видите уеб страница в различни разделителни способности, оформления и размери на екрана, за да имитирате множество устройства, включително таблети и смартфони. Клавишна комбинация: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Eyedropper: Показва шестнадесетичния цветен код за индивидуално избрани пиксели.
   • Scratchpad: Scratchpad ви позволява да пишете, редактирате, интегрирате и изпълнявате фрагменти от JavaScript код от изскачащ прозорец на Firefox. Отворете интерактивен JavaScript документ, който ви позволява да пишете код и да го тествате спрямо уебсайт. Клавишна комбинация: (SHIFT+F4)
   • Service Workers: Отстраняване на грешки в услугата на вашето уеб приложение. Получете подробна информация за тяхното представяне и грешки.
   • Изходен код на страницата: Оригиналният инструмент за разработчици, базиран на браузър, тази опция просто показва наличния изходен код за активната страница. Клавишна комбинация: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Вземете още инструменти: Отваря колекцията Кутия с инструменти за уеб разработчици на официалния сайт за добавки на Mozilla, включваща около дузина популярни разширения като като Firebug и Greasemonkey.

   

Microsoft Edge/Internet Explorer

Обикновено наричан F12 Developer Tools, почит към клавишната комбинация, която стартира интерфейса от по-ранните версии на Internet Explorer, наборът от инструменти за разработка в IE11 и Microsoft Edge измина дълъг път от създаването си, като предлага много удобна група от монитори, програми за отстраняване на грешки, емулатори и компилатори в движение.

Microsoft вече не поддържа Internet Explorer и препоръчва да актуализирате до по-новия браузър Edge. Отидете на сайта им, за да изтеглите най-новата версия.

1. Изберете Още действия, представено от три точки и разположено в горния десен ъгъл на прозореца на браузъра.

   

2. Когато се появи падащото меню, изберете опцията с етикет Инструменти за разработчици.

   

3. Интерфейсът за разработка вече трябва да се показва, обикновено в долната част на прозореца на браузъра. Налични са следните инструменти, всеки от които е достъпен чрез щракване върху заглавието на съответния раздел или използване на съпътстващата клавишна комбинация.

   

   • DOM Explorer: Позволява ви да редактирате таблици със стилове и HTML в активната страница, изобразявайки модифицираните резултати, докато вървите. Използва функцията IntelliSense за автоматично довършване на кода, където е приложимо. Клавишна комбинация: (CTRL+1)
   • Console: Осигурява възможност за изпращане на информация за отстраняване на грешки, включително броячи, таймери, проследявания и персонализирани съобщения чрез интегриран API. Освен това ви позволява да инжектирате код в активна уеб страница и да променяте стойностите, присвоени на отделни променливи в реално време. Клавишна комбинация: (CTRL+2)
   • Debugger: Позволява ви да задавате точки на прекъсване и да отстранявате грешки в кода си, докато се изпълнява, ред по ред, ако е необходимо. Клавишна комбинация: (CTRL+3)
   • Network: Изброява всяка мрежова заявка, инициирана от браузъра по време на зареждане и изпълнение на страницата, включително подробности за протокола, тип съдържание, използване на честотна лента и много други. Клавишна комбинация: (CTRL+4)
   • Производителност: Подробности за скоростта на кадрите, използването на процесора и други показатели, свързани с производителността, за да ви помогнат да ускорите времето за зареждане на страницата и други дейности. Клавишна комбинация: (CTRL+5)
   • Memory: Помага ви да изолирате и коригирате потенциални течове на памет на текущата уеб страница, като показва времева линия за използване на паметта заедно с моментни снимки от различни интервали от време. Клавишна комбинация: (CTRL+6)
   • Емулация: Показва ви как активната страница ще се визуализира в различни разделителни способности и размери на екрана, като емулира смартфони, таблети и други устройства. Той също така предоставя възможност за промяна на потребителския агент и ориентацията на страницата, както и симулиране на различни геолокации чрез въвеждане на географска ширина и дължина. Клавишна комбинация: (CTRL+7)

4. За да покажете Console, докато сте в някой от другите инструменти, натиснете квадратния бутон с дясна скоба вътре в него, разположен в горния десен ъгъл на интерфейса на инструментите за разработка.

   

5. За да откачите интерфейса на инструментите за разработчици, така че да стане отделен прозорец, изберете двата каскадни правоъгълника или използвайте следната клавишна комбинация: CTRL+P. Можете да върнете инструментите на първоначалното им местоположение, като натиснете CTRL+P втори път.

   

Apple Safari (само за Mac)

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

1. Изберете Safari в менюто на браузъра, разположено в горната част на екрана. Когато се появи падащото меню, изберете Preferences. Можете също да използвате следната клавишна комбинация вместо този елемент от менюто: COMMAND+COMMA(,)

   

2. Интерфейсът на

   Safari Preferences вече трябва да се показва, покривайки прозореца на вашия браузър. Изберете иконата Advanced, разположена най-вдясно на заглавката.

   

3. Предпочитанията Advanced вече трябва да са видими. В долната част на този екран има опция с етикет Показване на менюто за разработка в лентата с менюта, придружена от квадратче за отметка. Ако в полето няма показана отметка, щракнете върху нея веднъж, за да поставите такава там.

   

4. Затворете интерфейса Preferences.

5. Сега трябва да забележите нова опция в менюто на браузъра, наречена Разработване, разположена между Отметки и Window. Кликнете върху този елемент от менюто. Сега трябва да се покаже падащо меню, съдържащо следните опции.

   • Отваряне на страница с: Позволява ви да отворите активната уеб страница в един от другите браузъри, инсталирани в момента на вашия Mac.
   • Потребителски агент: Позволява ви да избирате от над дузина предварително дефинирани стойности на потребителски агент, включително няколко версии на Chrome, Firefox и Internet Explorer, както и да дефинирате свои собствени персонализирани низ.
   • Влезте в режим на адаптивен дизайн: Изобразява текущата страница така, както би изглеждала на различни устройства и при различни разделителни способности на екрана.
   • Показване на Web Inspector: Стартира основния интерфейс за инструментите за разработка на Safari, обикновено поставен в долната част на екрана на браузъра ви и съдържащ следните секции: Елементи, Мрежа, Ресурси, Срокове, Дебъгер, Съхранение, Конзола.
   • Показване на конзолата за грешки: Също така стартира интерфейса на инструментите за разработка, директно към раздела на конзолата, който показва грешки, предупреждения и други възможности за търсене регистрационни данни.
   • Покажи изходния код на страницата: Отваря раздела Ресурси, който показва изходния код за активната страница, категоризирана от документа. йени
   • Показване на ресурсите на страницата: Изпълнява същата функция като опцията Показване на изходния код на страницата.
   • Показване на редактора на фрагменти: Отваря нов прозорец, където можете да въведете CSS и HTML код, визуализирайки изхода му в движение.
   • Показване на конструктора на разширения: Предоставя възможност за създаване или редактиране на разширения на Safari с CSS, HTML и JavaScript.
   • Показване на записа на времевата линия: Отваря раздела Времеви линии и започва да показва мрежови заявки, оформление и информация за изобразяване, както и изпълнение на JavaScript в реално време.
   • Empty Caches: Изтрива целия кеш, който в момента се съхранява на вашия твърд диск.
   • Деактивиране на кеша: Спира Safari да кешира, така че цялото съдържание да се извлича от сървъра при всяко зареждане на страница.
   • Деактивиране на изображения: Предотвратява изобразяването на изображения на всички уеб страници.
   • Деактивиране на стилове: Игнорира CSS свойствата при зареждане на страница.
   • Деактивиране на JavaScript: Ограничава изпълнението на JavaScript на всички страници.
   • Деактивиране на разширенията: Забранява всички инсталирани разширения да работят в браузъра.
   • Деактивиране на специфични за сайта хакове: Ако Safari е модифициран да обработва изрично проблеми, специфични за активната уеб страница, тази опция ще блокира тези промени, така че страницата зарежда както би се зареждал преди въвеждането на тези модификации.
   • Деактивиране на ограниченията за локални файлове: Позволява на браузъра да има достъп до файловете на вашите локални дискове, действие, което е ограничено по подразбиране от съображения за сигурност.
   • Деактивиране на ограниченията за различни източници: Тези ограничения са въведени по подразбиране, за да предотвратят XSS и други потенциални опасности. Въпреки това, те често трябва да бъдат временно деактивирани за целите на разработката.
   • Разрешаване на JavaScript от полето за интелигентно търсене: Когато е активирано, предоставя възможност за въвеждане на URL адреси с javascript: включен директно в адресната лента.
   • Третирайте SHA-1 сертификатите като несигурни: SSL сертификатите, използващи алгоритъма SHA-1, се смятат широко за неактуални и уязвими.