Cum să inspectați corect un site web

Indiferent dacă sunteți un dezvoltator care testează noi funcții pe un proiect sau un designer care dorește să priviți mai îndeaproape codul HTML și CSS, există multe motive pentru a inspecta un site web și elementele acestuia. Cu toate acestea, a ști de unde să începi poate părea confuz (la început).

Din fericire, puteți folosi diverse instrumente, tehnici și trucuri simple pentru a inspecta corect elementele web. În plus, există opțiuni pentru aproape fiecare browser și sistem de operare (OS).

În această postare, vom discuta de ce ați putea dori să inspectați un site web. Apoi vă vom prezenta câteva dintre cele mai bune instrumente pe care le puteți utiliza înainte de a vă explica ce să căutați. Să sărim înăuntru!

De ce ar trebui să inspectați un site web

Există mai multe motive pentru care ați putea dori să inspectați un site web. De exemplu, poate fi necesar să depanați o problemă sau să găsiți o anumită informație.

Inspectarea elementelor web într-un browser permite dezvoltatorilor, designerilor și agenților de marketing digital WordPress să manipuleze aspectul unei pagini web și să testeze modificările. Este mai probabil ca dezvoltatorii sau testerii să folosească această funcție pentru a depana un anumit element, pentru a efectua teste de aspect sau pentru a efectua editarea CSS în direct.

Inspectarea elementelor web este de asemenea utilă pentru designerii web. Dacă doriți să testați rapid o schimbare de culoare sau un font nou, puteți face acest lucru fără să vă aflați în codul CSS.

În plus, agenții de marketing digital pot folosi un instrument Inspect Element pentru a vedea cum anumite modificări ar afecta aspectul general al unei pagini web. De exemplu, este posibil să doriți să încercați un nou buton de îndemn la acțiune (CTA) sau o schemă de culori diferită. Puteți folosi instrumente pentru a replica actualizările fără a face modificări site-ului dvs. live.

În cele din urmă, inspectarea unui site web poate fi o modalitate excelentă de a afla despre cum este construit și funcționează un site web. Dacă sunteți interesat să aflați mai multe despre dezvoltarea web, inspectarea site-urilor este o modalitate excelentă de a începe.

Cele mai bune instrumente și extensii pentru a inspecta un site web

Există o serie de instrumente și extensii diferite pe care le puteți folosi pentru a inspecta un site web. Iată câteva dintre cele mai populare opțiuni!

Inspectează elementul

Instrumentul de inspectare a elementelor este cea mai comună opțiune. Vă permite să priviți îndeaproape codul HTML și CSS care alcătuiește o pagină web. De asemenea, îl puteți folosi pentru a edita live CSS-ul și pentru a vedea cum ar arăta modificările dvs. fără a face modificări permanente.

Deși este disponibil ca extensie Google Chrome, instrumentul Inspect Element vine și cu toate browserele majore. Funcția face parte din Chrome Developer Tools, un set de programe care vă permite să inspectați și să editați codul HTML și CSS al unei pagini web.

Pentru a accesa Instrumentele pentru dezvoltatori Google Chrome, apăsați pur și simplu Ctrl+Shift+I (sau Cmd+Opt+I pe un Mac). De asemenea, puteți accesa instrumentele deschizând meniul Chrome și selectând Mai multe instrumente > Instrumente pentru dezvoltatori :

Puteți accesa aceleași instrumente pentru dezvoltatori în alte browsere. De exemplu, Firefox Developer Tools are caracteristici similare. Pentru a accesa instrumentele, apăsați pur și simplu Ctrl+Shift+I (sau Cmd+Opt+I pe un Mac). De asemenea, puteți găsi instrumentele deschizând meniul Firefox și selectând Web Developer > Inspector.

În plus, Safari Developer Tools vă permite să inspectați și să editați codul HTML și CSS al unei pagini web pe dispozitivele Mac. Pur și simplu apăsați Cmd+Opt+I . De asemenea, puteți deschide meniul Safari și selectați Preferințe > Avansat > Afișați meniul Dezvoltare din bara de meniu .

BrowserStack

O altă platformă pe care o puteți utiliza pentru testarea site-urilor web este BrowserStack:

Această platformă de testare bazată pe cloud funcționează cu toate browserele și dispozitivele majore. După ce v-ați înscris pentru o perioadă de încercare gratuită, puteți naviga la tabloul de bord Live și puteți alege sistemul de operare.

Apoi, puteți selecta versiunea de browser preferată pentru a lansa o sesiune Live în browser. În cele din urmă, puteți naviga pe site-ul web pe care doriți să-l inspectați așa cum ați proceda prin Inspect Element.

Cum să inspectați un site web

Să aruncăm o privire la modul în care puteți inspecta un site web folosind instrumentul Inspect Element. Începeți pur și simplu să faceți clic dreapta pe orice element de pagină web și să selectați Inspectare din meniul contextual:

Aceasta va deschide instrumentul Inspect Element în browser. Odată ce instrumentul este deschis, puteți începe să manipulați codul HTML și CSS pentru a vedea cum ar afecta aspectul paginii web.

De exemplu, puteți schimba culoarea unui element, puteți adăuga sau elimina o clasă sau chiar puteți schimba poziția unui element. De asemenea, puteți utiliza câmpul de căutare din partea de sus pentru a căuta o bucată de text sau o imagine.

Desigur, orice modificări pe care le faceți folosind Inspect Element sunt doar temporare. Ele nu vor fi salvate când reîmprospătați pagina sau închideți browserul. Cu toate acestea, aceasta este o modalitate excelentă de a încerca cum ar arăta anumite modificări fără a modifica permanent site-ul dvs.

