Jinsi ya kutumia Vyombo vya Msanidi Programu ya Wasanidi Programu

Vifaa vya kuunganishwa kwa wabunifu wa wavuti, waendelezaji na wajaribu

Mbali na watengenezaji wengi wa kivinjari wanazingatia mtumiaji wa siku za kila siku wanaotafuta Mtandao, pia huwasaidia waendelezaji wa Wavuti, wabunifu na wataalamu wa uhakika wa ubora ambao husaidia kujenga programu na tovuti ambazo watumiaji hao wanapata kwa kuunganisha zana za nguvu ndani ya vivinjari wenyewe.

Gone ni siku ambazo programu tu na zana za kupima zilizopatikana ndani ya kivinjari zimekuwezesha kutazama msimbo wa chanzo cha ukurasa na hakuna chochote zaidi. Vivinjari vya leo vinakuwezesha kupiga mbizi ya kina zaidi kwa kufanya mambo kama kutekeleza na kufuta vipengee vya JavaScript, ukaguzi na uhariri vipengele vya DOM, ufuatiliaji wa trafiki ya wakati wa wakati wa programu kama programu yako au ukurasa unavyotambua kutambua utendaji, kuchunguza utendaji wa CSS, kuhakikisha kuwa msimbo wako ni si kutumia kumbukumbu nyingi au mizunguko mingi ya CPU , na mengi zaidi. Kutoka mtazamo wa kupima, unaweza kuzaliana jinsi programu au ukurasa wa Mtandao utavyotoa katika vivinjari tofauti na pia kwenye vifaa tofauti na majukwaa kwa njia ya uchawi wa kubuni msikivu na simulators zilizojengwa. Sehemu bora ni kwamba unaweza kufanya yote haya bila kuacha kivinjari chako!

Mafunzo hapa chini hukutembea kupitia jinsi ya kufikia zana hizi za msanidi programu kwenye vivinjari kadhaa vya Wavuti maarufu.

Google Chrome

Vifaa vya programu ya Chrome hukuruhusu kuhariri na kufuta kificho, kuchunguza vipengele vya mtu binafsi ili kufunua masuala ya utendaji, kulinganisha skrini tofauti za kifaa ikiwa ni pamoja na wale wanaoendesha Android au iOS , na kufanya kazi nyingine nyingi muhimu.

1. Bofya kwenye kifungo cha menu kuu ya Chrome, kilichowekwa na mistari mitatu ya usawa na iko kwenye kona ya juu ya mkono wa kivinjari.
2. Wakati orodha ya kushuka inavyoonekana, hover cursor yako ya mouse juu ya Chaguo zaidi cha zana .
3. Menyu ndogo inapaswa sasa kuonekana. Chagua chaguo kinachoitwa lebo ya zana za Wasanidi Programu . Unaweza pia kutumia njia ya mkato yafuatayo badala ya kipengee cha menu hii: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
4. Kiunganisho cha Vyombo vya Wasanidi Programu ya Chrome kinapaswa sasa kuonyeshwa, kama inavyoonekana katika skrini hii ya mfano. Kulingana na toleo lako la Chrome, mpangilio wa awali unaoona unaweza kuwa tofauti kidogo na ulioonyeshwa hapa. Kitovu kuu cha zana za msanidi programu, ambazo huwa kwenye upande wa chini au wa kulia wa skrini, ina vifungo vifuatavyo.
   Elements: Inatoa uwezo wa kuchunguza CSS na HTML code pamoja na hariri CSS juu-kuruka, kuona madhara ya mabadiliko yako katika muda halisi.
   Console: Chrome ya console JavaScript inaruhusu kuingizwa kwa amri moja kwa moja pamoja na kufuta upyaji wa uchunguzi.
   Vyanzo: Inakuwezesha kugundua msimbo wa JavaScript kupitia kiambatisho cha nguvu cha picha.
   Mtandao: Unaweka na huonyesha maelezo ya kina juu ya kila operesheni inayohusiana kwenye programu au ukurasa wa kazi, ikiwa ni pamoja na ombi kamili na vichwa vya majibu pamoja na metrics ya juu ya muda.
   Muda wa Wakati: Inaruhusu uchambuzi wa kina wa kila shughuli zinazofanyika ndani ya kivinjari mara tu maombi ya mzigo wa ukurasa au programu imeanzishwa.
