Желе дизайнерлер, иштеп чыгуучулар жана Сыноочулар үчүн комплекстүү toolsets
Web Интренет издеп күнүмдүк пайдалануучу басым көпчүлүк браузер алуучу тышкары, алар да ошол колдонуучулар туура браузерлерди күчтүү куралдар бүтүндөшүү менен пайдалануу Желе иштеп, дизайнерлердин колдонмолорду жана сайттарды курууга жардам жана сапатты камсыз адистердин беришет өздөрү.
Gone браузер табылган гана программалоо жана сыноо аспаптар бир барактын баштапкы кодун жана эч нерсе көрүүгө уруксат күн болуп саналат. Бүгүнкү браузерлер сиздин коду экенин камсыз кылуу, аткаруу жана мүчүлүштүктөрүн JavaScript үзүндүлөрү, текшерүү жана редакторлоо DOM элементтерин аныктоо үчүн колдонмо же бет жүктер эле реалдуу убакыт тармак жол кыймылын көзөмөлдөө, CSS натыйжалуулугун талдоо сыяктуу иштерди кылып, бир топ бетер калкып алсын өтө көп пайдалануу эмес, эс же өтө көп CPU ирекет, жана дагы көп. сыноо көз карашы менен алганда, сиз колдонмо же Web-баракча башка браузерлерде, ошондой эле жооп дизайн жана камтылган тренажөрлорун бир сыйкырлар аркылуу ар кандай приборлордун жана аянтчалардын боюнча аткарылганын көбөйө алат. мыкты бөлүгү Серепчи таштабастан эле мунун баарын кыла албайт деген!
сейилдөөгө төмөндө бир нече популярдуу интернет-серепчилерге, бул иштеп чыгуучунун куралдары жетүү үчүн аркылуу китептер.
Google Chrome
Chrome-иштеп куралдар, түзөтүп, мүчүлүштүктөрдү коду, аткаруу маселелери ачыкка айрым компоненттерин текшерүү Android же чуркап, анын ичинде ар түрдүү түзмөктүн экрандарда тууроочу жол берген батасы жана бир нече башка пайдалуу иш-милдеттерди аткарат.
- Chrome негизги меню кнопкасын басып, үч түз сызыктар менен белгиленген жана серепчиден жогорку оң-бурчунда жайгашкан.
- Жайылма меню пайда болгондо, көбүрөөк аспаптар тандоосу үстүнөн чычкандын курсорун чаап барат.
- Көмөкчү-меню азыр көрүнүшү керек. Параметр белгиленген Иштеп куралдарды тандоо. Ошондой эле бул меню нерсесине ордуна төмөнкү баскычтарын колдоно аласыз: Chrome OS / Windows (CTRL + SHIFT + I), Mac OS X (ALT (OPTION) + БУЙРУГУ + I)
- Chrome Иштеп чыгуучунун куралдары Interface бул мисал Скриншоту көрсөтүлгөндөй, болушу керек. Chrome сиздин нускасына жараша, сен көрө биринчи катмары, бул жерде берилген бир аз башкачараак болушу мүмкүн. Иштеп куралдардын негизги борбору, адатта экрандын ылдыйкы же оң-тарабында жайгашкан, төмөнкү табулатура камтыйт.
Elements: реалдуу убакыт режиминде сиздин өзгөрүүлөрдүн кесепеттерин көрүп, CSS жана HTML кодун, ошондой эле түзөтүү CSS боюнча учууга текшерүү мүмкүнчүлүгүн берет.
Console: Chrome-JavaScript консолу түздөн-түз буйрук кирген, ошондой эле дартты жөндөө үчүн мүмкүнчүлүк берет.
Булак: Эгер күчтүү жуурулушуу иштей аркылуу JavaScript коду отладкалоо берет.
Суперстан: Categorizes, анын ичинде толук өтүнүчү көрсөтүп активдүү колдонуу же беттеги ар байланышкан иш жөнүндө маалымат, жана жооп берүү, баш, ошондой эле өнүккөн ченөө ченемдер.
Убак боюнча: кылдат браузеринин ичинде орун алган, ар бир иш-талдоо, көп өтпөй бир барак же колдонмо груз талап демилгеленет эле жол ачат. - Бул бөлүмдөрдө тышкары, силер да Timeline барагынын укугуна жайгашкан >> сүрөтчөсү аркылуу төмөнкү шаймандарды колдоно алат.
Суперстан: CPU profiler жана Куча profiler бөлүктөргө бөлүнгөн ар тараптуу эс колдонуу жана жигердүү колдонуу же беттеги жалпы аткаруу жолу менен камсыз кылат.
Коопсуздук: ойлор күбөлүк көйгөйлөр жана активдүү беттеги же арыз менен башка коопсуздук маселелери.
Ресурстар: Бул сиз сookies, жергиликтүү сактагыч, колдонмо кэш, жана азыркы Желе баракчасы же арыз берүү жолу менен пайдалануу жана башка жергиликтүү маалымат булактары текшерүүгө алат.
Аудиттер: баракчаны же Колдонмонун жүк убакыт жана жалпы оптималдаштыруу жолдорун сунуш кылды. - Аспап Mode дээрлик деп айтылат бир тренажердун жигердүү бет дал ушундай коддон, Iphone, жана Samsung Galaxy бир нече белгилүү Android жана Жашыруу моделдерин, анын ичинде он чакты түзмөктөрдүн үстүнөн, бир күнү келет деп көрүүгө мүмкүнчүлүк берет. Сиз ошондой эле белгилүү бир өнүгүү же сыноо муктаждыктарына ылайыкташтыра бажы экран токтомдорду үлгү жөндөмү берилет. Жана жок түзмөк режимин которуу үчүн, Elements барагында сол түздөн-түз жайгашкан уюлдук сөлөкөтүн тандоо.
- Ошондой эле үч тик-жайгаштырылган DOTS өкүлдөрү жана аталган өтмөктөрдүн алыс оң колу жагында жайгашкан меню баскычын биринчи Чыкылдаган менен иштеп чыгуучунун куралдарын жана сезилишин аласыз. Бул түшмө менюсундагы ичинде, сиз Док, шоу reposition же мындай бир аппарат инспектору болуп ар кандай куралдарды, ошондой эле ишке өнүккөн ден жашыра албайт. Сиз иштеп чыгуучунун куралдары Interface өзү биздин болумдон таба орнотуулар аркылуу өтө өзгөчө экенин таба аласыз.
Mozilla Firefox
Firefox анын Web Developer бөлүм дизайнерлердин, иштеп чыгуучулар жана сыноочулар мындай стили редактору жана пикселдик-бутага пипетка катары да инструменттерин камтыйт.
Сунушталган окуу: Top 25 Greasemonkey жана Tampermonkey Колдонуучунун Scripts
- Firefox негизги меню кнопкасын басып, үч түз сызыктар менен сунушталган жана серепчинин терезесинен жогорку оң-бурчунда жайгашкан.
- Жайылма меню пайда болгондо, сөлөкөтү белгиленген Иштеп тандоо. Web Developer меню төмөнкү ыкмаларды камтыган болушу керек. Сен меню даана алар менен байланышкан баскычтар бар экенин көрө аласыз.
ДЕМ Tools: көрсөтөт же иштеп аспаптар макамын жашырса, адатта серепчи Терезенин ылдый жайгашкан. Баскыч: Mac OS X (ALT (OPTION) + БУЙРУК + I), Windows (CTRL + SHIFT + I)
Инспектор: Сен карап чыгууга жана / же иш-аракеттүү беттеги CSS жана HTML кодун Tweak, ошондой эле алыскы жөндөө аркылуу ташуучу аспап боюнча жол ачат. Баскыч: Mac OS X (ALT (OPTION) + БУЙРУК + C), Windows (CTRL + SHIFT + C)
Желе Console: сиз JavaScript активдүү беттеги ичиндеги сөздөрдү, ошондой эле карап чыгуу менен кирген маалыматтарды, анын ичинде коопсуздук эскертүүлөр ар түрдүү топтомун ишке ашыруу үчүн, тармак суроо, CSS кабарларды, жана берет. Баскыч: Mac OS X (ALT (OPTION) + БУЙРУК + K), Windows (CTRL + SHIFT + K)
Мүчүлүштүктөрдү: JavaScript Debugger сиз аныктоо жана DOM бездеринин, кара бокс тышкы булактарын жана көп карап, үзүлүү аркылуу кемчиликтерди чечүү берет. Инспектору менен болгондой эле, бул өзгөчөлүк да алыскы мүчүлүштүктөрдү колдойт. Баскыч: Mac OS X (ALT (OPTION) + БУЙРУК + S), Windows (CTRL + SHIFT + S)
Style редактор: Сиз жаңы Стилдерди түзүү жана активдүү Желе баракчасы менен киргизүү, же иштеп жаткан барактарды түзөтүү жана өзгөртүүлөр бир чыкылдатуу менен браузерден аткарылганын кандайча сыноо үчүн берет. Баскыч: Mac OS X, Windows (SHIFT + F7)
Performance: активдүү Барактын тармак аткаруу толук барары берет, кадр ылдамдыгы маалыматтарды, JavaScript аткаруу жолу менен мамлекеттин, боёк четине, жана дагы көп. Баскыч: Mac OS X, Windows (SHIFT + F5)
Суперстан: тиешелүү ыкмасы менен катар серепчи тарабынан демилгеленген ар бир тармак суранычын Lists, тегине домендин, түрү, өлчөмү жана убакыт уктадык. Баскыч: Mac OS X (ALT (OPTION) + БУЙРУК + Q), Windows (CTRL + SHIFT + Q)
Иштеп куралдар: бир өз ара буйрук сап тилмечти ачылат. Бардык буйруктарына тизмесин жана алардын туура синтаксистин үчүн тилмеч салып кириш. Баскыч: Mac OS X, Windows (SHIFT + F2)
WebIDE: Firefox OS иштеткен иш жүзүндө аппарат аркылуу же Firefox OS Simulator аркылуу Желе колдонмолорду түзүү жана ишке ашыруу мүмкүнчүлүгүн берет. Баскыч: Mac OS X, Windows (SHIFT + F8)
Browser Console: Web чыгуучулар (жогоруда кара), ошондой эле мүмкүнчүлүгүн берет. Бирок, кайра бардык маалыматтар бүт Firefox колдонуу (анын ичинде үчүн бутактары жана браузер даражадагы милдеттери) гана активдүү Желе бет карама-каршы эле. Баскыч: Mac OS X (SHIFT + БУЙРУК + J), Windows (CTRL + SHIFT + J)
Responsive Дизайн View: сен ошол замат таш лоокторго кыналган, анын ичинде бир нече түзмөктөрдү окшоштурулуп жасалган ар кандай токтомдор, калыптары жана экран өлчөмдөрүн интернет баракты көрүү мүмкүнчүлүгүн берет. Баскыч: Mac OS X (ALT (OPTION) + БУЙРУК + M), Windows (CTRL + SHIFT + M)
Пипетка: жекече тандалып алынган пиксел үчүн түстүү кодун көрсөтөт.
Блокнот : жазуу, редакциялоо, поп-чыгып, Firefox терезеден ичинде JavaScript кодексинин үзүндүлөрү киргизүү жана ишке ашыруу мүмкүнчүлүгүн берет. Баскыч: Mac OS X, Windows (SHIFT + F4)
Page Source: баштапкы браузерге негизделген иштеп куралы, бул параметр жөн активдүү беттеги үчүн баштапкы кодун көрсөтөт. Баскыч: Mac OS X (БУЙРУК + U), Windows (CTRL + U)
More куралдарын алуу: Mozilla расмий боюнча Web Developer жашиги Collection ачылат кошумча курамдык сайтына, мисалы, Суроо жана Greasemonkey сыяктуу ондогон популярдуу бутактары тууралуу катышкан.
Microsoft Edge / Internet Explorer
Адатта F12 Иштеп куралдары, Internet Explorer, IE11 жана Microsoft Edge менен иштеп чыгуучунун тартуу мурунку котормолордо бери макамын ишке баскыч үчүн урматтоо абдан уз тобун сунуш түзүлгөндөн кийин узак жолду басып калды деп аталат байкоочулары, debuggers, Emulators, жана учууга түзүүчүлөрдөн.
- Дагы аракеттер менюсунда, үч чекит менен сунушталган жана серепчинин терезесинен жогорку оң-бурчунда жайгашкан буолбут. Жайылма меню пайда болгондо, анда белгиленген F12 Иштеп чыгуучунун куралдарын тандоо. Мен жогоруда белгилеп өткөндөй, силер да F12 баскыч аркылуу куралдарды колдоно алат.
- өнүктүрүү Interface азыр адатта серепчи Терезенин ылдый жагындагы, болушу керек. Төмөнкү аспаптар бар, алардын тиешелүү табулатура рубрикада басуу же аны коштоочу баскычтоп жардамы аркылуу ар бир жеткиликтүү.
DOM Explorer: сен барып катары барак жыйынтыктарын көрсөтүү, активдүү бетте Стилдерди жана HTML өзгөртүү мүмкүнчүлүгүн берет. колдонууга боло турган учурларда кодду Autocomplete үчүн IntelliSense жөндөмүнөн колдонот. Баскыч: (CTRL + 1)
Console: интегралдык API аркылуу эсепчи, чакырылган, издердин кеби жана керектүү билдирүүлөрдү, анын ичинде мүчүлүштүктөрдү маалымат берүүгө мүмкүнчүлүгүн берет. Ошондой эле, сиз активдүү Желе бетине кодду сайып жана реалдуу убакыт режиминде айрым өзгөрүүлөрдүн дайындалган баалуулуктарды өзгөртүү мүмкүнчүлүгүн да берет. Баскыч: (CTRL + 2)
Мүчүлүштүктөрдү: Эгер зарыл болсо, сап сап ишке эми үзүлүү жана кодду отладкалоо коюп берет. Баскыч: (CTRL + 3)
Суперстан: тизмелери ар бир тармак, анын ичинде протокол маалымат Барак жүктөлгөндө жана аткаруу учурунда браузер, мазмун түрү тарабынан демилгеленген өтүнүч, жөндөмдүүлүгү, жана дагы көп. Баскыч: (CTRL + 4)
Performance: маалыматтар кадр курстары, CPU пайдалануу, жана башка аткаруу менен байланышкан ченемдер сиз бет жүк жолу жана башка иш-чараларды тез жардам берүү. Баскыч: (CTRL + 5)
Memory: Сиз обочолонуп, ар кандай убакыт аралыктары сүрөттөрү менен бирге эс колдонуу мөөнөтүн көрсөтүү менен азыркы интернет-беттеги туура болуучу эс алган агуулардын жардам берет. Баскыч: (CTRL + 6)
Emulation: активдүү бет, ар кандай токтомдор жана экран өлчөмдөрүн Алтурсун кыналган, планшеттер жана башка түзмөктөрдө белоктун кантип көрсөтөт. Ошондой эле, колдонуучунун агент менен барак багытын, ошондой эле ар кандай тууроочу geolocations бир Узунун жана туурасын кирип өзгөртүү мүмкүнчүлүгүн берет. Баскыч: (CTRL + 7) - Өнүктүрүү аспаптар иштей жогорку оң-бурчунда жайгашкан, анын ичинде туура же кичүүлөр менен төрт бурчтуу кнопкасын башка каражаттардын жардамы менен алынган ар кандай басып, ичинде, ал эми консолу өзгөрүүлөр.
- Бул өзүнчө терезе болуп да иштеп аспаптар макамын, undock үчүн, эки каскад тик бурчтук менен көрсөтүлгөн кнопкасын басканда же төмөнкү баскычтарын колдонуп: CTRL + P. Сиз CTRL + P экинчи жолу басуу менен, алардын баштапкы жерде кайра куралдарды аласыз.
Apple Safari (OS X гана)
Safari түрдүү иштеп чыгуучунун куралдар топтому алардын долбоорлоо жана программалоо муктаждыктары үчүн Макинтошту пайдаланат чоң иштеп коомчулукту чагылдырат. күчтүү чыгуучунун жана салттуу-журналдары жана мүчүлүштүктөрдү өзгөчөлүктөрү, бир жеңил-колдонууга жооп долбоорлоо режими, өз серепчи бутактарын түзүү куралы тышкары да берилет.
- Сиздин экрандын жогору жагында жайгашкан серепчи менюсунда Safari буолбут. Жайылма меню пайда болот, тандоо Preferences. Ошондой эле бул меню нерсесине ордуна төмөнкү баскычтарын колдоно аласыз: БУЙРУГУ + COMMA (,)
- Safari анын Preferences Interface эми серепчи терезесин капталды, болушу керек. Баш алыскы оң колу жагында жайгашкан Advanced сөлөкөтүн, бас.
- Advanced түзөтүү азыр көрүнүп турушу керек. Бул экрандын асты жагында орун алган бир тандоо кутучасына менен коштолгон жол ачаар Show менюсунан менюсун иштеп чыгуу болуп саналат. кутучага көрсөткөн эч кандай белги жок болсо, ошол жерде бир орун үчүн бир жолу аны басып.
- Кызыл чыкылдатуу менен Preferences макамын жабуу жогорку сол бурчунда ашык "X".
- Сиз эми Бүктөмөлөрдөгү менен терезенин ортосуна жайгашкан иштеп чыгуу деген серепчи менюсунда, бир жаңы жолду байкабай керек. Бул меню нерсесине буолбут. А жайылма меню төмөнкү ыкмаларды камтыган болушу керек.
Open Page менен: Учурда сиздин Mac орнотулган башка браузерлерди биринде активдүү сайтты ачып берет.
Колдонуучу Agent: Сиз Chrome, Firefox жана Internet Explorer бир нече түрү, анын ичинде баалуулуктарын ондогон алдын-ала аныкталган колдонуучу агенти, ошондой эле өз салт сап аныктоо тандап берет.
Кириш Responsive долбоорлоо режими : ар кандай приборлордун жана экран пайда болорун айткан учурдагы баракты көрсөтөт.
Show Желе инспектору: Safari иштеп чыгуучунун куралдарын негизги макамын ишке, адатта сиздин браузер экрандын төмөн жагында жайгашкан жана төмөнкү бөлүмдөрдү камтыйт: Elements, Network, ресурстары, мөөнөттөрү, Debugger, сактоо, Console.
Error консолу көрсөтүү: Ошондой эле түздөн-түз каталар, эскертүү жана башка издөө журналы маалыматтарды көрсөткөн Console өтмөгүнө, иштеп чыгуучунун куралдары макамын ишке киргизди.
Show Page Source: документте категориясына активдүү барактын баштапкы кодун көрсөтүп ресурстар барагы ачылат.
Show Page ресурстар: Show Page Source тандоосу эле иш-милдетин аткарат.
Show Минус Editor: сен, CSS жана HTML кодун, анын өндүрүш боюнча учууга алдын ала турган, жаңы терезе ачылат.
Show Түр Builder: түзүүгө же CSS, HTML, жана JavaScript менен Safari бутактарын жана өзгөртүүгө мүмкүнчүлүк берет.
Show Timeline жаздыруу: мөөнөттөрү табулатура жана реалдуу убакыт режиминде көрсөткөн тармак талаптарын, жайгашуусун жана керектөөчүлөргө маалыматты камтыган, ошондой эле JavaScript аткарууну башталат ачылат.
Бош Кештер: Азыркы учурда сиздин катуу дискке сакталган жаткан бүт кэшин жок кылынат.
Өчүрүү жайлардын бардык мазмун Ар бир барак жүк үстүнө жүрүш чыгарылган ушунчалык шумдук тартып Safari токтотту.
Өчүрүү сүрөттөр: бардык интернет беттеринде көрсөтүү сүрөттөрдү алдын алат.
Мүнөзүнөн өчүрүү: бир барак жүктөгөндө кайсы CSS касиеттери тоотпой коюшту.
Өчүрүү JavaScript: бардык беттери боюнча JavaScript аткарылышын чыгарат.
Extensions өчүрүү: бардык орнотулган тыюу салынат бутактарын браузер ичинде иштеп келген.
Өчүрүү Сайттын тиешелүү ыкмаларды: Safari ачык активдүү Желе бетине конкреттүү маселени (лар) менен чечүүгө өзгөртүлсө, анда анын бул параметр ага катары бет жүктер бул өзгөртүүлөр киргизилип жатат чейин болушу үчүн, ошол өзгөрүүлөр бөгөт болот.
Жергиликтүү File бошотууга өчүрүү: жергиликтүү дисктерде боюнча материалдар менен таанышып үчүн серепчини берет, коопсуздук себептерден улам демейки боюнча чектөө коюлган иш-аракет.
Cross-Origin бошотууга өчүрүү: Бул чектөөлөр XSS жана башка мүмкүн болгон коркунучтарды алдын алуу үчүн демейки жерге жайгаштырылат. Бирок алар көп учурда убактылуу өнүктүрүү максаттары үчүн өчүрүлгөн болушу керек.
Smart Search талаадан JavaScript уруксат берүү: иштетилсе, JavaScript менен URL'дерди кирүү мүмкүнчүлүгүн камсыз кылат: дарек тилкесине түздөн-түз кошулган.
Мамиле SHA-1 күбөлүккө кооптуу катары колдонуп SSL күбөлүктөр SHA-1 алгоритмин көп эскирген жана калктын аялуу болуп эсептелет.