Веб-шолғышты әзірлеуші құралдарын пайдалану жолы

2024 Автор: Abigail Brown | [email protected]. Соңғы өзгертілген: 2024-01-07 19:04

Интернетте шарлауды қалайтын күнделікті пайдаланушыға назар аударатын браузер жасаушылардың көпшілігіне қоса, олар сондай-ақ веб-әзірлеушілерге, дизайнерлерге және сапаны қамтамасыз ету мамандарына қызмет көрсетеді, олар қуатты біріктіру арқылы сол пайдаланушылар кіретін қолданбалар мен сайттарды жасауға көмектеседі. құралдарды тікелей браузерлердің өзінде.

Браузерде табылған жалғыз бағдарламалау және тестілеу құралдары беттің бастапқы кодын көруге мүмкіндік беретін күндер артта қалды. Бүгінгі браузерлер JavaScript үзінділерін орындау және жөндеу, DOM элементтерін тексеру және өңдеу, кедергілерді анықтау үшін қолданба немесе бет жүктелген кезде нақты уақыттағы желі трафигін бақылау, CSS өнімділігін талдау, кодыңыздың дұрыс болуын қамтамасыз ету сияқты әрекеттерді орындау арқылы әлдеқайда тереңірек түсуге мүмкіндік береді. тым көп жадты немесе тым көп процессор циклдарын пайдаланбау және т.б.

Тестілеу тұрғысынан сіз қолданбаның немесе веб-беттің әртүрлі браузерлерде, сондай-ақ әртүрлі құрылғылар мен платформаларда қалай көрсетілетінін жауап беретін дизайн және кіріктірілген симуляторлар арқылы қайта жасай аласыз. Ең жақсысы - мұның бәрін браузерден шықпай-ақ жасауға болады!

Төмендегі оқулықтар бірнеше танымал веб-шолғыштарда осы әзірлеуші құралдарына қол жеткізу жолын көрсетеді.

Google Chrome

Chrome әзірлеуші құралдары кодты өңдеуге және жөндеуге, өнімділік мәселелерін анықтау үшін жеке құрамдастарды тексеруге, әртүрлі құрылғы экрандарын, соның ішінде Android немесе iOS жүйесінде жұмыс істейтін экрандарды имитациялауға және басқа да бірнеше пайдалы функцияларды орындауға мүмкіндік береді.

1. Үш көлденең сызықпен белгіленген және браузердің жоғарғы оң жақ бұрышында орналасқан Chrome браузерінің негізгі мәзірін таңдаңыз.

2. Ашылмалы мәзір пайда болған кезде тінтуір курсорын Қосымша құралдар опциясының үстіне апарыңыз.

   

3. Енді ішкі мәзір пайда болуы керек. Әзірлеуші құралдары деп белгіленген опцияны таңдаңыз. Сондай-ақ осы мәзір элементінің орнына келесі пернелер тіркесімін пайдалануға болады: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION) +COMMAND+I)

   

4. Осы мысалдағы скриншотта көрсетілгендей Chrome Developer Tools интерфейсі енді көрсетілуі керек. Chrome нұсқасына байланысты сіз көріп тұрған бастапқы орналасу осы жерде ұсынылғаннан сәл өзгеше болуы мүмкін. Әдетте экранның төменгі немесе оң жағында орналасқан әзірлеуші құралдарының негізгі хабы келесі қойындыларды қамтиды.

5. Осы бөлімдерге қосымша ретінде келесі құралдарға >> белгішесі арқылы қол жеткізе аласыз, Өнімділік оң жағында орналасқан. қойынды.

   • Жад: веб-беттегі жадты пайдалануды бақылаңыз және жазыңыз. Сайтыңыздағы JavaScript қаншалықты ауыр екенін көре аласыз.
   • Қауіпсіздік: белсенді бетке немесе қолданбаға қатысты сертификат мәселелерін және қауіпсіздікке қатысты басқа мәселелерді көрсетеді.
   • Application: Веб қолданбасы пайдаланатын ресурстарды тексеріңіз. Қолданылатын нәрселердің толық сипаттамасын алыңыз.
   • Аудиттер: Бетті немесе қолданбаны жүктеу уақытын және жалпы өнімділігін оңтайландыру жолдарын ұсынады.

   

