Комплексныя наборы інструментаў для вэб-дызайнераў, распрацоўшчыкаў і тэстараў
У дадатак да большасці вытворцаў браўзэраў з акцэнтам на паўсядзённым карыстальнік шукае для серфінгу ў Інтэрнэце, яны таксама прызначаныя для вэб-распрацоўнікаў, дызайнераў і спецыялістаў па забеспячэнні якасці, якія дапамагаюць ствараць прыкладанні і сайты, якія гэтыя карыстальнікі атрымліваюць доступ шляхам інтэграцыі магутных інструментаў прама ў браўзэрах самі па сабе.
Прайшлі тыя дні, калі толькі праграмавання і тэставання інструментаў, знойдзеныя ў браўзэры дазволена праглядаць старонкі толькі зыходны код і нічога больш. Сучасныя браўзэры дазваляюць прыняць больш глыбокае апусканне, робячы такія рэчы, як выкананне і адладка JavaScript сниппеты, праверкі і рэдагавання DOM элементаў, маніторынг у рэальным часе сеткавага трафіку, як вашыя прыкладання або загрузкі старонкі для выяўлення вузкіх месцаў, аналізуючы прадукцыйнасць CSS, гарантуючы, што ваш код не выкарыстоўвае занадта шмат памяці або занадта шмат працэсарных цыклаў, і многае іншае. З пунктам гледжання тэставання, вы можаце прайграць, якім вобраз старонкі прыкладання або вэб-акажа ў розных браўзэрах, а таксама на розныя прыладах і платформах з дапамогай магіі адаптыўнага дызайну і ўбудаваных у трэнажорах. Лепшая частка заключаецца ў тым, што вы можаце зрабіць усё гэта без таго, каб пакінуць свой браўзэр!
Навучальныя дапаможнікі ніжэй пакрокавымі як доступ да гэтых прыладам распрацоўніка ў некалькіх папулярных вэб-браўзэраў.
Google Chrome
Інструменты распрацоўніка Chrome дазваляюць рэдагаваць і адладжваць код, аўдыт асобных кампанентаў для выяўлення праблем прадукцыйнасці, імітацыі розных экранаў прылад , у тым ліку тых , хто працуе Android або IOS , а таксама выконваць шэраг іншых карысных функцый.
- Націсніце на галоўным меню кнопкі Chrome, пазначаны з трыма гарызантальнымі лініямі і размешчана ў правым верхнім куце браўзэра.
- Калі з'явіцца выпадальнае меню, навядзіце курсор мышы на Дадатковыя опцыі інструментаў.
- Суб-меню павінна з'явіцца. Выберыце варыянт інструментаў распрацоўніка. Вы можаце таксама выкарыстоўваць наступную камбінацыю клавіш замест гэтага пункта меню: Chrome OS / Windows (CTRL + SHIFT + I), Mac OS X (ALT (OPTION) + COMMAND + I)
- Інструменты распрацоўніка інтэрфейсу Chrome цяпер павінна з'явіцца, як паказана ў гэтым прыкладзе скрыншота. У залежнасці ад версіі Chrome, першапачатковы макет, які вы бачыце, можа трохі адрознівацца ад прадстаўленых тут. Асноўны цэнтр інструментаў распрацоўніка, як правіла, размешчаны альбо на ніжняй ці правай баку экрана, утрымлівае наступныя ўкладкі.
Элементы: Дае магчымасць інспектаваць CSS і HTML - код, а таксама рэдагаваць CSS на ляту, бачачы наступствы вашых змяненняў у рэжыме рэальнага часу.
Кансоль: кансоль JavaScript Chrome дазваляе для прамога ўводу каманд, а таксама дыягнастычнай адладкі.
Крыніцы: Дазваляе адладжваць код JavaScript з дапамогай магутнага графічнага інтэрфейсу.
Сетка: класіфікуе і адлюстроўвае падрабязную інфармацыю аб кожнай адпаведнай аперацыі на актыўным дадатку або старонцы, у тым ліку поўнага запыту і загалоўкаў адказу, а таксама перадавыя паказчыкаў сінхранізацыі.
Тэрміны: Дазваляе для паглыбленага аналізу любой дзейнасці , якая адбываецца ў браўзэры , як толькі запыт старонкі або прыкладання нагрузкі ініцыюецца. - У дадатку да гэтых раздзелах, вы можаце таксама доступ да наступных інструментах праз абразок >>, размешчаную справа на ўкладцы Часовай шкалы.
Профіль: зламаўся ў профилировщик CPU і секцыю профилировщика Heap, забяспечвае комплекснае выкарыстанне памяці і агульны час выканання актыўнага прыкладання або старонкі.
Бяспека: Асноўныя моманты праблема сертыфікатаў і іншыя пытанні , звязаныя з бяспекай , з актыўнай старонкай або дадаткам.
Рэсурсы: Тут можна паглядзець печыва, лакальнае захоўванне, кэш прыкладанняў, а таксама іншыя мясцовыя крыніцы дадзеных , якія выкарыстоўваюцца ў бягучай вэб - старонкі або прыкладання.
Рэвізіі: Прапануюць спосабы аптымізацыі старонкі або час загрузкі прыкладання і агульную прадукцыйнасць. - Рэжым Прылада дазваляе праглядаць актыўную старонку ў сімулятары , які робіць яго амаль гэтак жа , як здавалася б на адной з больш за дзесятак прылад, у тым ліку некалькі вядомых мадэляў Android і IOS , такія як IPAD, iPhone і Samsung Galaxy. Вам таксама дае магчымасць эмуляваць дазволу карыстацкага экрана ў адпаведнасці з вашымі патрэбамі развіцця або тэставання. Для пераключэння ў рэжым прылады ўключэння і выключэнні, абярыце значок мабільнага тэлефона , размешчанага непасрэдна злева ад ўкладкі Elements.
- Вы таксама можаце наладзіць знешні выгляд вашых інструментаў распрацоўніка, пстрыкнуўшы спачатку па кнопцы меню, прадстаўленая тры вертыкальна размешчаных кропак і размешчанай на далёкім правай частцы вышэйзгаданых ўкладак. Знутры гэтага ў расчыняецца меню, вы можаце змяніць становішча док, паказаць або схаваць розныя інструменты, а таксама запуск больш прасунутыя элементы, такія як інспектар прылады. Вы ўбачыце, што сам інтэрфейс Dev інструментаў лёгка наладжваецца з дапамогай налад у дадзеным раздзеле.
Mozilla Firefox
Раздзел Web Developer Firefox ўключае ў сябе інструменты для дызайнераў, распрацоўшчыкаў і тэстараў, так, напрыклад, як рэдактар стыляў і піксельных таргетавання піпеткі.
Рэкамендуемы літаратура: Лепшыя 25 Greasemonkey і Tampermonkey Сцэнарыі карыстальніка
- Націсніце на галоўным меню кнопкі браўзэра Firefox, прадстаўлена трыма гарызантальнымі лініямі і размешчана ў правым верхнім куце акна браўзэра.
- Калі з'явіцца выпадальнае меню, выберыце значок маркіраваныя Developer. Меню Web Developer цяпер павінна з'явіцца, якое змяшчае наступныя параметры. Вы заўважыце, што большасць пунктаў меню маюць камбінацыі клавіш, звязаныя з імі.
Пераключыць Інструменты: Адлюстроўвае ці хавае інтэрфейс інструментаў распрацоўніка, як правіла , размешчаны ў ніжняй частцы акна браўзэра. Клавішы хуткага доступу: 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)
Адладчык: JavaScript Debugger дазваляе вызначыць і ліквідаваць дэфекты, усталяваўшы кропкі супыну, праверкі DOM вузлоў, чорны бокс знешніх крыніц, і многае іншае. Як і ў выпадку з інспектарам, гэтая функцыя таксама падтрымлівае выдаленую адладку. Клавішы хуткага доступу: Mac OS X (ALT (OPTION) + COMMAND + S), Windows (CTRL + SHIFT + S)
Style Editor: Дазваляе ствараць новыя табліцы стыляў і ўключыць іх з актыўнай вэб - старонкі або рэдагаваць існуючыя лісты і праверыць , як вашыя змены робяць у браўзэры з адным пстрычкай мышы. Клавішы хуткага доступу: 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 OS або праз Firefox OS Simulator. Клавішы хуткага доступу: Mac OS X, Windows (SHIFT + F8)
Браўзэр кансолі: Забяспечвае такую ж функцыянальнасць як вэб - кансолі (гл . Вышэй) Тым ня менш, усё вяртаюцца дадзеныя для ўсяго прыкладання Firefox ( у тым ліку пашырэньні і функцый браўзэра ўзроўню) , а не проста актыўная вэб - старонцы. Клавішы хуткага доступу: Mac OS X (SHIFT + COMMAND + J), Windows (CTRL + SHIFT + J)
Спагадны Design View: Дазваляе імгненна праглядаць вэб - старонку ў розных дазволах, макеты і памерах экрана , каб імітаваць некалькі прылад , уключаючы планшэты і смартфоны. Клавішы хуткага доступу: 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)
Атрымаць Дадатковыя прылады: Адкрывае калекцыю Toolbox для вэб - распрацоўнікаў на афіцыйным Mozilla, дапаўненнях сайта, паказваючы каля дзясятка папулярных пашырэнняў , такіх як Firebug і Greasemonkey.
Microsoft Беражок / Internet Explorer
Звычайна называюць Інструменты F12 Developer, данінай да клавіятуры ярлык , які запусціў інтэрфейс з больш ранніх версій Internet Explorer, Паннаў набор інструментаў у IE11 і Microsoft Edge , прайшла доўгі шлях з моманту свайго стварэння, прапаноўваючы вельмі зручную групу маніторы, адладчык, эмулятары і на лета кампілятары.
- Націсніце на меню Дадатковыя дзеянні, прадстаўленае трыма кропкамі і размешчанай у правым верхнім куце акна браўзэра. Калі з'явіцца выпадальнае меню, усталюйце сцяжок Інструменты распрацоўніка F12. Як я ўжо казаў, вы можаце таксама доступ да прылад з дапамогай камбінацыі клавіш F12.
- Інтэрфейс распрацоўкі ў цяперашні час павінна адлюстроўвацца, як правіла, у ніжняй частцы акна браўзэра. Наступныя інструменты даступныя, кожны даступны, націснуўшы на іх адпаведнай закладцы загалоўка або з дапамогай прыкладаемага спалучэння клавіш.
DOM Правадыр: Дазваляе рэдагаваць табліцы стыляў і HTML у актыўных старонках, што робяць змененыя вынікі , як вы ідзяце. Выкарыстоўвае функцыю IntelliSense для запаўненьня кода, дзе гэта дастасавальна. Камбінацыя клавіш: (CTRL + 1)
Кансоль: Дае магчымасць прадстаўляць інфармацыю аб адладцы , уключаючы лічыльнікі, таймеры, сляды і наладжвальныя паведамленні праз убудаваны API. Акрамя таго, дазваляе ўводзіць код у актыўную вэб-старонку і змяняць значэння, прысвоеныя асобныя зменныя ў рэжыме рэальнага часу. Клавішы хуткага доступу: (CTRL + 2)
Адладчык: Дазваляе ўсталяваць кропкі супыну і адладкі кода ў той час як ён выконвае, парадкова , калі гэта неабходна. Клавішы хуткага доступу: (CTRL + 3)
Сетка: Спісы запытаў кожная сетка ініцыяваная браўзэрам падчас загрузкі старонкі і выканання , уключаючы дэталі пратаколу, тып кантэнту, выкарыстанне паласы прапускання, і многае іншае. Клавішы хуткага доступу: (CTRL + 4)
Прадукцыйнасць: дадзеныя частоты кадраў, загрузка працэсара, а таксама іншыя паказчыкі , звязаныя з прадукцыйнасцю , якія дапамогуць вам паскорыць час загрузкі старонкі і іншыя віды дзейнасці. Клавішы хуткага доступу: (CTRL + 5)
Памяць: Дапамагае ізаляваць і ліквідаваць магчымыя ўцечкі памяці на бягучай вэб - старонцы шляхам адлюстравання выкарыстання памяці храналогію нароўні са здымкамі з рознымі часовымі інтэрваламі. Клавішы хуткага доступу: (CTRL + 6)
Эмуляцыя: Паказвае, як актыўная старонка будзе аказваць у розных дазволах і памерах экрана, эмуляцыя смартфоны, планшэты і іншыя прылады. Таксама забяспечвае магчымасць змяняць агента карыстальніка і арыентацыю старонкі, а таксама імітаваць розныя geolocations шляхам уводу шыраты і даўгаты. Клавішы хуткага доступу: (CTRL + 7) - Для адлюстравання кансолі ў той час як у любой з іншых інструментаў , націсніце на кнопку квадрат з правага дужкі ўнутры яго, размешчанай у правым верхнім куце інтэрфейсу інструментаў распрацоўкі.
- Для адмацаванне, інтэрфейсу інструментаў распрацоўніка , так што становіцца асобным акно, націсніце на кнопцы , прадстаўленай два каскадных прастакутнікаў або выкарыстоўваць наступную камбінацыю клавіш: CTRL + P. Вы можаце змясціць сродкі назад у зыходным месцазнаходжанні, націснуўшы CTRL + P другі раз.
Apple Safari (толькі OS X)
разнастайны набор інструментаў DEV Safari адлюстроўвае вялікае супольнасць распрацоўшчыкаў, які выкарыстоўвае Mac для іх праектавання і праграмавання патрэбаў. У дадатак да магутнай кансолі і традыцыйных лесанарыхтоўчых і адладкі функцый, рэжым просты ў выкарыстанні спагадлівага дызайну і інструмент для стварэння ўласных пашырэнняў браўзэра таксама прадастаўляюцца.
- Націсніце на сафары ў меню браўзэра, размешчаным у верхняй частцы экрана. Пры з'яўленні ў расчыняецца меню абярыце пункт Налады. Вы можаце таксама выкарыстоўваць наступную камбінацыю клавіш замест гэтага пункта меню: COMMAND + коска (,)
- Інтэрфейс налад Safari зараз павінны адлюстроўвацца, накладваючы акно браўзэра. Націсніце на значок Advanced, размешчанай на далёкай правай частцы загалоўка.
- Цяпер Пашыраныя налады павінны быць бачныя. У ніжняй частцы экрана знаходзіцца опцыя маркіравацца Паказаць Распрацуйце меню ў радку меню, у суправаджэнні сцяжка. Калі няма галачкі адлюстроўваецца ў поле, націсніце на яго адзін раз, каб змясціць адзін там.
- Зачыніце інтэрфейс Preferences, націснуўшы на значок «X» ў верхнім левым куце.
- Цяпер вы павінны заўважыць новую опцыю ў меню браўзэра пад назвай Распрацоўкі, размешчанага паміж закладкамі і акном. Націсніце на гэты пункт меню. Меню выпадальнае павінна адлюстроўвацца, якое змяшчае наступныя параметры.
Адкрыць старонку з: Дазваляе адкрываць актыўны вэб - старонку ў адным з іншых браўзэраў устаноўленых на вашым кампутары.
Агент карыстальніка: Дазваляе выбраць з больш чым тузіны наканаваныя агента карыстальніка значэння , уключаючы некалькі версій Chrome, Firefox і Internet Explorer, а таксама вызначыць свае ўласныя прыстасаваныя радка.
Увядзіце Адаптыўны рэжым Design : Адлюстроўвае бягучую старонку як яна будзе выглядаць на розных прыладах і ў розных дазволах экрана.
Паказаць вэб - інспектар: запускае галоўны інтэрфейс для Девых інструментаў сафары, як правіла , размешчаных у ніжняй частцы экрана браўзэра і змяшчаюць наступныя раздзелы: элементы, сеткі, рэсурсы, тэрміны, Debugger, захоўванне, кансоль.
Паказаць кансоль памылак: Таксама запускае інтэрфейс сродкі распрацоўкі, непасрэдна на ўкладку Console , які адлюстроўвае памылкі, папярэджанне і іншыя даступныя для пошуку дадзеных часопіса.
Паказаць старонку Крыніца: Адкрывае ўкладку Рэсурсы, у якім адлюстроўваецца зыходны код актыўнай старонкі катэгарызаваць па дакуменце.
Паказаць старонку Рэсурсы: Выконвае тую ж функцыю, што і опцыя Show Page Source.
Паказаць Урывак Рэдактар: адкрывае новае акно , у якім можна ўвесці CSS і HTML - код, пры папярэднім праглядзе яго выхаду на лета.
Show Builder Extension: Дае магчымасць стварэння або рэдагавання пашырэньні Safari з CSS, HTML і JavaScript.
Паказаць храналогію запіс: Адкрывае ўкладку Timelines і пачынаецца паказаныя запыты сеткі, размяшчэнне і прадастаўлення інфармацыі, а таксама выкананне JavaScript у рэжыме рэальнага часу.
Пустыя кэшаў: Выдаляе ўвесь кэш ў цяперашні час захоўваецца на цвёрдым дыску.
Адключэнне кэшы: Спыняе Safari ад кэшавання , так што ўсё змесціва здабываецца з сервера пры кожнай загрузцы старонкі.
Адключэнне малюнка: Прадухіляе выявы ад візуалізацыі на ўсіх вэб - старонак.
Адключыць Стылі: ігнаруюць ўласцівасці CSS пры загрузцы старонкі.
Адключыць JavaScript: Абмяжоўвае выкананне JavaScript на ўсіх старонках.
Адключэнне пашырэньні: Забараняе ўсе устаноўленыя пашырэння ад працы ў браўзэры.
Адключыць сайт-спецыфічныя Hacks: Калі Safari быў зменены , каб відавочна апрацоўваць пытанне (ы) , спецыфічны для актыўнай вэб - старонкі, гэты параметр будзе блакаваць гэтыя змены , так што нагрузкі старонкі , як гэта было б да гэтых змяненняў ўводзяцца.
Адключэнне лакальных абмежаванняў File: Дазваляе браўзэр , каб мець доступ да файлаў на лакальным дыску, дзеянне, якое абмежавана па змаўчанні па меркаваннях бяспекі.
Адключэнне Cross-Origin Абмежаванні: Гэтыя абмежаванні ўведзены ў дзеянне па змаўчанні для прадухілення XSS і іншых патэнцыйных небяспек. Тым не менш, яны часта павінны быць часова адключаны для мэтаў развіцця.
Дазволіць JavaScript ад Smart Search Field: Калі гэтая функцыя ўключаная, забяспечвае магчымасць уводу URL - адрасы з JavaScript: ўключаны непасрэдна ў адрасны радок.
Лячыць SHA-1 Сертыфікаты небяспечным: SSL сертыфікаты з дапамогай алгарытму SHA-1 шырока лічыцца састарэлы і ўразлівая.