I-Chrome DevTools: Isikhokelo Esipheleleyo Sokufumana Uninzi Kwizixhobo Zomphuhlisi

I-Chrome DevTools ibe liqabane elibalulekileyo kuye nawuphi na umphuhlisi wewebhu, umyili, okanye ingcali ye-SEO ejonge ukuphucula ukusebenza kwewebhusayithi, ukufikeleleka, kunye nokubekwa kwinqanaba leenjini zokukhangela. Ezi zixhobo, ezidityaniswe kwiGoogle Chrome, zibonelela ngolwazi olunzulu kunye nolawulo lokusebenza kwewebhusayithi, zivumela yonke into ukusuka ekuhlolweni kwe-HTML kunye ne-CSS ukuya kuhlalutyo olupheleleyo lomsebenzi wenethiwekhi, uvavanyo lokusebenza, kunye nokwenza ngcono iselfowuni.

Ngaba ungathanda ukufunda kakuhle iChrome DevTools kwaye usebenzise zonke iimpawu zayo ukulungisa iingxaki, ukuphucula, kunye nokuxilonga iingxaki nakweyiphi na iwebhusayithi? Kweli nqaku, siza kuchaza ngokucacileyo, ngemizekelo kunye neengcebiso, yonke into ekufuneka uyazi ukuze uqale ukufumana okuninzi kwezi zixhobo, kubandakanya indlela yokuzivula ngokukhawuleza, into onokuyihlalutya ngephaneli nganye, yintoni umsebenzi ngamnye, kunye nendlela yokuzisebenzisa kuphuhliso nakwi-SEO.

Zithini iiChrome DevTools kwaye kutheni zinamandla kangaka?

I -Chrome DevTools suite yezixhobo zomphuhlisi yiphaneli eyakhelwe ngaphakathi kwiGoogle Chrome eyenzelwe ukuvumela nawuphi na umsebenzisi ukuba ahlalutye, alungise iimpazamo, kwaye aphucule ikhowudi kunye nokusebenza kwayo nayiphi na iwebhusayithi ngaphandle kokufaka ii-plugins ezongezelelweyo . Ngeethebhu kunye neempawu zayo ezininzi, ungahlola izinto, utshintshe izitayile ngexesha langempela, ulandelele umsebenzi wenethiwekhi, ulungise iimpazamo kwizikripthi, uvavanye ukusebenza, kwaye ulinganise nokuziphatha kwewebhusayithi kwizixhobo eziphathwayo . Ububanzi bayo budlula nje "ukujonga ikhowudi yomthombo": ikuvumela ukuba ube namava ngendlela iwebhusayithi esebenzisana ngayo, indlela iGoogle eyitolika ngayo, kunye nendlela umsebenzisi ayihambisa ngayo kwizixhobo ezahlukeneyo okanye uqhagamshelo.

Indlela yokufikelela kwiChrome DevTools: Iindlela ezimfutshane ezikhawulezayo kunye nemenyu yomxholo

Ukufikelela kwiChrome DevTools kulula kakhulu kwaye kukho iindlela ezininzi zokwenza oko, kuxhomekeke kwinkqubo yakho yokusebenza kunye nezinto ozikhethayo:

• Cofa ekunene kwiphepha ofuna ukulihlalutya. uze ukhethe u-“Hlola”. Le yeyona ndlela ibonakalayo nesetyenziswa kakhulu.
• Sebenzisa i iindlela ezimfutshane zokucofa ngokukodwa kwinkqubo yakho yokusebenza:
  Windows / iLinux: I-Ctrl + Shift + I
  IMac: Cmd + Option + Mna
• Ungaya nakwimenyu yeChrome (amachaphaza amathathu athe nkqo ngasekunene kwebha yedilesi), uze ukhethe Izixhobo ezingaphezulu > Izixhobo zomphuhlisi.
• Ukuvula iiphaneli ezithile ngqo usebenzisa ikhibhodi:
  • Iphaneli yeeElements (HTML/CSS): I-Ctrl + Shift + C (Windows/Linux) okanye iCmd + Option + C (Mac)
  • Ikhonsoli: I-Ctrl + iShift + i-J (Windows/Linux) okanye iCmd + Option + J (Mac)
  • Iphaneli yokugqibela esetyenzisiweyo: F12 (kwiinkqubo ezininzi) okanye Ctrl + Shift + I / Cmd + Option + I
