Веб дастурчилар учун Firefox кенгайтмалари: Firebug

Firefoxнинг имкониятлари катта. Унинг фойдаланувчиларининг кўпчилиги бу браузернинг турли кенгайтмаларга бойлиги учун «яхши кўришади». Деярли ҳар бир веб дастурчининг компьютерига Firefox ўрнатилган ва албатта бу саҳифаларни ушбу браузерда текшириш учунгина эмас. Ушбу браузернинг энг катта ютуқларидан бири — уни кенгайтмалар ёрдамида етарлича имкониятлар билан жиҳозлаш. Кенгайтмаларнинг турлари эса жуда хилма-хил.

Ўзбекистонда ҳам веб дастурлашнинг жадал суръатда ривожланаётганини ҳисобга олиб, веб дастурчилар учун Firefox кенгайтмалари ҳақида мақолалар туркумини ёзишга қарор қилдик. Албатта, ушбу браузернинг бошқа кенгайтмалари ҳақида ҳам кейинчалик маълумотлар берамиз.

Кенгайтмаларни ўрнатиш

Firefox нинг ҳамма версияларига қуйидаги сайтдан ўрнатишлари мумкин:
https://addons.mozilla.org/ru/firefox/

Кенгайтмалар турли категорияларга бириктирилган. Ҳар бир кенгайтма саҳифасида уни Firefoxга ўрнатиш учун махсус тугма мавжуд, шу тугмани босиш орқали кенгайтмани ўрнатишингиз мумкин(пайдо бўладиган ойнада ўрнатишни тасдиқлаш лозим):

Firefox нинг охирги(учинчи) версиясида Инструменты→Дополнения(Tools→Addons) менюси орқали очиладиган ойнанинг Поиск дополнений(Get Add-ons) табида кенгайтмаларни излаш, ўрнатиш имкониятлари мавжуд:

Кенгайтмалар *.xpi қўшимчали файллар сифатида сақланади. Ушбу файлларни Firefox ёрдамида очиш орқали ҳам мос кенгайтмани ўрнатиш мумкин. Мақолаларимизда бериладиган кенгайтмалар ҳақидаги маълумотларда *.xpi файлларга тўғридан-тўғри боғни ҳам келтирамиз. Бу сизга бир нечта ёки интернет бўлмаган компьютерларга ҳам кенгайтмаларни тез ўрнатиш имкониятини беради.

Firebug

Саҳифа: https://addons.mozilla.org/ru/firefox/addon/1843
Ўрнатиш ёки кўчириб олиш: https://addons.mozilla.org/ru/firefox/downloads/latest/1843/addon-1843-latest.xpi
Рус тилида: http://firebug.ru/

Веб дастурчиларнинг энг машҳур кенгайтмаси. Жуда кенг имкониятларга эга. Мақолалар туркумини айнан шу кенгайтмадан бошлаганимизнинг сабаби ҳам шунда. Қуйида ҳар бир имконияти бўйича кенгроқ баёнини келтирамиз.

Умумий маълумотлар

Ушбу кенгайтма ўрнатилгандан сўнг, браузер ойнасининг қуйи ўнг бурчагида bug — «қўнғиз»(firebug — олов қўнғиз, оловли қўнғиз) расми пайдо бўлади. Шу қўнғизча босилганда, саҳифанинг қуйи қисмида Firebug панели очилади:

Firebug нинг асосий вазифаси — таҳлил. Кенгайтма орқали саҳифа элементларини, саҳифа юкланиш жараёнини, турли CSS стилларни, JavaScript кодларни текшириш мумкин.

Firebug панели, одатда, уч қисмдан иборат: юқори қисм, асосий панеллар ва ёрдамчи ўнг қисм. Юқори қисмда стандарт тугмалар ва баъзи маълумотлар кўрсатилади. Асосий панелларда эса, саҳифанинг қайси таркибий қисми таҳлили билан ишлаш танланади. Ўнг қисм актив турган панел учун қўшимча маълумотларни кўрсатади. Панел интерфейсидаги элементларни қуйида келтириладиган маълумотларимиздан билиб оласиз.

Саҳифаги HTML элементлар билан ишлаш(HTML, CSS панеллари)

Ушбу имкониятга веб дастурчиларнинг асосий эътиборини қаратмоқчимиз. Чунки, Firebug нинг энг кенг қўлланиладиган имконияти шу. Элементлар устида бажариладиган амаллар: таҳлил, атрибутларини ўзгартириш, стилларни текшириб кўриш HTML панелида амалга оширилади.

Саҳифадаги ҳар бир элемент ҳақида тўлиқ маълумот олиш мумкин. Айнан бирор элементни танлашнинг бир неча усули бор:

1. Inspect тугмасини босиб саҳифадаги керакли элементни танлаш:
   
   Танланаётган ва танланган элемент саҳифада атрофига кўк тўртбурчак чизилган ҳолатда кўрсатилади. Мос равишда, HTML табида кўрсатилган саҳифадаги элементларнинг дарахтсимон тузилишидан ҳам элемент танланади.
