Verificați elementul: cum să editați temporar orice pagină web

În browserul dvs. se ascunde un instrument puternic: Inspect Element .

Faceți clic dreapta pe orice pagină web, faceți clic pe Inspectare și veți vedea interiorul acelui site: codul său sursă, imaginile și CSS care formează designul său, fonturile și pictogramele pe care le folosește, codul Javascript care alimentează animațiile și multe altele . Puteți vedea cât durează încărcarea site-ului, câtă lățime de bandă a descărcat și culoarea exactă din text.

Sau, îl puteți folosi pentru a schimba orice doriți pe pagină.

Inspect Element este o modalitate perfectă de a afla ce face web-ul să bifeze, să vă dați seama ce este defect pe site-urile dvs., să faceți o machetă cum ar arăta o modificare a culorii și a fontului și să vă împiedicați să aveți în Photoshop detalii private în capturi de ecran. Este o super-putere pe care nu ați știut-o niciodată că browserul dvs. deține.

Să învățăm cum să utilizați Google Chrome Inspect Element pentru a vă ajuta munca, indiferent dacă sunteți dezvoltator sau agent de marketing care nu a scris niciodată o linie de cod. Dacă citiți acest lucru pe telefon, este timpul să treceți la laptop, să deschideți Google Chrome și să vă pregătiți să modificați un cod.

Așteptați, de ce ar trebui să folosesc Inspect Element?

Dacă nu ați analizat niciodată codul unui site web din curiozitate, s-ar putea să vă întrebați de ce ar trebui să aflați cum să utilizați Inspect Element.

• Designer : doriți să previzualizați cum ar arăta un design de site pe mobil? Sau doriți să vedeți cum ar arăta o altă nuanță de verde pe un buton de înscriere? Puteți face ambele în câteva secunde cu Inspect Element.

• Marketer : curios ce cuvinte cheie utilizează concurenții în antetele site-ului sau doriți să vedeți dacă site-ul dvs. se încarcă prea lent pentru testul PageSpeed ​​de la Google? Elementul Inspect poate afișa ambele.

• Scriitor : V-ați săturat să vă estompați numele și adresa de e-mail în capturi de ecran? Cu Inspect Element, puteți modifica orice text de pe o pagină web într-o secundă.

• Agent de asistență : Aveți nevoie de o modalitate mai bună de a le spune dezvoltatorilor ce trebuie reparate pe un site? Inspect Element vă permite să faceți o schimbare rapidă de exemplu pentru a arăta despre ce vorbiți.

Pentru aceste și alte zeci de cazuri de utilizare, Inspect Element este un instrument la îndemână de păstrat. Face parte din Instrumentele pentru dezvoltatori din browserul dvs., care include o serie de caracteristici suplimentare: o consolă pentru a rula codul, o pagină View Source pentru a vedea doar codul brut din spatele unui site, o pagină Sources cu o listă cu fiecare fișier încărcat într-un site-ul web și multe altele. Le puteți explora pe toate pe cont propriu, dar, deocamdată, să vedem cum să folosiți fila principală Elemente pentru a modifica o pagină web pe cont propriu.

Cum să începeți cu Inspectarea elementului

Există câteva modalități de a accesa Google Chrome Inspect Element. Doar deschideți un site web pe care doriți să îl editați (pentru a urma împreună cu acest tutorial, deschideți Zapier.com), apoi deschideți instrumentele Inspectare element în unul din aceste trei moduri:

• Faceți clic dreapta oriunde pe pagina web și, în partea de jos a meniului care apare, veți vedea „ Inspectați ”. Faceți clic pe asta.

• Faceți clic pe meniul hamburger (pictograma cu 3 puncte stivuite) din extrema dreaptă a barei de instrumente Google Chrome, faceți clic pe Mai multe instrumente , apoi selectați Instrumente pentru dezvoltatori . Alternativ, în meniul fișier, faceți clic pe Vizualizare -> Dezvoltator -> Instrumente pentru dezvoltatori.