6. Құрылғы режимі белсенді бетті тренажерде көруге мүмкіндік береді, ол оны оннан астам құрылғылардың бірінде, соның ішінде бірнеше танымал Android құрылғыларында көрсетілетіндей етіп көрсетеді. және iPad, iPhone және Samsung Galaxy сияқты iOS үлгілері. Сондай-ақ, сізге нақты әзірлеу немесе сынақ қажеттіліктеріңізге сәйкес келетін реттелетін экран ажыратымдылықтарын эмуляциялау мүмкіндігі беріледі.

   Device Mode қосу және өшіру үшін ұялы телефон белгішесін бетінің тікелей сол жағында орналасқантаңдаңыз. Элементтер қойындысы.

   

7. Әуелі мәзір түймешігін тігінен орналасқан үш нүкте таңдау арқылы әзірлеуші құралдарының көрінісі мен сезімін реттеуге болады. және жоғарыда аталған қойындылардың оң жақ шетінде орналасқан.

   Осы ашылмалы мәзірден қондырманың орнын өзгертуге, әртүрлі құралдарды көрсетуге немесе жасыруға, сондай-ақ құрылғы инспекторы сияқты кеңейтілген элементтерді іске қосуға болады. Әзірлеу құралдарының интерфейсінің өзі осы бөлімдегі параметрлер арқылы жоғары теңшеуге болатынын көресіз.

   

Mozilla Firefox

Firefox веб-әзірлеуші бөлімінде стиль өңдегіші және пиксельге бағытталған тамшуыр сияқты дизайнерлерге, әзірлеушілерге және тестерлерге арналған құралдар бар.

1. Firefox-тың негізгі мәзірін таңдаңыз, ол үш көлденең сызықпен көрсетілген және шолғыш терезесінің жоғарғы оң жақ бұрышында орналасқан.

2. Ашылмалы мәзір пайда болған кезде Веб-әзірлеуші таңдаңыз.

   

