Jinsi ya Kutumia Zana za Msanidi wa Kivinjari cha Wavuti

2024 Mwandishi: Abigail Brown | [email protected]. Mwisho uliobadilishwa: 2023-12-17 07:02

Mbali na waundaji wengi wa vivinjari kuangazia mtumiaji wa kila siku anayetaka kuvinjari wavuti, pia wanahudumia wasanidi programu, wabunifu na wataalamu wa uhakikisho wa ubora ambao husaidia kuunda programu na tovuti ambazo watumiaji hao wanafikia kwa kuunganisha nguvu. zana hadi kwenye vivinjari vyenyewe.

Siku zimepita ambapo zana pekee za kupanga na kujaribu zilizopatikana ndani ya kivinjari zilikuruhusu kutazama msimbo wa chanzo wa ukurasa na si chochote zaidi. Vivinjari vya leo hukuruhusu uchunguze kwa undani zaidi kwa kufanya mambo kama vile kutekeleza na kutatua vijisehemu vya JavaScript, kukagua na kuhariri vipengele vya DOM, kufuatilia trafiki ya mtandao katika muda halisi kadri programu au ukurasa wako unavyopakia ili kutambua vikwazo, kuchanganua utendakazi wa CSS, kuhakikisha kuwa msimbo wako bila kutumia kumbukumbu nyingi au mizunguko mingi ya CPU, na mengi zaidi.

Kwa mtazamo wa majaribio, unaweza kuzaliana jinsi programu au ukurasa wa wavuti utakavyofanya katika vivinjari tofauti na vile vile kwenye vifaa na mifumo tofauti kupitia ustadi wa muundo unaoitikia kazi na viigaji vilivyojengewa ndani. Jambo bora zaidi ni kwamba unaweza kufanya haya yote bila kuacha kivinjari chako!

Mafunzo yaliyo hapa chini yanakuelekeza jinsi ya kufikia zana hizi za wasanidi programu katika vivinjari kadhaa maarufu.

Google Chrome

Zana za wasanidi wa Chrome hukuruhusu kuhariri na kutatua msimbo, kukagua vipengee mahususi ili kufichua matatizo ya utendakazi, kuiga skrini tofauti za kifaa ikiwa ni pamoja na zinazotumia Android au iOS, na kutekeleza utendakazi zingine kadhaa muhimu.

1. Chagua menyu kuu ya Chrome, iliyo na mistari mitatu ya mlalo na iko katika kona ya juu ya kulia ya kivinjari.

2. Menyu kunjuzi inapoonekana, weka kishale cha kipanya chako juu ya chaguo la Zana zaidi.

   

3. Menyu ndogo inapaswa kuonekana sasa. Chagua chaguo lenye lebo Zana za Msanidi. Unaweza pia kutumia njia ya mkato ya kibodi badala ya kipengee cha menyu hii: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION) +AMRI+mimi)

   

4. Kiolesura cha Zana za Wasanidi Programu wa Chrome sasa kinapaswa kuonyeshwa, kama inavyoonyeshwa katika mfano huu wa picha ya skrini. Kulingana na toleo lako la Chrome, mpangilio wa awali unaouona unaweza kuwa tofauti kidogo na uliowasilishwa hapa. Kitovu kikuu cha zana za wasanidi programu, ambacho kwa kawaida huwa chini au upande wa kulia wa skrini, kina vichupo vifuatavyo.

5. Mbali na sehemu hizi, unaweza pia kufikia zana zifuatazo kupitia >> aikoni, iliyoko upande wa kulia wa Utendaji kichupo.

   • Kumbukumbu: Fuatilia na urekodi matumizi ya kumbukumbu kwenye ukurasa wa wavuti. Unaweza kuona jinsi JavaScript kwenye tovuti yako ilivyo nzito.
   • Usalama: Huangazia matatizo ya cheti na masuala mengine yanayohusiana na usalama na ukurasa amilifu au programu.
   • Maombi: Kagua rasilimali zinazotumiwa na programu ya wavuti. Pata muhtasari kamili wa kile kinachotumika.
   • Ukaguzi: Hutoa njia za kuboresha ukurasa au muda wa upakiaji wa programu na utendakazi wa jumla.

   