• Preferați comenzile rapide de la tastatură? Apăsați CMD + Option + I pe un Mac sau F12 pe un PC pentru a deschide Inspect Elements fără a face clic pe nimic.

În mod implicit, Instrumentele pentru dezvoltatori se deschid într-un panou în partea de jos a browserului și vor afișa fila Elements - acesta este renumitul instrument Inspect Element pe care l-am căutat.

Nu veți avea prea mult spațiu pentru a lucra cu Inspectarea elementului în partea de jos a ecranului, așa că faceți clic pe cele trei puncte verticale din partea dreaptă sus a panoului elementului de inspecție lângă „X” (pe care ați face clic pentru a închide panoul). Acum, veți vedea o opțiune pentru a muta panoul în partea dreaptă a browserului (vizualizarea cu andocare dreaptă) sau pentru a deschide panoul într-o fereastră complet separată (vizualizare cu andocare).

Pentru acest tutorial, să andocăm panoul din partea dreaptă a ferestrei browserului pentru a ne oferi mai mult spațiu de lucru. Puteți face panoul Instrumente pentru dezvoltatori mai lat sau mai îngust trecând peste marginea din stânga. Odata ce apare cursorul, trageți panoul la stânga pentru al lărgi sau la dreapta pentru al îngusta.

Acum că ne aflăm în Inspect Element, avem la dispoziție o serie de instrumente utile pe care le putem folosi pentru a face ca orice site să arate exact cum ne dorim. Pentru acest tutorial, ne vom concentra pe filele Elemente, Emulare și Căutare.

Căutare

Fila „Căutare” vă permite să căutați pe o pagină web conținut specific sau un element HTML. Este puțin ascuns: va trebui să faceți clic pe cele 3 puncte, apoi să faceți clic pe Căutare în toate fișierele pentru a-l descoperi. Apoi, veți putea căuta în fiecare fișier dintr-o pagină web orice doriți.

Elemente

„Inspect Element” este instrumentul pe care îl vom explora cel mai mult în acest tutorial și este cel care se deschide mai întâi când lansați Instrumentele pentru dezvoltatori în majoritatea browserelor. Sau faceți clic pe fila „Elemente” din Instrumentele pentru dezvoltatori pentru a reveni la aceasta dacă ați explorat în altă parte.

În fila Explorare, puteți vedea toate HTML, JavaScript și CSS care au creat un site web. Este aproape la fel ca doar vizualizarea sursei unui site web, cu o diferență crucială: puteți modifica oricare dintre coduri și puteți vedea schimbările în timp real pe site-ul pe care l-ați deschis. Puteți schimba orice, de la copiere la tipar, apoi capturați noul design sau salvați modificările (mergeți doar la Vizualizare> Dezvoltator> Vizualizare sursă și salvați pagina ca fișier HTML sau copiați modificările de cod în editorul de text). Odată ce reîncărcați pagina, totuși, toate modificările dvs. vor dispărea pentru totdeauna.

Emulare

Ați dorit vreodată să previzualizați o pagină web pe un telefon fără să vă scoateți telefonul din buzunar? Fila „Emulare” vă permite să vizualizați o pagină web așa cum ar arăta pe orice dispozitiv, cu presetări pentru dispozitive populare sau o opțiune de setare a rezoluției ecranului și a raportului de aspect. Puteți chiar să setați o viteză de internet emulată, pentru a vedea cât de repede s-ar încărca un site prin dial-up.

De asemenea, este puțin ascuns: va trebui să deschideți Inspectarea elementului și să faceți clic pe butonul pictogramei telefonului pentru al porni. Apoi, veți avea un instrument perfect pentru a înțelege modul în care alții experimentează o pagină web.

E timpul să ne apucăm de treabă. Mai întâi vom folosi Căutarea pentru a găsi lucruri pe o pagină web, apoi vom folosi Elementele pentru a edita text și multe altele pe un site și, în cele din urmă, vom folosi Emulation pentru a vedea cum ar arăta site-ul nostru pe un telefon dintr-o anumită locație.

