Chrome DevTools: Tilmaame Dhammaystiran oo ku saabsan Ka Faa'iidaysiga Ugu Badan ee Qalabka Horumariyaha

Chrome DevTools waxay noqotay saaxiib lama huraan u ah horumariyaha shabakadda, naqshadeeyaha, ama khabiirka SEO ee raadinaya inuu hagaajiyo waxqabadka shabakadda, marin u helka, iyo darajada matoorka raadinta. Qalabkan, oo lagu daray Google Chrome, waxay bixiyaan aragtiyo qoto dheer iyo xakameyn ku saabsan shaqeynta mareegaha, taasoo u oggolaanaysa wax walba laga bilaabo kormeerka HTML iyo CSS ilaa falanqaynta dhaqdhaqaaqa shabakadda oo dhammaystiran, tijaabinta waxqabadka, iyo hagaajinta moobaylka.

Ma jeclaan lahayd inaad barato Chrome DevTools oo aad ka faa'iidaysato dhammaan astaamihiisa si aad u saxdo, u hagaajiso, oo aad u ogaato dhibaatooyinka degel kasta? Maqaalkan, waxaan si cad u sharxi doonaa, iyadoo la adeegsanayo tusaalooyin iyo talooyin, wax kasta oo aad u baahan tahay inaad ogaato si aad u bilowdo inaad ka faa'iidaysato qalabkan, oo ay ku jiraan sida ugu dhakhsaha badan loo furo, waxa aad ku falanqeyn karto guddi kasta, waxa shaqo kastaa u tahay, iyo sida loogu dabaqo labadaba horumarinta iyo SEO.

Waa maxay Chrome DevTools maxayse u awood badan yihiin?

Qalabka horumarinta Chrome DevTools waa guddi ku dhex jira Google Chrome oo loogu talagalay inuu u oggolaado isticmaale kasta inuu falanqeeyo, saxo, oo uu hagaajiyo koodhka iyo waxqabadka degel kasta isagoon rakibin plugins dheeraad ah . Iyada oo loo marayo tabs iyo astaamo badan, waxaad baari kartaa walxaha, wax ka beddeli kartaa qaababka waqtiga dhabta ah, la socon kartaa dhaqdhaqaaqa shabakadda, khaladka qoraallada, qiimeyn kartaa waxqabadka, iyo xitaa ku dayan kartaa dhaqanka degelka ee aaladaha moobaylka . Baaxadda ay leedahay waxay aad uga fog tahay "daawashada koodhka isha": waxay kuu ogolaaneysaa inaad la kulanto sida degelku u falgalo, sida Google u fasirto, iyo sida isticmaaluhu uga dhex maro aalado ama xiriiro kala duwan.

Sida loo galo Chrome DevTools: Gaabinno degdeg ah iyo liiska macnaha guud

Helitaanka Chrome DevTools waa mid aad u fudud waxaana jira dhowr siyaabood oo loo sameeyo, iyadoo ku xiran nidaamkaaga hawlgalka iyo doorbidyadaada:

• Midig-guji bogga aad rabto inaad falanqeyso. oo dooro "Baar". Kani waa habka ugu muuqaalka badan uguna badan ee la isticmaalo.
• Isticmaal furayaasha keyboard-ka gaar u ah nidaamkaaga hawlgalka:
  Windows / Linux: Ctrl + Shift + I
  Mac: Cmd + Xulashada + I
• Waxaad sidoo kale aadi kartaa liiska Chrome (saddexda dhibcood ee toosan ee ku yaal dhinaca midig ee barta cinwaanka), oo dooro Qalabyo badan > Qalabka Horumariyaha.
• Si aad si toos ah u furto guddiyo gaar ah adigoo isticmaalaya kiiboodhka:
  • Guddiyada Qaybaha (HTML/CSS): Ctrl + Shift + C (Windows/Linux) ama Cmd + Option + C (Mac)
  • Console: Ctrl + Shift + J (Windows/Linux) ama Cmd + Option + J (Mac)
  • Guddigii ugu dambeeyay ee la isticmaalay: F12 (inta badan nidaamyada) ama Ctrl + Shift + I / Cmd + Option + I