6. Hali ya Kifaa hukuruhusu kutazama ukurasa unaotumika katika kiigaji ambacho kinauonyesha kwa karibu jinsi inavyoweza kuonekana kwenye kifaa kimojawapo kati ya zaidi ya dazeni, ikijumuisha Android kadhaa zinazojulikana. na miundo ya iOS kama vile iPad, iPhone, na Samsung Galaxy. Pia umepewa uwezo wa kuiga maazimio maalum ya skrini ili kutosheleza mahitaji yako mahususi ya ukuzaji au majaribio.

   Ili kugeuza Hali ya Kifaa, chagua ikoni ya simu ya mkononi inayopatikana moja kwa moja upande wa kushoto wa Vipengee kichupo.

   

7. Unaweza pia kubinafsisha mwonekano na mwonekano wa zana zako za wasanidi programu kwa kuchagua kwanza kitufe cha menyu kinachowakilishwa na vidoti vitatu vilivyowekwa wima na iko upande wa kulia kabisa wa vichupo vilivyotajwa.

   Kutoka kwenye menyu kunjuzi, unaweza kuweka tena kituo, kuonyesha au kuficha zana tofauti na pia kuzindua vipengee vya hali ya juu zaidi kama vile kikaguzi cha kifaa. Utagundua kuwa kiolesura cha zana za dev chenyewe kinaweza kubinafsishwa kwa kiwango kikubwa kupitia mipangilio inayopatikana katika sehemu hii.

   

Mozilla Firefox

Sehemu ya wasanidi wa wavuti ya Firefox inajumuisha zana za wabunifu, wasanidi programu, na wanaojaribu sawa sawa kama vile kihariri cha mtindo na mpiga macho anayelenga pikseli.

1. Chagua menyu kuu ya ya Firefox, inawakilishwa na mistari mitatu ya mlalo na iko katika kona ya juu ya mkono wa kulia wa dirisha la kivinjari.

2. Menyu kunjuzi inapoonekana, chagua Msanidi wa Wavuti.

   

3. Menyu ya Msanidi Programu sasa inapaswa kuonyeshwa, ikiwa na chaguo zifuatazo. Utagundua kuwa vipengee vingi vya menyu vina mikato ya kibodi inayohusishwa navyo.

   • Kugeuza Zana: Huonyesha au kuficha kiolesura cha zana za msanidi, kwa kawaida huwekwa chini ya dirisha la kivinjari. Njia ya mkato ya kibodi: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Mkaguzi: Hukuruhusu kukagua na/au kurekebisha msimbo wa CSS na HTML kwenye ukurasa unaotumika na pia kwenye kifaa kinachobebeka kupitia utatuzi wa mbali. Njia ya mkato ya kibodi: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Dashibodi ya Wavuti: Hukuruhusu kutekeleza matamshi ya JavaScript ndani ya ukurasa unaotumika na pia kukagua seti mbalimbali za data iliyoingia ikiwa ni pamoja na maonyo ya usalama, maombi ya mtandao, ujumbe wa CSS, na zaidi.. Njia ya mkato ya kibodi: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Kitatuzi: Kitatuzi cha JavaScript hukuruhusu kubainisha na kurekebisha kasoro kwa kuweka sehemu za kukatika, kukagua nodi za DOM, vyanzo vya nje vya ndondi nyeusi na mengine mengi. Kama ilivyo kwa Inspekta, kipengele hiki pia kinaauni utatuzi wa mbali. Njia ya mkato ya kibodi: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Kihariri cha Mitindo: Hukuruhusu kuunda laha mpya za mitindo na kuzijumuisha na ukurasa wa wavuti unaotumika, au kuhariri laha zilizopo na kujaribu jinsi mabadiliko yako yanavyofanya katika kivinjari kwa mbofyo mmoja tu.. Njia ya mkato ya kibodi: Mac OS X, Windows (SHIFT+F7)
   • Utendaji: Hutoa uchanganuzi wa kina wa utendakazi wa ukurasa unaotumika, data ya kasi ya fremu, muda na hali ya utekelezaji wa JavaScript, kuwaka rangi, na mengi zaidi. Njia ya mkato ya kibodi: Mac OS X, Windows (SHIFT+F5)
   • Mtandao: Huorodhesha kila ombi la mtandao linaloanzishwa na kivinjari pamoja na mbinu inayolingana, kikoa asili, aina, saizi na muda uliopita. Njia ya mkato ya kibodi: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Kikaguzi cha Hifadhi: Angalia akiba na vidakuzi vinavyohifadhiwa na tovuti. Njia ya mkato ya kibodi: (SHIFT+F9)
   • Upauzana wa Msanidi: Hufungua mkalimani wa mstari wa amri unaoingiliana. Weka usaidizi kwenye mkalimani kwa orodha ya amri zote zinazopatikana na sintaksia yake sahihi. Njia ya mkato ya kibodi: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Hutoa uwezo wa kuunda na kutekeleza programu za wavuti kupitia kifaa halisi kinachoendesha Firefox OS au kupitia Firefox OS Simulator. Njia ya mkato ya kibodi: Mac OS X, Windows (SHIFT+F8)
   • Dashibodi ya Kivinjari: Hutoa utendakazi sawa na Dashibodi ya Wavuti (tazama hapo juu). Walakini, data yote iliyorejeshwa ni ya programu nzima ya Firefox (pamoja na viendelezi na vitendaji vya kiwango cha kivinjari) tofauti na ukurasa wa wavuti unaotumika tu. Njia ya mkato ya kibodi: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Mwonekano wa Muundo Unaoitikia: Hukuruhusu kutazama ukurasa wa wavuti papo hapo katika maazimio, mipangilio na saizi tofauti za skrini ili kuiga vifaa vingi ikiwa ni pamoja na kompyuta kibao na simu mahiri. Njia ya mkato ya kibodi: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Macho: Huonyesha msimbo wa rangi ya hex kwa pikseli zilizochaguliwa kibinafsi.
   • Scratchpad: Padi ya kukwaruza hukuwezesha kuandika, kuhariri, kuunganisha na kutekeleza vijisehemu vya msimbo wa JavaScript kutoka ndani ya dirisha ibukizi la Firefox. Fungua hati shirikishi ya JavaScript inayokuruhusu kuandika kwa msimbo na kuijaribu kwenye tovuti. Njia ya mkato ya kibodi: (SHIFT+F4)
   • Wafanyakazi wa Huduma: Tatua wafanyikazi wa huduma ombi lako la wavuti. Pata maelezo ya kina kuhusu utendakazi na hitilafu zao.
   • Chanzo cha Ukurasa: Zana asili ya msanidi inayotegemea kivinjari, chaguo hili linaonyesha kwa urahisi msimbo wa chanzo unaopatikana wa ukurasa unaotumika. Njia ya mkato ya kibodi: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Pata Zana Zaidi: Hufungua Kisanduku cha Vifaa vya Wasanidi Programu kwenye tovuti rasmi ya programu jalizi ya Mozilla, inayojumuisha takriban viendelezi kadhaa maarufu kama vile. kama Firebug na Greasemonkey.

   