Găsiți orice pe un site cu Inspect Element Search

Vă întrebați ce intră în site-urile dvs. preferate? Căutarea este cel mai bun instrument pentru aceasta, în afară de citirea întregului cod sursă al unui site. Puteți deschide vizualizarea Elemente implicită, apăsați CTRL + F sau CMD + F și căutați prin codul sursă, dar instrumentul de căutare complet vă va permite să căutați în fiecare fișier dintr-o pagină, ajutându-vă să găsiți text în fișierele CSS și JavaScript sau găsiți o imagine pictogramă de care aveți nevoie pentru un articol.

Pentru a începe, deschideți Zapier.com în Chrome dacă nu ați făcut-o deja, apoi deschideți Inspectarea elementului, faceți clic pe cele 3 puncte verticale din colțul din dreapta sus al panoului Instrumentele pentru dezvoltatori (lângă „X” de închidere) și selectați „ Căutați în toate fișierele. " Fila Căutare va apărea în jumătatea de jos a panoului Instrumente pentru dezvoltatori.

În câmpul de căutare, puteți tasta orice - ORICE - ceea ce doriți să găsiți pe această pagină web și va apărea în acest panou. Să vedem cum putem folosi acest lucru.

Tastați meta name în câmpul de căutare, apăsați tasta Enter și veți vedea imediat fiecare apariție a „meta nume” în codul de pe această pagină. Acum, puteți vedea metadatele acestei pagini, cuvintele cheie SEO direcționarea acesteia și dacă este configurat sau nu ca Google să o indexeze pentru căutare. Acesta este un mod ușor de a vedea ce vizează concurenții dvs. și de a vă asigura că nu ați încurcat nimic pe site-ul dvs.

Să încercăm o altă interogare. Ștergeți meta name , tastați h2 în câmpul de căutare și apăsați „enter”. Veți vedea fiecare apariție a „h2” în fișierele JavaScript ale lui Zapier în partea de sus, dar odată ce parcurgeți în partea de jos, puteți vedea fiecare antet „h2” pe această pagină.

Căutarea este un instrument eficient și pentru designeri, deoarece puteți căuta și după culoare. Tastați #ff4a00 în câmpul de căutare și apăsați „enter” (și asigurați-vă că bifați caseta de lângă „Ignorați majuscule” pentru a vedea toate rezultatele). Acum ar trebui să vedeți de fiecare dată culoarea # ff4a00, nuanța de portocaliu a lui Zapier, în fișierele CSS și HTML ale acestui site. Apoi, trebuie doar să faceți clic pe linia care scrie „culoare: # ff4a00;” pentru a trece la acea linie din HTML-ul site-ului și a-l regla pe cont propriu (ceva ce vom analiza în secțiunea următoare).

Acesta este un mod util pentru designeri de a se asigura că un site respectă ghidul de stil al mărcii lor. Cu instrumentul „Căutare”, proiectanții pot verifica cu ușurință CSS-ul unei pagini web pentru a vedea dacă se aplică o culoare elementului greșit, dacă se folosește o familie de fonturi incorectă pe o pagină web sau dacă încă folosiți culoare veche undeva pe site-ul dvs.

Instrumentul „Căutare” este, de asemenea, modalitatea perfectă de a comunica mai bine cu dezvoltatorii, deoarece le puteți arăta exact unde ați găsit o greșeală sau exact ce trebuie schimbat. Doar spuneți-le numărul de linie în care există problema și veți obține remedierea mult mai rapidă.

Sau, puteți schimba pagina dvs. web cu Elements , partea centrală a Instrumentelor pentru dezvoltatori Chrome.

Schimbați orice cu elemente

Dezvoltatorii front-end utilizează instrumentul Inspectare element în fiecare zi pentru a modifica aspectul unei pagini web și pentru a experimenta idei noi - și puteți și voi. Inspect Elements vă permite să modificați aspectul și conținutul unei pagini web, adăugând modificări temporare la fișierele CSS și HTML ale site-ului.

