Веб-дизайнерлер, әзірлеушілер мен тестерлер үшін интеграцияланған құралдар
Веб-браузерді қарап шығатын күнделікті қолданушыға назар аударатын браузерлердің көпшілігінен басқа, олар веб-әзірлеушілерге, дизайнерлерге және сапалы қамсыздандыру мамандарына қуатты құралдарды браузерлерге біріктіру арқылы қол жеткізетін қолданбалар мен сайттарды жасауға көмектеседі. өздері.
Браузерде табылған жалғыз бағдарламалау және тестілеу құралдары сізге беттің бастапқы кодын көруге және ештеңеден артық ештеңе жоққа шығарды. Бүгінгі браузерлер JavaScript элементтерін орындау және түзету, DOM элементтерін тексеру және редакциялау, нақты уақыттағы желілік трафиктің сіздің қосымшаңыз немесе бет жүктелуі сияқты қиындықтарды анықтау, CSS-нің өнімділігін талдау, кодының болуын қамтамасыз ету сияқты тереңірек батыру мүмкіндігін береді. тым көп жадты немесе тым көп CPU циклдарын пайдаланбау және тағы басқалар. Сынақ тұрғысынан, қолданба немесе веб-бет әртүрлі браузерлерде, сондай-ақ әртүрлі құрылғылар мен платформаларда жауап беретін дизайн және кірістірілген тренажерлардың сиқыры арқылы қалай көрсетілетінін жаңғырта аласыз. Ең жақсы бөлік - бұл сіздің браузеріңізден шықпай-ақ, бәрін жасай аласыз!
Бірнеше танымал веб-браузерлерде осы әзірлеуші құралдарына қалай қол жеткізуге болатыны туралы үйрететін нұсқаулар.
Google Chrome
Chrome әзірлеуші құралдары сізге кодты өңдеуге және түзетуге, өнімділік мәселелерін ашу үшін жеке құрамдастарды тексеруге, Android немесе iOS қызметін қоса, әртүрлі құрылғылар экрандарын имитациялауға және бірнеше пайдалы функцияларды орындауға мүмкіндік береді.
- Браузердің жоғарғы оң жақ бұрышында орналасқан үш көлденең сызықпен белгіленген Chrome негізгі мәзірінің түймешігін басыңыз.
- Ашылмалы мәзір пайда болғанда, тышқанның курсорын More tools ( Қосымша құралдар) опциясының үстіне апарыңыз.
- Енді төменгі мәзір пайда болуы керек. Әзірлеуші құралдарымен белгіленген опцияны таңдаңыз. Бұл мәзір элементінің орнына төмендегі пернелер тіркесімін пайдалануға болады: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
- Осы үлгідегі скриншотта көрсетілгендей, Chrome Developer Tools интерфейсі енді көрсетілуі керек. Chrome нұсқасына байланысты, сіз көретін бастапқы орналасуыңыз мұнда ұсынылғаннан біршама ерекшеленуі мүмкін. Экранның төменгі жағында немесе оң жағында әдетте қондырғылардың құралы негізгі хабы келесі қойындыларды қамтиды.
Элементтер: CSS және HTML кодын тексеру мүмкіндігін, сондай-ақ нақты уақыттағы өзгерістердің әсерлерін көре отырып, CSS-дегі өңдеуді қамтамасыз етеді.
Консоль: Chrome-ның JavaScript консолі тікелей командалық енгізуді және диагностикалық күйін келтіруді рұқсат етеді.
Көздер: JavaScript кодын қуатты графикалық интерфейс арқылы қате деп айтуға мүмкіндік береді.
Желі: Толық сұрау мен жауап тақырыптарын және сонымен қатар озық уақытты өлшеуді қоса, белсенді қолданба немесе бетке қатысты әр қатысты әрекеттесу туралы толық ақпаратты санаттайды және көрсетеді.
Уақыт кестесі: Бет немесе бағдарламаны жүктеу туралы сұрау басталғаннан кейін шолғышта орын алатын кез-келген әрекетті терең талдау үшін мүмкіндік береді. - Осы бөлімдерден басқа, Timeline қойындысының оң жағында орналасқан >> белгішесі арқылы келесі құралдарға қол жеткізуге болады.
Профиль: CPU профильдері мен Heap профилі секцияларына бөлініп, белсенді қолданба немесе беттің жалпы жады көлемін және жалпы орындау уақытын қамтамасыз етеді.
Қауіпсіздік: Белсенді бет немесе бағдарламамен куәландыру ақаулары және қауіпсіздікке қатысты басқа да мәселелер.
Ресурстар: Cookie файлдарын, жергілікті қойманы, қолданба кэшін және ағымдағы веб-бет немесе бағдарлама пайдаланатын басқа жергілікті деректер көздерін тексеруге болады.
Аудит: Бетті немесе бағдарламаның жүктеу уақытын және жалпы өнімділігін оңтайландыру жолдарын ұсынады. - Device Mode режимі ондағы он-лайн құрылғылардың бірінде, мысалы, iPad, iPhone және Samsung Galaxy сияқты белгілі Android және iOS модельдерін қоса алғанда, іс жүзінде дәл көрсететін симулятордағы белсенді бетті көруге мүмкіндік береді. Сондай-ақ, сізге белгілі бір даму немесе тестілеу қажеттіліктеріне сәйкес келу үшін реттелетін экрандық ажыратымдылықтарды еліктеуге мүмкіндік беріледі. Құрылғы режимін қосу және өшіру үшін Элементтер қойындысының сол жағындағы тікелей ұялы телефон белгішесін таңдаңыз.
- Сондай-ақ, сіз алдымен жоғарыда аталған қойындылардың оң жағында орналасқан үш тігінен орналасқан нүктелермен ұсынылған мәзір түймешіктерін басу арқылы әзірлеуші құралдарыңыздың көрінісін және сезімін теңшей аласыз. Осы ашылмалы мәзірдің ішінен қондырғыны қайта орналастыруға, түрлі құралдарды көрсетуге немесе жасыруға, сондай-ақ құрылғы инспекторы сияқты қосымша элементтерді іске қосуға болады. Dev құралдар интерфейсінің өзі осы бөлімде берілген параметрлер арқылы өте теңшеуге болатындығын білесіз.
Mozilla Firefox
Firefox веб-әзірлеушісі секциясы дизайнерлерге, әзірлеушілерге және тестерлерге арналған құралдарды қамтиды, мысалы, стиль редакторы және пикселді бағыттаушы қақпақшасы.
Ұсынылған оқулық: The Top 25 Greasemonkey және Tampermonkey User Scripts
- Браузер терезесінің жоғарғы оң жақ бұрышында орналасқан үш көлденең сызықпен ұсынылған Firefox негізгі мәзір түймесін басыңыз.
- Ашылмалы мәзір пайда болғанда Әзірлеуші белгішесін таңдаңыз. Веб-әзірлеуші мәзірі келесі параметрлерді қамтитын енді көрсетілуі керек. Көптеген мәзір элементтерінде олармен байланыстырылған пернелер тіркесімдері бар екенін байқайсыз.
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 Debugger тоқтау нүктелерін орнату, 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 )
Network: Шолғышпен басталған әрбір желілік сұрауды тиісті әдіспен, бастапқы доменді, түрді, өлшемді және уақыт өткенін тізімдейді. Пернелер тіркесімі: 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 )
Жауап беретін дизайнер көрінісі: планшеттер мен смартфондарды қоса, бірнеше құрылғыларды импорттауға арналған түрлі ажыратымдылықтар, орналасулар мен экран өлшемдерінде бірден веб-бетті көруге мүмкіндік береді. Пернелер тіркесімі: Mac OS X ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + SHIFT + M )
Эпизод: Жеке түсті таңдалған пикселдер үшін алты түсті кодты көрсетеді.
Scratchpad : Firefox терезесінен JavaScript кодының үзінділерін жазуға, өңдеуге, біріктіруге және орындауға мүмкіндік береді. Пернелер тіркесімі: 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 браузерлерінің бұрынғы нұсқаларынан бастап интерфейсті іске қосқан пернетақта тіркесіміне құрмет, IE11 және Microsoft Edge құралдарының құралы оның құрылған сәтінен бастап өте ыңғайлы, өте ыңғайлы топты ұсынды. мониторлар, отладчик, эмуляторлар, сондай-ақ әуе компиляторлары.
- Браузер терезесінің жоғарғы оң жақ бұрышында орналасқан және үш нүктеден тұратын Қосымша әрекеттер мәзірін басыңыз. Ашылмалы мәзір пайда болғанда, F12 Developer Tools деп белгіленген параметрді таңдаңыз. Жоғарыда айтып өткенімдей, F12 пернетақтасы арқылы құралдарға қол жеткізуге болады.
- Әзірлеу интерфейсі әдетте браузер терезесінің төменгі жағында көрсетілуі керек. Төмендегі құралдар бар, олардың әрқайсысы өздерінің тиісті қойындының тақырыбын басу немесе ілеспе пернелер тіркесімін пайдалану арқылы қол жетімді.
DOM Explorer: Сіз өзгертілген нəтижелерді барған сайын көрсете отырып, белсенді беттегі стиль кестелері мен HTML файлдарын өңдеуге мүмкіндік береді. Қолданылатын жерде кодты автотолтыру үшін IntelliSense функционалдығын пайдаланады. Пернелер тіркесімі: (CTRL + 1)
Консоль: Интеграцияланған API арқылы есептегіштерді, таймерлерді, іздерді және реттелетін хабарларды қоса, отладки туралы ақпаратты жіберу мүмкіндігін береді. Сондай-ақ, кодты белсенді веб-бетке енгізуге және нақты уақыт айнымалыларына тағайындалған мәндерді өзгертуге мүмкіндік береді. Пернелер тіркесімі: (CTRL + 2)
Отладчик: тоқтау нүктелерін орнатып, кодты отладкадан шығаруға мүмкіндік береді, қажет болғанда сызық бойынша жолға. Пернелер тіркесімі: (CTRL + 3)
Желі: Беттерді жүктеу және орындау барысында, браузер арқылы іске қосылған әрбір желілік сұрауды, хаттама туралы мәліметтерді, мазмұн түрін, өткізу қабілеттілігін пайдалануды және тағы басқаларды тізімдейді. Пернелер тіркесімі: (CTRL + 4)
Өнімділік: Бет жүктеу уақытын және басқа әрекеттерді жылдамдатуға көмектесетін кадр жиілігі, CPU пайдалану және басқа өнімділікке қатысты көрсеткіштер. Пернелер тіркесімі: (CTRL + 5)
Жад: Уақыт аралығындағы кез-келген суреттермен бірге жадты пайдалану мерзімдерін көрсету арқылы ағымдағы веб-бетте әлеуетті жад ағып кетулерін оқшаулауға және түзетуге көмектеседі. Пернелер тіркесімі: (CTRL + 6)
Эмуляция: Белсенді бет түрлі смартфондар, планшеттер және басқа құрылғыларды эмуляциялайтын түрлі ажыратымдылықтар мен экран өлшемдерінде қалай көрсететінін көрсетеді. Сондай-ақ, пайдаланушы агентін және бет бағдарын өзгерту мүмкіндігін, сондай-ақ ендік пен бойлықты енгізу арқылы түрлі геолокацияны имитациялау мүмкіндігін береді. Пернелер тіркесімі: (CTRL + 7) - Консолды басқа құралдардың кез-келгенінде көрсету үшін оның ішінде оң жақ кронштейні бар квадрат батырмасын басу керек, ол құралдардың интерфейсінің жоғарғы оң жақ бұрышында орналасқан.
- Шығару құралының құралдар интерфейсі бөлек терезеге айналады, екі каскадты тіктөртбұрышпен ұсынылған түймені басыңыз немесе келесі пернелер тіркесімін пайдаланыңыз: CTRL + P. Құралдарды өздерінің бастапқы орнына CTRL + P пернелерін екінші рет басу арқылы орналастыруға болады.
Apple Safari (тек OS X)
Safari-дің әртүрлі құралдарының дизайны мен бағдарламалау қажеттіліктері үшін Mac-ды қолданатын ірі әзірлеуші қоғамы көрінеді. Күшті консоль және дәстүрлі тіркеу және отладтау мүмкіндіктерінен басқа, қарапайым пайдалану режимі мен жеке браузер кеңейтімдерін жасау құралы ұсынылған.
- Экранның жоғарғы жағында орналасқан шолғыш мәзіріндегі Safari түймесін басыңыз. Ашылмалы мәзір пайда болғанда, Теңшелімдер параметрін таңдаңыз. Осы мәзір элементінің орнына келесі пернелер тіркесімін де пайдалануға болады: COMMAND + COMMA (,)
- Safari-ның теңшелім интерфейсі енді браузер терезесін қабаттастыру арқылы көрсетілуі керек. Жоғарғы оң жағында орналасқан Кеңейтілген белгішесін нұқыңыз.
- Кеңейтілген теңшелімдер енді көрінуі керек. Бұл экранның төменгі жағында құсбелгісі бар мәзір жолағындағы Show Show мәзірін көрсететін опция болады. Егер құсбелгіде ешқандай құсбелгі болмаса, оны бір рет орналастыру үшін оны басыңыз.
- Жоғарғы сол жақ бұрышта орналасқан қызыл «x» түймесін басу арқылы Басымдықтар интерфейсін жабыңыз.
- Бетбелгілер мен Терезелер арасында орналасқан « Develop» деп аталатын шолғыш мәзірінде жаңа опцияны байқап көруіңіз керек. Осы мәзір элементін басыңыз. Ашылмалы мәзірді келесі опциялардан тұратын қазір көрсету керек.
Бетті ашу: белсенді веб-бетті Mac компьютеріңізде орнатылған басқа браузерлердің бірінде ашуға мүмкіндік береді.
Пайдаланушы агенті: Chrome-ның бірнеше нұсқасын, Firefox және Internet Explorer-ді қамтитын онымен алдын-ала анықталған пайдаланушы агенттерінің мәндерін таңдай аласыз, сондай-ақ өзіңіздің реттелетін жолыңызды анықтаңыз.
Жауап дизайн режимін енгізіңіз: Ағымдағы бетті әртүрлі құрылғыларда және әр түрлі экрандар ажыратымдылығында көрсетілетіндей көрсетеді.
Веб-инспекторды көрсету: Safari-ның құрал-жабдықтары үшін негізгі интерфейсті іске қосады, әдетте браузер экранының төменгі жағында орналасқан және келесі бөлімдерді қамтиды: Элементтер , Желі , Ресурстар , Уақыт Уақыты , Түзету , Сақтау , Консоль .
Қате көрсету консолін көрсету: Сондай-ақ, қате туралы ескертулерді және басқа іздеуге болатын журнал деректерін көрсететін консоль қойындысына тікелей құрал-жабдықтар интерфейсін іске қосады.
Бет көзін көрсету: Құжатқа бөлінген белсенді бет үшін бастапқы кодты көрсететін Ресурстар қойындысын ашады.
Бет ресурстарын көрсету: Бет көзін көрсету параметрі сияқты бірдей функцияны орындайды.
Snippet редакторын көрсету: CSS және HTML кодын енгізе алатын жаңа терезені ашады, оның шығуын алдын-ала қарау.
Extension Builder бағдарламасын көрсету: Safari кеңейтімдерін CSS, HTML және JavaScript арқылы жасау немесе өңдеу мүмкіндігін береді.
Timeline Recording көрсетіңіз: Уақыт кестесін ашып, нақты уақыт режимінде желілік сұрауларды, орналасуды және ақпаратты көрсетуді, сондай-ақ JavaScript орындауын көрсете бастайды.
Бос кэштар: қазіргі уақытта қатты дискіде сақталған бүкіл кэшті жояды.
Кэштерді ажырату: Safari-ді кэштеуден тоқтатады, сонда барлық мазмұн әрбір бет жүктемесі бойынша серверден шығарылады.
Суреттерді ажырату: Барлық веб-беттерде кескіндерді бейнелеуден қорғайды.
Мәнерлерді өшіру: бет жүктелгенде CSS сипаттарын елемейді.
JavaScript өшіріңіз: Барлық беттерде JavaScript орындауын шектейді.
Кеңейтімдерді ажырату: Барлық орнатылған кеңейтімдерді браузерде іске қосуға тыйым салынады.
Торапқа тән хакеттерді өшіру: Егер Safari белсенді веб-бетке тән мәселені анық қарастыру үшін өзгертілсе, бұл параметр осы өзгерістерді енгізбес бұрын бет жүктелетін етіп өзгертуге мүмкіндік береді.
Жергілікті файл шектеулерін өшіру: Браузердің жергілікті дискілердегі файлдарға рұқсаты бар, қауіпсіздіктің себептері бойынша әдепкі бойынша шектелген әрекет.
Коздан шығу тегінің шектеулерін өшіру: Бұл шектеулер XSS және басқа ықтимал қауіптердің алдын алу үшін әдепкі бойынша орнатылады. Дегенмен, олар көбінесе даму мақсаттары үшін уақытша өшірілуі керек.
Смарт-іздеу өрісінен JavaScript рұқсат етіңіз: Қосылған кезде, URL-мекен-жайларын javascript арқылы енгізуге мүмкіндік береді : тікелей мекенжай жолына енгізілген.
SHA-1 сертификаттарын қауіпті деп санамаңыз: SHA-1 алгоритмін пайдалану арқылы SSL сертификаттары кеңінен ескірген және осал болып саналады.