5. Mbali na sehemu hizi, unaweza pia kufikia zana zifuatazo kupitia icon >> , iko kwenye haki ya tab ya Timeline .
   Ufafanuzi: Umevunjwa kwenye sehemu ya profaili ya maelezo ya CPU na Heap , hutoa matumizi ya kumbukumbu kamili na muda wa utekelezaji wa maombi au ukurasa.
   Usalama: Matatizo ya cheti muhimu na maswala mengine yanayohusiana na usalama na ukurasa wa kazi au programu.
   Rasilimali: Hii ndio ambapo unaweza kukagua vidakuzi, hifadhi ya ndani, cache ya programu, na vyanzo vingine vya data vya ndani vinazotumiwa na ukurasa wa Mtandao wa sasa au programu.
   Ukaguzi: Inatoa njia za kuongeza ukurasa au wakati wa mzigo wa maombi na utendaji wa jumla.
6. Njia ya Kifaa inakuwezesha kuona ukurasa uliohusika katika simulator ambayo huifanya karibu hasa kama itaonekana kwenye moja ya vifaa kadhaa, ikiwa ni pamoja na mifano kadhaa inayojulikana ya Android na iOS kama iPad, iPhone, na Samsung Galaxy. Pia unapewa uwezo wa kuiga maazimio ya skrini ya desturi ili kufikia mahitaji yako ya maendeleo au mahitaji ya kupima. Ili kugeuza na kuzimisha Hali ya Kifaa , chagua icon ya simu ya mkononi iko moja kwa moja kwenye kushoto ya kichupo cha Elements .
7. Unaweza pia Customize kuangalia na kujisikia kwa zana zako za msanidi programu kwa kwanza kubonyeza kifungo cha menyu kilichowakilishwa na dots tatu zilizowekwa kwa wima na ziko upande wa kushoto wa tabo zilizojajwa hapo awali. Kutoka ndani ya orodha hii ya kushuka, unaweza kuweka nafasi ya dock, kuonyesha au kujificha zana tofauti pamoja na kuzindua vitu vya juu zaidi kama mkaguzi wa kifaa. Utapata kwamba zana za dev yenyewe yenyewe ni customizable sana kupitia mipangilio iliyopatikana katika sehemu hii.

Firefox ya Mozilla

Sehemu ya Mtandao wa Wasanidi wa Firefox hujumuisha zana za wabunifu, waendelezaji, na wajaribu sawa kama mhariri wa mtindo na mshambuliaji wa mshambuliaji wa pixel.

Masomo yaliyopendekezwa: Maandishi ya Greasemonkey ya Juu 25 na Maandiko ya Mtumiaji wa Tampermonkey