• Vula iDevTools ngokuzenzekelayo kuyo yonke ithebhu entsha (iluncedo kakhulu kwabo bachitha ixesha labo belungisa iimpazamo): sebenzisa iChrome ngokhetho --auto-open-devtools-for-tabs ukusuka kumgca wokuyalela.

Ungalibali: xa uvula iiDevTools, ungathatha isigqibo sokuba ufuna ukuzincamathisela ngasekunene, ngasekhohlo, ezantsi kwefestile, okanye nakwifestile eyahlukileyo—into eluncedo ngakumbi ukuba usebenza nezikrini ezininzi.

Yintoni onokuyenza ngeChrome DevTools? Ukujonga iimpawu zayo eziphambili

I-Chrome DevTools yahlulwe yaba ziiphaneli ezininzi. Nganye igubungela inkalo ebalulekileyo yohlalutyo lwewebhu kunye nokwenza ngcono. Nazi iiphaneli ezisetyenziswa kakhulu kunye nemisebenzi yazo efanelekileyo:

Iphaneli yeeElements: Ukuhlolwa okubukhoma kunye nokuhlela i-DOM kunye ne-CSS

Le phaneli yindawo yokuqala kwimisebenzi emininzi yokulungisa iimpazamo kunye nohlalutyo olubonakalayo. Ikuvumela ukuba:

• Hlola ulwakhiwo oluchanekileyo lwe-DOM (iModeli yeNto yoxwebhu) ukuba isikhangeli senza ntoni, oko kukuthi, oko uGoogle akubonayo emva kokusebenzisa izikripthi kunye neendlela zokulayisha.
• Guqula i-HTML kunye ne-CSS ngokukhawuleza, ukujonga ngoko nangoko indlela ezibonakala ngayo ezi nguqu kwiwebhusayithi (ilungele ukwenza iiprototyping okanye ukuvavanya imithetho emitsha yesitayile ngaphandle kokuchaphazela ikhowudi yomthombo yokwenyani).
• Lawula iiklasi kunye neendlela izinto: ungazivula, uzicime okanye uvavanye iiklasi ezintsha kwaye uhlele iinkcukacha ezibonakalayo ukuze uyilo oluphendulayo lusebenze.
• Jonga kwaye ulawule iimpawu ezikhethekileyo (ezifana ne-data-nosnippet), ezisisiseko kwi-SEO, njengoko unokujonga ukuba iGoogle iya kukwazi na ukukhomba umxholo othile okanye hayi.
• Jonga ukuba kukho izinto okanye iibhloko ezibonakalayo kuphela emva kwesenzo somsebenzisi (umzekelo, iithebhu okanye iidropdowns ezifuna ukuba iJavaScript iboniswe).
• Ukufikelela ngokukhawuleza kwinto ehlolwe kwikhonsoli njenge-$0, ikuvumela ukuba uyiguqule ngokuthe ngqo ngeJavaScript.

Icebiso! Ungalinganisa ubungakanani besikrini kunye nezixhobo zeselfowuni ezahlukeneyo kule paneli, uqinisekise ukuba iwebhusayithi yakho iyaphendula ngokwenene.

Iphaneli yeNethiwekhi: Ihlalutya umthwalo wezixhobo, ichonge ukubambezeleka, kwaye ilinganise unxibelelwano olucothayo

Enye yeedeshibhodi ezibalulekileyo zohlalutyo lokusebenza . Apha ungayibona, ngokwexesha nangokwaneenkcukacha:

