Aveți o întrebare despre cum să vizualizați codul sursă al elementului vizual pe Chromebook? Pentru a face acest lucru, puteți utiliza DevTools special din aplicația Google Chrome sau din orice pagină de browser. DevTools reprezintă o listă de instrumente speciale pentru dezvoltatori care sunt integrate în browserul Google Chrome. Acesta le permite utilizatorilor să editeze paginile din mers și să țină evidența posibilelor probleme.
Cum se utilizează Inspect Element pe Chromebook
Pentru Chromebooks, browserul implicit este Google, pentru a deschide uneltele dezvoltatorului pe acest dispozitiv aveți nevoie de.
- Deschideți pagina pe care o doriți
- Faceți clic pe cele 3 puncte din colțul din dreapta sus al aplicației
- Selectați “Mai multe instrumente“
- Faceți clic pe “Instrumente pentru dezvoltatori“
Modalități alternative de accesare a acestei funcții sunt apăsarea butonului F12 sau clic dreapta pe elementul dorit
Aceasta este o instrucțiune universală care se aplică la majoritatea browserelor de pe Windows sau de pe orice alt sistem.
Cum se utilizează Inspect Element pe Mac sau Iphone
Este posibil să se facă același lucru folosind un Mac sau chiar un iPhone? Va trebui doar să urmați câțiva pași simpli mai jos:
Cum se utilizează pe Mac
Dacă aveți un Mac, cel mai bun browser pe care îl puteți alege este Safari. Deschiderea Instrumentelor pentru dezvoltatori în acest browser este ușor diferită de același proces în Chrome sau Firefox. Va trebui să:
- Deschideți browserul
- Faceți clic pe Safari pe numele filei
- Selectați “Preferințe“
- Apoi, faceți clic pe pictograma Advanced gear, care va fi localizată în partea de sus a ecranului.
- Bifați caseta de lângă Afișare meniu de dezvoltare în bara de meniu
Odată ce ați făcut acest lucru, elementul Inspect va fi disponibil pe paginile dvs. web. De asemenea, îl puteți apela cu CMD + Option + I.
Cum se utilizează pe iPhone
Dacă doriți să verificați modul în care arată versiunea mobilă a paginii web pe iPhone utilizând funcția Inspect Elements, va trebui mai întâi să activați Inspectorul Web pentru dispozitivul iOS:
- Mergeți la Setări
- Selectați aplicația Safari
- Derulați până în partea de jos și faceți clic pe “Meniu avansat“
- Acum activați caseta de selectare de lângă “Web Inspector“.
De asemenea, trebuie să activați meniul Dezvoltator pe Mac, conform instrucțiunilor de mai sus. După ce ați activat aceste funcții pe dispozitivul iOS și pe Mac, ar trebui să puteți vedea meniul Develop (Dezvoltator) în partea de sus a Mac-ului. Trebuie să faceți clic pe el pentru a vedea iPhone-ul atașat și pagina web deschisă pe acesta. Când treceți la o altă pagină, schimbați și fereastra Web Inspector pentru pagina respectivă de pe Mac-ul dvs.
Ce este Elemental Panel
Primul lucru care trebuie știut este ce este Element Panel. Dacă doriți să modificați designul sau orice element extern al paginii, trebuie să editați CSS sau HTML. Puteți face acest lucru folosind un instrument de dezvoltare numit Element panel. Acesta vă va permite să verificați și să vă modificați pagina din front-end. Unele dintre elementele pe care le puteți vedea acolo sunt :
- Informații despre imagine, cum ar fi dimensiunea și sursa acesteia
- Panou CSS – această opțiune este utilizată pentru a modifica stilul extern al paginii. Aici puteți modifica parametrii precum fonturi, dimensiuni, culori
- Informații DOM sau panoul DOM cu această opțiune puteți controla aspectul paginii. Puteți modifica poziția elementelor și puteți naviga complet în fișierele HTML
- Panoul de consolă prezintă noile caracteristici din cadrul instrumentelor pentru dezvoltatori
- Ascultătorii de evenimente ale elementelor
- Comentarii HTML
- Feedback
Inspectarea dimensiunilor redate și naturale ale unei imagini
Foarte des aveți nevoie de informații despre o imagine de pe o pagină web, o puteți “inspecta”. Acest lucru vă oferă posibilitatea de a cunoaște dimensiunea imaginii, de exemplu. Pentru a face acest lucru, trebuie să treceți indicatorul mouse-ului peste acel IMG în timp ce vă aflați în arborele DOM
Inspectarea unei anumite imagini utilizate dintr-un set de surse (srcset)
Apoi puteți verifica ce versiune a imaginii a fost încărcată și care este sursa srcset exactă. srcset va ajuta browserul să solicite versiunea de imagine cu cea mai mică dimensiune, care este puțin mai mare decât imaginea reală. Acest lucru este utilizat pentru a vizualiza un set de imagini cu rezoluții diferite din care browserul să aleagă. În primul rând, selectați elementul IMG, apoi verificați informațiile $0.currentSrc din consolă. Rețineți că puteți mări caracteristicile imaginilor cu srcset dacă trebuie să utilizați dispozitive cu un DPI mai mare.