Microsoft Edge/Internet Explorer

Inajulikana sana kama F12 Developer Tools, njia ya mkato ya kibodi ambayo imezindua kiolesura tangu matoleo ya awali ya Internet Explorer, zana ya dev katika IE11 na Microsoft Edge. imetoka mbali tangu kuanzishwa kwake kwa kutoa kundi linalofaa sana la vichunguzi, vitatuzi, viigizaji, na vikusanyaji popote ulipo.

Microsoft haitumii tena Internet Explorer na inapendekeza usasishe hadi kivinjari kipya cha Edge. Nenda kwenye tovuti yao ili kupakua toleo jipya zaidi.

1. Chagua Vitendo zaidi, vinavyowakilishwa na nukta tatu na iko katika kona ya juu kulia ya dirisha la kivinjari.

   

2. Menyu kunjuzi inapoonekana, chagua chaguo lililoandikwa Zana za Wasanidi.

   

3. Kiolesura cha usanidi kinapaswa kuonyeshwa sasa, kwa kawaida chini ya dirisha la kivinjari. Zana zifuatazo zinapatikana, kila moja inaweza kufikiwa kwa kubofya kichwa cha vichupo husika au kutumia njia ya mkato ya kibodi inayoambatana.

   

   • DOM Explorer: Hukuruhusu kuhariri laha za mitindo na HTML katika ukurasa unaotumika, ikitoa matokeo yaliyorekebishwa kadri unavyoendelea. Hutumia utendakazi wa IntelliSense ili kukamilisha msimbo kiotomatiki inapohitajika. Njia ya mkato ya kibodi: (CTRL+1)
   • Dashibodi: Hutoa uwezo wa kuwasilisha maelezo ya utatuzi ikijumuisha vihesabu, vipima muda, ufuatiliaji na ujumbe uliobinafsishwa kupitia API iliyojumuishwa. Pia, hukuruhusu kuingiza msimbo kwenye ukurasa wa wavuti unaotumika na kurekebisha thamani zilizowekwa kwa vigeu vya kibinafsi katika muda halisi. Njia ya mkato ya kibodi: (CTRL+2)
   • Kitatuzi: Hukuwezesha kuweka vizuizi na kutatua msimbo wako inapotekeleza, mstari kwa mstari ikihitajika. Njia ya mkato ya kibodi: (CTRL+3)
   • Mtandao: Huorodhesha kila ombi la mtandao linaloanzishwa na kivinjari wakati wa upakiaji na utekelezaji wa ukurasa ikijumuisha maelezo ya itifaki, aina ya maudhui, matumizi ya kipimo data, na mengi zaidi. Njia ya mkato ya kibodi: (CTRL+4)
   • Utendaji: Viwango vya maelezo vya fremu, matumizi ya CPU na vipimo vingine vinavyohusiana na utendaji ili kukusaidia kuharakisha muda wa upakiaji wa ukurasa na shughuli zingine. Njia ya mkato ya kibodi: (CTRL+5)
   • Kumbukumbu: Hukusaidia kutenga na kusahihisha uvujaji wa kumbukumbu unaowezekana kwenye ukurasa wa sasa wa wavuti kwa kuonyesha rekodi ya matumizi ya kumbukumbu pamoja na vijipicha kutoka kwa vipindi tofauti vya wakati. Njia ya mkato ya kibodi: (CTRL+6)
   • Uigaji: Hukuonyesha jinsi ukurasa unaotumika ungeweza kutoa katika maazimio mbalimbali na ukubwa wa skrini, simu mahiri zinazoiga, kompyuta kibao na vifaa vingine. Pia hutoa uwezo wa kurekebisha wakala wa mtumiaji na mwelekeo wa ukurasa, na pia kuiga jiografia tofauti kwa kuingiza latitudo na longitudo. Njia ya mkato ya kibodi: (CTRL+7)