• Si toos ah ugu fur DevTools tab kasta oo cusub (aad bay u faa'iido badan tahay kuwa waqtigooda ku bixiya khaladaadka): Ku socodsii Chrome ikhtiyaarka --auto-open-devtools-for-tabs ka soo baxa khadka taliska.

Ha ilaawin: marka aad furto DevTools, waxaad go'aansan kartaa inaad rabto inaad ku dhejiso midigta, bidixda, hoosta daaqadda, ama xitaa daaqad gooni ah - wax si gaar ah waxtar u leh haddii aad la shaqeyso shaashado badan.

Maxaad ku samayn kartaa Chrome DevTools? Fiiri sifooyinka ugu muhiimsan

Chrome DevTools wuxuu u qaybsan yahay guddiyo badan. Mid walba wuxuu daboolayaa dhinac muhiim ah oo ku saabsan falanqaynta iyo hagaajinta shabakadda. Waa kuwan guddiyada ugu badan ee la isticmaalo iyo shaqooyinkooda ugu habboon:

Guddiyada Elements: Kormeerka tooska ah iyo tafatirka DOM iyo CSS

Guddidani waa meesha ugu horreysa ee hawlaha ugu badan ee lagu saxayo khaladaadka iyo falanqaynta muuqaalka. Waxay kuu ogolaanaysaa inaad:

• Kormeer qaab-dhismeedka saxda ah ee DOM (Qaabka Shayga Dukumentiga) in biraawsarka uu sameynayo, taas oo ah, waxa Google dhab ahaantii arko ka dib marka uu socodsiiyo qoraallada iyo qaababka rarista.
• Wax ka beddel HTML iyo CSS duulimaadka, isla markiiba hubi sida isbeddellada u egyihiin bogga internetka (waa ku fiican tahay tijaabinta ama tijaabinta xeerarka qaabka cusub iyada oo aan saameyn ku yeelanayn koodhka asalka ah ee dhabta ah).
• Maaree fasallada iyo qaababka qaybaha: waxaad dhaqaajin kartaa, joojin kartaa ama tijaabin kartaa fasallo cusub oo aad wax ka beddeli kartaa faahfaahinta muuqaalka si aad u hesho naqshad jawaab celin leh.
• Arag oo maamul sifooyinka gaarka ah (sida data-nosnippet), kuwaas oo aasaas u ah SEO, maadaama aad hubin karto in Google uu awood u yeelan doono inuu tilmaamo waxyaabo gaar ah iyo in kale.
• Hubi haddii ay jiraan walxo ama baloogyo la arki karo oo keliya ka dib ficil isticmaale (tusaale ahaan, tabs ama hoos u dhacyo u baahan in JavaScript la soo bandhigo).
• Helitaanka degdega ah ee shayga la baaray ee ku yaal qalabka loo yaqaan 'console' sida $0, kuu oggolaanaya inaad si toos ah u maamusho JavaScript.

Talo! Waxa kale oo aad ku dayan kartaa cabbirro kala duwan oo shaashado ah iyo aaladaha moobaylka ah oo ka socda guddigan, adigoo hubinaya in mareegtaadu ay runtii jawaab celin leedahay.

Guddi Shabakad: Wuxuu falanqeeyaa culayska kheyraadka, wuxuu ogaadaa dib u dhaca, wuxuuna ku dayayaa isku xirnaanta gaabiska ah

Mid ka mid ah dashboard-yada lagama maarmaanka u ah falanqaynta waxqabadka . Halkan waxaad ku arki kartaa, si taariikhaysan iyo si faahfaahsan:

• Dhammaan agabyada la codsaday markii la raray bogga (HTML, sawirro, CSS, JS, fiidiyowyo, farriimo, iwm.).
• Sidee loo soo dejiyaa, waqtiga rarista, iyo cabbirka kheyraad kasta: furaha lagu aqoonsanayo caqabadaha ama kheyraadka aan loo baahnayn.
• Adigoo gujinaya kheyraad kasta waxaad hubin kartaa Cinwaanada HTTP, siyaasadaha kaydinta, waqtiyada jawaabta, iyo xitaa in la arko haddii ay jiraan faylal la yareeyay.
• Jilidda isku xirka gaabiska ah (3G, 4G, iwm.), si aad u aragto waxqabadka dhabta ah ee qalabka isticmaalayaashaada oo aan ahayn oo keliya kumbuyuutarkaaga.
• Waxqabadka loogu talagalay Nadiifi kaydka oo dib u soo celi, oo waxtar u leh hubinta khibradda isticmaale cusub.
• Codsiga xannibaadda: wuxuu falanqeeyaa saameynta ka dhalan karta bixinta kheyraadka qaarkood (tusaale ahaan, joojinta main.css iyo aragtida sida bogga uu u noqdo mid aan habboonayn).
• Shaandhaynta Sare: raadinta nooca faylka, domainka isha, tibaaxaha caadiga ah ama sifooyinka gaarka ah, oo ku habboon hubinta soo dejinta dibadda ama la socodka amniga.
• Qaadista shaashadaha meelo kala duwan oo bogga ku jira, taasoo kuu oggolaanaysa inaad aragto waxa loo tusayo isticmaalaha tallaabo tallaabo.

Gaar ahaan SEO iyo WPO: marka hore falanqee waxa soo kordha iyo sida ay taasi u saamayso waxqabadka iyo Muhiimadaha Shabakadda , fahamka sida loo wanaajiyo waayo-aragnimada Google iyo booqdayaashaada.

Guddiga Konsole-ka: Ka saar khaladaadka, socodsii qoraallada, oo hel digniinaha waqtiga-dhabta ah

Gudaha Console-ka waxaad ka arki kartaa diiwaanka, khaladaadka JavaScript, iyo digniinaha amniga ee uu website-ku soo saaro waqtiga dhabta ah. Waxa kale oo aad samayn kartaa:

• Si toos ah u fuli amarrada JavaScript bogga furan, oo ku habboon tijaabooyinka degdega ah ama otomaatigyada.
• La falgal curiyaha ugu dambeeya ee la kormeeray adoo isticmaalaya doorsoomaha $0 (iyo $1, $2, iwm.), dardargelinta khaladaadka horumarsan.
• Guji khaladaadka ama digniinaha si aad si toos ah ugu tagto xariiqda faylka JS ee xadgudubka ah.

Guddiga Ilaha: Arag oo sax faylasha taagan iyo ilaha dibadda

Qaybtani waxay soo bandhigaysaa qaab-dhismeedka faylasha lagu soo galiyay mareegaha : qoraallada, qaababka, sawirrada, iwm., oo ay abaabuleen domains:

• Soo ogow haddii aad isticmaasho ilo dibadeed, sida Google Fontswaxayna ka fiirsaneysaa inay maxalli ahaan martigeliso si ay u hesho xawaare.
• Waxay kuu ogolaaneysaa inaad furto, wax ka beddesho, oo aad keydiso faylasha isha si aad u tijaabiso.
• Falanqee qoraallada yar yar, ballaari koodka si aad u hesho akhris wanaagsan, oo hubi ku-tiirsanaanta qarsoon.

Diiwaan-geliye: Waxay jilaysaa safarka isticmaalaha waxayna cabbirtaa waayo-aragnimadooda dhabta ah

Shaqada duubista waxay kuu ogolaaneysaa inaad ku dayato daalacashada dhabta ah ee isticmaalaha oo aad aqoonsato dhibaatooyinka gaarka ah:

• Waxaad duubi kartaa socodka socodka (tusaale ahaan, gujinta liiska cuntada, buuxinta foomamka, u guurista hal bog ilaa mid kale), hubi sida degelku uga jawaabayo, oo falanqee waqtiyada rarista ficil kasta.
• Ku habboon in lagu ogaado cilladaha waddooyinka muhiimka ah ee loogu talagalay beddelka ama UX.

Lighthouse: Baaritaan dhammaystiran oo ku saabsan waxqabadka, helitaanka iyo dhaqamada ugu wanaagsan

Lighthouse, oo lagu daray Chrome DevTools isla markaana laga heli karo plugin ahaan , waa astaamo caan ah:

• Samee hubinta otomaatiga ah waxqabadka (WPO), marin u helidda, dhaqamada ugu wanaagsan, SEO iyo PWA (barnaamijyada shabakadda ee horumarsan).
• Waxay bixisaa a dhibcaha guud iyo talooyin wax ku ool ah oo loogu talagalay qayb kasta, labadaba mareegaha hore loo daabacay iyo kuwa la horumarinayo.
• Waxay kuu ogolaaneysaa inaad ku falanqeyso mareegaha qaabka desktop-ka iyo moobaylka, taasoo ka dhigaysa mid aad waxtar u leh aqoonsashada dhibaatooyinka saaxiibtinimo ee moobaylka.

Codsiyada wax ku oolka ah: Sida loo isticmaalo DevTools ee WPO iyo SEO

Chrome DevTools waa qalab aasaasi ah oo loogu talagalay hagaajinta mareegaha heerarka oo dhan: laga bilaabo naqshadeynta bilowga ah ilaa falanqaynta codsiga xayeysiinta iyo hubinta SEO ee bogga. Qaar ka mid ah isticmaalka muhiimka ah waxaa ka mid ah:

Hagaajinta Waxqabadka (WPO)

• Wuxuu aqoonsadaa sawirrada iyo faylasha waaweyn laga bilaabo tabka Shabakadda oo mudnaanta sii hagajinta (cadaadis, qaabab cusub, culays caajis ah).
• Qiimee culayska kheyraadka dibaddaHaddii waqtiyada soo dejintu ay dheer yihiin, tixgeli inaad ka soo dejiso server-kaaga.
• Dib u dalbo mudnaanta rarista si alaabta muhiimka ah marka hore loogu adeego (Dariiqa Halis ah).
• Ka dami kaydka guddiga shabakadda Markaad falanqaynayso isbeddellada, hubi in macluumaadka aan lagu kaydin meel gaar ah.
• Isticmaal qalabka isku xidhka gaabiska ah si aad u tijaabiso khibradda isticmaalaha moobaylka.

Yaraynta kheyraadka (CSS iyo JavaScript)

• Qaybta Farta, wuxuu helaa faylal aad u weyn, aan la yareyn, ama nuqul ah.
• Midee oo yaree CSS iyo JS si loo yareeyo codsiyada loona hagaajiyo waqtiyada rarista.

Falanqaynta qaab-dhismeedka, helitaanka iyo SEO

• Dib u eeg qaab-dhismeedka cinwaanada, sifooyinka, iyo macnaha HTML: hubi in qaab-dhismeedka macquulka ah (h2, h3, calaamadaha ALT, doorarka) ay ugu habboon yihiin Google.
• Kala xiriir Lighthouse joogitaanka calaamadaha iyo xogta lagama maarmaanka ah SEO, marin u helidda, iyo PWA.
• Falanqee saameynta JavaScript ku leedahay wax soo saarka oo maskaxda ku hay in Google aysan fasiran karin waxa ku xiran isdhexgalka isticmaalaha haddii aysan muuqan marka la soo dejinayo.
• Waxay la socotaa isticmaalka cookies-ka, kaydinta maxalliga ah, iyo agabyada kale ee biraawsarka.

Soo saarista iyo wax ka beddelka macluumaadka si loo xoqo ama loo dhoofiyo

• Waxaad isticmaali kartaa "Nuqul ka kooban" si aad si toos ah ugu dhoofiso jadwallo waaweyn ama liisas xaashiyo ama tifaftirayaal kood.
• Adeegso qalabka loo yaqaan 'console' iyo 'Naqshadda Habka' si aad si hufan wax uga beddesho waxyaabaha ku jira shaashadda, u diyaariso qabashada, ama u dhoofiso macluumaadka khuseeya.

Habaynta iyo khalad-samaynta waqtiga-dhabta ah

• Qari xayeysiisyada ama walxaha dhibsada si toos ah adigoo codsanaya bandhig: midna iyada oo loo marayo kormeeraha.
• Adeegso JavaScript-ka konsole-ka si aad u fuliso amarrada walxaha la xushay ama xitaa u beddesho qaabka tafatirka bogga oo shid oo dami.

Xaddidaadaha Chrome DevTools ee aaladaha moobaylka

In kasta oo "Inspect Element" iyo dhammaan Chrome DevTools ay had iyo jeer laga heli karo noocyada desktop-ka, DevTools si toos ah looguma heli karo taleefannada casriga ah iyo kiniiniyada . Waxaa jira laba sababood oo tan loo sameeyay: is-dhexgalka ayaa noqon doona mid aan macquul ahayn shaashadaha yaryar, saxnaanta jiirkana waa la waxyeelleeyay. Nasiib wanaag, waxaad ku dayan kartaa waayo-aragnimada moobaylka ee desktop-kaaga ama xitaa waxaad ku xidhi kartaa qalab jireed kombiyuutarkaaga si aad u saxdo goobaha waqtiga dhabta ah, taas oo si gaar ah qiimo ugu leh horumariyayaasha abka moobaylka. Mac oo leh iOS, waxaad u baahan doontaa inaad awood u siiso ikhtiyaarka u dhigma ee ku jira "Settings > Advanced" oo aad isticmaasho isla akoonka iCloud ee labada qalab.

Kiisaska isticmaalka sare: laga bilaabo khaladaadka ilaa qaadashada shaashadda

Marka lagu daro isticmaalka caadiga ah ee horumarinta iyo falanqaynta SEO, Chrome DevTools waxay bixisaa astaamo horumarsan oo aad waxtar u leh:

• Waxay xannibtaa rarista faylasha gaarka ah (tusaale: main.css) si ay u matasho xaaladaha guuldarada shabakada oo hubi sida website-ku u dhaqmo haddii ay dhacdo cillado.
• Adeegso shaqada shaashadda ee ku jirta guddiga shabakadda si aad u aragto habka wax soo saarka tallaabo tallaabo ah sidaas darteedna si fiican u fahan sida iyo goorta ay soo baxaan walxaha muhiimka ah.
• Raadi cinwaanada HTTP gaar ah ama jawaabaha (tusaale ahaan, si aad u ogaato ilaha isticmaala siyaasadaha kaydinta ugu fiican) adoo isticmaalaya shaqada raadinta caalamiga ah.
• Sifee codsiyada nooc, domain, ama qaab si aad si faahfaahsan u falanqayso taraafikada dibadda ama ilaha muhiimka ah.
• Samee noocyo degdeg ah oo isbeddello HTML iyo CSS ah oo si fudud ula wadaag kooxdaada, iyada oo aan loo baahnayn inaad beddesho faylasha asalka ah ee asalka ah.

Chrome DevTools waxay noqotay mindidii Ciidanka Swiss ee horumarinta shabakadda iyo falanqaynta, iyadoo si siman ugu shaqeysa mashaariicda shaqsiga ah ama goobaha waaweyn iyo mashaariicda xirfadeed. Laga bilaabo si dhakhso ah u eegista faahfaahinta naqshadeynta ilaa si buuxda u hubinta dhammaan agabka boggaaga internetka, oo ay ku jiraan WPO, SEO, iyo hawlaha marin u helidda, is-dhexgalka aaladaha sida Lighthouse wuxuu ka dhigayaa ilo muhiim ah oo lagu hagaajinayo boggagaaga ma aha oo kaliya Google laakiin sidoo kale isticmaalayaashaada.