Веб Браузердин Иштеп чыгуучу куралдарын кантип колдонуу керек

2024 Автор: Abigail Brown | [email protected]. Акыркы өзгөртүү: 2024-01-07 19:04

Көпчүлүк серепчилердин көңүлүн күнүмдүк интернетте жүрүүнү каалаган колдонуучудан тышкары, алар веб-иштеп чыгуучуларга, дизайнерлерге жана сапат кепилдиги боюнча адистерге да жардам беришет, алар күчтүү интеграциялоо аркылуу ошол колдонуучулар кире турган колдонмолорду жана сайттарды түзүүгө жардам беришет. куралдарды браузерлердин өзүндө.

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

Сыноо көз карашынан алганда, сиз колдонмонун же веб-баракчанын ар кандай браузерлерде, ошондой эле ар кандай түзмөктөрдө жана платформаларда кандайча көрсөтүлөрүн жооп берүүчү дизайн жана орнотулган симуляторлор аркылуу кайра чыгара аласыз. Эң жакшы жери, мунун баарын браузериңизден чыкпай эле жасай аласыз!

Төмөнкү окуу куралдары бир нече популярдуу веб-браузерлерде бул иштеп чыгуучунун куралдарына кантип кирүүгө болорун көрсөтүп берет.

Google Chrome

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

1. Chrome'дун негизги менюсун тандаңыз, үч горизонталдуу сызык менен белгиленген жана серепчинин жогорку оң бурчунда жайгашкан.

2. Жылкыма меню пайда болгондо, чычкан курсоруңузду Дагы куралдар опциясынын үстүнө алып барыңыз.

   

3. Эми кошумча меню пайда болушу керек. Иштеп чыгуучу куралдар деп белгиленген опцияны тандаңыз. Бул менюнун ордуна төмөнкү баскычтопту колдонсоңуз болот: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION) +COMMAND+I)

   

4. Бул мисалдагы скриншотто көрсөтүлгөндөй, Chrome Иштеп чыгуучу куралдарынын интерфейси эми көрсөтүлүшү керек. Chrome'дун версиясына жараша, сиз көргөн баштапкы калып бул жерде көрсөтүлгөндөн бир аз башкача болушу мүмкүн. Демейде экрандын ылдый жагында же оң жагында жайгашкан иштеп чыгуучу куралдарынын негизги борбору төмөнкү өтмөктөрдү камтыйт.

5. Бул бөлүмдөрдөн тышкары, сиз төмөнкү куралдарга >> сөлөкөтү аркылуу кире аласыз, Андашуу оң жагында жайгашкан өтмөк.

   • Memory: Веб баракчадагы эстутумдун колдонулушун көзөмөлдөп, жазыңыз. Сайтыңыздагы JavaScript канчалык оор экенин көрө аласыз.
   • Коопсуздук: Сертификат көйгөйлөрүн жана активдүү барактагы же колдонмодогу коопсуздукка байланыштуу башка маселелерди баса белгилейт.
   • Колдонмо: Веб колдонмосу пайдаланып жаткан ресурстарды текшериңиз. Колдонулуп жаткан нерселер тууралуу толук маалымат алыңыз.
   • Аудиттер: Барактын же колдонмонун жүктөө убактысын жана жалпы иштешин оптималдаштыруу жолдорун сунуштайт.

   