După ce închideți sau reîncărcați pagina, modificările dvs. vor dispărea; veți vedea modificările doar pe computerul dvs. și nu editați chiar site-ul real. În acest fel, vă puteți simți liber să experimentați și să schimbați orice - și apoi să copiați și să salvați cele mai bune modificări pentru a le folosi din nou mai târziu.

Să vedem ce putem face cu el.

Faceți clic pe fila „Elemente” din panoul Instrumente pentru dezvoltatori și, dacă doriți mai mult spațiu, atingeți tasta „Esc” pentru a închide caseta de căutare pe care ați deschis-o înainte. Ar trebui să vedeți codul HTML pentru această pagină - acum știți cum se face cârnații.

În colțul din stânga sus al panoului dezvoltatorului, veți vedea o pictogramă a mouse-ului deasupra unui pătrat. Faceți clic pe acesta, apoi puteți selecta orice element din pagină pe care doriți să îl modificați. Deci, să schimbăm câteva lucruri!

Schimbați textul pe o pagină web

Ați dorit vreodată să modificați textul de pe un site - poate pentru a vedea cum ar arăta un nou slogan pe pagina dvs. de pornire sau pentru a vă scoate adresa de e-mail dintr-o captură de ecran Gmail? Acum poti.

Faceți clic pe pictograma „mouse-ul deasupra unui pătrat”, apoi faceți clic pe orice text de pe pagină - poate pe sloganul de pe pagina de pornire Zapier. În panoul dvs. Instrumente pentru dezvoltatori, veți vedea o linie de text cu o evidențiere albastră care arată astfel:

Faceți dublu clic pe textul „Conectați-vă aplicațiile” care este evidențiat în albastru în panoul Instrumente pentru dezvoltatori și se va transforma într-un câmp text editabil.

Tastați orice vă place în acest câmp de text („Auri este un geniu” ar trebui să funcționeze bine) și apăsați Enter. Voila! Tocmai ați schimbat textul de pe pagina web.

Reîmprospătați pagina și totul va reveni la normal.

Distracţie? Să schimbăm câteva lucruri pe această pagină.

Panoul dvs. Instrumente pentru dezvoltatori se reîncarcă cu pagina, dar să o închidem. Apăsați „X” în colțul din dreapta sus al paginii.

Misto. Acum îl vom deschide înapoi - chiar la textul pe care dorim să îl edităm. Tot ce trebuie să faceți este să faceți clic dreapta pe partea de pagină pe care doriți să o modificați, apoi faceți clic pe linkul Inspectare sau Inspectare element care apare în partea de jos a meniului cu clic dreapta.

Când se deschide panoul dvs. Instrumente pentru dezvoltatori, acesta ar trebui să evidențieze în mod automat acea propoziție. Destul de îngrijit, nu? Lucrurile mici contează.

Acum că am selectat sloganul de pe site-ul Zapier, să schimbăm cum arată.

Schimbați culoarea și fontul elementelor

În partea dreaptă a acestei propoziții în panoul Instrumente pentru dezvoltatori, veți vedea un sub-panou cu 3 file suplimentare: Stiluri, Calculate și Ascultători de evenimente. Fiecare vă permite să schimbați aspectul acestei propoziții pe pagină. Să începem cu fila „Stiluri”.

Este posibil să observați că unele lucruri sunt tăiate în fila „Stiluri”. Aceasta înseamnă că aceste stiluri nu sunt active pentru elementul pe care le-am selectat, astfel încât modificarea acestor valori nu va avea niciun efect. Le putem ignora în scopurile noastre.

Să încercăm să schimbăm ceva. Faceți din nou clic pe pictograma săgeată din partea de sus a Inspectați elementul și selectați textul chiar sub butonul „Înscrieți-vă” de pe pagină. Găsiți „text-align” în fila „Styles” (poate fi necesar să derulați puțin pentru a găsi acest lucru).

În acest moment, este setat la „centru”, dar faceți dublu clic pe „centru” și tastați left . Acest lucru face ca textul să fie aliniat la stânga pe pagină.