3. Енді келесі опцияларды қамтитын Веб-әзірлеуші мәзірі көрсетілуі керек. Мәзір элементтерінің көпшілігінде олармен байланысты пернелер тіркесімдері бар екенін байқайсыз.

   • Құралдар ауыстыру: Әдетте браузер терезесінің төменгі жағында орналасқан әзірлеуші құралдары интерфейсін көрсетеді немесе жасырады. Пернелер тіркесімі: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Инспектор: қашықтан жөндеу арқылы белсенді бетте, сондай-ақ портативті құрылғыда CSS және HTML кодын тексеруге және/немесе түзетуге мүмкіндік береді. Пернелер тіркесімі: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Web Console: белсенді бетте JavaScript өрнектерін орындауға, сондай-ақ қауіпсіздік ескертулерін, желі сұрауларын, CSS хабарларын және т.б. қоса тіркелген деректер жинағын қарауға мүмкіндік береді.. Пернелер тіркесімі: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: JavaScript жөндеу құралы тоқтау нүктелерін орнату, 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)
   • Желі: Браузер бастаған әрбір желі сұрауын сәйкес әдіспен, бастапқы доменмен, түрімен, өлшемімен және өткен уақытымен бірге тізімдейді. Пернелер тіркесімі: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Сақтау инспекторы: веб-сайтта сақталатын кэш пен cookie файлдарын қараңыз. Пернелер тіркесімі: (SHIFT+F9)
   • Әзірлеуші құралдар тақтасы: Интерактивті пәрмен жолы аудармашысын ашады. Барлық қолжетімді пәрмендердің тізімі мен олардың тиісті синтаксисі үшін аудармашыға help енгізіңіз. Пернелер тіркесімі: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Firefox ОЖ жұмыс істейтін нақты құрылғы немесе Firefox OS Simulator арқылы веб-қолданбаларды жасау және орындау мүмкіндігін береді. Пернелер тіркесімі: Mac OS X, Windows (SHIFT+F8)
   • Browser Console: Веб консолімен бірдей функционалдылықты қамтамасыз етеді (жоғарыдан қараңыз). Дегенмен, барлық қайтарылған деректер белсенді веб-бетке қарағанда, бүкіл Firefox қолданбасына (соның ішінде кеңейтімдер мен браузер деңгейіндегі функцияларға) арналған. Пернелер тіркесімі: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Responsive Design View: бірнеше құрылғыларды, соның ішінде планшеттер мен смартфондарды имитациялау үшін әртүрлі ажыратымдылықтағы, орналасулардағы және экран өлшемдеріндегі веб-бетті лезде қарауға мүмкіндік береді. Пернелер тіркесімі: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Көз тамшылары: жеке таңдалған пикселдер үшін он алтылық түс кодын көрсетеді.
   • Scratchpad: Scratchpad қалқымалы Firefox терезесінен JavaScript кодының үзінділерін жазуға, өңдеуге, біріктіруге және орындауға мүмкіндік береді. Кодпен жазуға және оны веб-сайтта тексеруге мүмкіндік беретін интерактивті JavaScript құжатын ашыңыз. Пернелер тіркесімі: (SHIFT+F4)
   • Қызмет қызметкерлері: веб-бағдарламаны жөндеу қызметшілері. Олардың өнімділігі мен қателері туралы толық ақпарат алыңыз.
   • Бет көзі: Түпнұсқа браузерге негізделген әзірлеуші құралы, бұл опция жай ғана белсенді бет үшін қолжетімді бастапқы кодты көрсетеді. Пернелер тіркесімі: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Қосымша құралдарды алу: Mozilla-ның ресми қондырмалар сайтында он шақты танымал кеңейтімдерді қамтитын Web Developer Toolbox жинағын ашады. Firebug және Greasemonkey ретінде.

   

Microsoft Edge/Internet Explorer

Әдетте F12 Әзірлеуші құралдары деп аталады, ол интерфейсті Internet Explorer бағдарламасының бұрынғы нұсқаларынан бастап іске қосқан пернелер тіркесіміне, IE11 және Microsoft Edge әзірлеуші құралдар жиынтығына құрмет. мониторлардың, отладчиктердің, эмуляторлардың және жедел компиляторлардың өте ыңғайлы тобын ұсына отырып, ол құрылғаннан бері ұзақ жол жүріп өтті.

Microsoft енді Internet Explorer браузеріне қолдау көрсетпейді және жаңарақ Edge браузеріне жаңартуды ұсынады. Ең жаңа нұсқаны жүктеп алу үшін олардың сайтына өтіңіз.

1. Таңдаңыз Қосымша әрекеттер, үш нүкте арқылы берілген және шолғыш терезесінің жоғарғы оң жақ бұрышында орналасқан.

   

2. Ашылмалы мәзір пайда болған кезде Әзірлеуші құралдары деп белгіленген опцияны таңдаңыз.

   

