Cum să editați pagini web pe Safari utilizând Inspect Element

Cu instrumentul său Inspect Element, Safari vă permite să modificați codul front-end al oricărei pagini web. Dacă doriți să testați cum ar arăta o pagină cu text sau imagini diferite, puteți face acest lucru modificând codul acesteia cu Inspect Element.

Acesta este un ghid simplu destinat începătorilor pentru a explica cum puteți începe să experimentați cu Inspect Element în Safari pentru a edita textul și imaginile unui site web cu cunoștințe minime de codare.

Ce este Inspect Element?

Inspect Element este un instrument de dezvoltare. Este disponibil pe Safari, dar și pe alte browsere web precum Chrome, Firefox și Edge. Cu Inspect Element, puteți arunca o privire în spatele cortinei unui site web pentru a dezvălui codul său front-end, cum ar fi HTML și CSS. Cu toate acestea, nu vă oferă vizibilitate back-end, cum ar fi bazele de date ale acestuia.

Nu numai că puteți vedea acest cod, dar și îl puteți modifica. Aceasta înseamnă că puteți schimba aspectul unui site web. Puteți înlocui o imagine, puteți reformula un text, puteți utiliza un font diferit, puteți schimba schema de culori și multe altele. Cu toate acestea, aceste modificări sunt locale. Ele nu vor apărea nimănui în afară de tine; ele dispar odată ce reîmprospătați sau vă îndepărtați de pagină.

De ce ar trebui să utilizați Inspect Element?

Inspect Element este un instrument excelent dacă sunteți un dezvoltator web în devenire. Puteți vedea literalmente codul care alimentează site-ul dvs. preferat, modificându-l după cum doriți într-un mediu real. Sunt multi informații distractive pe care le puteți obține folosind Inspect Element.

De exemplu, proprietarii de afaceri se pot uita la cuvintele cheie incluse pe site-ul web al unui concurent, sau designerii pot utilizați Inspect Element pentru a identifica un font pe care le consideră atractive sau să testeze rapid o schemă diferită de culori pe site-ul lor.

Pentru moment, ne vom concentra pe editarea elementelor de bază ale unei pagini web folosind Inspect Element.

Cum să accesați Inspect Element pe Safari

Puteți deschide Inspect Element pe Safari folosind meniul pentru dezvoltatori:

1. Deschideți Safari.
2. Clic Safari în bara de meniu de sus.
3. Din meniul drop-down, selectați Preferințe.
4. Selectează Avansat opțiune.
5. Bifați caseta pe care scrie Afișați meniul Dezvoltare în bara de meniu.

După ce ați selectat această opțiune, puteți Click dreapta pe o pagină web și selectați Inspectează elementul. Alternativ, puteți selecta Dezvolta în bara de meniu și apoi Afișați Web Inspector.

Cum să găsiți elemente web în Inspect Element

Pentru a începe editarea unui element, Click dreapta ceea ce doriți să editați și faceți clic Inspectează elementul. Aceasta va deschide fereastra dezvoltatorului, cu secțiunea relevantă evidențiată. S-ar putea să descoperiți că elementul pe care doriți să îl elementați (imaginea sau textul, de exemplu) este ascuns; pentru a-l localiza, utilizați săgeți din stânga pentru a extinde secțiunile imbricate.

Pentru a vă ajuta să restrângeți selecția, faceți clic pe pictograma țintă din bara de instrumente Inspect Element. Acum, pe măsură ce navigați prin cod, acesta evidențiază acea secțiune de pe site. Sau puteți folosi cursorul pentru a identifica o secțiune de pe site. Acest lucru este util atunci când doriți să vă concentrați pe ceva anume într-o zonă aglomerată a unei pagini web.

Cum să editați textul unui site web folosind Inspect Element

Pentru a face o bucată de text editabilă după ce ați găsit-o în codul sursă al unui site, dublu click aceasta. Puteți introduce text nou direct în cod sau puteți șterge textul existent. Când editarea este completă pentru un anumit șir de text, apăsați introduce, iar textul de pe pagina web se va schimba.

Este într-adevăr la fel de simplu! Singurele momente în care acest lucru nu va funcționa sunt atunci când textul face de fapt parte dintr-o imagine, cum ar fi un logo.

Cum să editați imaginile unui site web folosind Inspect Element

În timp ce imaginile vă apar vizual pe front-end, în codul site-ului ele apar ca link-uri. Puteți Click dreapta și imagine și alege Inspectează elementul pentru a sări unde este acea imagine în cod. Imaginile de site-uri web au de obicei extensii de fișiere JPG, GIF sau PNG, deși nu exclusiv.

Dublu click aceste șiruri de imagini și le puteți edita sau pur și simplu le puteți salva în sistemul dvs., dacă doriți. Dacă doriți să înlocuiți imaginea, schimbați-o pentru o adresă URL a imaginii de înlocuire. Sau puteți șterge șirul de cod în întregime pentru a elimina imaginea din vedere.

Căutați site-uri web folosind Safari

Instrumentul Inspect Element de la Safari vă permite să găsiți și să modificați cu ușurință codul corespunzător textului și imaginilor, ceea ce este la fel de ușor ca comutarea unui șir de text sau URL. După ce ați terminat de editat un site web cu Inspect Element, pur și simplu reîmprospătați pagina și totul va reveni la normal.

Cum să schimbați agentul utilizator al browserului și site-urile web de truc

Citiți în continuare

Despre autor