Dezvoltatorii de browsere au avut grijă de comoditatea celor care creează site-uri care se deschid în aceleași browsere, și anume webmasteri. Au adăugat instrumente pentru dezvoltatori la funcțiile standard, cu care puteți deschide cu ușurință și vizualizați codul sursă al paginii site-ului în browser: HTML, CSS, JavaScript (JS), obțineți diverse date utile despre structura site-ului, efectuați analiza tehnică a acestuia. În general, pentru a vedea o mulțime de lucruri utile.
Desigur, aceste instrumente sunt folosite nu numai de creatorii de site-uri pentru muncă, ci și de utilizatorii obișnuiți care pot vedea diverse date utile cu codul sursă.
În acest articol, veți învăța cum să vizualizați codul sursă al unei pagini de site într-un browser (cum să deschideți codul de site HTML, CSS, JavaScript).
Cum se deschide codul sursă al unei pagini într-un browser
Există două moduri de a deschide codul sursă al unei pagini web într-un browser:
- Utilizarea tastelor rapide;
- Deschideți din meniul contextual.
Ctrl + U- o combinație de taste rapide pentru a vizualiza codul sursă al întregii pagini a site-ului într-o fereastră nouă separată. Standard pentru toate browserele: Google Chrome, Opera, Mozilla Firefox, browser Yandex, IE.
De asemenea, puteți introduce instrumentele de dezvoltare după cum urmează:
Pentru a găsi rapid codul, cuvântul sau textul necesar pe pagină, puteți utiliza standardul de combinație de taste rapide de căutare pentru toate browserele: Ctrl + G.
Instrucțiuni video:
Vizualizați codul articolului | explora elementul | inspectați un articol
Dacă dintr-o dată trebuie să vizualizați nu întregul cod sursă, ci să afișați doar o parte separată a acestuia, o anumită secțiune de pe pagină, atunci instrumentul anterior nu va funcționa. Pentru a face acest lucru, există o altă funcție în instrumentele pentru dezvoltatori, care va fi discutată mai jos.
Cum să vizualizați codul unui element pe o pagină:
În plus, puteți utiliza comenzile rapide de la tastatură pentru a accesa rapid inspecția elementelor.
Taste rapide (butoane):
Google Chrome: Ctrl + Shift + I și Ctrl + Shift + C
Opera: Ctrl + Shift + I și Ctrl + Shift + C
Mozilla Firefox: Ctrl + Shift + I și Ctrl + Shift + C
Browser Yandex: Ctrl + Shift + I și Ctrl + Shift + C
După acțiunile întreprinse, codul sursă al paginii web se va deschide în aceeași fereastră de browser:
Tot codul HTML va fi în coloana mare din stânga. Și stilurile CSS sunt în dreapta.
Avantajul acestei metode, desigur, este că utilizatorul are posibilitatea de a schimba codul sursă, de a edita stiluri. Adică poți edita stilurile de pe site și vezi cum va arăta cu anumite stiluri, fără a fi nevoie să faci imediat modificări la fișierele care se află pe serverele de găzduire. Pentru a modifica sau adăuga codul programului, trebuie să faceți dublu clic pe fragmentul sau zona dorită. Desigur, remedierea codului de browser nu va fi aplicată serverelor de găzduire. Prin urmare, în viitor, în orice caz, va trebui să copiați acest cod și să-l scrieți în fișiere.
Acest tutorial video detaliază și vă arată cum să lucrați cu instrumentele pentru dezvoltatori:
La fel, online, chiar în browser, puteți vizualiza codul sursă al paginii site-ului, puteți obține date de bază despre codul HTML și CSS, le puteți modifica și copia, fără a fi nevoie să descărcați fișierele acestui site pe computer.
Apropo, utilizatorii de internet neexperimentați care au schimbat codul paginii și se așteaptă să fie salvat vor fi dezamăgiți. La urma urmei, după reîmprospătarea paginii, toate modificările de pe aceasta vor dispărea. Acest lucru nu este suficient pentru a pirata site-ul 🙂
Cum să vizualizați codul sursă pe un telefon Android
De asemenea, aș dori să remarc că instrumentele pentru dezvoltatori sunt disponibile nu numai în versiunea desktop a browserelor, adică pe computere și laptopuri. Pe telefoane și tablete (Android, IOS), puteți vizualiza și codul sursă.
Pentru a face acest lucru, adăugați prefixul sursă de vizualizare la adresa URL a paginii inspectate:
De exemplu:
vizualizare-sursa: https: // site / turbo-rezhim-opera /
1 vot
O zi bună, dragi cititori ai blogului meu. Se întâmplă să găsești o caracteristică frumoasă pe site și întrebarea începe să chinuie cum a obținut creatorul un efect atât de interesant.
Se pare că găsirea răspunsului este destul de simplă. Și dacă aveți anumite abilități, atunci puteți colecta o mulțime de astfel de jetoane și puteți crea propriul site unic într-un timp scurt.
Astăzi vom vorbi despre cum să deschideți codul unei pagini, un anumit element și să învățăm cum să folosiți această abilitate în avantajul dvs.
Cunoștințe de bază ale codului
Site-ul meu este destinat începătorilor și mai întâi aș dori să vă povestesc pe scurt despre site-uri și cod în general.
Pentru a desena o imagine, apoi tăiați-o în părți mici, scrieți cod, datorită căruia browserul va colecta din nou toate elementele într-un singur întreg. Totul pare foarte complicat? Deloc și nu ar trebui să te întristezi din cauza asta.
Așa sunt create site-urile web de calitate. Dacă vrei - implică-te în această afacere și studiază, nu există dorință - nimeni nu te poate forța.
Pot să spun un singur lucru... nimic nu este mai plăcut decât să vezi cum cuvintele de neînțeles scrise de tine se transformă într-un singur întreg și prind viață: linkurile funcționează, butoanele se mișcă, imaginile se mișcă, textul se târăște. Cred că știu cum s-a simțit Victor Frankenstein.
Când începi să înțelegi limbajul secret și vezi că totul este de fapt mult mai simplu decât părea inițial, nu poți să nu crezi în propriile tale forțe și capacitățile creierului. Este foarte misto.
Cum sunt realizate site-urile? În mod ideal, în primul rând. Doar face o poză. De exemplu, așa cum se arată în imaginea de mai jos. În timp ce aceasta este doar o imagine, o fotografie. Niciun link nu funcționează, când dați clic nu mergeți nicăieri, nu se efectuează nicio căutare.
Conform acestei imagini. Aruncă o privire la captura de ecran de mai jos. Ai putea crede că acesta este un set ridicol și foarte complex de simboluri. De fapt, totul nu este atât de dificil, există un anumit algoritm.
Există doar aproximativ 150 de etichete și fiecare dintre ele este responsabilă pentru o anumită acțiune: link, transfer, bold, culoare, titlu și așa mai departe. Nu este atât de greu să le înțelegi dacă există o dorință și nu te deranjează timpul.
Cu cunoașterea acestor atribute, aproape orice sarcină poate fi rezolvată. Iată doar modalități de a atinge obiectivul, fiecare dezvoltator își găsește pe al lui.
Creatorii cu experiență văd imediat cum să obțină rezultatul, în timp ce alții trebuie să gândească, să caute un răspuns în articole sau în codul sursă al concurenților. Ei doar iau partea de care au nevoie de pe un site terță parte și editează singuri. Acest lucru scurtează semnificativ procesul de lucru.
Mai târziu, vă voi arăta un exemplu concret.
Vedeți codul
Deci, permiteți-mi mai întâi să vă arăt cum să procedați dacă trebuie să învățați codul html al altcuiva. Apoi vom arunca o privire mai atentă asupra tuturor celorlalte probleme.
Cel mai bun mod
Metoda pe care o voi descrie mai întâi este puțin dificilă pentru începători, dar, ca introducere, va funcționa, citiți mai departe. Deschideți pagina și faceți clic pe butonul din dreapta al mouse-ului. Selectați elementul „Salvați ca...”
Salvați întreaga pagină web. După cum puteți vedea în captură de ecran, am descărcat deja totul în avans. Avem două dosare aici.
Tot ce ai nevoie este aici. Fiecare articol. Dacă înțelegeți acest lucru, puteți obține rapid tot ce aveți nevoie. Dar, o astfel de sarcină devine din ce în ce mai imposibilă. Descărcarea nu este în curs. Ce să faci dacă este interzisă copierea paginii?
Acesta este Google Chrome
După cum probabil ați observat deja, eu folosesc cel mai adesea Google Chrome și să găsesc codul altcuiva în acest browser este la fel de ușor ca decojirea perelor. Ca în principiu, și în oricare altul. Schema nu numai că va fi similară, ci și identică. Deschideți pagina, al cărei cod vrem să aflăm și faceți clic oriunde cu butonul din dreapta al mouse-ului. În fereastra care apare, faceți clic pe „Vizualizare codul paginii”.
O foaie de cod se va deschide într-o fereastră nouă, ceea ce este destul de greu de înțeles pentru un începător. Dar, nu vă alarmați din timp.
Dacă trebuie să cunoașteți codul unui singur element, treceți cu mouse-ul peste el și faceți clic dreapta. Selectăm o altă funcție a chrome: „Vizualizați codul elementului”.
De exemplu, m-ar putea interesa modul în care este realizat logo-ul, folosind o imagine sau un limbaj de programare? La urma urmei, puteți desena un pătrat folosind css. Mulți experți recomandă să codificați cât mai multe informații posibil. Cum funcționează pe site-uri populare?
Așa că au apărut informațiile necesare. Sus html, jos css. Acestea sunt două limbi. Primul este responsabil pentru componenta text, iar al doilea pentru design. Dacă nu exista css, atunci ar trebui să prescrieți de fiecare dată culoarea, dimensiunea fontului. Pentru fiecare pagină, este o perioadă foarte lungă. Dar dacă nu ar exista html, atunci nu am avea texte. Grozav explicat, dar, în general, totul este așa.
Apropo, dacă sunteți interesat de cum funcționează aici, puteți vedea linkul către poza de mai jos. Iată răspunsul tău.
Mozilla Firefox
Dacă vă place să lucrați în muf, atunci totul va fi exact la fel. Deschideți pagina și faceți clic pe butonul din dreapta al mouse-ului. „Codul sursă al paginii” dacă doriți să vedeți întregul cod în întregime.
Când treceți cu mouse-ul peste orice element, devine posibil să deschideți codul acestuia.
Aici, datele sunt afișate în partea de jos a ecranului, dar în rest totul este exact la fel.
browser Yandex
În browserul Yandex, totul este exact la fel ca în cele două versiuni anterioare, deschideți pagina, faceți clic dreapta, vedeți codul paginii.
Treceți cursorul peste un element dacă vrem să aflăm exact codul acestuia.
Totul este afișat aici în același mod ca în Chrome.
Operă
Și în sfârșit, Opera.
Apropo, poate ați observat că nu este necesar să folosiți un mouse. Există o comandă rapidă de la tastatură pentru a deschide codul și este aceeași pentru toate browserele: CTRL + U.
Pentru articole: Ctrl + Shift + C.
Așa arată rezultatul.
Va fi interesant pentru începători
Acum urmăriți cum funcționează totul. Găsești un site și îți place foarte mult un element. De exemplu, acesta. Știți deja cum să deschideți codul elementului.
Acum copiați-l.
Folosesc, lipim acest cod într-un fișier html nou, în eticheta body (body în engleză).
Acum să vedem cum arată totul în browser.
Gata. Pentru ca textul să fie aliniat la margini și să dobândească o culoare verzuie, trebuie să conectați css la acest document și să copiați un alt cod de pe site-ul de pe care l-am tastat pe acesta.
Acum nu voi face asta. Este nevoie de mai mult timp, atât al meu, cât și al tău. Cred că voi descrie toate detaliile în viitoarele mele publicații. Abonează-te la newsletter și fii primul care află despre articol.
Dacă nu suportați și doriți să aflați mai multe despre html și css chiar acum, atunci vă pot recomanda în mod tradițional cursuri de formare gratuite.
Iată 33 de tutoriale pentru a te face să stăpânești html - „Curs HTML gratuit” .
Și iată informațiile complete despre css - „Curs CSS gratuit (45 de tutoriale video!)” .
Acum știi puțin mai mult. Îți doresc mult succes în demersurile tale. Pana data viitoare!
Îndemânare schimba codul sursa al paginii Este o abilitate utilă pentru un utilizator avansat de internet. Prin înlocuirea codului HTML, puteți schimba pagina web deschisă după cum doriți. În acest articol vă vom spune, cum se schimbă codul paginiiîn Google Chrome. Cu toate acestea, în alte browsere totul se face la fel, așa că nu ar trebui să existe dificultăți.
Care este codul HTML al unei pagini?
Fiecare pagină pe care o deschideți într-un browser are propriul său limbaj de marcare HTML. Acest cod este etichete și text. Etichetele sunt un fel de etichete care spun browserului cum să afișeze o anumită parte a site-ului. Textul este conținutul paginii, ceea ce vede utilizatorul. De asemenea, stilurile CSS pot fi conectate la pagină, care stabilesc aspectul elementelor paginii. La schimba codul sursa al site-ului Nu trebuie să cunoașteți HTML și CSS în profunzime și în curând le veți vedea singur.
De ce să schimbi o pagină web?
Puteți modifica datele de pe site, puteți schimba textul mesajului, puteți face o captură de ecran falsă. Rețineți că toate modificările sunt vizibile numai pentru dvs. și când reîncărcați pagina, acestea vor dispărea. De asemenea, datele modificate nu vor fi reale. De exemplu, dacă nu am 10 dolari și mă schimb la 100, atunci nu voi mai avea bani. Aceasta este doar afișarea paginii de către browser. Exemplu:
După:
Ca exemplu, voi lua același site și voi modifica anunțul anterior al articolului „” Deschiderea paginii de start în Google Chrome. Faceți clic dreapta pe elementul pe care vreau să-l schimb, de exemplu, titlul anunțului și selectați „Vizualizare cod”.
În fereastra care se deschide, accesați fila Elemente și vedeți codul HTML al paginii. În el trebuie să găsiți textul care ne interesează. (subliniat cu rosu)
Acum voi șterge textul vechi și voi introduce pe cel nou.
Atât, titlul anunțului a fost schimbat. Acum voi schimba anunțul în sine, etichetele și titlul.
Puteți insera o altă imagine schimbând atributul src din eticheta img.
Așadar, astăzi ne vom uita la câteva instrumente utile pentru un webmaster care ușurează viața pentru aspectul site-ului web. Să începem cu consola pentru webmasteri din Google Chrome. Și să trecem peste întrebările care apar cel mai adesea de la web-master în timpul aspectului site-ului.
Pentru a ajunge la consolă, deschideți site-ul dvs. în Google Chrome, faceți clic dreapta oriunde pe pagina web și selectați Vizualizare codul paginii din meniul derulant contextual sau pe un anumit element pentru cercetare selectând Vizualizare codul element " .
În partea de sus, veți avea mai multe file listate. Astăzi vom vorbi despre fila „Elemente”. , care prezintă elementele unei pagini web cu evidențierea etichetelor, proprietăților, evidențierea imbricației elementelor, reprezentând ierarhia unui element în arborele DOM (hint în partea de jos, de la părintele rădăcină până la cel explorat curent), capacitatea de a editați elemente, o listă a proprietăților lor, luați în considerare căutarea după elemente și să ne familiarizăm cu vizualizarea stilurilor css asociate elementelor etc.
Cum pot vedea toate stilurile care sunt asociate cu un anumit element? Care se aplică acum? În ce fișiere se află?
Deci, nimic nu poate fi mai ușor! Deschidem browserul Google Chrome, deschidem site-ul nostru - sursa întrebărilor, facem clic dreapta pe elementul dorit, dacă acesta este vizibil în contextul paginii și selectăm „Vizualizare cod element” din meniul contextual.
În partea de jos, avem o consolă cu o filă evidențiată în stânga „Elemente” și toate stilurile asociate elementului din dreapta, unde: Stiluri calculate- acestea sunt stiluri generale „rezumat” care au fost atribuite unui element din regulile css și din setările browserului utilizatorului (mediul său), iar fila este restrânsă.
Dar ne interesează fila „Stiluri”, extinsă sub ea, în care toate stilurile atribuite unui element sunt listate unul câte unul, precum și fișierele în care aceste reguli sunt indicate pentru acest element prin tipul, id-ul, clasa sa, nume, proprietate, atribut etc... În același timp, dacă regula css este tăiată, atunci a fost redefinită mai devreme/mai târziu (ceea ce face ușor de urmărit care dintre regulile css are prioritate și se aplică în acest caz elementului).
Sub consolă este o linie care arată un element din ierarhia documentului, vă permite cu ușurință să vizualizați întreaga listă de elemente părinte de la rădăcină la elementul selectat. Ceva de genul pesmeturilor de pâine.
Eticheta HTML nu este vizibilă în contextul paginii? Sau trebuie să găsiți toate etichetele, de exemplu, după o anumită clasă, nume, proprietate, tip?
Deschideți site-ul în Google Chrome, faceți clic dreapta, deschideți meniul contextual, selectați « Vizualizați codul paginii » ... Apăsați combinația de taste „CTRL + F” în același timp, introduceți expresia de care avem nevoie ( De exemplu: clasa = ”umplutura ") și navigați prin lista de rezultate găsite, pe parcurs căutând toate stilurile asociate elementelor dorite din partea dreaptă a paginii.
Cum să vizualizați codul html al elementului (ele) încărcate dinamic (de exemplu: de Ajax)
Asteptam ca pagina sa se incarce in Google Chrome. Efectuăm acțiunile necesare pentru ca Ajax-ul să funcționeze. Faceți clic dreapta pe datele încărcate, selectați „Vizualizare cod element” din meniul contextual, examinați rezultatul în consolă din fila „Elemente” din stânga.
Vedeți modificările stilurilor CSS în timp real
Apropo, este, de asemenea, convenabil să observați, dacă este necesar, ce stiluri sunt atribuite unui element din mers, de exemplu, atunci când derulați galeria și alte evenimente prin cronometru. Toate stilurile atribuite de javascript în timp real vor fi afișate în proprietate stil elementul selectat în fereastra din fila „Elemente”.
Previzualizare live a efectului regulilor css asupra prezentării etichetelor html
Google Chrome oferă o consolă interactivă pentru stiluri CSS. Și aceasta înseamnă că nu puteți doar să vizualizați ce stiluri sunt aplicate elementului, ci și să mutați cursorul mouse-ului peste CSS specificat din proprietăți, să îl activați folosind bifa pop-up din dreapta sau să îl dezactivați prin debifarea steagului. și vizualizarea rezultatului rezultat pe pagină.
Modificarea structurii de prezentare a elementelor html din mers (chiar în browser)
Deci, am învățat deja cum să explorăm structura unui document web în Google Chrome, acum ne vom uita pe scurt la editarea elementelor din mers. Mergem la consolă în orice mod convenabil pentru noi. Găsim elementul necesar în fila „Elemente”, faceți clic dreapta pe el, apelând astfel meniul contextual pop-up:
- Adăugați un atribut- adaugă un atribut pentru elementul specificat. De îndată ce cursorul devine activ, începem să setăm proprietatea dorită. de exemplu: să scriem nume = ”itemImage”, care va fi adăugat imediat articolului nostru.
- Editați atributul- dacă faceți clic dreapta pe un atribut de element, articolul devine disponibil Editați | ×atribut... Faceți clic, editați.
Exemplu de utilizare: am uitat parola salvată sub asteriscuri în Google Chrome (dacă parola a fost salvată în acest browser). Faceți clic dreapta pe elementul cu o parolă, faceți clic pe „Vedeți codul articolului” , în consola din stânga în filă Elemente faceți clic pe tipul de atribut = ”parolă” cu butonul dreapta al mouse-ului, faceți clic stânga pe Editați | ×atribut, schimbarea atributului tip = ”parola " pe tip = ”text ", iar acum, în loc de asteriscuri, aceeași parolă este afișată sub formă de text.
- Editați | ×html- faceți clic dreapta pe un element din consolă Elemente, alege Editați | ×html, schimba codul dupa bunul plac.
- Copiela fel deHTML- copiați porțiunea HTML de care avem nevoie pentru cercetări ulterioare, să zicem, într-un bloc de note sau pentru alte scopuri în care trebuie să aplicăm exact același aspect. Economisim timp.
- CopieXPATH- copiează reprezentarea XPATH a structurii de la rădăcina elementului părinte în elementul selectat.
- Ștergenodul- dacă trebuie să eliminați elementul selectat curent și toți copiii acestuia din contextul paginii web și să vedeți rezultatul.
- Cuvântînfășura- va reda vizualizarea paginii web în contextul consolei Elemente mai lizibil.
În articolele următoare, vom continua analiza instrumentelor pentru webmaster și, în special, ne vom familiariza cu restul file ale instrumentelor pentru webmaster în Google Chrome, și luați în considerare, de asemenea, depanarea erorilor javascript utilizând browsere diferite