4. Ili kuonyesha Dashibodi ukiwa ndani ya zana nyingine yoyote bonyeza kitufe cha mraba chenye mabano ya kulia ndani yake, iliyoko ndani. kona ya juu kulia ya kiolesura cha zana za ukuzaji.

   

5. Ili kutendua kiolesura cha zana za msanidi ili kiwe dirisha tofauti, chagua mistatili miwili ya kuachia au tumia njia ya mkato ya kibodi ifuatayo: CTRL+P. Unaweza kurudisha zana katika eneo zilipo asili kwa kubofya CTRL+P mara ya pili.

   

Apple Safari (Mac Pekee)

Zana mbalimbali za uendelezaji za Safari huangazia jumuiya kubwa ya wasanidi programu inayotumia Mac kwa mahitaji yao ya usanifu na programu. Kando na kiweko madhubuti na vipengele vya kitamaduni vya ukataji miti na utatuzi, hali ya usanifu iliyo rahisi kutumia na zana ya kuunda viendelezi vya kivinjari chako pia imetolewa.

1. Chagua Safari katika menyu ya kivinjari, iliyo juu ya skrini yako. Wakati menyu kunjuzi inaonekana, chagua Mapendeleo. Unaweza pia kutumia njia ya mkato ya kibodi ifuatayo badala ya kipengee hiki cha menyu: COMMAND+COMMA(,)

   

2. Kiolesura cha Mapendeleo kinafaa kuonyeshwa sasa, na kufunika dirisha la kivinjari chako. Chagua ikoni ya hali ya juu, iliyoko upande wa kulia wa kijajuu.

   

3. Mapendeleo ya Ya Juu sasa yanapaswa kuonekana. Katika sehemu ya chini ya skrini hii kuna chaguo lililoandikwa Onyesha menyu ya Usanidi katika upau wa menyu, ikiambatana na kisanduku cha kuteua. Ikiwa hakuna alama ya kuteua iliyoonyeshwa kwenye kisanduku, bofya juu yake mara moja ili kuiweka moja hapo.

   

4. Funga kiolesura cha Mapendeleo.