2. Тўғридан-тўғри шу табда жойлашган дарахтсимон тузилишдан ҳам мос элементни танлаш мумкин. Бу ерда ҳар қандай элементнинг устига сичқонча олиб борилганда саҳифадаги элемент кўк фонда кўрсатилади:
   
3. Панелнинг юқори қисмининг ўнг тарафида жойлашган қидирув майдонидан зарур элементнинг тег номи, атрибути, атрибут қийматида иштирок этадиган ҳарфларни киритиб элементни топиш мумкин. Бунда, элементлар автоматик танланмайди, фақат киритилган ҳарфлар иштирок этган элементлар кўрсатилади.

Танланган элементнинг саҳифа тузилишидаги ўрни(қайси элементлар «ичида» жойлашганлиги) юқори қисмда кўрсатилади:

Саҳифанинг дарахтсимон тузилишида элементнинг ихтиёрий атрибутини ўзгартириш учун атрибут номи ёки қийматини ўзгартириш чап клик орқали амалга оширилади. Янги атрибутлар қўшиш ва турли бошқа амаллар элемент устида ўнг клик орқали очиладиган менюда мавжуд:

New Attribute — элементга янги атрибут қўшиш; атрибут номи ва қиймати кетма-кет киритилади. Scroll Into View — браузер кўриш майдонини элементгача «суриб» беради. Edit HTML — шу элемент ташкил топган HTML кодни таҳрирлаш(элемент устида жуфт клик орқали ҳам унинг HTML кодини таҳрирлаш мумкин). Delete Element — элементни саҳифадан ўчириб ташлаш.

Firebug ёрдамида саҳифа, стилларда қилинган ўзгаришлар натижаси шу саҳифанинг ўзида(дарҳол) кўрсатилади. Бу қийматлар жорий юкланган саҳифа учунгина қўлланилади. Саҳифани қайта юклаганингизда, ҳамма қийматлар бошланғич ҳолатига қайтади.

HTML панелининг ўнг қисмидаги панелда элемент учун қўлланилган стиллар(Style), элемент жойлашуви ва ўлчамлари(Layout) ва DOM хусусиятлари келтирилади.

Элемент учун берилган, қўлланилган стиллар(қайси файлнинг нечанчи қаторида жойлашганлиги билан — style.css(line 86)) кетма-кет кўрсатилади. Қайта ёзилган хусусиятлар устига чизилади.

Элемент атрибутларини таҳрирлаш каби, стиллар хусусиятларини ҳам таҳрирлаш, янги хусусиятлар қўшиш ва айнан шу элемент стилини таҳрирлаш имконияти мавжуд. Стилларда берилган ранглар ва расмлар шу ернинг ўзида кўрсатилади:

Хусусиятларнинг чап тарафида пайдо бўладиган иконкани босиш орқали шу хусусият ноактив қилинади. Бирор стилнинг ўнг тарафидаги бўш майдонда жуфт клик орқали янги хусусият қўшилади. Хусусият номлари ва қийматлари ҳарфлари киритилиши мобайнида улар мос тўғри номларга тўдирилади; клавиатурадаги стрелкалар ёрдамида кейинги қиймат ёки номни кўриш мумкин.

Style табидаги Options менюсидаги Show Computed Style банди орқали Firefox ҳисоблаган хусусиятларнинг ҳаммасини кўриш мумкин.

Ҳамма стилларни тўлиқлигича(элементга боғланмаган ҳолатда) CSS панелида кўрсатилади. Style табидаги амаллар(стилни ўчириш, таҳрирлаш ва ҳ.к.) бу ерда ҳам бажарилаверади.

Layout табида элементнинг фақат жойлашуви ва ўлчамлари кўрсатилади. Стиллар ёрдамида берилган margin ва padding хусусиятлари қиймати ҳам шу ерда кўрсатилади ва уларни ўзгартириш мумкин:

DOM таби JavaScript дастурчилари учун шу турдаги элемент хусусиятларини таҳлил қилиш учун қўл келади.

Юкланиш жараёнини кузатиш ва таҳлил қилиш(Net панели)

Бошланғич ҳолатда Console, Script ва Net панеллари Firebug да ноактив бўлади. Ушбу панеллар учун бажариладиган амаллар саҳифанинг юкланиши ва ишлашини секинлаштириши туфайли шундай қилинган. Уларни шу сайт учун активлаштириш мумкин:

Net панели активлаштирилгандан сўнг, у шу саҳифа ва саҳифада ишлатилган ҳамма файлларнинг юкланиши ҳақида тўлиқ маълумот жадвал сифатида кўрсатилади.

Юкланиш жараёнини тўғридан-тўғри кузатиш мумкин. Юкланишда хатолик юз берган файллар қизил рангда кўрсатилади. Панелда кўрсатиладиган файлларни турлари бўйича фильтрлаш мумкин; панелнинг юқори қисмида бир неча файл турлари кўрсатилган(All — ҳамма файллар, HTML — HTML сифатида келган файллар ва ҳ.к.).

Бирор файлни танлаш орқали у файл юкланиши ҳақидаги тўлиқ маълумот очилади:

HTTP сўров(Request Headers) ва HTTP жавоб(Response Headers) параметрлари ҳар бир файл учун кўрсатилади. HTTP протоколи ва унинг ишлаш принципларини ўрганувчи ва ўргатувчилар учун бу жуда фойдали. Response табида эса, сервер томонидан қайтган файлнинг ўзи кўрсатилади(турига мос равишда матн ёки расм кўринишида).

Шу панелдан фойдаланиб саҳифадаги «оғир» юкланаётган файлларни таҳлил қилиш мумкин. Жадвалнинг қуйи қисмида умумий маълумотлар жамланади.

JavaScript код таҳлили, кодни қадамма-қадам текшириш(Script, DOM ва Console)

Аввало, Console панели ҳақида. Номидан кўриниб турибдики, ушбу панел JavaScript учун буйруқлар сатри вазифасини ўтайди(Windows операцион тизимида «командная строка»).

Панелнинг асосий қисмида эса, саҳифадаги код ёки буйруқлар сатрида киритилган буйруқларнинг бажарилишидаги хатолар кўрсатилади.

Юқоридаги расмга эътибор берсангиз; бу ерда қизил ранг билан хатолар кўрсатилади. Буйруқлар сатри орқали бажарилган бир нечта буйруқ эса кўк рангда. Буйруқ ёзилгандан сўнг [Enter] тугмасини босиш орқали бу буйруқ браузер томонидан бажарилади.

Кўрсатилган бирор хатони босиш орқали шу хато юз берган JavaScript файлнинг мос сатрини Script панелида кўрасиз.

Script панелида саҳифага юкларган JavaScript файлларни таҳлил қилиш, уларнинг ишлаш жараёнини қадамма-қадам кузатиш мумкин.

Ушбу панелда саҳифага юкланган кодларни панелнинг юқори қисмидаги тугмадан кўриш ва танлаш мумкин:

Бирор скрипт танланганда панелнинг асосий қисмида шу файл кўрсатилади. Бу скриптлардаги кодни алоҳида таҳлил қилишга имконият беради. Бошланғич ҳолатда панелда саҳифа коди кўрсатилади, яъни, шу саҳифага тўғридан-тўғри ёзилган скриптлар.

JavaScript код сатрлари олдига ўзига хос тўхтатиш маркерлари қўйиш мумкин, улар браузер шу сатрдаги кодни бажариб, тўхтаб туришини таъминлайди. Браузер «тўхтаб» турганда сиз кодингизда ўзгарувчилар қийматлари, турли функция, объектларни кузатиб, таҳлил қилишингиз мумкин.

Код қуйидагича таҳлил қилинади: аввало, коднинг керакли сатрига маркер қўйилади:

 

Бундан сўнг саҳифани қайта юклаш лозим. Энг биринчи қўйилган маркерга келиб браузер JavaScript кодларни бажаришни тўхтатади. Жорий сатр сариқ ранг билан ажратилади. Бу ҳолатда кодда ишлатилган ўзгарувчиларнинг қийматини кўриш мумкин. Панелнинг ўнг қисмида мавжуд фойдаланилаётган ўзгарувчилар ва браузер ўзи автоматик яратадиган турли объектлар акс этади:

Ўнг қисмдаги Watch табида бошқа ўзгарувчиларнинг ҳам қийматини кўриш мумкин. New watch expression майдонига ихтиёрий ўзгарувчи ёки объект(масалан, document) номини ёзиб [Enter] босилса, ушбу ўзгарувчи таркиби қуйида кўрсатилади:

Watch табининг юқори қисмидаги тугмалар браузерни код бажаришини бошқариш учун ишлатилади.

— (чапдан ўнгга): Continue — давом эттириш, Step Into — ичкарига давом этиш(қадамма-қадам кодни текширишда функцияларнинг ичига ҳам кириш), Step Over — ташқарида давом этиш(функциялар ичига кирмасдан, уларни қадамма-қадам эмас автоматик бажариш), Step Out — ташқарига давом этиш(функциялар ичидаги қолган кодни автоматик бажариб, функция чақирилган жойга қайтиш).

DOM панелида Document Object Model — саҳифанинг объект моделини таҳлил қилиш мумкин. Ушбу панель JavaScript дастурчилари учун анча қўл келиши табиий.

Хулоса

Firebug — алмаштириб бўлмайдиган ёрдамчи. Бошқа браузерларда ҳам ушбу кенгайтмага ўхшаш ускуналар мавжуд бўлишига қарамай, улар Firebug каби кенг имкониятларга эга эмас.

Ушбу мақоламиз, албатта, турли камчиликлардан холи эмас. Ушбу етишмовчиликларни сизларнинг фикр ва мулоҳазаларингиз тўлдиришидан умидвормиз.

Ушбу кенгайтма ҳақидаги қўшимча маълумотларни кенгайтма саҳифаси ёки http://getfirebug.com/ сайтидан олишингиз мумкин.

Веб дастурлаш рукни, теглар: Firebug, Firefox, веб дизайн. 20 Июль, 2009. Фонус.