De asemenea, puteți accesa instrumentul apăsând Ctrl+Shift+I (sau Cmd+Opt+I pe un Mac) pentru a deschide instrumentele pentru dezvoltatori . Apoi, faceți clic pe fila Elemente din partea de sus a ferestrei:

În cele din urmă, puteți accesa și Inspect Element deschizând meniul Chrome și selectând Mai multe instrumente > Instrumente pentru dezvoltatori , despre care am discutat mai devreme.

Cum se schimbă un element

Dacă doriți să modificați un element dintr-o pagină web, faceți clic dreapta pe el și selectați Inspectați . În panoul Elemente care se deschide, găsiți partea pe care doriți să o modificați și faceți dublu clic pe ea.

Când deschideți caseta Elemente , puteți utiliza pictograma Inspectați cursorul din partea stângă sus a panoului pentru a evidenția codul sursă al elementului pe care doriți să îl modificați. Când faceți clic dreapta pe codul evidențiat, selectați Editare ca HTML :

Caseta se va extinde, apoi puteți modifica textul. Pentru a previzualiza modificările, puteți deselecta elementul. De asemenea, puteți face dublu clic pe text pentru a-l edita.

De asemenea, puteți utiliza această tehnică pentru a schimba codul CSS pentru un element. Pentru a face acest lucru, faceți clic dreapta pe el și selectați Inspectați . În panoul elemente, localizați elementul pe care doriți să îl modificați și alegeți proprietatea element.style . Apoi puteți adăuga codul sau declarațiile dvs. între paranteze.

Cum să ascundeți sau să ștergeți un element

De asemenea, este posibil să doriți să ascundeți sau să ștergeți un element dintr-o pagină web. Odată ce ați găsit elementul pe care doriți să îl ascundeți sau să îl ștergeți, faceți clic dreapta pe el și selectați Inspectare pentru a lansa instrumentul Inspectare element.

De aici, faceți clic dreapta pe element, apoi selectați opțiunea Ștergere element sau Ascundere element :

Butonul Delete elimină elementul Document Object Model (DOM). Butonul Ascunde va ascunde pur și simplu elementul, dar va fi în continuare în DOM.

Cum să inspectați clasele CSS

Există mai multe moduri de a inspecta clasele CSS. Cu toate acestea, cea mai ușoară metodă este să faceți clic dreapta pe elementul pe care doriți să îl examinați și să selectați Inspectați . Apoi deschideți fila Stiluri pentru a vedea stilurile CSS ale acesteia:

Rețineți că această filă vă arată doar stilurile inline care sunt aplicate și nu cele care provin dintr-o foaie de stil.

Dacă doriți să vedeți toate stilurile CSS care sunt aplicate unui element, puteți utiliza fila Calculat . Vă arată toate stilurile CSS care sunt aplicate unui element, inclusiv cele dintr-o foaie de stil:

Când terminați de inspectat o pagină web, închideți pur și simplu instrumentul Inspectare element. Modificările dvs. nu vor fi salvate, așa că nu trebuie să vă faceți griji în legătură cu spargerea accidentală a ceva.

Ce să căutați când inspectați un site web

Indiferent de metoda pe care o utilizați pentru a accesa Inspect Element, veți vedea aceeași interfață. Este format din două panouri: panoul HTML și panoul CSS.

Panoul HTML vă arată structura paginii web. Puteți vedea cum sunt imbricate și legate diferitele elemente.

Panoul CSS vă arată stilurile aplicate elementului selectat. De asemenea, puteți edita regulile CSS pentru a vedea cum ar afecta modificările dvs. aspectul elementului.

Dacă căutați ceva specific pe un site web, fie o anumită bucată de text sau o imagine, puteți utiliza Inspect Element pentru a vă ajuta să îl găsiți. Are un câmp de căutare în care puteți căuta un anumit element.

Când inspectați un site web, trebuie să aveți în vedere câteva lucruri:

• HTML: codul care definește structura paginii web. Acordați atenție modului în care sunt organizate elementele și modului în care interacționează între ele.
• CSS: Codul care definește stilul paginii web.
• JavaScript : Codul care definește comportamentul paginii web. Ea influențează modul în care elementele interacționează și modul în care pagina răspunde la intrarea utilizatorului.
• Design : aspectul general al site-ului. Ea influențează cât de ușor de utilizat este aspectul și cât de bine se potrivește scopului site-ului.
• Conținut: textul site-ului, imaginile și alte media.

Ceea ce ar trebui să cauți atunci când inspectezi un site web va depinde în principal dacă ești designer, dezvoltator sau marketer digital. După cum am discutat mai devreme, instrumentul Inspect Element vă poate ajuta cu orice, de la testarea designului până la depanarea problemelor.

Concluzie

Inspect Element este o caracteristică valoroasă pentru designeri și dezvoltatori. Îl puteți folosi pentru a vizualiza și edita codurile HTML și CSS ale unei pagini web. Acest instrument poate fi util atunci când doriți să faceți modificări unei pagini web la care lucrați sau să vedeți cum este codificată.

Inspect Element este disponibil în majoritatea browserelor web. Îl puteți accesa făcând clic dreapta pe o pagină web și selectând Inspectare din meniu. Odată ce ați deschis fereastra Inspect , veți vedea codul HTML și CSS pentru pagina web și puteți face diverse modificări.

Aveți nevoie de ajutor cu gestionarea sau optimizarea site-ului dvs. web? Aflați cum WP Engine poate ajuta cu orice, de la găzduirea WordPress la gestionarea site-ului și a clienților!