5. Sasa unapaswa kutambua chaguo jipya katika menyu ya kivinjari inayoitwa Develop, iliyoko kati ya Alamisho na Dirisha. Bofya kwenye kipengee hiki cha menyu. Menyu kunjuzi sasa inapaswa kuonyeshwa, iliyo na chaguo zifuatazo.

   • Fungua Ukurasa Na: Hukuruhusu kufungua ukurasa wa wavuti unaotumika katika mojawapo ya vivinjari vingine vilivyosakinishwa kwenye Mac yako.
   • Wakala wa Mtumiaji: Hukuwezesha kuchagua kutoka kwa zaidi ya thamani kumi na mbili za wakala zilizobainishwa awali ikiwa ni pamoja na matoleo kadhaa ya Chrome, Firefox, na Internet Explorer, pamoja na kufafanua desturi yako mwenyewe. mfuatano.
   • Ingiza Hali ya Usanifu ya Kuitikia: Inatoa ukurasa wa sasa jinsi ungeonekana kwenye vifaa mbalimbali na katika ubora tofauti wa skrini.
   • Onyesha Kikaguzi cha Wavuti: Inazindua kiolesura kikuu cha zana za uendelezaji za Safari, kwa kawaida huwekwa chini ya skrini ya kivinjari chako na inayo sehemu zifuatazo: Vipengele, Mtandao, Rasilimali, Rekodi za Maeneo Uliyotembelea., Kitatuzi, Hifadhi, Dashibodi.
   • Onyesha Dashibodi ya Hitilafu: Pia huzindua kiolesura cha zana za usanidi, moja kwa moja hadi kichupo cha Dashibodi ambacho huonyesha hitilafu, maonyo na vingine vinavyoweza kutafutwa. data ya kumbukumbu.
   • Onyesha Chanzo cha Ukurasa: Hufungua kichupo cha Rasilimali, ambacho huonyesha msimbo wa chanzo kwa ukurasa unaotumika ulioainishwa na hati.
   • Onyesha Nyenzo za Ukurasa: Hutekeleza utendakazi sawa na chaguo la Chanzo cha Ukurasa wa Onyesha.
   • Onyesha Kihariri Vijisehemu: Hufungua dirisha jipya ambapo unaweza kuingiza msimbo wa CSS na HTML, kuhakiki matokeo yake unaporuka.
   • Onyesha Kijenzi cha Kiendelezi: Hutoa uwezo wa kuunda au kuhariri viendelezi vya Safari kwa kutumia CSS, HTML na JavaScript.
   • Onyesha Rekodi ya Rekodi ya Maeneo Uliyotembelea: Hufungua kichupo cha Rekodi ya Maeneo Uliyotembelea na kuanza kuonyesha maombi ya mtandao, mpangilio, na uwasilishaji wa taarifa pamoja na utekelezaji wa JavaScript katika muda halisi.
   • Nafasi Tupu: Hufuta akiba nzima inayohifadhiwa kwa sasa kwenye diski yako kuu.
   • Zima Akiba: Huzuia Safari kutoka kwenye akiba ili maudhui yote yarejeshwe kutoka kwa seva kwenye kila ukurasa upakiaji.
   • Zima Picha: Huzuia picha kutoonyesha kwenye kurasa zote za wavuti.
   • Zima Mitindo: Hupuuza sifa za CSS ukurasa unapopakiwa.
   • Zima JavaScript: Inazuia utekelezaji wa JavaScript kwenye kurasa zote.
   • Zima Viendelezi: Inakataza viendelezi vyote vilivyosakinishwa kufanya kazi ndani ya kivinjari.
   • Zima Udukuzi wa Tovuti mahususi: Ikiwa Safari imerekebishwa ili kushughulikia kwa uwazi masuala maalum kwa ukurasa wa wavuti unaotumika, chaguo hili litazuia mabadiliko hayo ili ukurasa mizigo jinsi ingekuwa kabla ya marekebisho haya kuletwa.
   • Zima Vizuizi vya Faili za Karibu: Huruhusu kivinjari kupata ufikiaji wa faili kwenye diski zako za ndani, kitendo ambacho kimezuiwa kwa chaguomsingi kwa sababu za usalama.
   • Zima Vikwazo vya Asili Mtambuka: Vikwazo hivi huwekwa kwa chaguomsingi ili kuzuia XSS na hatari nyinginezo zinazoweza kutokea. Hata hivyo, mara nyingi huhitaji kuzimwa kwa muda kwa madhumuni ya usanidi.
   • Ruhusu JavaScript kutoka Sehemu ya Utafutaji Mahiri: Inapowashwa, inatoa uwezo wa kuingiza URL zilizo na javascript: iliyojumuishwa moja kwa moja kwenye upau wa anwani.
   • Chukua Vyeti vya SHA-1 kuwa Si Salama: Vyeti vya SSL vinavyotumia algoriti ya SHA-1 vinachukuliwa kuwa vimepitwa na wakati na vinaweza kuathiriwa.