• Zonke izixhobo eziceliweyo xa kulayishwa iphepha (I-HTML, imifanekiso, i-CSS, i-JS, iividiyo, iifonti, njl.).
• Zikhutshelwa ngolandelelwano olunjani, ixesha lokulayisha, kunye nobungakanani yesixhobo ngasinye: isitshixo sokuchonga imiqobo okanye izixhobo ezingafunekiyo.
• Ngokucofa kwisixhobo ngasinye ungajonga Ii-headers ze-HTTP, imigaqo-nkqubo yokugcinwa kwe-caching, amaxesha okuphendula, kwaye ubone nokuba kukho iifayile ezincitshisiweyo.
• Ukulinganisa uqhagamshelo olucothayo (3G, 4G, njl.njl.), ukuze ubone ukusebenza kokwenyani kwizixhobo zabasebenzisi bakho kungekuphela nje kwikhompyutha yakho.
• Umsebenzi we Cima i-cache uze ulayishe kwakhona, iluncedo ekujongeni amava omsebenzisi omtsha.
• Ukuvimba isicelo: kuhlalutya impembelelo yokusasaza izixhobo ezithile (umzekelo, ukukhubaza i-main.css kunye nokubona indlela iphepha eliyilungiswa ngayo gwenxa).
• Ukucoca okuphucukileyo: ukukhangela ngohlobo lwefayile, idomeyini yomthombo, iintetho eziqhelekileyo okanye iimpawu ezithile, ezifanelekileyo ekuhloleni ukhuphelo lwangaphandle okanye ukujonga ukhuseleko.
• Ukuthatha imifanekiso yesikrini kwiindawo ezahlukeneyo ekulayisheni iphepha, okukuvumela ukuba ubone oko kuboniswa umsebenzisi inyathelo ngenyathelo.

Ngokukodwa kwi-SEO nakwi-WPO: hlalutya ukuba zeziphi izinto ezilayisha kuqala kwaye oko kuchaphazela njani ukusebenza kunye ne -Web Vitals , ukuqonda indlela yokuphucula amava kaGoogle kunye neendwendwe zakho.

Iphaneli yeKhonsoli: Lungisa iimpazamo, sebenzisa izikripthi, kwaye ufumane izilumkiso zexesha langempela

KwiConsole ungajonga iilog, iimpazamo zeJavaScript, kunye nezilumkiso zokhuseleko ezikhutshwa yiwebhusayithi ngexesha langempela. Ungaphinda:

• Yenza imiyalelo yeJavaScript ngokuthe ngqo kwiphepha elivulekileyo, elifanelekileyo kwiimvavanyo ezikhawulezayo okanye ii-automation.
• Nxibelelana nento yokugqibela ehlolweyo usebenzisa i-variable $0 (kunye ne-$1, $2, njl. njl.), ukukhawulezisa ukulungisa iimpazamo eziphambili.
• Cofa kwiimpazamo okanye izilumkiso ukuze uye ngqo kumgca wefayile yeJS ekhubekisayo.

Iphaneli yeMithombo: Jonga kwaye ulungise iifayile ezizinzileyo kunye nezixhobo zangaphandle

Eli candelo libonisa ulwakhiwo lweefayile ezifakwe kwiwebhusayithi : izikripthi, iindlela, imifanekiso, njl.njl., ezicwangciswe ngokweedomeyini:

• Fumana ukuba usebenzisa izixhobo zangaphandle, ezifana neeFonti zikaGooglekwaye ucinga ngokuzigcina kwindawo yazo ukuze zikhawuleze.
• Ikuvumela ukuba uvule, uhlele, kwaye ugcine iifayile zomthombo ukuze zivavanywe.
• Hlalutya izikripthi ezincitshisiweyo, wandise ikhowudi ukuze ifundeke ngcono, kwaye ujonge ukuxhomekeka okufihliweyo.

Irekhoda: Ilinganisa uhambo lomsebenzisi kwaye ilinganise amava akhe okwenyani

Umsebenzi wokurekhoda ukuvumela ukuba ulinganise ukukhangela komsebenzisi kwaye uchonge iingxaki ezithile:

• Ungarekhoda umsinga wokuhambahamba (umz., ukucofa kwiimenyu, ukuzalisa iifomu, ukusuka kwelinye iphepha ukuya kwelinye), jonga indlela iwebhusayithi ephendula ngayo, kwaye uhlalutye amaxesha okulayisha esenzo ngasinye.
• Ilungele ukufumanisa iingxaki kwiindlela ezibalulekileyo zokuguqulwa okanye i-UX.

