Chrome DevTools: Cikakken Jagora don Samun Mafi Kyawun Amfani da Kayan Aikin Mai Haɓakawa

Chrome DevTools ya zama abokiyar hulɗa mai mahimmanci ga duk wani mai haɓaka yanar gizo, mai tsarawa, ko ƙwararren SEO da ke neman inganta aikin gidan yanar gizo, isa ga bayanai, da kuma matsayin injin bincike. Waɗannan kayan aikin, waɗanda aka haɗa cikin Google Chrome, suna ba da zurfin fahimta da iko kan ayyukan gidan yanar gizo, suna ba da damar komai daga duba HTML da CSS zuwa cikakken nazarin ayyukan cibiyar sadarwa, gwajin aiki, da inganta wayar hannu.

Shin kuna son ƙwarewa a fannin Chrome DevTools da kuma amfani da dukkan fasalulluka don gyara, ingantawa, da kuma gano matsaloli a kowane gidan yanar gizo? A cikin wannan labarin, za mu yi bayani dalla-dalla, tare da misalai da nasihu, duk abin da kuke buƙatar sani don fara samun mafi kyawun amfani da waɗannan kayan aikin, gami da yadda ake buɗe su da sauri, abin da za ku iya bincika tare da kowane kwamiti, abin da kowane aiki yake, da kuma yadda ake amfani da su a cikin ci gaba da SEO.

Menene Chrome DevTools kuma me yasa suke da ƙarfi haka?

Kayan aikin haɓakawa na Chrome DevTools wani tsari ne da aka gina a cikin Google Chrome wanda aka tsara don bawa kowane mai amfani damar yin nazari, gyara kurakurai, da inganta lambar da aikin kowane gidan yanar gizo ba tare da shigar da ƙarin plugins ba . Ta hanyar shafuka da fasaloli da yawa, zaku iya duba abubuwa, gyara salo a ainihin lokaci, bin diddigin ayyukan cibiyar sadarwa, gyara kurakurai, kimanta aiki, har ma da kwaikwayon halayen gidan yanar gizo akan na'urorin hannu . Ikon sa ya wuce kawai "duba lambar tushe": yana ba ku damar dandana yadda gidan yanar gizon ke hulɗa, yadda Google ke fassara shi, da kuma yadda mai amfani ke sarrafa shi daga na'urori ko haɗi daban-daban.

Yadda ake samun damar Chrome DevTools: Gajerun hanyoyi masu sauri da menu na mahallin

Shiga Chrome DevTools abu ne mai matuƙar sauƙi kuma akwai hanyoyi da dama na yin hakan, ya danganta da tsarin aikinka da abubuwan da kake so:

• Danna-dama a shafin da kake son yin nazari a kai. sannan ka zaɓi "Duba". Wannan ita ce hanyar da aka fi gani kuma aka fi amfani da ita.
• Yi amfani da Gajerun hanyoyin keyboard musamman ga tsarin aikinka:
  Windows / Linux: Ctrl + Shift + I
  Mac: Cmd + Zabi + Na
• Haka kuma za ka iya zuwa menu na Chrome (ɗigogi uku a tsaye a gefen dama na sandar adireshin), sannan ka zaɓi Ƙarin kayan aiki > Kayan aikin Mai Haɓakawa.
• Don buɗe takamaiman faifan allo kai tsaye ta amfani da madannai:
  • Faifan Abubuwan (HTML/CSS): Ctrl + Shift + C (Windows/Linux) ko Cmd + Option + C (Mac)
  • Console: Ctrl + Shift + J (Windows/Linux) ko Cmd + Option + J (Mac)
  • An yi amfani da allon ƙarshe: F12 (a yawancin tsarin) ko Ctrl + Shift + I / Cmd + Option + I
• Buɗe DevTools ta atomatik a cikin kowane sabon shafin (yana da matuƙar amfani ga waɗanda ke ɓatar da lokacinsu wajen gyara kurakurai): gudanar da Chrome tare da zaɓi --auto-open-devtools-for-tabs daga layin umarni.

Kar ka manta: lokacin da ka buɗe DevTools, za ka iya yanke shawara ko kana son ka haɗa su zuwa dama, hagu, ƙasan taga, ko ma a cikin taga daban - wani abu mai amfani musamman idan kana aiki da allo da yawa.

Me za ku iya yi da Chrome DevTools? Duba manyan fasalullukansa