1. Bonyeza kifungo cha menu kuu cha Firefox, kilichowakilishwa na mistari mitatu ya usawa na iko kwenye kona ya juu ya mkono wa kulia wa dirisha la kivinjari.
2. Wakati orodha ya kushuka inavyoonekana, chagua ishara iliyosajiliwa Wasanidi Programu . Menyu ya Programu ya Wasanidi programu inapaswa sasa kuonyeshwa, iliyo na chaguzi zifuatazo. Utaona kwamba vitu vingi vya menyu vina vifunguo vya keyboard vinavyohusishwa nao.
   Zana za kubadilisha: Inaonyesha au inaficha interface ya zana ya msanidi programu, kawaida imesimama chini ya dirisha la kivinjari. Njia ya mkato ya Kinanda: Mac OS X ( ALT (OPTION) + COMMAND + I ), Windows ( CTRL + SHIFT + I )
   Mkaguzi: Inakuwezesha kukagua na / au tweak CSS na HTML msimbo kwenye ukurasa wa kazi na kwenye kifaa kinachoweza kuambukizwa kupitia uharibifu wa kijijini. Njia ya mkato ya Kinanda: Mac OS X ( ALT (OPTION) + COMMAND + C ), Windows ( CTRL + SHIFT + C )
   Mtandao wa Console: Inakuwezesha kutekeleza maneno ya JavaScript ndani ya ukurasa uliohusika na kupitia mapitio tofauti ya data zilizoingia ikiwa ni pamoja na onyo la usalama, maombi ya mtandao, ujumbe wa CSS, na zaidi. Njia ya mkato ya Kinanda: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )
   Debugger: Debugger ya Javascript inakuwezesha kugundua na kurekebisha kasoro kwa kuweka mipangilio ya kupungua, kuchunguza nodes za DOM, vyanzo vya nje vya ndondi, na mengi zaidi. Kama ilivyo kwa Mkaguzi , kipengele hiki pia kinasaidia uharibifu wa kijijini. Njia ya mkato ya Kinanda: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S)
   Mhariri wa Sinema: Inakuwezesha kuunda vichwa vya mitindo mpya na kuviingiza kwa ukurasa wa Mtandao wa kazi, au kubadilisha karatasi zilizopo na uhakiki jinsi mabadiliko yako inatoa kwa kivinjari na click moja tu. Njia ya mkato ya Kinanda: Mac OS X, Windows ( SHIFT + F7 )
   Utendaji: Inatoa uharibifu wa kina wa utendaji wa mtandao wa ukurasa wa kazi, data ya kiwango cha sura, muda wa kutekeleza Java na hali, kuchora rangi, na mengi zaidi. Njia ya mkato ya Kinanda: Mac OS X, Windows ( SHIFT + F5 )
   Mtandao: Orodha ya ombi la kila mtandao lililoanzishwa na kivinjari pamoja na njia inayolingana, uwanja wa asili, aina, ukubwa, na muda uliopita. Njia ya mkato ya Kinanda: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
   Msanidi wa Wasanidi Programu: Inafungua mkalimani wa mstari wa maagizo. Ingiza msaada katika mkalimani kwa orodha ya amri zote zilizopo na syntax yao sahihi. Njia ya mkato ya Kinanda: Mac OS X, Windows ( SHIFT + F2 )
   WebIDE: Inatoa uwezo wa kuunda na kutekeleza programu za Wavuti kupitia kifaa halisi kinachoendesha Firefox OS au kupitia Firefox OS Simulator. Njia ya mkato ya Kinanda: Mac OS X, Windows ( SHIFT + F8 )
   Browser Console: Inatoa kazi sawa na Mtandao wa Console (tazama hapo juu). Hata hivyo, data zote zilirejeshwa ni kwa maombi yote ya Firefox (ikiwa ni pamoja na upanuzi na kazi za kiwango cha kivinjari) kinyume na ukurasa wa Wavuti tu. Njia ya mkato ya Kinanda: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )
   Mtazamo wa Msikivu Msikivu: Inakuwezesha kuona mara moja ukurasa wa wavuti katika maazimio tofauti, mipangilio, na ukubwa wa skrini ili kulinganisha vifaa vingi ikiwa ni pamoja na vidonge na simu za mkononi. Njia ya mkato ya Kinanda: Mac OS X ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + SHIFT + M )
   Eyedropper: Inaonyesha msimbo wa rangi ya hex kwa saizi pekee zilizochaguliwa.
   Scratchpad : Inakuwezesha kuandika, hariri, kuunganisha na kutekeleza snippets ya msimbo wa JavaScript kutoka ndani ya dirisha la nje la Firefox. Njia ya mkato ya Kinanda: Mac OS X, Windows ( SHIFT + F4 )
   Chanzo cha Ukurasa: Chombo cha msanidi wa awali wa kivinjari, chaguo hili linaonyesha tu code ya chanzo inapatikana kwa ukurasa wa kazi. Muda wa mkato wa Kinanda: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
   Pata Zana Zingine : Inafungua mkusanyiko wa Bodi ya Kifaa cha Wasanidi wa Mtandao kwenye tovuti ya kuongeza wavuti rasmi ya Mozilla, inayohusisha kuhusu viendelezi kadhaa maarufu kama Firebug na Greasemonkey.

Microsoft Edge / Internet Explorer

Inajulikana kama Vyombo vya Wasanidi wa F12 , ibada kwa mkato wa kibodi ambao umezindua interface tangu matoleo mapema ya Internet Explorer, toolset dev katika IE11 na Microsoft Edge imekuja kwa muda mrefu tangu kuanzishwa kwake kwa kutoa kundi kubwa sana la wachunguzi, wafuasi, wahamiaji, na washirika wa kuruka.