3. Әзірлеу интерфейсі енді әдетте браузер терезесінің төменгі жағында көрсетілуі керек. Келесі құралдар қолжетімді, олардың әрқайсысына тиісті қойынды тақырыбын басу немесе ілеспе пернелер тіркесімін пайдалану арқылы қол жеткізуге болады.

   

   • DOM Explorer: белсенді беттегі мәнерлер кестелерін және HTML файлдарын өңдеуге, өзгертілген нәтижелерді өзгертуге мүмкіндік береді. Қажет болған жағдайда кодты автотолтыру үшін IntelliSense функционалдығын пайдаланады. Пернелер тіркесімі: (CTRL+1)
   • Console: Кірістірілген API арқылы есептегіштерді, таймерлерді, жолдарды және теңшелген хабарларды қоса, жөндеу ақпаратын жіберу мүмкіндігін береді. Сондай-ақ, кодты белсенді веб-бетке енгізуге және нақты уақытта жеке айнымалыларға тағайындалған мәндерді өзгертуге мүмкіндік береді. Пернелер тіркесімі: (CTRL+2)
   • Debugger: Тоқтау нүктелерін орнатуға және кодты орындау кезінде, қажет болса, жол бойынша түзетуге мүмкіндік береді. Пернелер тіркесімі: (CTRL+3)
   • Желі: протокол мәліметтерін, мазмұн түрін, өткізу қабілеттілігін пайдалануды және т.б. қоса, бетті жүктеу және орындау кезінде браузер бастаған әрбір желілік сұрауды тізімдейді. Пернелер тіркесімі: (CTRL+4)
   • Өнімділік: бетті жүктеу уақытын және басқа әрекеттерді жылдамдатуға көмектесу үшін кадр жиілігін, процессорды пайдалануды және өнімділікке қатысты басқа көрсеткіштерді көрсетеді. Пернелер тіркесімі: (CTRL+5)
   • Жад: жадты пайдалану хронологиясын әртүрлі уақыт аралықтарынан түсірілген суреттермен бірге көрсету арқылы ағымдағы веб-беттегі ықтимал жадтың ағып кетуін оқшаулауға және түзетуге көмектеседі. Пернелер тіркесімі: (CTRL+6)
   • Эмуляция: белсенді беттің смартфондарды, планшеттерді және басқа құрылғыларды эмуляциялайтын әртүрлі ажыратымдылықтар мен экран өлшемдерінде қалай көрсетілетінін көрсетеді. Ол сондай-ақ пайдаланушы агентін және бет бағдарын өзгерту, сондай-ақ ендік пен бойлықты енгізу арқылы әртүрлі геолокацияларды имитациялау мүмкіндігін береді. Пернелер тіркесімі: (CTRL+7)

4. Console көрсету үшін кез келген басқа құралдардың ішінде орналасқан төртбұрышты түймені ішінде оң жақ жақшамен басыңыз. әзірлеу құралдары интерфейсінің жоғарғы оң жақ бұрышы.

   

5. Әзірлеуші құралдары интерфейсін бөлек терезеге айналдыру үшін, екі каскадты төртбұрышты таңдаңыз немесе келесі пернелер тіркесімін пайдаланыңыз: CTRL+P. CTRL+P пернелерін екінші рет басу арқылы құралдарды бастапқы орнына қоюға болады.

   

Apple Safari (тек Mac)

Safari-нің әртүрлі әзірлеушілер жинағы дизайн және бағдарламалау қажеттіліктері үшін Mac жүйесін пайдаланатын үлкен әзірлеушілер қауымдастығын көрсетеді. Қуатты консоль мен дәстүрлі тіркеу және жөндеу мүмкіндіктеріне қоса, қолдануға оңай жауап беретін дизайн режимі және жеке браузер кеңейтімдерін жасау құралы да қамтамасыз етілген.

1. Экранның жоғарғы жағында орналасқан шолғыш мәзірінен Safari таңдаңыз. Ашылмалы мәзір пайда болған кезде Параметрлер таңдаңыз. Сондай-ақ осы мәзір элементінің орнына келесі пернелер тіркесімін пайдалануға болады: COMMAND+COMMA(,)

   

2. Safari Параметрлер интерфейсі енді браузер терезесін қабаттап көрсету керек. Тақырыптың оң жақ шетінде орналасқан Қосымша белгішесін таңдаңыз.

   

3. Қосымша теңшелімдері енді көрінуі керек. Бұл экранның төменгі жағында құсбелгімен бірге мәзір жолағында Әзірлеу мәзірін көрсету белгіленген опция бар. Егер ұяшықта ешқандай құсбелгі көрсетілмесе, оны қою үшін бір рет басыңыз.

   

4. Параметрлер интерфейсін жабыңыз.