I-Lighthouse: Uhlolo olupheleleyo lokusebenza, ukufikeleleka kunye neendlela ezilungileyo zokusebenza

I-Lighthouse, edityaniswe kwi-Chrome DevTools kwaye ikwafumaneka njenge- plugin , luphawu olubalaseleyo:

• Yenza uphicotho oluzenzekelayo ukusebenza (WPO), ukufikeleleka, iindlela ezilungileyo, i-SEO kunye ne-PWA (ii-web applications eziqhubekekayo).
• Ukubonelela nge- amanqaku ngokubanzi kunye neengcebiso ezisebenzisekayo kwicandelo ngalinye, zombini iiwebhusayithi esele zipapashiwe kunye nezo ziphuhliswayo.
• Ikuvumela ukuba uhlalutye iwebhusayithi kwi-desktop nakwimowudi yeselula, nto leyo eyenza ibe luncedo kakhulu ekuchongeni iingxaki zobuhlobo kwifowuni.

Izicelo ezisebenzayo: Indlela yokusebenzisa iDevTools kwi-WPO kunye ne-SEO

IiChrome DevTools zizixhobo ezisisiseko zokwenza iwebhusayithi ibe ngcono kuwo onke amanqanaba: ukusuka kuyilo lokuqala ukuya kuhlalutyo lwesicelo sentengiso kunye nokuhlolwa kwe-SEO kwiphepha. Ezinye zeendlela eziphambili zokusetyenziswa ziquka:

Ukuphuculwa koMsebenzi (i-WPO)

• Uchonga imifanekiso kunye neefayile ezinkulu ukusuka kwithebhu yeNethiwekhi kwaye ubeke phambili ukwenziwa kwayo ngcono (uxinzelelo, iifomathi ezintsha, umthwalo ovilaphayo).
• Vavanya umthwalo wezixhobo zangaphandleUkuba amaxesha made, cinga ngokuwakhuphela kwiseva yakho.
• Hlela kwakhona izinto eziza kuqala ukuze izinto ezibalulekileyo zikhonzwe kuqala (Iindlela eziPhambili).
• Khubaza i-cache kwiphaneli yeNethiwekhi Xa uhlalutya utshintsho, qiniseka ukuba ulwazi alugcinwanga kwindawo ohlala kuyo.
• Sebenzisa isixhobo sokudibanisa esicothayo ukuvavanya amava omsebenzisi weselula.

Ukunciphisa izixhobo (iCSS kunye neJavaScript)

• Kwithebhu yeeFonti, ifumana iifayile ezinkulu kakhulu, ezingafakwanga, okanye eziphindaphindwayo.
• Hlanganisa kwaye unciphise i-CSS kunye ne-JS ukuze kuncitshiswe izicelo kwaye kuphuculwe amaxesha okulayisha.

Uhlalutyo lolwakhiwo, ukufikeleleka kunye ne-SEO

• Hlaziya ulwakhiwo lwezihloko, iimpawu, kunye nentsingiselo ye-HTML: qiniseka ukuba ulwakhiwo olunengqiqo (h2, h3, iithegi ze-ALT, iindima) lufanelekile kwiGoogle.
• Jonga kwiLighthouse ubukho beelebhile kunye nedatha efunekayo kwi-SEO, ukufikelela, kunye ne-PWA.
• Hlalutya impembelelo yeJavaScript ekuguquleni kwaye khumbula ukuba iGoogle isenokungayitoliki into exhomekeke kwintsebenziswano yomsebenzisi ukuba ayibonakali xa ilayishwa.
• Ijonga ukusetyenziswa kweekuki, indawo yokugcina izinto, kunye nezinye izixhobo zesikhangeli.

Ukukhupha nokuguqula umxholo ukuze ukrwelwe okanye uthunyelwe ngaphandle

• Ungasebenzisa "i-Copy element" ukuthumela ngokuthe ngqo iitafile ezinkulu okanye uluhlu kwiispredishithi okanye kubahleli beekhowudi.
• Sebenzisa i-console kunye ne-Design Mode ukuze uhlele ngokufanelekileyo umxholo osesikrinini, ulungiselele ukufota, okanye uthumele ulwazi olufanelekileyo ngaphandle.