An raba Chrome DevTools zuwa bangarori da yawa. Kowannensu ya ƙunshi muhimmin ɓangare na nazarin yanar gizo da ingantawa. Ga faifan da aka fi amfani da su da kuma ayyukan da suka fi dacewa:

Ƙungiyar Abubuwa: Duba kai tsaye da gyara na DOM da CSS

Wannan faifan shine wurin farawa ga yawancin ayyukan gyara kurakurai da nazarin gani. Yana ba ku damar:

• Duba ainihin tsarin DOM (Takaitaccen Tsarin Takardar) cewa mai binciken yana yin abubuwa, wato, abin da Google ke gani a zahiri bayan gudanar da rubutun da salon lodawa.
• Gyara HTML da CSS akan tashi, nan take duba yadda canje-canjen suke a shafin yanar gizon (yana da kyau don yin samfuri ko gwada sabbin ƙa'idodi na salo ba tare da shafar ainihin lambar tushe ba).
• Sarrafa azuzuwa da salo na abubuwan: zaku iya kunna, kashewa ko gwada sabbin azuzuwan da kuma gyara bayanan gani don ƙirar amsawa.
• Duba kuma sarrafa halaye na musamman (kamar data-nosnippet), waɗanda suke da mahimmanci ga SEO, domin za ku iya duba ko Google zai iya nuna wasu abubuwan da ke ciki ko a'a.
• Duba idan akwai abubuwa ko tubalan da za a iya gani ne kawai bayan aikin mai amfani (misali, shafuka ko jerin zaɓuka waɗanda ke buƙatar a nuna JavaScript).
• Samun damar shiga cikin kayan da aka bincika cikin sauri akan na'urar wasan bidiyo kamar $0, yana ba ku damar sarrafa shi kai tsaye ta hanyar JavaScript.

Shawara! Hakanan zaka iya kwaikwayon girman allo da na'urorin hannu daban-daban daga wannan faifan, don tabbatar da cewa gidan yanar gizonku yana da amsawa da gaske.

Cibiyar Sadarwa: Yana nazarin nauyin albarkatu, yana gano jinkirin aiki, kuma yana kwaikwayon haɗin gwiwa mai jinkiri

Ɗaya daga cikin mahimman dashboards don nazarin aiki . A nan za ku iya ganin sa, bisa ga tsari da kuma dalla-dalla:

• Duk albarkatun da aka nema lokacin loda shafin (HTML, hotuna, CSS, JS, bidiyo, fonts, da sauransu.).
• A wane tsari ake sauke su, lokacin lodawa, da girman su, da kuma tsawon lokacin da aka tsara. na kowace hanya: mabuɗin gano matsaloli ko albarkatun da ba dole ba.
• Ta danna kowane albarkatu za ku iya duba Kanun HTTP, manufofin adana bayanai, lokutan amsawa, har ma da ganin ko akwai fayiloli da aka rage.
• Kwaikwayon hanyoyin haɗi masu jinkiri (3G, 4G, da sauransu), don ganin ainihin aikin da ke kan na'urorin masu amfani da ku ba kawai a kan kwamfutarka ba.
• Aiki don Share cache kuma sake cika, yana da amfani don duba ƙwarewar sabon mai amfani.
• Buƙatar toshewa: yana nazarin tasirin rarrabawa da wasu albarkatu (misali, kashe main.css da ganin yadda shafin ya zama ba daidai ba).
• Tacewa mai zurfi: bincika ta nau'in fayil, yankin tushe, maganganu na yau da kullun ko takamaiman halaye, wanda ya dace don duba saukarwa na waje ko sa ido kan tsaro.
• Ɗaukar hotunan kariyar kwamfuta a wurare daban-daban a cikin nauyin shafin, yana ba ku damar ganin abin da ake nunawa ga mai amfani mataki-mataki.

Musamman ga SEO da WPO: bincika abin da ke ɗaukar nauyi da farko da kuma yadda hakan ke shafar aiki da Muhimman Abubuwan Yanar Gizo , fahimtar yadda ake inganta ƙwarewar ga Google da baƙi.

Kwamitin Gudanarwa: Gyara kurakurai, gudanar da rubutun, da kuma samun faɗakarwa a ainihin lokaci

A cikin Console za ku iya duba rajistan ayyukan, kurakuran JavaScript, da kuma faɗakarwar tsaro da gidan yanar gizon ya bayar a ainihin lokacin. Hakanan zaka iya:

• Aiwatar da umarnin JavaScript kai tsaye a shafin buɗewa, ya dace da gwaje-gwaje masu sauri ko sarrafa atomatik.
• Yi mu'amala da abin da aka bincika na ƙarshe ta amfani da canjin $0 (da kuma $1, $2, da sauransu), yana hanzarta gyara kurakurai.
• Danna kan kurakurai ko gargaɗi don zuwa kai tsaye zuwa layin fayil ɗin JS mai laifi.

Tushen Majiyoyi: Duba kuma gyara fayilolin da ba sa canzawa da albarkatun waje

Wannan sashe yana nuna tsarin fayilolin da aka ɗora zuwa gidan yanar gizon : rubutun, salo, hotuna, da sauransu, waɗanda aka tsara ta hanyar domains:

• Gano idan kuna amfani da albarkatun waje, kamar Google Fontskuma yana tunanin karbar bakuncin su a gida domin samun saurin gudu.
• Yana ba ka damar buɗewa, gyarawa, da adana fayilolin tushe don gwaji.
• Yi nazarin ƙananan rubutun, faɗaɗa lambar don samun sauƙin karantawa, da kuma duba abubuwan da suka dogara da su.

Mai rikodin: Yana kwaikwayon tafiyar mai amfani kuma yana auna ainihin ƙwarewarsa

Aikin rikodi yana ba ku damar kwaikwayon ainihin binciken mai amfani da kuma gano takamaiman matsaloli:

• Za ka iya yin rikodin kwararar kewayawa (misali, danna menus, cike fom, motsawa daga shafi ɗaya zuwa wani), duba yadda gidan yanar gizon ke amsawa, da kuma nazarin lokutan lodawa na kowane aiki.
• Ya dace don gano matsaloli a cikin mahimman hanyoyi don juyawa ko UX.

Hasken Haske: Cikakken bincike na aiki, samun dama da mafi kyawun ayyuka

Hasken wuta, wanda aka haɗa shi cikin Chrome DevTools kuma ana samunsa azaman plugin , babban fasali ne:

• Yi duba ta atomatik aiki (WPO), samun dama, mafi kyawun ayyuka, SEO da PWA (aikace-aikacen yanar gizo masu ci gaba).
• Yana bayar da a cikakken ci da kuma shawarwari masu amfani ga kowane sashe, duka ga gidajen yanar gizo da aka riga aka buga da kuma waɗanda ake ci gaba da haɓakawa.
• Yana ba ku damar yin nazarin gidan yanar gizon a yanayin tebur da wayar hannu, wanda hakan ke sa ya zama da amfani sosai wajen gano matsalolin da suka shafi wayar hannu.

Aikace-aikace masu amfani: Yadda ake amfani da DevTools don WPO da SEO

Chrome DevTools kayan aiki ne na asali don inganta gidan yanar gizo a kowane mataki: daga ƙirar farko zuwa nazarin buƙatun talla da kuma duba SEO a shafi. Wasu mahimman amfani sun haɗa da:

Inganta Aiki (WPO)

• Yana gano hotuna da manyan fayiloli daga shafin Network kuma fifita ingantawa (matsawa, sabbin tsare-tsare, nauyin lazy).
• Kimanta nauyin albarkatun wajeIdan lokutan sun yi tsawo, yi la'akari da sauke su daga sabar ku.
• Sake tsara fifikon lodawa domin a fara bayar da muhimman abubuwa (Hanyar Hankali).
• Kashe cache daga cibiyar sadarwa panel Lokacin da kake nazarin canje-canje, tabbatar cewa ba a adana bayanan a cikin gida ba.
• Yi amfani da na'urar kwaikwayo ta haɗin gwiwa mai jinkirin jinkiri don gwada ƙwarewar mai amfani da wayar hannu.

Rage albarkatu (CSS da JavaScript)

• A cikin shafin Fonts, nemo manyan fayiloli, waɗanda ba a rage su ba, ko kuma waɗanda aka kwafi.
• Haɗa CSS da JS da kuma rage su don rage buƙatun da kuma inganta lokutan ɗaukar kaya.

Binciken tsarin, samun dama da SEO

• Yi bitar tsarin kanun labarai, sifofi, da ma'anar HTML: tabbatar da cewa tsarin ma'ana (h2, h3, alamun ALT, matsayi) ya fi dacewa da Google.
• Duba tare da Lighthouse kasancewar lakabi da bayanai masu mahimmanci don SEO, samun dama, da PWA.
• Yi nazarin tasirin JavaScript akan zane kuma ka tuna cewa Google bazai iya fassara abin da ya dogara da hulɗar mai amfani ba idan ba a gani ba lokacin lodawa.
• Yana sa ido kan amfani da kukis, ajiyar gida, da sauran albarkatun mai bincike.

Cire da sarrafa abubuwan da ke ciki don gogewa ko fitarwa

• Za ka iya amfani da "Kwafi abu" don fitar da manyan tebura ko jerin bayanai kai tsaye zuwa maƙunsar bayanai ko masu gyara lambar.
• Yi amfani da na'urar wasan bidiyo da Yanayin Zane don gyara abubuwan da ke kan allo yadda ya kamata, shirya kamawa, ko fitar da bayanai masu dacewa.

Gyara da gyara kurakurai a ainihin lokaci

• Ɓoye tutocin talla ko abubuwan da ke ɓata rai kai tsaye ta hanyar amfani da su nuni: babu ta hanyar mai duba.
• Yi amfani da JavaScript daga na'urar wasan bidiyo don aiwatar da umarni akan abubuwan da aka zaɓa ko ma canza yanayin gyara shafi da kunnawa.

Iyakokin Chrome DevTools akan na'urorin hannu

Duk da cewa "Duba Element" da duk Chrome DevTools suna samuwa koyaushe akan nau'ikan tebur, DevTools ba za a iya samun su kai tsaye akan wayoyin komai da ruwanka da kwamfutar hannu ba . Akwai dalilai guda biyu na wannan: hanyar sadarwa ba za ta yi aiki ba akan ƙananan allo, kuma daidaiton linzamin kwamfuta ya lalace. Abin farin ciki, zaku iya kwaikwayon ƙwarewar wayar hannu daga tebur ɗinku ko ma haɗa na'urar zahiri zuwa kwamfutarka don gyara shafuka a ainihin lokaci, wanda yake da mahimmanci musamman ga masu haɓaka manhajojin wayar hannu. A kan Mac tare da iOS, kuna buƙatar kunna zaɓin da ya dace a cikin "Saituna > Na Ci gaba" kuma ku yi amfani da asusun iCloud iri ɗaya akan na'urori biyu.

Manyan hanyoyin amfani: daga gyara kurakurai zuwa ɗaukar hotunan kariyar kwamfuta

Baya ga amfani na yau da kullun a cikin haɓaka da nazarin SEO, Chrome DevTools yana ba da fasaloli masu amfani masu amfani:

• Yana toshe loda takamaiman fayiloli (misali: main.css) don kwaikwayon yanayin gazawar hanyar sadarwa kuma duba yadda gidan yanar gizon yake aiki idan akwai gazawa.
• Yi amfani da aikin ɗaukar hoto a cikin sashin sadarwa don ganin tsarin aiwatar da zane mataki-mataki kuma don haka fahimtar yadda da lokacin da wasu mahimman abubuwa suka bayyana.
• Nemi takamaiman kanun labarai na HTTP ko amsoshi (misali, don gano waɗanne albarkatu ne ke amfani da mafi kyawun manufofin caching) ta amfani da aikin bincike na duniya.
• Tace buƙatun ta hanyar nau'i, yanki, ko tsari don yin nazarin zirga-zirgar waje ko mahimman albarkatu dalla-dalla.
• Ƙirƙiri samfura masu sauri na canje-canjen HTML da CSS kuma raba su tare da ƙungiyar ku cikin sauƙi, ba tare da buƙatar canza fayilolin tushen asali ba.

Chrome DevTools ya zama wukar sojojin Switzerland ta haɓaka yanar gizo da nazari, yana aiki daidai gwargwado ga ayyukan mutum ko manyan dandamali da ayyukan ƙwararru. Daga bincika cikakkun bayanai na ƙira zuwa cikakken binciken duk albarkatun gidan yanar gizon ku, gami da WPO, SEO, da ayyukan samun dama, haɗakar sa da kayan aiki kamar Lighthouse ya sa ya zama muhimmin hanya don inganta shafukan ku ba kawai ga Google ba har ma ga masu amfani da ku.