5. Енді браузер мәзірінде Develop атты жаңа опцияны байқағаныңыз жөн, ол Бетбелгілер мен Терезе арасында орналасқан. Осы мәзір элементін басыңыз. Енді келесі опцияларды қамтитын ашылмалы мәзір көрсетілуі керек.

   • Бетті ашу: белсенді веб-бетті Mac жүйесінде орнатылған басқа браузерлердің бірінде ашуға мүмкіндік береді.
   • Пайдаланушы агенті: Chrome, Firefox және Internet Explorer бірнеше нұсқаларын қоса, алдын ала анықталған пайдаланушы агентінің оннан астам мәндерін таңдауға, сондай-ақ жеке теңшелімді анықтауға мүмкіндік береді. жол.
   • Жауапты дизайн режиміне кіру: Ағымдағы бетті әртүрлі құрылғыларда және әртүрлі экран ажыратымдылықтарында көрсетілетіндей етіп көрсетеді.
   • Веб-инспекторды көрсету: Safari әзірлеу құралдарының негізгі интерфейсін іске қосады, әдетте браузер экранының төменгі жағында орналасады және келесі бөлімдерден тұрады: Элементтер, Желі, Ресурстар, Хронологиялар, Түзету құралы, Жад, Консоль.
   • Қате консолін көрсету: Сондай-ақ қателерді, ескертулерді және іздеуге болатын басқа ақпаратты көрсететін Консоль қойындысына тікелей әзірлеуші құралдары интерфейсін іске қосады. журнал деректері.
   • Бет көзін көрсету: Ресурстар қойындысын ашады, құжат бойынша санатталған белсенді беттің бастапқы кодын көрсетеді.
   • Бет ресурстарын көрсету: Бет көзін көрсету опциясымен бірдей функцияны орындайды.
   • Үзінді өңдегішін көрсету: CSS және HTML кодын енгізуге болатын жаңа терезені ашады, оның шығысын жылдам қарап шығады.
   • Кеңейтім құрастырушысын көрсету: CSS, HTML және JavaScript көмегімен Safari кеңейтімдерін жасау немесе өңдеу мүмкіндігін береді.
   • Хронология жазуын көрсету: Уақыт шкаласы қойындысын ашады және желі сұрауларын, орналасуды және ақпаратты көрсетуді, сонымен қатар нақты уақытта JavaScript орындалуын көрсете бастайды.
   • Кэштерді босату: Қатты дискіде қазіргі уақытта сақталған барлық кэшті жояды.
   • Кэштерді өшіру: Әрбір бет жүктелген кезде барлық мазмұн серверден шығарылатындай Safari кэштеуді тоқтатады.
   • Суреттерді өшіру: кескіндердің барлық веб-беттерде көрсетілуіне жол бермейді.
   • Стильдерді өшіру: бет жүктелген кезде CSS сипаттарын елемейді.
   • JavaScript өшіру: барлық беттерде JavaScript орындалуын шектейді.
   • Кеңейтімдерді өшіру: барлық орнатылған кеңейтімдердің шолғышта іске қосылуына тыйым салады.
   • Сайтқа арналған бұзақыларды өшіру: Safari белсенді веб-бетке қатысты мәселелерді нақты өңдеу үшін өзгертілген болса, бұл опция сол өзгерістерді блоктайды, осылайша бет осы өзгертулер енгізілгенге дейінгідей жүктейді.
   • Жергілікті файл шектеулерін өшіру: браузерге жергілікті дискілердегі файлдарға кіруге рұқсат береді, бұл әрекет қауіпсіздік мақсатында әдепкі бойынша шектелген.
   • Шектеулер арасындағы шектеулерді өшіру: Бұл шектеулер XSS және басқа ықтимал қауіптерді болдырмау үшін әдепкі бойынша орнатылады. Дегенмен, оларды әзірлеу мақсатында жиі уақытша өшіру қажет.
   • Смарт іздеу өрісінен JavaScript рұқсат ету: Қосылған кезде ол URL мекенжайларын JavaScript арқылы енгізу мүмкіндігін береді: мекенжай жолағына тікелей енгізілген.
   • SHA-1 сертификаттарын қауіпті деп санау: SHA-1 алгоритмін пайдаланатын SSL сертификаттары әдетте ескірген және осал болып саналады.