1. Bofya kwenye orodha ya Vitendo Zaidi , iliyosimamishwa na dots tatu na iko kwenye kona ya juu ya mkono wa dirisha la kivinjari. Wakati orodha ya kushuka inavyoonekana, chagua chaguo iliyoitwa F12 Tools Developer . Kama nilivyosema, unaweza pia kufikia zana kupitia njia ya mkato wa F12 .
2. Ingia ya maendeleo inapaswa sasa kuonyeshwa, kwa kawaida chini ya dirisha la kivinjari. Vifaa vifuatavyo vinapatikana, kila kupatikana kwa kubonyeza kichwa chao husika au kutumia njia ya mkato ya kuandamana.
   DOM Explorer: Inakuwezesha hariri za mitindo na HTML katika ukurasa wa kazi, kutoa matokeo yaliyobadilika unapoenda. Inatumia utendaji wa IntelliSense kwa msimbo wa kikamilifu unapofaa. Muda wa mkato wa Kinanda: (CTRL + 1)
   Console: Inatoa uwezo wa kuwasilisha taarifa za uharibifuji ikiwa ni pamoja na hesabu, vipindi, maelekezo, na ujumbe ulioboreshwa kupitia API jumuishi. Pia, inakuwezesha kuingiza msimbo kwenye ukurasa wa Wavuti wa kazi na kurekebisha maadili yaliyopewa vigezo vya mtu kwa wakati halisi. Muda wa mkato wa Kinanda: (CTRL + 2)
   Debugger: Inakuwezesha kuweka vipengee na kufuta msimbo wako wakati unafanya, mstari kwa mstari ikiwa ni lazima. Muda wa mkato wa Kinanda: (CTRL + 3)
   Mtandao: Orodha ya ombi kila mtandao iliyoanzishwa na kivinjari wakati wa mzigo wa ukurasa na utekelezaji ikiwa ni pamoja na maelezo ya protokta, aina ya maudhui, matumizi ya bandwidth, na mengi zaidi. Muda wa mkato wa Kinanda: (CTRL + 4)
   Utendaji: Viwango vya utaratibu wa maelezo, matumizi ya CPU, na metrics zinazohusiana na utendaji ili kukusaidia kuongeza kasi ya siku za mzigo na shughuli nyingine. Muda wa mkato wa Kinanda: (CTRL + 5)
   Kumbukumbu: Inasaidia kujitenga na kurekebisha uvujaji wa kumbukumbu za kumbukumbu kwenye ukurasa wa sasa wa wavuti kwa kuonyesha mstari wa wakati wa matumizi ya kumbukumbu pamoja na picha kutoka vipindi tofauti vya wakati. Muda wa mkato wa Kinanda: (CTRL + 6)
   Uhuishaji: Inaonyesha jinsi ukurasa uliohusika utakavyofanya katika maazimio mbalimbali na ukubwa wa skrini, kuhamisha simu za mkononi, vidonge, na vifaa vingine. Pia hutoa uwezo wa kurekebisha wakala wa mtumiaji na mwelekeo wa ukurasa, pamoja na kuiga geolocations tofauti kwa kuingia latitude na longitude. Muda wa mkato wa Kinanda: (CTRL + 7)
3. Ili kuonyesha Console wakati wa zana zingine zozote bonyeza kifungo cha mraba na bracket sahihi ndani yake, iko kona ya juu ya mkono wa kulia wa interface ya maendeleo.
4. Ili kuondosha, interface ya vifaa vya programu ya waendelezaji hivyo inakuwa dirisha tofauti, bofya kifungo kinachowakilishwa na rectangles mbili za kutembea au kutumia njia ya mkato ifuatayo: CTRL + P. Unaweza kuweka zana nyuma katika eneo lao la awali kwa kushinikiza CTRL + P mara ya pili.

Apple Safari (OS X tu)

Chombo cha toolbar cha Safari kinaonyesha jumuiya kubwa ya waendelezaji ambayo hutumia Mac kwa ajili ya kubuni na mahitaji yao ya programu. Mbali na console yenye nguvu na vitambulisho vya jadi na magumu ya kupangilia, rahisi kutumia msikivu wa muundo wa kubuni na chombo cha kuunda upanuzi wa kivinjari chako pia hutolewa.

