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

Интегрирани инструменти за уеб дизайнери, разработчици и тестери

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

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

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

Google Chrome

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

1. Кликнете върху бутона на главното меню на Chrome, маркиран с три хоризонтални линии и разположен в горния десен ъгъл на браузъра.
2. Когато се покаже падащото меню, задръжте курсора на мишката върху опцията Още инструменти .
3. Трябва да се появи подменю. Изберете опцията, наречена " Инструменти за програмисти" . Можете също да използвате следния клавишен клавиш вместо този елемент от менюто: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
4. Интерфейсът на Инструменти за програмисти за Chrome вече трябва да се показва, както е показано в тази екранна снимка. В зависимост от версията ви на Chrome, първоначалното оформление, което виждате, може да е малко по-различно от представеното тук. Главният концентратор на инструментите за програмисти, който обикновено се намира в долната или в дясната страна на екрана, съдържа следните раздели.
   Елементи: Осигурява възможността да проверявате CSS и HTML кода, както и да редактирате CSS в движение, като виждате ефектите от промените в реално време.
   Конзола: JavaScript конзолата на Chrome позволява директно вписване на команди, както и диагностично отстраняване на грешки.
   Източници: Позволява ви да отстранявате кода на JavaScript чрез мощен графичен интерфейс.
   Мрежа: Категоризира и показва подробна информация за всяка свързана операция на активното приложение или страница, включително пълни заглавия за заявки и отговори, както и разширени показатели за време.
   Timeline: Позволява да направите задълбочен анализ на всяка дейност, която се извършва в браузъра, веднага щом се задейства заявка за зареждане на страница или приложение.
5. В допълнение към тези секции можете също да осъществите достъп до следните инструменти чрез иконата >> , намираща се вдясно от раздела Timeline .
   Профил: Разбито в секциите за профили на CPU и сектори на профилите на Heap , осигурява цялостно използване на паметта и време за цялостно изпълнение на активното приложение или страница.
   Сигурност: Отбелязва проблеми с сертификатите и други проблеми, свързани със сигурността, с активната страница или приложение.
   Ресурси: Тук можете да проверявате "бисквитките", местното хранилище, кеша на приложения и други източници на локални данни, използвани от текущата уеб страница или приложение.
   Одити: предлага начини за оптимизиране на времето за зареждане на страницата или на приложението и общото й представяне.
6. Режимът на устройството ви позволява да прегледате активната страница в симулатор, който я прави почти точно така, както би се появил на едно от повече от дузина устройства, включително няколко добре познати модела за Android и iOS, като iPad, iPhone и Samsung Galaxy. Позволява ви също така да подражавате на резолюциите на потребителски екран, така че да съответстват на конкретните ви нужди за разработка или тестване. За да включите и изключите режима на устройството , изберете иконата на мобилния телефон, разположена директно вляво от раздела Елементи .
7. Също така можете да персонализирате външния вид на инструментите си за разработчици, като кликнете първо върху бутона за меню, представен от три вертикално разположени точки и намиращ се в най-дясната страна на посочените по-горе раздели. От това падащо меню можете да премествате док, да показвате или скривате различни инструменти, както и да стартирате по-напреднали елементи, като например инспектор на устройство. Ще откриете, че самият интерфейс на инструментите на dev е изключително адаптивен чрез настройките, намерени в този раздел.

Mozilla Firefox

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

Препоръчано четене: Топ 25 Greasemonkey и Tampermonkey потребителски скриптове