Acum să ne jucăm cu culoarea. Utilizați pictograma mouse-ului în Inspectare element pentru a selecta butonul de această dată, apoi în fila Stiluri găsiți această linie:

Și faceți dublu clic pe „# ff4a00”. Tastați #4199ad (nu uitați #) și apăsați pe "enter".

Tocmai am schimbat culoarea butonului nostru din portocaliu în albastru! Acum să încercăm ceva cu adevărat mișto.

Schimbați statele elementelor

Doriți să vedeți cum va arăta un buton sau un link odată ce cineva trece deasupra sau face clic pe el? Elementul de inspecție Chrome poate arăta și acest lucru cu instrumentele sale de stare a elementelor de forță. Puteți vedea cum va arăta elementul odată ce un vizitator trece deasupra elementului (starea de deplasare), selectează elementul (starea de focalizare) și / sau a făcut clic pe linkul respectiv (starea vizitată).

Să încercăm asta. Asigurați-vă că ați selectat butonul de înscriere de pe pagina principală Zapier. Apoi, faceți clic dreapta pe acel cod din fila Elemente și selectați :active: în acel meniu.

Aceasta va schimba butonul în gri, pe care îl afișează site-ul lui Zapier în timp ce faceți clic pe buton.

Acum schimbați valoarea culorii fundalului la #FF4A00 și ar trebui să vedeți instantaneu schimbarea culorii butonului.

Încercați să experimentați — modificați :hover: color, apoi debifați :hover: în meniul cu clic dreapta și trageți mouse-ul peste buton pentru a vedea noua culoare a butonului.

Schimbați imaginile

Puteți schimba cu ușurință imagini pe o pagină web și cu Inspect Element. Să schimbăm fundalul supereroului de pe site-ul Zapier cu această fotografie dramatică a unei rachete solare de la NASA.

Mai întâi, copiați și lipiți acest link către imagine:

https://c1.staticflickr.com/9/8314/7931831962_7652860bae_b.jpg

Acum, deschideți Inspectarea elementului pe fundalul paginii de pornire Zapier și asigurați-vă că ați selectat linia de signup-hero în cod. Faceți dublu clic pe linkul URL de fundal din panoul „Stiluri” și lipiți linkul pe care l-ați copiat mai sus.

Apăsați „Enter” și vedeți imediat diferența.

Editarea textului este la îndemână, schimbarea imaginilor este distractivă, iar schimbarea culorilor și a stilurilor ar putea să vă ajute să faceți mașini rapide asupra modificărilor pe care doriți să le faceți site-ului dvs. Dar cum va arăta noul slogan și designul butoanelor pe mobil?

Aici intervine Emularea - este locul în care tot ceea ce am analizat până acum poate fi aplicat și mai mult. Să vedem cum.

Testați un site pe orice dispozitiv cu emulare

Totul trebuie să fie receptiv astăzi. Site-urile web nu mai sunt vizualizate doar pe computere - sunt mai probabil ca niciodată să fie vizualizate pe un telefon, tabletă, televizor sau aproape orice alt tip de ecran. Acest lucru trebuie întotdeauna avut în vedere atunci când creați conținut și modele noi.

Emularea este un instrument excelent pentru a aproxima modul în care vor arăta site-urile web utilizatorilor de pe diferite dispozitive, browsere și chiar locații. Deși acest lucru nu înlocuiește testarea efectivă pe o varietate de dispozitive și browsere, este un început minunat.

În panoul Instrumente pentru dezvoltatori, veți observa o mică pictogramă a telefonului în colțul din stânga sus. Apasă-l. Acest lucru ar trebui să schimbe pagina într-o pagină mică, în stilul telefonului, cu un meniu în partea de sus pentru a schimba dimensiunea.

Redimensionați browserul mic pentru a vedea cum arată lucrurile dacă navigați pe o tabletă, telefon sau chiar pe un ecran mai mic. Sau faceți clic pe meniul din partea de sus pentru a selecta dimensiunile implicite ale dispozitivului, cum ar fi iPad Pro sau iPhone 8 Plus continuați și selectați-l pe acesta din urmă.