6. Түзмөк режими сизге жигердүү баракты симулятордо көрүүгө мүмкүндүк берет, ал дээрлик аны ондон ашык түзмөктөрдүн биринде, анын ичинде бир нече белгилүү Androidде көрүнгөндөй кылып көрсөтөт. жана iPad, iPhone жана Samsung Galaxy сыяктуу iOS моделдери. Сизге ошондой эле өзгөчө иштеп чыгуу же тестирлөө керектөөлөрүңүзгө ылайыкташтырылган экрандын резолюцияларын эмуляциялоо мүмкүнчүлүгү берилет.

   Түзмөк режимин күйгүзүү жана өчүрүү үчүн мобилдик телефондун сөлөкөтүн тандаңыз. Элементтер өтмөк.

   

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 Debugger үзгүлтүккө учуратуу чекиттерин коюу, DOM түйүндөрүн текшерүү, кара бокстун тышкы булактарын жана башка көптөгөн нерселер аркылуу кемчиликтерди аныктоого жана оңдоого мүмкүндүк берет. Инспектордогудай эле, бул функция да алыстан мүчүлүштүктөрдү оңдоону колдойт. Баскычтоптун жарлыгы: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Стиль редактору: Жаңы стилдер жадыбалдарын түзүүгө жана аларды жигердүү веб-баракчага кошууга же учурдагы барактарды түзөтүүгө жана бир чыкылдатуу менен сиздин өзгөртүүлөрүңүздүн серепчиде кандайча көрсөтүлөрүн текшерүүгө мүмкүндүк берет. Баскычтоптун жарлыгы: Mac OS X, Windows (SHIFT+F7)
   • Performance: Жигердүү барактын тармактык иштеши, кадр ылдамдыгы берилиштери, JavaScript аткарылуу убактысы жана абалы, боёктун жаркылдашы жана башка көптөгөн нерселердин деталдуу бөлүштүрүлүшүн камсыз кылат. Баскычтоптун жарлыгы: Mac OS X, Windows (SHIFT+F5)
   • Network: Серепчи тарабынан демилгеленген ар бир тармак сурамынын тизмеси жана тиешелүү ыкма, баштапкы домен, түрү, өлчөмү жана өткөн убакыт. Баскычтоптун жарлыгы: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Сактоо инспектору: Вебсайтта сакталган кэш менен кукилерди карап көрүңүз. Баскычтоптун жарлыгы: (SHIFT+F9)
   • Иштеп чыгуучунун куралдар панели: Интерактивдүү буйрук сабынын котормочусун ачат. Бардык жеткиликтүү буйруктардын тизмесин жана алардын туура синтаксисин көрүү үчүн котормочуга help киргизиңиз. Баскычтоптун жарлыгы: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Firefox OS иштеткен нукура түзмөк же 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: Скретчпад сизге Firefox-тун калкыма терезесинен JavaScript кодунун үзүндүлөрүн жазууга, түзөтүүгө, интеграциялоого жана аткарууга мүмкүндүк берет. Коддо жазып, аны веб-сайтта сынап көрүүгө мүмкүндүк берген интерактивдүү JavaScript документин ачыңыз. Ыкчам баскыч: (SHIFT+F4)
   • Кызмат кызматкерлери: Желе колдонмоңуздагы мүчүлүштүктөрдү оңдоо. Алардын иштеши жана каталары тууралуу кеңири маалымат алыңыз.
   • Барак булагы: Түпнуска серепчиге негизделген иштеп чыгуучу курал, бул параметр жөн гана жигердүү барактын жеткиликтүү баштапкы кодун көрсөтөт. Баскычтоптун жарлыгы: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Көбүрөөк куралдарды алуу: Веб Иштеп чыгуучунун куралдар кутусу жыйнагын Mozillaнын расмий кошумчалары сайтында ачат, анын ичинде онго жакын популярдуу кеңейтүүлөр камтылган. 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)
   • Performance: Баракты жүктөө убакыттарын жана башка аракеттерди тездетүүгө жардам берүү үчүн кадр ылдамдыгы, CPU колдонулушу жана майнаптуулукка байланыштуу башка көрсөткүчтөр. Ыкчам баскычтар: (CTRL+5)
   • Мемориал: Эстутумду колдонуу хронологиясын жана ар кандай убакыт аралыктарындагы көз ирмемдерди көрсөтүү менен учурдагы веб-баракчадагы мүмкүн болуучу эстутумдун агып кетишин бөлүп алууга жана оңдоого жардам берет. Ыкчам баскычтар: (CTRL+6)
   • Эмуляция: Активдүү барак смартфондорду, планшеттерди жана башка түзмөктөрдү эмуляциялоочу түрдүү резолюцияларда жана экран өлчөмдөрүндө кантип көрсөтүлөрүн көрсөтөт. Ал ошондой эле колдонуучу агентин жана баракчанын багытын өзгөртүүгө, ошондой эле кеңдик менен узундукка киргизүү менен ар кандай геолокацияларды окшоштурууга мүмкүнчүлүк берет. Ыкчам баскычтар: (CTRL+7)

4. Console көрсөтүү үчүн башка куралдардын ичинде турганда, анын ичинде жайгашкан оң кашаа менен чарчы баскычын басыңыз. иштеп чыгуу куралдарынын интерфейсинин жогорку оң бурчу.

   

5. Иштеп чыгуучунун куралдарынын интерфейсин өзүнчө терезеге айландыруу үчүн эки каскаддуу тик бурчтукту тандаңыз же төмөнкү баскычтопту колдонуңуз: CTRL+P. CTRL+P баскычтарын экинчи жолу басуу менен куралдарды баштапкы ордуна жайгаштырсаңыз болот.

   

Apple Safari (Mac гана)

Safari'нин түрдүү иштеп чыгуучу куралдар топтому Mac'ты дизайн жана программалоо муктаждыктары үчүн колдонгон чоң иштеп чыгуучулардын коомчулугун чагылдырат. Күчтүү консолдон жана салттуу журналды каттоо жана мүчүлүштүктөрдү оңдоо функцияларынан тышкары, колдонууга оңой жооп берүүчү дизайн режими жана өзүңүздүн серепчиңиздин кеңейтүүлөрүн түзүү куралы да камтылган.

1. Экраныңыздын жогору жагында жайгашкан серепчи менюсунан Safari тандаңыз. Ашылма меню пайда болгондо, Preferences тандаңыз. Бул меню пунктунун ордуна төмөнкү баскычтопту да колдонсоңуз болот: COMMAND+COMMA(,)

   

2. Safari'нин Preferences интерфейси эми серепчиңиздин терезесин каптап, көрсөтүлүшү керек. Баштын оң жагында жайгашкан Өркүндөтүлгөн сөлөкөтүн тандаңыз.

   