1. Кликнете върху бутона на главното меню на Firefox, представен с три хоризонтални линии и разположен в горния десен ъгъл на прозореца на браузъра.
2. Когато се покаже падащото меню, изберете иконата с етикет Developer . Сега менюто Web Developer трябва да се показва, съдържащо следните опции. Ще забележите, че повечето елементи от менюто имат свързани с тях клавишни комбинации.
   Toggle Tools: Показва или скрива интерфейса на инструментите за програмисти, обикновено разположен в долната част на прозореца на браузъра. Клавишна комбинация: Mac OS X ( ALT (OPTION) + COMMAND + I ), Windows ( CTRL + SHIFT + I )
   Инспектор: Позволява ви да проверявате и / или да ощипвате 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 ви позволява да определяте и отстранявате дефекти, като настройвате прекъсванията, проверявате DOM възли, черните бокс външни източници и много други. Както е случаят с инспектора , тази функция също така поддържа отдалечено отстраняване на грешки. Клавишна комбинация: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S)
   Редактор на стилове: Позволява ви да създавате нови стилове и да ги включвате в активната уеб страница или да редактирате съществуващи листове и да тествате как промените ви се правят в браузър само с едно кликване. Клавишна комбинация: Mac OS X, Windows ( SHIFT + F7 )
   Ефективност: Предоставя подробна разбивка на ефективността на мрежата в активната страница, данните за скоростта на кадрите, времето и състоянието на изпълнение на JavaScript, мигащи бои и много други. Клавишна комбинация: Mac OS X, Windows ( SHIFT + F5 )
   Мрежа: Показва всяка заявка за мрежа, инициирана от браузъра, заедно със съответния метод, домейн на произход, тип, размер и изминало време. Клавишна комбинация: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
   Лентата с инструменти за програмисти: Отваря интерактивен интерпретатор на командния ред. Въведете помощ в преводача за списък с всички налични команди и техния правилен синтаксис. Клавишна комбинация: Mac OS X, Windows ( SHIFT + F2 )
   WebIDE: Предоставя възможност за създаване и изпълнение на уеб приложения чрез действително устройство с операционна система Firefox или чрез Simulator на OS Firefox. Клавишна комбинация: Mac OS X, Windows ( SHIFT + F8 )
   Конзола на браузъра: Предоставя същата функционалност като Web Console (вижте по-горе). Въпреки това всички върнати данни са за цялото приложение на Firefox (включително разширения и функции на ниво браузър), за разлика от активната уеб страница. Клавишна комбинация: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )
   Отзивчив дизайн: Ви позволява незабавно да преглеждате уеб страница с различни разделителни способности, оформления и размери на екрана, за да имитирате множество устройства, включително таблети и смартфони. Клавишна комбинация: Mac OS X ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + SHIFT + M )
   Капкомер: Показва шестнадесетичен цветен код за индивидуално избраните пиксели.
   Scratchpad : Позволява ви да пишете, редактирате, интегрирате и изпълнявате фрагменти от JavaScript код от прозореца на Firefox. Клавишна комбинация: Mac OS X, Windows ( SHIFT + F4 )
   Източник на страницата: Първоначалният инструмент за разработчици, базиран на браузъра, тази опция просто показва наличния изходен код за активната страница. Клавишна комбинация: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
   Получете повече инструменти: Отваря се колекцията Инструменти за уеб програмисти в официалния сайт на Mozilla, съдържащ около дузина популярни разширения като Firebug и Greasemonkey.

Microsoft Edge / Internet Explorer

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

1. Кликнете върху менюто Още действия , представено с три точки и намиращо се в горния десен ъгъл на прозореца на браузъра. Когато се покаже падащото меню, изберете опцията, обозначена като F12 Developer Tools . Както вече споменах, можете също да осъществите достъп до инструментите чрез клавишната комбинация F12 .
2. Сега интерфейсът за разработка трябва да се показва, обикновено в долната част на прозореца на браузъра. Следните инструменти са достъпни, всеки от които е достъпен, като кликнете върху съответния раздел на съответния раздел или използвайки съпровождащата клавишна комбинация.
   DOM Explorer: Позволява ви да редактирате стилове и HTML в активната страница, като направите модифицираните резултати, докато вървите. Използва функционалността IntelliSense за автоматично попълване на кода, където е приложимо. Клавишна комбинация: (CTRL + 1)
   Конзола: Предоставя възможност за подаване на информация за отстраняване на грешки, включително броячи, таймери, следи и персонализирани съобщения чрез интегриран API. Също така ви позволява да инжектирате кода в активна уеб страница и да промените стойностите, определени за отделните променливи в реално време. Клавишна комбинация: (CTRL + 2)
   Дебъгер: Позволява ви да зададете прекъсвачи и да отстранявате кода си по време на изпълнение, ако е необходимо, по ред. Клавишна комбинация: (CTRL + 3)
   Мрежа: Показва всяка заявка за мрежата, инициирана от браузъра по време на зареждане и изпълнение на страницата, включително подробности за протокола, тип съдържание, използване на честотната лента и много други. Клавишна комбинация: (CTRL + 4)
   Ефективност: Подробности за скоростта на кадрите, използването на CPU и други показатели, свързани с ефективността, които ви помагат да ускорите зареждането на страниците и други дейности. Клавишна комбинация: (CTRL + 5)
   Памет: Помага ви да изолирате и коригирате текущите течове на паметта на текущата уеб страница, като покажете график за използване на паметта заедно с моментни снимки от различни интервали от време. Клавишна комбинация: (CTRL + 6)
   Емулация: Показва как ще се показва активната страница при различни разделителни способности и размери на екрана, като емулира смартфони, таблети и други устройства. Също така осигурява възможността за промяна на потребителския агент и ориентация на страницата, както и симулиране на различни геолокации чрез въвеждане на географска ширина и дължина. Клавишна комбинация: (CTRL + 7)