Ecranul paginii web ar trebui să se micșoreze la dimensiunea unui iPhone 8 Plus și puteți mări puțin făcând clic pe pictograma + de lângă numărul din partea dreaptă sus a grilei - așa ar arăta site-ul dacă cineva ar mări mobil.

Mergeți mai departe măriți vizualizarea trăgând marginea dreaptă a emulației paginii web spre dreapta. Vezi ce se intampla? Nu mai suntem în vizualizarea iPhone 8 Plus. Tragerea ecranului de-a lungul grilei vă permite să vedeți cum se va modifica pagina web pe măsură ce dimensiunea ecranului se schimbă, dar vizualizarea dvs. nu va mai reflecta modelul de dispozitiv pe care l-ați ales anterior.

Să ne întoarcem la vizualizarea iPhone 8 Plus selectând din nou în lista derulantă a modelului. În dreptul listei derulante se află cuvântul „Portret”. După cum probabil ați ghicit, acest lucru vă permite să comutați între vizualizarea peisaj și vizualizarea orizontală.

Acum, putem vedea cum ar arăta această postare dacă ați citi-o pe un iPhone 8 Plus. Simțiți-vă liber să vă jucați cu celelalte dispozitive pentru a vedea cum se schimbă această pagină web și rezoluția ecranului. Toate celelalte instrumente pentru dezvoltatori pe care le-am trecut până acum vor reacționa, de asemenea, la vizualizarea dispozitivului. De exemplu, selectați din nou textul sloganului lui Zapier.

În vizualizarea iPhone 8 Plus, putem vedea că acest text este 2em, în timp ce în vizualizarea implicită de pe computer, este 3em.

„Em” este o unitate de dimensiune a fontului care vă permite să modificați automat dimensiunea textului în raport cu textul din jur. De exemplu, să presupunem că avem un utilizator cu setări mari de fonturi personalizate în browserul lor. Dacă setați dimensiunea fontului paragrafului la 14 px, fontul dvs. va fi întotdeauna de 14 px pentru acel utilizator, indiferent de ce. Cu toate acestea, dacă setați dimensiunea fontului paragrafului la 1em, browserul utilizatorului dvs. va utiliza această unitate pentru a vă scala textul la setările mari ale utilizatorului. Telefoanele și tabletele fac acest lucru pentru a mări textul frumos.

Acum să trecem la vizualizarea Apple iPad și să selectăm antetul „testare pe dispozitive” de mai sus. De data aceasta, dimensiunea fontului este 3em. Dimensiunea fontului s-a modificat în funcție de vizualizarea dispozitivului, înapoi la dimensiunea implicită pe care ar folosi-o pe computer, datorită ecranului mai mare al tabletei.

Emulați senzorii dispozitivului mobil

Este posibil să fi observat că mouse-ul dvs. apare acum ca un mic cerc pe pagina web. Acest lucru vă permite să interacționați cu pagina ca și cum ați fi pe dispozitivul dvs. mobil. Dacă faceți clic în timp ce trageți pagina în jos, aceasta nu evidențiază textul așa cum ar fi în mod normal în browserul dvs. - trage ecranul în jos, așa cum ați fi pe un dispozitiv cu ecran tactil. Folosind această vizualizare, puteți vedea cât de mari sunt zonele tactile pe o pagină web. Aceasta înseamnă că puteți vedea ce butoane, pictograme, link-uri sau alte elemente sunt ușor de atins cu degetul.

Puteți chiar să faceți browserul să acționeze ca un telefon. Apăsați tasta „Esc” pentru a deschide din nou panoul de căutare din Inspectarea elementului și de această dată faceți clic pe meniul cu 3 puncte din partea stângă pentru un meniu de opțiuni. Selectați senzori pentru a obține trei instrumente noi: Geolocalizare, orientare și atingere.