3. Өркүндөтүлгөн жөндөөлөрү эми көрүнүп турушу керек. Бул экрандын ылдый жагында меню тилкесинде Өнүктүрүү менюсун көрсөтүү деп белгиленген тандоо кутучасы менен коштолот. Эгерде кутуда эч кандай белги жок болсо, аны бир жолу чыкылдатыңыз.

   

4. Параметрлер интерфейсин жабуу.

5. Сиз эми серепчи менюсунда Иштеп чыгуу аттуу жаңы опцияны байкашыңыз керек, ал Кыстармалар менен Терезе ортосунда жайгашкан. Бул меню пунктун басыңыз. Төмөнкү параметрлерди камтыган ылдый түшүүчү меню көрсөтүлүшү керек.

   • Бетти менен ачуу: Учурда Mac'уңузда орнотулган башка серепчилердин биринде активдүү веб баракты ачууга мүмкүндүк берет.
   • User Agent: Сизге алдын ала аныкталган ондон ашык колдонуучу агентинин маанилеринин ичинен Chrome, Firefox жана Internet Explorer бир нече версияларын тандоого, ошондой эле өзүңүздүн жеке ыңгайыңызды аныктоого мүмкүндүк берет сап.
   • Жауаптуу дизайн режимине кириңиз: Учурдагы баракты ар кандай түзмөктөрдө жана ар кандай экран дааналыктарында көрүнгөндөй кылып көрсөтөт.
   • Show Web Inspector: Safari'нин иштеп чыгуу куралдары үчүн негизги интерфейсти ишке киргизет, адатта серепчиңиздин экранынын ылдый жагында жайгаштырылат жана төмөнкү бөлүмдөрдү камтыйт: Элементтер, Тармак, Ресурстар, Убакыт тилкелери, Мүчүлүштүктөрдү оңдоочу, Сактагыч, Консол.
   • Ката консолун көрсөтүү: Ошондой эле иштеп чыгуу куралдарынын интерфейсин түз Консол өтмөгүнө ишке киргизет, анда каталар, эскертүүлөр жана башка издөөгө болот журнал дайындары.
   • Барактын булагын көрсөтүү: Ресурстар өтмөгүн ачат, ал документ тарабынан категорияланган активдүү барактын баштапкы кодун көрсөтөт.
   • Барак булактарын көрсөтүү: Бет булагын көрсөтүү параметри сыяктуу эле функцияны аткарат.
   • Snippet Editor'ду көрсөтүү: CSS жана HTML кодун киргизе турган жаңы терезени ачат, анын жыйынтыгын ошол замат алдын ала көрө аласыз.
   • Кеңейтүү куруучуну көрсөтүү: CSS, HTML жана JavaScript менен Safari кеңейтүүлөрүн түзүүгө же түзөтүүгө мүмкүнчүлүк берет.
   • Убакыт тилкесин жазууну көрсөтүү: Убакыт тилкелери өтмөгүн ачып, тармак сурамдарын, жайгашуусун жана рендеринг маалыматын, ошондой эле реалдуу убакытта JavaScript аткарылышын көрсөтө баштайт.
   • Бош кэш: Учурда катуу дискиңизде сакталып жаткан кэштин баарын жок кылат.
   • Кэштерди өчүрүү: Ар бир бет жүктөлгөн сайын бардык мазмун серверден алынышы үчүн Safari кэштебей калат.
   • Сүрөттөрдү өчүрүү: Сүрөттөрдүн бардык веб-баракчаларда көрсөтүлүшүнө жол бербейт.
   • Стильдерди өчүрүү: Барак жүктөлгөндө CSS касиеттерин этибарга албайт.
   • JavaScript'ти өчүрүү: Бардык беттерде JavaScript аткарылышын чектейт.
   • Кеңейтүүлөрдү өчүрүү: Бардык орнотулган кеңейтүүлөрдүн браузерде иштешине тыюу салат.
   • Сайтка тиешелүү хакерлерди өчүрүү: Эгерде Safari активдүү веб-баракчага тиешелүү маселени(-терди) ачык чече тургандай өзгөртүлгөн болсо, бул параметр ал өзгөртүүлөрдү бөгөттөп, баракчаны бул өзгөртүүлөр киргизилгенге чейинки жүктөөлөр.
   • Жергиликтүү файл чектөөлөрүн өчүрүү: Серепчиге жергиликтүү дисктериңиздеги файлдарга кирүү мүмкүнчүлүгүн берет, бул коопсуздук үчүн демейки боюнча чектелген.
   • Cross-Origin чектөөлөрүн өчүрүү: Бул чектөөлөр XSS жана башка мүмкүн болуучу коркунучтарды алдын алуу үчүн демейки боюнча коюлган. Бирок, иштеп чыгуу максатында алар көбүнчө убактылуу өчүрүлүшү керек.
   • Акылдуу издөө талаасынан JavaScript'ке уруксат берүү: Иштетилгенде, ал javascript менен URL'дерди киргизүү мүмкүнчүлүгүн берет: түздөн-түз дарек тилкесине киргизилген.
   • SHA-1 тастыктамаларын кооптуу катары кароо: SHA-1 алгоритмин колдонгон SSL сертификаттары эскирген жана аялуу болуп эсептелет.