3. За да покажете конзолата докато сте в някой от другите инструменти, кликнете върху квадратния бутон с дясна скоба вътре в нея, намираща се в горния десен ъгъл на интерфейса за инструменти за разработка.
4. За да премахнете отметката, интерфейсът за инструменти за програмисти се превръща в отделен прозорец, кликнете върху бутона, представен от два каскадни правоъгълника, или използвайте следната клавишна комбинация: CTRL + P. Можете да поставите инструментите обратно в първоначалното им местоположение, като натиснете CTRL + P за втори път.

Apple Safari (само за OS X)

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

1. Кликнете върху Safari в менюто на браузъра, разположено в горната част на екрана. Когато се покаже падащото меню, изберете Предпочитания . Можете също да използвате следния клавишен клавиш вместо този елемент от менюто: COMMAND + COMMA (,)
2. Следва да се показва интерфейсът за предпочитания на Safari, който да покрива прозореца на браузъра ви. Кликнете върху иконата Разширени , разположена в най-дясната страна на заглавката.
3. Разширените предпочитания вече трябва да са видими. В долната част на екрана има опция с надпис "Развитие" в лентата с менюта , придружена от квадратче за отметка. Ако в кутията няма отметка, кликнете върху нея веднъж, за да я поставите там.
4. Затворете интерфейса на предпочитанията, като кликнете върху червеното "x", намиращо се в горния ляв ъгъл.
5. Вече трябва да забележите нова опция в менюто на браузъра, наречено Разработка , разположено между отметките и прозореца . Кликнете върху тази опция в менюто. Сега трябва да се покаже падащо меню, съдържащо следните опции.
   Отваряне на страницата с: Позволява ви да отворите активната уеб страница в някой от другите браузъри, които понастоящем са инсталирани на вашия Mac.
   Потребителски агент: Позволява ви да избирате от над десет предварително определени стойности на потребителски агенти, включително няколко версии на Chrome, Firefox и Internet Explorer, както и да дефинирате своя персонализиран низ.
   Въведете Режим на отговорно проектиране : Нанася текущата страница така, както би изглеждала на различни устройства и при различни резолюции на екрана.
   Показване на уеб инспектор: Стартира основния интерфейс за инструментите на Safari dev, обикновено поставени в долната част на екрана на браузъра ви и съдържащ следните раздели: Елементи , Мрежа , Ресурси , Срокове , Дебъгер , Съхранение , Конзола .
   Показване на конзолата за грешки: Също така стартира интерфейсът Dev Tools директно в раздела " Конзола", който показва грешки, предупреждения и други данни от дневника, подлежащи на търсене.
   Показване на източника на страница: Отваря раздела Ресурси , който показва изходния код за активната страница, категоризирана по документ.
   Показване на ресурсите на страницата: Изпълнява същата функция като опцията Показване на източника на страница .
   Показване на редактор на фрагменти: Отваря нов прозорец, в който можете да въведете CSS и HTML код, като визуализирате изхода му в движение.
   Показване на разширения Builder: Предоставя възможност за създаване или редактиране на разширения за Safari с CSS, HTML и JavaScript.
   Показване на запис на времева лента : Отваря се раздел " Графики" и започва да се показват в реално време заявките за мрежата, оформлението и изобразяването, както и изпълнението на JavaScript.
   Empty Caches: Изтрива цялата кеш, която се съхранява на твърдия ви диск.
   Деактивиране на кеша: Спира Safari от кеширане, така че цялото съдържание да се извлича от сървъра при зареждането на всяка страница.
   Деактивиране на изображения: Предотвратява изобразяването на изображения на всички уеб страници.
   Деактивиране на стилове: Игнорира CSS свойства при зареждане на страница.
   Деактивиране на JavaScript: Ограничава изпълнението на JavaScript на всички страници.
   Деактивиране на разширенията: Забрани всички инсталирани разширения да се изпълняват в браузъра.
   Деактивиране на специфичните за сайта хакове: Ако Safari е модифициран, за да се занимава изрично със специфични за активната уеб страница въпроси, тази опция ще блокира тези промени, така че страницата да се зареди така, както би била преди въвеждането на тези модификации.
   Деактивиране на ограниченията за локални файлове: Позволява на браузъра да има достъп до файлове на локалните ви дискове - действие, което е ограничено по подразбиране поради причини, свързани със сигурността.
   Деактивиране на ограничителните ограничения при произход: Тези ограничения са въведени по подразбиране за предотвратяване на XSS и други потенциални опасности. Те обаче често трябва да бъдат временно забранени за целите на развитието.
   Позволяване на JavaScript от поле за интелигентно търсене: Когато е активирано, предоставя възможност за въвеждане на URL адреси с JavaScript: включен директно в адресната лента.
   Третиране на SHA-1 сертификатите като несигурни: SSL сертификатите, използващи алгоритъма SHA-1, се считат за неактуални и уязвими.