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

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

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

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

Google Chrome

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

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

Mozilla Firefox

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

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

1. Кликнете върху бутона на главното меню на Firefox, представен с три хоризонтални линии и разположен в горния десен ъгъл на прозореца на браузъра.
2. Когато се покаже падащото меню, изберете иконата Разработчик , Най- Уеб разработчик трябва да се покаже менюто, съдържащо следните опции.Ще забележите, че повечето елементи от менюто имат свързани с тях клавишни комбинации.Превключване на инструменти: Показва или скрива интерфейса за инструменти за програмисти, обикновено разположен в долната част на прозореца на браузъра. Клавишна комбинация: Mac OS X ( ALT (ВАРИАНТ) + Command + I ), Windows ( CTRL + SHIFT + I )Инспектор: Позволява ви да проверявате и / или да ощипвате CSS и HTML кода на активната страница, както и на преносимо устройство чрез отдалечено отстраняване на грешки. Клавишна комбинация: Mac OS X ( ALT (ВАРИАНТ) + командата + C ), Windows ( CTRL + SHIFT + C )Уеб конзола: Позволява ви да изпълнявате изрази на JavaScript в активната страница, както и да преглеждате различни набор от данни, включително предупреждения за сигурност, заявки за мрежа, CSS съобщения и др. Клавишна комбинация: Mac OS X ( ALT (ВАРИАНТ) + Command + K ), Windows ( CTRL + SHIFT + K )Debugger: Най- Дебъгер за JavaScript ви позволява да определяте и отстранявате дефекти, като настройвате прекъсванията, проверявате DOM възли, черните бокс външни източници и много други. Както е в случая с Инспектор , тази функция също така поддържа отдалечено отстраняване на грешки. Клавишна комбинация: Mac OS X ( ALT (ВАРИАНТ) + Command + S ), Windows ( CTRL + SHIFT + S) Редактор на стилове: Позволява ви да създавате нови стилове и да ги включвате в активната уеб страница или да редактирате съществуващи листове и да тествате как промените ви се правят в браузър само с едно кликване. Клавишна комбинация: Mac OS X, Windows ( SHIFT + F7 )Производителност: Предоставя подробно описание на ефективността на мрежата в активната страница, данните за кадрите на кадрите, времето и състоянието на изпълнение на JavaScript, мигането на боята и много други. Клавишна комбинация: Mac OS X, Windows ( SHIFT + F5 )мрежа: Показва всяка заявка за мрежата, инициирана от браузъра, заедно със съответния метод, началния домейн, типа, размера и изминалото време. Клавишна комбинация: Mac OS X ( ALT (ВАРИАНТ) + Command + Q ), Windows ( CTRL + SHIFT + Q )Лентата с инструменти за програмисти: Отваря интерактивен преводач на командния ред. Въведете помогне в интерпретатора за списък с всички налични команди и техния правилен синтаксис. Клавишна комбинация: Mac OS X, Windows ( SHIFT + F2 )WebIDE: Предоставя възможност за създаване и изпълнение на уеб приложения чрез действително устройство с операционна система Firefox или чрез Firefox OS Simulator. Клавишна комбинация: Mac OS X, Windows ( SHIFT + F8 )Конзола на браузъра: Предоставя същата функционалност като Уеб конзола (виж по-горе). Въпреки това всички върнати данни са за цялото приложение на Firefox (включително разширения и функции на ниво браузър), за разлика от активната уеб страница. Клавишна комбинация: Mac OS X ( SHIFT + Command + J ), Windows ( CTRL + SHIFT + J )Отзивчив дизайн: Позволява ви незабавно да преглеждате уеб страница с различни резолюции, оформления и размери на екрана, за да имитирате множество устройства, включително таблети и смартфони. Клавишна комбинация: Mac OS X ( ALT (ВАРИАНТ) + Command + М ), Windows ( CTRL + SHIFT + M )пипетка: Показва кода за шестнадесетичен цвят за индивидуално избраните пиксели.Scratchpad: Позволява ви да пишете, редактирате, интегрирате и изпълнявате фрагменти от кода на JavaScript в рамките на изскачащ прозорец на Firefox. Клавишна комбинация: Mac OS X, Windows ( SHIFT + F4 )Източник на страницата: Първоначалният инструмент за разработчици, базиран на браузъра, тази опция просто показва наличния изходен код за активната страница. Клавишна комбинация: Mac OS X ( Команда + U ), Windows ( CTRL + U )Получете повече инструменти: Отваря Инструменти за уеб програмисти събиране на официалния сайт на Mozilla, включващ около дузина популярни разширения като Firebug и Greasemonkey.

Microsoft Edge / Internet Explorer

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

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

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

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

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