Интегрирани алатки за веб-дизајнери, програмери и тестери
Покрај повеќето производители на прелистувачи кои се фокусираат на секојдневниот корисник кој бара да сурфаат на Интернет, тие исто така се грижат за развивачите на веб, дизајнерите и професионалците за обезбедување квалитет кои помагаат да се изградат апликациите и сајтовите со кои тие корисници пристапуваат со интегрирање на моќни алатки во прелистувачите себе.
Поминаа деновите кога само алатките за програмирање и тестирање пронајдени во прелистувачот ви дозволија да ги видите изворниот код на страницата и ништо повеќе. Денешните прелистувачи ви дозволуваат да направите многу подлабоко нуркање, правејќи работи како извршување и дебагирање на фрагменти на JavaScript, проверка и уредување на DOM елементи, следење на мрежниот сообраќај во реално време, како што вашата апликација или страница вчитува да ги идентификуваат тесните грла, анализа на ефикасноста на CSS, осигурувајќи дека вашиот код е не користи премногу меморија или премногу CPU циклуси, и многу повеќе. Од перспектива на тестирање, можете да репродуцирате како една апликација или веб-страница ќе се прикажат во различни прелистувачи, како и на различни уреди и платформи преку магијата на реагирачки дизајн и вградените симулатори. Најдобриот дел е тоа што можете да го направите сето ова без да го напуштите вашиот прелистувач!
Упатствата подолу ве одминуваат како да пристапите до овие алатки за програмери во неколку популарни веб прелистувачи.
Гугл хром
Инструментите за развивање на Chrome ви дозволуваат да уредувате и дебагирате код, да ги ревидирате поединечните компоненти за да ги изложите проблемите со изведбата, да симулираат различни екрани на уредот, вклучувајќи ги оние што работат со Android или iOS , и изведување на неколку други корисни функции.
- Кликнете на копчето за главното мени на Chrome, означено со три хоризонтални линии и се наоѓа во горниот десен агол на прелистувачот.
- Кога ќе се појави опаѓачкото мени, поставете го курсорот на глувчето над опцијата Повеќе алатки .
- Сега треба да се појави под-мени. Изберете ја опцијата означена со алатки за програмери . Наместо оваа ставка на менито, можете да ја користите и следната кратенка на тастатура: Хром оперативен систем / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (ОПЦИЈА) + КОМАНД + I )
- Сега интерфејсот на Chrome Developer Tools треба да биде прикажан, како што е прикажано во овој пример. Во зависност од вашата верзија на Chrome, првичниот распоред што го гледате може малку да се разликува од оној презентиран овде. Главниот центар на програмерските алатки, обично се наоѓа на долната или десната страна на екранот, ги содржи следните јазичиња.
Елементи: Обезбедува можност за проверка на CSS и HTML код, како и уредување на CSS на летот, гледајќи ги ефектите од вашите промени во реално време.
Конзола: конзолата за JavaScript на Chrome овозможува директен внес на команда, како и дијагностичко дебагирање.
Извори: Ви овозможува дебагирање на JavaScript код преку моќен графички интерфејс.
Мрежа: Ги класифицира и прикажува детални информации за секоја поврзана операција на активната апликација или страница, вклучувајќи ги целосните заглавија за барање и одговор, како и напредните мерења на времето.
Временска рамка: Овозможува длабинска анализа на секоја активност што се случува во прелистувачот веднаш штом се покрене барањето за страница или апликација. - Во прилог на овие секции, исто така можете да пристапите до следните алатки преку иконата >> , која се наоѓа десно од тајмингот .
Профил: Скршен надолу во профилите на CPU и Heap profiler , обезбедува сеопфатна меморија и целокупно време за извршување на активната апликација или страница.
Безбедност: Ги прикажува проблемите со сертификатот и другите прашања поврзани со безбедноста со активната страница или апликација.
Ресурси: Ова е местото каде што можете да ги испитате колачињата, локалното складирање, кешот на апликации и други локални извори на податоци што ги користат тековната веб-страница или апликација.
Ревизија: нуди начини за оптимизирање на времето за вчитување на страната или апликацијата и општите перформанси. - Режимот на уредот ви овозможува да ја видите активната страница на симулатор кој го прави речиси точно како што ќе се појави на повеќе од десетина уреди, вклучувајќи и неколку познати Android и iOS модели како што се iPad, iPhone и Samsung Galaxy. Вие исто така добивате способност да емитирате сопствени резолуции на екранот за да одговараат на вашите конкретни потреби за развој или тестирање. За да го вклучите и исклучите режимот на уредот , одберете ја иконата за мобилен телефон лоцирана директно налево од табот Елементи .
- Исто така, можете да го прилагодите изгледот и чувството на вашите алатки за програмери со прво кликање на копчето на менито претставено со три вертикално поставени точки и лоцирани на крајната десна страна од горенаведените јазичиња. Од рамките на ова опаѓачко мени, можете да го репозиционирате приклучното место, да покажете или скриете различни алатки, како и да стартувате понапредни предмети како инспектор за уред. Ќе откриете дека самиот интерфејс на алатките dev е високо прилагодлив преку поставките пронајдени во овој дел.
Mozilla Firefox
Дел од веб-програмерите на Firefox вклучува алатки за дизајнери, програмери и тестирачи, како уредувач на стил и eyedropper за таргетирање на пиксели.
Препорачано четиво: Top 25 Greasemonkey и кориснички скрипти на Tampermonkey
- Кликнете на копчето за главното мени на Firefox, претставено со три хоризонтални линии и се наоѓа во горниот десен агол од прозорецот на прелистувачот.
- Кога ќе се појави опаѓачкото мени, изберете ја иконата означена Developer . Сега треба да се прикаже менито Веб програмер , содржат следниве опции. Ќе забележите дека повеќето ставки од менито имаат кратенки на тастатурата поврзани со нив.
Алатки за префрлување: Го прикажува или крие интерфејсот на алатки за програмери, обично поставени на дното од прозорецот на прелистувачот. Кратенка на тастатура: Mac OS X ( ALT (ОПЦИЈА) + КОМАНД + I ), Windows ( CTRL + SHIFT + I )
Инспектор: Ви овозможува да извршите увид и / или нагодување на CSS и HTML код на активната страница, како и на пренослив уред преку далечинско дебагирање. Кратенка на тастатура: Mac OS X ( ALT (ОПЦИЈА) + КОМАНД + C ), Windows ( CTRL + SHIFT + C )
Веб-конзола: Ви овозможува да извршите изрази на говорник во рамките на активната страница, како и да ги разгледате различните сорти на регистрирани податоци, вклучувајќи безбедносни предупредувања, мрежни барања, CSS пораки и друго. Кратенка на тастатура: Mac OS X ( ALT (ОПЦИЈА) + КОМАНД + К ), Windows ( CTRL + SHIFT + K )
Debugger: JavaScript Debugger ви овозможува да ги идентификувате и да ги поправите дефектите со поставување точки на прекин, проверка на DOM-јазли, надворешни извори на црно бокс, и многу повеќе. Како што е случај со инспекторот , оваа функција исто така поддржува далечинско дебагирање. Кратенка на тастатура: Mac OS X ( ALT (ОПЦИЈА) + КОМАНД + С ), Windows ( CTRL + SHIFT + S)
Уредувач на стилови: Ви овозможува да креирате нови листови со стилови и да ги инкорпорирате со активната веб-страница или да ги уредувате постојните листови и да проверувате како вашите промени се прават во прелистувачот со само еден клик. Кратенка на тастатура: Mac OS X, Windows ( SHIFT + F7 )
Перформанси: Обезбедува детален дефект на ефикасноста на мрежата на активната страница, податоци за фреквенции, време за извршување на JavaScript и состојба, боја на бои и многу повеќе. Кратенка на тастатура: Mac OS X, Windows ( SHIFT + F5 )
Мрежа: го прикажува секое барање на мрежата иницирано од прелистувачот заедно со соодветниот метод, домен на потекло, тип, големина и време поминато. Кратенка на тастатура: Mac OS X ( ALT (ОПЦИЈА) + КОМАНД + П ), Windows ( CTRL + SHIFT + Q )
Алатник за програмери: отвора интерактивен преведувач на командната линија. Внесете помош во преведувачот за листа на сите достапни команди и нивната соодветна синтакса. Кратенка на тастатура: Mac OS X, Windows ( SHIFT + F2 )
WebIDE: Обезбедува способност за креирање и извршување на веб-апликации преку вистински уред кој работи на Firefox OS или преку Симулатор на ОС. Кратенка на тастатура: Mac OS X, Windows ( SHIFT + F8 )
Конзола за прелистувач: ја обезбедува истата функционалност како и веб-конзолата (видете погоре). Сепак, сите податоци што се враќаат се за целата апликација на Firefox (вклучувајќи ги и екстензии и функции на ниво на прелистувач), за разлика од само активната веб-страница. Кратенка на тастатура: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )
Одговорен дизајн на изглед: Ви овозможува веднаш да ја видите веб-страницата во различни резолуции, распореди и големини на екранот, за да имитираат повеќе уреди, вклучувајќи таблети и паметни телефони. Кратенка на тастатура: Mac OS X ( ALT (ОПЦИЈА) + КОМАНД + М ), Windows ( CTRL + SHIFT + M )
Eyedropper: Го прикажува хексадекот на боите за поединечно избрани пиксели.
Scratchpad : Ви овозможува да пишувате, уредувате, интегрирате и извршувате фрагменти од JavaScript код во рамките на прозорецот на Firefox. Кратенка на тастатура: Mac OS X, Windows ( SHIFT + F4 )
Извор на страната: Оригиналната алатка за развој на бази на пребарувачи, оваа опција едноставно го прикажува достапниот изворен код за активната страница. Кратенка на тастатура: Mac OS X ( КОМАНД + У ), Windows ( CTRL + U )
Добијте повеќе алатки: ја отвора колекцијата на Toolbox на веб програмерот на официјалната веб - страница на Mozilla, која содржи околу десетина популарни екстензии како што се Firebug и Greasemonkey.
Microsoft Edge / Internet Explorer
Најчесто се нарекува F12 Developer Tools , почит кон кратенка на тастатура која го отвори интерфејсот од претходните верзии на Internet Explorer, десктоп десктоп во IE11 и Microsoft Edge помина долг пат од своето основање нудејќи многу корисна група на монитори, debugers, emulators, и на-на-лета компајлери.
- Кликнете на менито Повеќе дејства , претставени со три точки и се наоѓаат во горниот десен агол од прозорецот на прелистувачот. Кога ќе се појави опаѓачкото мени, изберете ја опцијата означена F12 Developer Tools . Како што веќе рековте, исто така можете да пристапите до алатките преку кратенка на тастатурата F12 .
- Развојниот интерфејс сега треба да биде прикажан, обично на дното на прозорецот на прелистувачот. Следните алатки се достапни, секој достапен со кликнување на соодветниот наслов на табу или со помош на придружната кратенка на тастатурата.
DOM Explorer: Ви овозможува да ги уредувате табелите со стилови и HTML во активната страница, рендерирање на измените резултати додека одите. Користете ја IntelliSense функционалноста за код за автоматско комплетирање, каде што е применливо. Кратенка на тастатура: (CTRL + 1)
Конзола: Обезбедува способност да доставува информации за дебагирање, вклучувајќи броеви, тајмери, траги и кориснички пораки преку интегриран API. Исто така, ви овозможува да внесете код во активна веб страница и да ги модифицирате вредностите доделени на индивидуалните променливи во реално време. Кратенка на тастатура: (CTRL + 2)
Debugger: Ви овозможува да поставите точки на прекин и да го дебагирате кодот додека го извршувате, по потреба. Кратенка на тастатура: (CTRL + 3)
Network: го прикажува секое барање на мрежата иницирано од прелистувачот за време на оптоварување и извршување на страница, вклучувајќи детали за протокол, тип на содржина, употреба на пропусниот опсег и многу повеќе. Кратенка на тастатура: (CTRL + 4)
Перформанси: Детали за рамки на слики, користење на процесорот и други показатели поврзани со изведбата за да ви помогне да ги забрзате времињата за вчитување на страницата и другите активности. Кратенка на тастатура: (CTRL + 5)
Меморија: Ви помага да ги изолирате и коригирате потенцијалните пропусти во меморијата на тековната веб-страница, прикажувајќи временска линија за користење на меморијата, заедно со сликите од различни временски интервали. Кратенка на тастатура: (CTRL + 6)
Емулација: Ви покажува како активната страница ќе прикаже различни резолуции и големини на екранот, имитирајќи паметни телефони, таблети и други уреди. Исто така, дава можност за менување на корисничкиот агент и ориентација на страницата, како и симулирање на различни геолокации со внесување на географска ширина и должина. Кратенка на тастатура: (CTRL + 7) - За да се прикаже конзолата додека било кое од другите алатки кликнете на квадратното копче со десна рамка внатре во неа, која се наоѓа во горниот десен агол на интерфејсот на развојните алатки.
- За да разделите, интерфејсот на алатките за програмери станува посебен прозорец, кликнете на копчето што го прикажуваат два каскадни правоаголници или користете ја следнава тастатура: CTRL + P. Можете да ги поставите алатките назад во нивната оригинална локација со притискање на CTRL + P по втор пат.
Apple Safari (само OS X)
Разновидните алатки на dev Safet се одраз на големата заедница на развивачи што користи Mac за нивните потреби за дизајнирање и програмирање. Во прилог на моќна конзола и традиционални карактеристики за најавување и дебагирање, исто така се обезбедени лесни за употреба реагирачки режим на работа и алатка за креирање на сопствени екстензии на прелистувачот.
- Кликнете на Safari во менито на пребарувачот, кој се наоѓа на врвот на вашиот екран. Кога се појавува опаѓачкото мени, изберете Preferences . Наместо оваа ставка на менито, можете да ја користите следната кратенка на тастатура: COMMAND + COMMA (,)
- Интерфејсот на Safari's Preferences сега треба да биде прикажан, покривајќи го прозорецот на прелистувачот. Кликнете на напредната икона, која се наоѓа на крајната десна страна на заглавието.
- Напредните параметри сега треба да бидат видливи. На дното на овој екран е опција означена како Show Show мени во лентата со мени , придружена со квадратче. Ако во кутијата не постои знак за проверка, кликнете еднаш за да го поставите таму.
- Затворете го интерфејсот Preferences со кликнување на црвениот 'x' во горниот лев агол.
- Сега треба да забележите нова опција во менито на пребарувачот со име Развивање , лоцирано помеѓу Обележувачи и Прозорец . Кликнете на оваа ставка од менито. Сега треба да се прикаже паѓачко мени, кое ги содржи следните опции.
Отворете ја страницата со: Ви овозможува да ја отворите активната веб-страница во еден од другите пребарувачи што моментално се инсталирани на вашиот Mac.
Агент на корисници: Ви овозможува да изберете од повеќе од десетина претходно дефинирани вредности на кориснички агенти, вклучувајќи неколку верзии на Chrome, Firefox и Internet Explorer, како и дефинирање на сопствениот сопствен стринг.
Внесете режим на респонден дизајн : ја прикажува тековната страница како што се појавува на различни уреди и на различни резолуции на екранот.
Покажи веб-инспектор: го отвора главниот интерфејс за dev-алатките на Safari, обично поставени на дното на екранот на вашиот прелистувач и ги содржат следните делови: Елементи , Мрежа , Ресурси , Временски рамки , Дебагер , Складирање , Конзола .
Покажи ја конзолата за грешка: Исто така го пушта интерфејсот dev алатки, директно до табулаторот Console, каде што се прикажани грешки, предупредувања и други податоци за дневник за пребарување.
Show Source Page: Отвора табуларот " ресурси" , кој прикажува изворниот код за активната страница категоризирана по документ.
Прикажи ги ресурсите на страницата: ја врши истата функција како опцијата Show Page Source .
Прикажи Уредувач на фрагменти: Отвора нов прозорец каде што можете да внесете CSS и HTML код, преглед на својот излез на летот.
Show Extension Builder: Ја дава можноста да креирате или уредувате Safari екстензии со CSS, HTML и JavaScript.
Прикажи го снимањето на временската линија: го отвора тајмингот и почнува да прикажува мрежни барања, распоред и рендерирање информации, како и извршување на JavaScript во реално време.
Празни кеши: Го брише целиот кеш кој моментално е зачуван на вашиот хард диск.
Оневозможи кеши: запира Safari од кеширање, така што целата содржина ќе биде извадена од серверот при секое оптоварување на страницата.
Оневозможи слики: Спречува слики од рендерирање на сите веб-страници.
Оневозможи стилови: Игнорира својства на CSS кога страница е вчитана.
Оневозможи JavaScript: ја ограничува извршувањето на JavaScript на сите страници.
Оневозможи екстензии: забранува сите инсталирани екстензии да се извршуваат во рамките на прелистувачот.
Оневозможи хакери за специфични локации: Ако Safari е модифициран за експлицитно да се справи со проблемите специфични за активната веб-страница, оваа опција ќе ги блокира тие промени, така што страната ќе се вчита како што би постоела пред да се воведат овие модификации.
Оневозможи локални ограничувања на датотеките: Овозможува прелистувачот да има пристап до датотеки на вашите локални дискови, дејство кое по стандард е ограничено поради безбедносни причини.
Оневозможи ограничувања на вкрстено потекло: Овие ограничувања се поставуваат стандардно за да се спречат XSS и други потенцијални опасности. Меѓутоа, тие често треба да бидат привремено оневозможени за развојни цели.
Дозволи го вклучите Javascript-от од полето за паметно пребарување: Кога е овозможено, ја дава можноста за внесување URL-адреси со javascript: вградена директно во полето за адреси.
Однесувајте се кон SHA-1 сертификатите како несигурни: SSL-сертификатите со користење на SHA-1 алгоритам се сметаат за застарени и ранливи.