1. Bofya kwenye safari kwenye orodha ya kivinjari, iko kwenye skrini yako ya juu. Wakati orodha ya kushuka inavyoonekana, chagua Mapendekezo . Unaweza pia kutumia njia ya mkato ifuatayo badala ya kipengee cha menu hii: COMMAND + COMMA (,)
2. Ufafanuzi wa Safari ya Mapendeleo inapaswa sasa kuonyeshwa, kufunika dirisha la kivinjari chako. Bofya kwenye ishara ya juu , iko upande wa kushoto wa kichwa.
3. Mapendekezo ya juu yanapaswa sasa kuonekana. Chini ya screen hii ni chaguo iliyoonyeshwa Onyesha Kuendeleza menyu kwenye bar ya menyu , ikifuatana na sanduku la hundi. Ikiwa hakuna alama ya hundi iliyoonyeshwa kwenye sanduku, bofya mara moja ili kuweka moja huko.
4. Funga kiungo cha Mapendeleo kwa kubonyeza 'x' nyekundu iliyopatikana kona ya juu ya kushoto.
5. Unapaswa sasa kutambua chaguo mpya katika orodha ya kivinjari inayoitwa Kuendeleza , iko kati ya Vitambulisho na Dirisha . Bofya kwenye kipengee hiki cha menyu. Menyu ya kushuka inapaswa sasa kuonyeshwa, iliyo na chaguzi zifuatazo.
   Fungua Ukurasa na: Inakuwezesha kufungua ukurasa wa Wavuti wa kazi katika mojawapo ya vivinjari vingine hivi sasa vilivyowekwa kwenye Mac yako.
   Mtumiaji wa Mtumiaji: Inakuwezesha kuchagua kutoka kwa maadili ya mawakala ya mtumiaji yaliyotanguliwa zaidi ikiwa ni pamoja na matoleo kadhaa ya Chrome, Firefox na Internet Explorer, na pia kufafanua kamba yako ya desturi.
   Ingiza Njia ya Kubuni Msikivu : Inatoa ukurasa wa sasa kama itaonekana kwenye vifaa mbalimbali na katika maazimio tofauti ya skrini.
   Onyesha Mpelelezi wa Wavuti: Anayarisha interface kuu kwa vifaa vya Safari's dev, kawaida huwekwa chini ya skrini ya kivinjari chako na ina sehemu zifuatazo: Elements , Network , Resources , Timelines , Debugger , Storage , Console .
   Onyesha Hifadhi ya Hitilafu: Pia huzindua kiungo cha zana za dev, moja kwa moja kwenye kichupo cha Console ambacho kinaonyesha makosa, maonyo, na data nyingine ya kumbukumbu ya kumbukumbu.
   Onyesha Chanzo cha Ukurasa: Hufungua kichupo cha Rasilimali , ambacho kinaonyesha msimbo wa chanzo kwa ukurasa wa kazi uliowekwa na hati.
   Onyesha Rasilimali za Ukurasa: Hufanya kazi sawa na Chanzo cha Onyesho la Kwanza .
   Onyesha Mhariri wa Snippet: Inafungua dirisha jipya ambapo unaweza kuingiza CSS na HTML code, ukiangalia upeo wake juu ya kuruka.
   Onyesha Mjenzi wa Ugani: Inatoa uwezo wa kuunda au hariri upanuzi wa Safari na CSS, HTML, na JavaScript.
   Onyesha Kurekodi Muda: Inafungua kichupo cha Timeline na huanza kuonyesha maombi ya mtandao, mpangilio na utoaji habari pamoja na utekelezaji wa JavaScript kwa wakati halisi.
   Cached tupu: Inachukua cache nzima sasa kuhifadhiwa kwenye gari lako ngumu.
   Zima Caches: Inakuacha safari kutoka kwa caching ili maudhui yote yamepatikana kutoka kwenye seva kwenye kila mzigo wa ukurasa.
   Zima picha: Huzuia picha kutoka utoaji kwenye kurasa zote za wavuti.
   Lemaza Mitindo: Inachukua mali ya CSS wakati ukurasa unapowekwa.
   Lemaza Javascript: Inaruhusu utekelezaji wa JavaScript kwenye kurasa zote.
   Zima Vipengezi: Inazuia upanuzi wote uliowekwa kutoka kwa kuendesha ndani ya kivinjari.
   Zima Hacks maalum ya Site: Ikiwa Safari imebadilika ili kushughulikia wazi suala (s) maalum kwenye ukurasa wa Mtandao uliohusika, chaguo hili litazuia mabadiliko hayo ili ukurasa uingie kama utakavyokuwa kabla ya marekebisho haya kuletwa.
   Zima vikwazo vya Picha za Mitaa: Inaruhusu kivinjari kufikia faili kwenye diski zako za ndani, hatua ambayo inazuiwa na default kwa sababu za usalama.
   Lemaza vikwazo vya Msalaba wa Msalaba: Vikwazo hivi vinawekwa kwa default kwa kuzuia XSS na hatari nyingine zingine. Hata hivyo, mara nyingi wanahitaji kuwa walemavu kwa muda kwa ajili ya maendeleo.
   Ruhusu JavaScript kutoka kwenye Utafutaji wa Smart: Ikiwa imewezeshwa, hutoa uwezo wa kuingia URL na javascript: imeingizwa moja kwa moja kwenye bar ya anwani.
   Tumia vyeti vya SHA-1 kama salama: vyeti vya SSL kwa kutumia SHA-1 algorithm huchukuliwa kuwa ni nje ya wakati na kuwa hatari.