Ukwenziwa ngokwezifiso kunye nokulungisa iimpazamo ngexesha langempela

• Fihla iibhena zentengiso okanye izinto ezicaphukisayo ngokuthe ngqo ngokusebenzisa bonisa: akukho ngokusebenzisa umhloli.
• Sebenzisa iJavaScript evela kwikhonsoli ukuze usebenzise imiyalelo kwizinto ezikhethiweyo okanye utshintshe indlela yokuhlela iphepha uyivule uyicime.

Imida yeChrome DevTools kwizixhobo zeselfowuni

Nangona i-"Inspect Element" kunye nazo zonke ii-Chrome DevTools zihlala zifumaneka kwiinguqulelo zedesktop, ii-DevTools azifumaneki ngokuthe ngqo kwii-smartphones kunye neetablets . Kukho izizathu ezibini zoku: ujongano alunakusebenza kwizikrini ezincinci, kwaye ukuchaneka kwemawusi kuyaphazamiseka. Ngethamsanqa, ungalingisa amava eselfowuni kwidesktop yakho okanye uqhagamshele isixhobo esibonakalayo kwikhompyuter yakho ukuze ulungise iisayithi ngexesha langempela, nto leyo ebaluleke kakhulu kubaphuhlisi bee-app zeselfowuni. Kwi-Mac ene-iOS, kuya kufuneka uvule ukhetho olufanelekileyo kwi-"Settings > Advanced" kwaye usebenzise i-akhawunti efanayo ye-iCloud kuzo zombini izixhobo.

Amatyala okusetyenziswa aphambili: ukusuka ekulungiseni iimpazamo ukuya ekuthatheni imifanekiso-skrini

Ukongeza kwiindlela zakudala zokusetyenziswa kuphuhliso lwe-SEO kunye nohlalutyo, iiChrome DevTools zibonelela ngeempawu ezisebenzayo neziphambili:

• Ithintela ukulayisha iifayile ezithile (umzekelo: main.css) ukuze ilinganise iimeko zokungaphumeleli kwenethiwekhi kwaye ujonge indlela iwebhusayithi eziphatha ngayo xa kukho ukungaphumeleli.
• Sebenzisa umsebenzi wesikrini ngaphakathi kwiphaneli yeNethiwekhi ukuze ubone inkqubo yokubonisa inyathelo ngenyathelo uze ngaloo ndlela uqonde ngcono indlela kunye nexesha apho izinto ezithile ezibalulekileyo zivela khona.
• Khangela ii-headers okanye iimpendulo ezithile ze-HTTP (umz., ukufumanisa ukuba zeziphi izixhobo ezisebenzisa imigaqo-nkqubo ye-caching efanelekileyo) usebenzisa umsebenzi wokukhangela wehlabathi.
• Hluza izicelo ngohlobo, idomeyini, okanye ipateni ukuze uhlalutye ithrafikhi yangaphandle okanye izixhobo ezibalulekileyo ngokweenkcukacha.
• Yenza iiprototypes ezikhawulezayo zotshintsho lwe-HTML kunye ne-CSS kwaye wabelane ngazo ngokulula neqela lakho, ngaphandle kokutshintsha iifayile zomthombo wokuqala.

I-Chrome DevTools ibe yimela yomkhosi waseSwitzerland yophuhliso lwewebhu kunye nohlalutyo, isebenza kakuhle ngokulinganayo kwiiprojekthi zobuqu okanye amaqonga amakhulu kunye neeprojekthi zobungcali. Ukusuka ekuhloleni ngokukhawuleza iinkcukacha zoyilo ukuya ekuhloleni ngokupheleleyo zonke izixhobo zewebhusayithi yakho, kubandakanya i-WPO, i-SEO, kunye nemisebenzi yokufikelela, ukuhlanganiswa kwayo nezixhobo ezifana neLighthouse kwenza ukuba ibe sisixhobo esibalulekileyo sokwenza ngcono amaphepha akho kungekuphela nje kuGoogle kodwa nakubasebenzisi bakho.