Atingerea vă permite să activați sau să dezactivați selectorul de cercuri implicit, care acționează mai mult ca un deget decât un cursor normal al mouse-ului. Orientarea vă permite să interacționați cu site-uri web sensibile la mișcare, cum ar fi jocuri online, care vă permit să mutați lucrurile prin mutarea telefonului. Iar Geolocalizarea vă permite să vă prefaceți că vă aflați într-o altă locație.

Să încercăm să vizualizăm acest site de la sediul central Google în Mountain View, CA.

Bifați caseta de lângă „Emulați coordonatele de geolocalizare” și introduceți valoarea 37 în câmpul de text Lat = și 122 în câmpul de text Lon = . Apăsați Enter pe tastatură.

Nimic nu se schimbă, nu?

Acest lucru se datorează faptului că pe această pagină nu există conținut care să se schimbe în funcție de locația dvs. Dacă modificați coordonatele de pe un site precum Groupon.com care utilizează locația dvs. pentru a afișa conținut localizat, veți obține rezultate diferite. Accesați Google.com într-o altă locație și probabil veți vedea o nouă siglă Google pentru o vacanță în altă țară sau cel puțin veți obține rezultatele într-o altă limbă.

Emularea este o modalitate excelentă de a te pune în locul utilizatorului tău și de a lua în considerare ceea ce poate vedea utilizatorul pe pagina ta web - și este un mod distractiv de a explora internetul internațional.

Emulează rețelele mobile

De asemenea, puteți vedea cum este să răsfoiți un site pe diferite rețele, poate pentru a vedea dacă site-ul dvs. se va încărca, chiar dacă utilizatorii dvs. se află într-o rețea 3G mai lentă.

Pentru a încerca, faceți clic din nou pe butonul cu trei cercuri din stânga filei de căutare Inspectare element și selectați „Condiții de rețea”. Acolo, puteți alege dintre 3G rapid sau lent, sau offline pentru a vedea cum funcționează pagina fără internet. Sau faceți clic pe Adăugare ... pentru a include testarea dvs. (poate adăugați 56Kbps pentru a testa internetul dial-up). Acum, reîncărcați pagina și veți vedea cât timp ar dura până când site-ul se va încărca pe o conexiune lentă și cum arată site-ul în timpul încărcării. Acest lucru va arăta de ce ar trebui să vă îmbunătățiți site-ul pentru a încărca mai repede pe conexiuni lente.

De asemenea, vă puteți schimba agentul de utilizator - debifați „Selectați automat” lângă „Agent de utilizator” și selectați „Internet Explorer 7”, probabil pentru a vedea dacă site-ul își modifică redarea pentru browsere mai vechi. Acesta este, de asemenea, un hack la îndemână pentru a face încărcarea paginilor web, chiar dacă acestea susțin că funcționează doar într-un browser diferit, cum ar fi Internet Explorer.

Provocări

Să încheiem cu câteva provocări. Du-te și arată-ne ce ai învățat!

1. Schimbați titlurile de pe CNN.com și trimiteți-ne pe Twitter o captură de ecran a titlului articolului dvs. la modă.

2. Duplicați-vă site-ul web preferat folosind „Vizualizați sursa” și amestecați cu codul HTML pentru a-l face al dvs.

3. Vedeți cum se redă site - ul dvs. web pe un dispozitiv mobil și arătați dezvoltatorului dvs. ce se poate face mai bine prin remediere personală!

Echipa de marketing a echipei Zapier se bazează pe Inspect Element pentru a modifica informațiile private din capturile de ecran din recenziile aplicației noastre, în timp ce echipa noastră de design le folosește pentru a face modificări și pentru a vedea cum ar arăta lucrurile pe diferite ecrane.

Cum folosiți Inspect Element? Ne-ar plăcea să vă auzim poveștile în comentariile de mai jos!

Acest tutorial a fost publicat inițial la 5 ianuarie 2015, apoi a fost actualizat și republicat la 6 iunie 2017 și 25 ianuarie 2018 cu capturi de ecran și pași de la cea mai recentă versiune de Google Chrome.