Multă vreme, opțiunea „show page source code” a fost inutilă și neinteresantă pentru mine. Până acum, învățarea HTML la Codecademy și construirea propriilor mele site-uri nu a devenit noul meu hobby. Aici a apărut întrebarea: unde să găsești cazuri reale și să împrumuți soluții interesante pentru „pușculița” ta? Răspunsul a fost surprinzător de simplu, ca toți genii: vizualizați codul sursă al paginii în Google Chrome! Împărtășesc cu voi descoperirile mele modeste.
Ce este codul sursă al paginii
Dacă tu, ca și mine, abia faci primii pași în programarea HTML, nu va fi de prisos să știi care este codul sursă al unei pagini.
Codul sursă, cunoscut și sub numele de codul HTML al paginii, este text în limbajul Hyper Text Markup Language (HTML). Include conținutul real al paginii (text, tabele) și etichete. Acestea din urmă joacă rolul de instrucțiuni pentru browser: cum să afișeze conținutul, ce fel de formatare să folosești, unde să inserezi un hyperlink sau un fișier media. Ei bine, pentru noi, programatorii începători, codul sursă este cel mai bun teren de antrenament: găsim un site interesant și privim, salvăm, folosim fragmente de succes. Cum?
Cum să vizualizați codul sursă în pagina browserului Google Chrome
Găsiți pagina care vă place. De exemplu, m-a interesat designul meniului site-ului. Există trei moduri de a deschide codul sursă în browserul Google Chrome:
- Faceți clic pe pictogramă meniulîn colțul din dreapta sus al browserului și selectați „Mai multe instrumente”. Printre altele, există o opțiune pentru „Vizualizare cod sursă”. Sincer, folosesc rar această metodă: o mulțime de mișcări inutile. Se poate face și mai ușor.
- Apăsați combinația de taste Ctrl+U- deschide o nouă fereastră cu codul sursă;
- Pentru fanii meniului contextual: faceți clic dreapta pe pagină și selectați opțiunea „Vizualizare codul paginii”.
Ne-am descurcat sarcinii de a vizualiza codul HTML al paginii în browser. Trecem la cea mai interesantă etapă.
Cum să editați și să salvați codul sursă
Pentru a învăța cum să creați site-uri web, nu este suficient să citiți codul HTML al altcuiva. Trebuie să te joci cu el, să experimentezi, să faci modificări și să verifici rezultatul. Puteți chiar să începeți prin a compila câteva mostre de succes. Cum se editează și se salvează codul sursă?
Opțiunea 1. „Manual”
După ce am deschis codul sursă al paginii, apelăm meniul contextual și selectăm opțiunea „Salvare ca” și salvăm fișierul pe hard disk. Edităm fișierul în Notepad sau Notepad, salvăm modificările și deschidem prin browser. Rezultatele modificărilor noastre (reușite și nu atât de bune) se vor reflecta în fereastra browserului.
Opțiunea 2. Pentru profesioniști
Când „te joci” cu codul sursă în fiecare zi, procesul „salvare-deschidere-modificare-salvare-verificare” este obositor. Pentru mine, am găsit o soluție sub forma instalării unui plugin pentru Google Chrome - Firebug Lite. Vă permite să editați și să salvați codul sursă fără a părăsi fereastra browserului.
Este necesar să vedeți rapid toate modificările de pe site-ul în sine, fără a afecta fișierele și codul site-ului postat pe Internet. De exemplu, modificați schema de culori a unui bloc, mutați un element mutat etc.
Pentru a face acest lucru, mulți webmasteri folosesc servere locale Denwer sau OpenServer, rulând o copie completă a site-ului pe computerul lor. Această metodă este universală și potrivită pentru profesioniști, cu ea puteți verifica funcționarea diferitelor scripturi și plugin-uri, puteți experimenta modificarea designului și edita toate fișierele site-ului, iar după testare, puteți transfera modificările corespunzătoare direct pe site.
Pentru utilizatorii care sunt departe de arta webmaster, recomand folosirea unui browser în aceste scopuri. Deoarece folosesc Chrome, voi oferi instrucțiuni cu capturi de ecran pentru acest browser special. Prin analogie, puteți lucra cu Opera, Yandex.Browser, Mozilla Firefox și alte browsere, principiul instrumentelor lor este similar.
Instrucțiunea 1: cum să vizualizați întregul cod HTML al site-ului în browser
Deschideți pagina web necesară a site-ului dvs. Facem clic dreapta pe elementul dorit, va apărea un meniu derulant contextual al browserului cu comenzile disponibile:
Figura 1. Vizualizarea întregului cod HTML al unei pagini web în browserul Chrome
Important: Comenzile din meniul derulant pot diferi, de exemplu, pentru elementele active (linkuri, imagini, videoclipuri) și elementele inactive (text, fundal, div-uri):
Figura 2. Meniul derulant al browserului Chrome
Prin urmare, dacă nu găsiți comanda de care aveți nevoie, faceți clic dreapta în altă parte sau utilizați tastele rapide ale browserului.
Revenind la Figura 1, arată comanda necesară pentru a vizualiza întregul cod HTML al paginii web originale, se numește „ Vizualizați codul paginii". Facem clic pe comandă, se va deschide o nouă filă cu codul complet al paginii web originale, un mare plus pentru tot - vizualizarea este disponibilă cu evidențierea sintaxelor:
Figura 3. Fragment de cod pentru acest site
Acest instrument este foarte util pentru găsirea și editarea elementelor pe care le căutați.
Modalități alternative de a vizualiza toate codurile HTML ale unei pagini web
Pentru un acces mai rapid, puteți utiliza alte modalități de a apela acest instrument
- În Figura 1, vedem, de asemenea, că această comandă este disponibilă printr-o comandă rapidă de la tastatură. + ;
- Lipiți în bara de adrese a browserului vizualizare-sursă: site în loc de domeniul meu, lipiți adresa dvs.;
Ambele metode sunt universale și ar trebui să funcționeze în toate browserele.
La început, unora li se poate părea că acesta nu este deloc un instrument necesar, dar vizualizarea întregului cod HTML al unui site este excelentă pentru a găsi elementele necesare în cod, acestea pot fi linkuri, etichete, metaetichete, atribute și alte elemente.
Combinație de taste rapide +deschide caseta de căutare, în browserul Chrome apare în dreapta sus:
Figura 3. Căutare după codul site-ului
După ce faci o cerere la formularul de căutare, ecranul se va muta la primul element găsit, folosind săgețile te poți deplasa între ele și selectează pe cel de care ai nevoie:
Figura 4. Căutare după codul HTML al site-ului web
Instrucțiunea 2: Cum să vizualizați și să editați codul HTML și CSS al site-ului web în browserul Google Chrome
Acum partea cea mai importantă, în care vă voi arăta cum puteți edita codul HTML și CSS al site-ului în browser. apoi transferați modificările în browser.
Iată un instrument atât de util disponibil mereu în browser, experimentați cu alte comenzi care vă vor facilita editarea site-ului.
Dacă deschideți orice pagină web, aceasta va conține elemente tipice care nu se schimbă în funcție de tipul și direcția site-ului. Exemplul 4-1 arată codul pentru un document simplu care conține etichete de bază.
Exemplul 4.1. Codul sursă al paginii web
Exemplu de pagină web
antet
Primul paragraf.
Al doilea paragraf.
Copiați conținutul acestui exemplu și salvați-l în folderul c:\www\ ca example41.html. După aceea, lansați browserul și deschideți fișierul prin elementul de meniu Fișier > Deschideți fișier (Ctrl+O). În dialogul de selecție a documentului, specificați fișierul example41.html. Pagina web prezentată în fig. 4.1.
Orez. 4.1. Rezultatul rulării exemplului
Elementare scopul de a indica tipul documentului curent - DTD (definiție tip document, descriere tip document). Acest lucru este necesar pentru ca browserul să înțeleagă cum să interpreteze pagina web curentă, deoarece HTML există în mai multe versiuni, în plus, există XHTML (EXtensible HyperText Markup Language, limbaj de marcare hipertext extins), similar cu HTML, dar diferit ca sintaxă. Pentru ca browserul „să nu se încurce” și să înțeleagă în funcție de ce standard să afișeze pagina web, este necesar să se stabilească în prima linie de cod
.
Există mai multe tipuri, ele diferă în funcție de versiunea HTML pe care o vizează. În tabel. 4.1. sunt date principalele tipuri de documente cu descrierea lor.
Tab. 4.1. DTD-uri valide | DOCTYPE |
Descriere |
|---|
| HTML 4.01
|
|
|
Sintaxă HTML strictă. |
|
|
Sintaxă HTML tranzițională. |
|
|
Cadrele sunt folosite într-un document HTML. |
| HTML 5
|
|
|
Această versiune de HTML are un singur tip de document. |
| XHTML 1.0
|
|
|
Sintaxă XHTML strictă. |
|
|
Sintaxă XHTML de tranziție. |
|
|
Documentul este scris în XHTML și conține cadre. |
| XHTML 1.1
|
|
|
Dezvoltatorii XHTML 1.1 se așteaptă ca acesta să înlocuiască treptat HTML. După cum puteți vedea, această definiție nu are o împărțire în tipuri, deoarece sintaxa este aceeași și se supune unor reguli clare. |
Diferența dintre descrierile stricte și tranzitorii ale documentelor este abordarea diferită a scrierii codului documentului. HTML strict necesită respectarea strictă a specificațiilor HTML și nu iartă greșelile. HTML tranzițional este mai „liniștit” cu privire la unele defecte de cod, așa că acest tip este de preferat în anumite cazuri.
De exemplu, HTML și XHTML strict necesită eticheta
, dar în HTML tranzițional poate fi omis și nu specificat. În același timp, rețineți că browserul va afișa documentul în orice caz, indiferent dacă se potrivește sau nu cu sintaxa. O astfel de validare se realizează folosind un validator și este destinată în primul rând dezvoltatorilor să urmărească erorile dintr-un document.</p>
<p>În cele ce urmează, vom folosi în principal strictul<!DOCTYPE>, cu excepția cazurilor în care este specificat în mod expres. Acest lucru ne va permite să evităm greșelile comune și ne va învăța să scriem cod corect sintactic.</p>
<p>Este adesea posibil să găsiți cod HTML fără a utiliza niciunul<!DOCTYPE>, pagina web va fi în continuare afișată într-un astfel de caz. Cu toate acestea, se poate întâmpla ca același document să fie afișat diferit în browser în timpul utilizării<!DOCTYPE>si fara el. În plus, browserele pot afișa astfel de documente în felul lor, ca urmare, pagina se va „fărâmi”, adică. va fi afișat într-un mod complet diferit, așa cum este cerut de dezvoltator. Pentru a evita astfel de situații, adăugați întotdeauna<!DOCTYPE>până la începutul documentului.</p><p>Etichetă <html>definește începutul fișierului HTML, antetul este stocat în interiorul acestuia ( <head>) și corpul documentului ( <body>
).</p><p>Titlul documentului, așa cum se mai numește și blocul <head>, poate conține text și etichete, dar conținutul acestei secțiuni nu este afișat direct pe pagină, cu excepția containerului <title>
.</p><p>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</p><p>Etichetă <meta>este universal și adaugă o întreagă clasă de caracteristici, în special, cu ajutorul meta-etichetelor, așa cum se numește în general această etichetă, puteți schimba codarea paginii, puteți adăuga cuvinte cheie, descriere document și multe altele. Pentru ca browserul să înțeleagă că are de-a face cu codificarea UTF-8 (format de transformare Unicode, format de transformare Unicode) și se adaugă această linie.</p><p>
<title>Exemplu de pagină web
Etichetă
definește titlul unei pagini web, acesta este unul dintre elementele importante menite să rezolve multe probleme. În sistemul de operare Windows, textul titlului este afișat în colțul din stânga sus al ferestrei browserului (Fig. 4.2).</p>
<p><img src='https://i2.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy loading=lazy></p>
<p>Orez. 4.2. Vedere antet în browser</p>
<p>Etichetă <title>este obligatoriu și trebuie să fie prezent în codul documentului.</p><p>Asigurați-vă că adăugați o etichetă de închidere</head> pentru a indica faptul că blocul de titlu al documentului este complet.</p><p>Corpul documentului <body>este destinat plasării de etichete și conținutului paginii web.</p><p>
<h1>antet</h1>
</p><p>HTML oferă șase niveluri diferite de titluri de text care indică importanța relativă a secțiunii care urmează titlului. da, eticheta <h1>reprezintă cel mai important titlu de prim nivel și eticheta <h6>servește la desemnarea unui titlu de nivelul șase și este cel mai puțin semnificativ. În mod implicit, titlul de primul nivel este afișat cu cel mai mare font aldine, titlurile de nivelul următor sunt mai mici. Etichete <h1>...<h6>sunt elemente la nivel de bloc, ele încep întotdeauna pe o linie nouă, iar după ele apar alte elemente pe linia următoare. În plus, se adaugă un spațiu liber înainte și după titlu.</p><p>
<!-- Комментарий -->
</p><p>Un text poate fi ascuns pentru afișarea în browser, făcându-l un comentariu. Deși utilizatorul nu va vedea un astfel de text, acesta va fi totuși transmis în document, așa că, privind codul sursă, puteți găsi note ascunse.</p>
<p>Așadar, astăzi ne vom uita la câteva instrumente utile pentru vrăjitorul web, care ușurează viața atunci când amenajăm un site. Să începem cu consola pentru webmasteri din Google Chrome. Și să trecem peste întrebările care apar cel mai adesea de la webmaster în timpul aspectului site-ului.</p>
<p>Pentru a ajunge la consolă, deschideți site-ul în Google Chrome, faceți clic dreapta oriunde pe pagina web și alegeți „Vizualizare codul paginii” din meniul derulant contextual sau pe un anumit element de explorat selectând „Vizualizare cod”. . element”.</p>
<p>În partea de sus veți avea mai multe file listate. Astăzi vom vorbi despre fila „Elemente”. <b>,
</b> care prezintă elementele unei pagini web cu evidențierea etichetelor, proprietăților, imbricarea elementelor, reprezentarea ierarhiei elementelor în arborele DOM (hint în partea de jos, de la părintele rădăcină la cel curent examinat), posibilitatea de a edita elemente, o listă a proprietăților lor, luați în considerare căutarea după elemente și, de asemenea, Să ne familiarizăm cu vizualizarea stilurilor CSS asociate elementelor etc.</p>
<h3>Cum să vizualizați toate stilurile care sunt asociate cu un anumit element? Care este folosit acum? În ce fișiere sunt?</h3>
<p>Deci, nu este nimic mai ușor! Deschidem browserul Google Chrome, deschidem site-ul nostru - sursa întrebărilor, facem clic dreapta pe elementul dorit dacă este vizibil în contextul paginii și selectăm elementul „Vizualizare cod element” din meniul contextual.</p>
<p>În partea de jos, avem o consolă cu o filă evidențiată în stânga „Elemente”Și toate stilurile asociate cu elementul din dreapta, unde: <b>Stiluri calculate</b>- acestea sunt stiluri generale „rezumat” care au fost atribuite elementului din regulile css și setările browserului utilizatorului (mediul său), și în același timp fila este restrânsă.</p>
<p>Dar suntem interesați de fila „Stiluri” implementată sub ea, care listează pe rând toate stilurile alocate elementului, precum și fișierele în care aceste reguli sunt specificate pentru acest element prin tipul său, id, clasă, nume, proprietate, atribut, etc. În același timp, dacă regula css este tăiată, atunci a fost redefinită mai devreme/următorul (ceea ce face ușor de urmărit care dintre regulile css este o prioritate și este aplicată elementului în acest caz).</p>
<p>Sub consolă este o linie care arată elementul din ierarhia documentului, permițându-vă ușor să vizualizați întreaga listă de elemente părinte de la rădăcină la elementul selectat. Ceva de genul pesmetului.</p>
<h3>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?</h3>
<p>Deschideți site-ul în Google Chrome, faceți clic dreapta, apelați meniul contextual, selectați <b>«
</b> Vizualizați codul paginii <b>»
</b>. Apăsați combinația de taste „CTRL + F” în același timp, introduceți expresia de care avem nevoie ( <b>de exemplu</b><i>:
</i><i>clasa="</i><i>umplutura"</i>) și treceți prin lista de rezultate găsite, cautând simultan toate stilurile asociate elementelor dorite din partea dreaptă a paginii.</p>
<h3>Cum să vizualizați codul html al elementului (elementelor) încărcate dinamic (de exemplu: de Ajax)</h3>
<p>Se așteaptă încărcarea paginii în Google Chrome. Efectuăm acțiunile necesare pentru ca Ajax să funcționeze. Facem clic dreapta pe datele încărcate, selectăm „View Element Code” în meniul contextual, examinăm rezultatul în consolă din fila „Elements” din stânga.</p>
<h3>Vedeți modificările stilului CSS în timp real</h3>
<p>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 prin galerie și alte evenimente cu temporizator. Toate stilurile atribuite prin javascript în timp real vor fi afișate în proprietate <b>stil</b> elementul selectat în fereastra din fila Elemente.</p>
<h3>Vedere interactivă a impactului regulilor css asupra prezentării etichetelor html</h3>
<p>Google Chrome oferă o consolă interactivă pentru stiluri CSS. Și aceasta înseamnă că nu numai că puteți vedea ce stiluri sunt aplicate elementului, ci și să mutați cursorul mouse-ului peste o anumită proprietate CSS, să o activați cu o bifă pop-up din dreapta sau să o dezactivați prin debifarea steagului și vizualizarea rezultatul rezultat pe pagină.</p>
<h3>Schimbăm structura prezentării elementelor html din mers (chiar în browser)</h3>
<p>Așadar, am învățat deja cum să explorăm structura unui document web în Google Chrome, acum să aruncăm o privire rapidă la editarea elementelor din mers. Mergem la consolă în orice mod convenabil pentru noi. Găsim elementul dorit în fila „Elemente”, faceți clic dreapta pe el, apelând astfel meniul contextual pop-up:</p>
<ul><li><b>Adăugați un atribut</b>- Adaugă un atribut la elementul specificat. De îndată ce cursorul devine activ, începem să setăm proprietatea dorită. <b>De exemplu</b>: Să scriem name="itemImage", care va fi adăugat imediat la elementul nostru.</li>
<li><b>Editați atributul</b>– dacă faceți clic dreapta pe un atribut al unui element, articolul devine disponibil <b>Editați | ×</b><b>atribute</b>. Faceți clic, editați.</li>
</ul><p><b>Exemplu de utilizare:</b> am uitat parola salvată sub asteriscuri în Google Chrome (dacă parola a fost salvată în acest browser). Faceți clic dreapta pe elementul cu parola, faceți clic pe „Vedeți codul elementului” <b>,
</b>în consola din partea stângă a filei <b>Elemente</b> faceți clic dreapta pe atributul type="parolă", faceți clic stânga pe <b>Editați | ×</b><b>atribute,</b> modifica atributul <i>tip="</i><i>parola"</i> pe <i>tip="</i><i>text"</i>, iar aici avem deja aceeași parolă sub formă de text în loc de asteriscuri.</p>
<ul><li><b>Editați | ×</b><b>html</b>- faceți clic dreapta pe un element din consolă <b>Elemente</b>, alege <b>Editați | ×</b><b>html,</b> schimba codul dupa bunul plac.</li>
<li><b>Copie</b><b>la fel de</b><b>HTML</b>- copiați porțiunea de HTML de care avem nevoie pentru cercetări ulterioare, să zicem, într-un blocnotes, sau pentru alte scopuri în care trebuie să aplicăm exact același aspect. Economisim timp.</li>
<li><b>Copie</b><b>XPATH</b>– copiează reprezentarea XPATH a structurii de la rădăcina elementului părinte în elementul selectat.</li>
<li><b>Șterge</b><b>nodul</b>– dacă trebuie să eliminați elementul selectat curent și toți copiii acestuia din contextul paginii web și să vedeți rezultatul.</li>
<li><b>Cuvânt</b><b>înfășura</b>- va reda vizualizarea paginii web în contextul consolei <b>Elemente</b> mai lizibil.</li>
</ul><p>În următoarele articole, vom continua să ne uităm la instrumentele pentru webmasteri și, în special, ne vom familiariza cu celelalte file ale instrumentelor pentru webmasteri din <b>Google Chrome</b>, și luați în considerare, de asemenea, depanarea erorilor javascript utilizând browsere diferite</p>
<p>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 caracteristicile standard, cu care puteți deschide cu ușurință și <b>vizualizați codul sursă al paginii site-ului în browser</b>: 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.</p>
<p>Desigur, aceste instrumente sunt folosite nu numai de creatorii de site-uri pentru muncă, ci și de utilizatorii obișnuiți, cărora codul sursă vă permite să vedeți diverse date utile.</p>
<p>Din acest articol veți învăța cum să vizualizați codul sursă al paginii site-ului în browser (cum să deschideți codul HTML, CSS, JavaScript al site-ului).</p>
<i>
</i>
<h2>Cum se deschide codul sursă al paginii în browser</h2>
<p>Există două moduri de a deschide codul sursă al unei pagini web într-un browser:</p>
<ol><li>Utilizarea tastelor rapide;</li>
<li>Deschideți din meniul contextual.</li>
</ol><p><b>Ctrl+U</b>- 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.</p>
<p>De asemenea, puteți introduce instrumentele de dezvoltare după cum urmează:</p>
<p>Pentru a găsi rapid codul, cuvântul sau textul dorit pe pagină, puteți utiliza combinația standard de taste rapide de căutare pentru toate browserele: Ctrl + G.</p>
<p>Instrucțiuni video:</p>
<p><span class="dmruvuTBwxg"></span></p>
<h2>Vedeți codul elementului | element explora | inspectează elementul</h2>
<p>Dacă brusc 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.</p>
<p><b>Cum să vizualizați codul unui element pe o pagină:</b></p>
<br><img src='https://i0.wp.com/urfix.ru/wp-content/uploads/2018/11/Proinspektirovat-otdelnyy-element.png' width="100%" loading=lazy loading=lazy><p>În plus, puteți utiliza comenzile rapide de la tastatură pentru a accesa rapid inspecția elementelor.</p>
<p>Taste rapide (butoane):</p>
<p>Google Chrome: Ctrl+Shift+I și Ctrl+Shift+C</p>
<p>Opera: Ctrl+Shift+I și Ctrl+Shift+C</p>
<p>Mozilla Firefox: Ctrl+Shift+I și Ctrl+Shift+C</p>
<p>Browser Yandex: Ctrl+Shift+I și Ctrl+Shift+C</p>
<p>După acțiunile efectuate, codul sursă al paginii web se va deschide în aceeași fereastră de browser:</p>
<br><img src='https://i0.wp.com/urfix.ru/wp-content/uploads/2018/11/Posmotret-HTML-CSS-kod-sayta.png' width="100%" loading=lazy loading=lazy><p>Tot codul HTML va fi în coloana mare din stânga. Și stilurile CSS sunt în dreapta.</p>
<br><img src='https://i2.wp.com/urfix.ru/wp-content/uploads/2018/11/Posmotret-css-stili-v-brauzere.png' width="100%" loading=lazy loading=lazy><p>Avantajul acestei metode, desigur, este că utilizatorul are posibilitatea de a schimba codul sursă, de a edita stiluri. Adică puteți edita stilurile de pe site și puteți vedea cum va arăta cu anumite stiluri, fără a fi nevoie să faceți imediat modificări la fișierele care se află pe serverele de găzduire. Pentru a modifica sau adăuga un cod de program, trebuie să faceți dublu clic pe fragmentul sau secțiunea dorită. Desigur, corectarea codului din browser nu se va face pe serverele de hosting. Prin urmare, în viitor, în orice caz, va trebui să copiați acest cod și să îl scrieți în fișiere.</p>
<p>Acest tutorial video detaliază și arată cum să lucrați cu instrumentele pentru dezvoltatori:</p>
<p><span class="DQMK8CuXkOg"></span></p>
<p>Deci doar online, chiar în browser, puteți vizualiza codul sursă al paginii site-ului, puteți obține informații 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.</p>
<p>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 se vor pierde. Acest lucru nu este suficient pentru a pirata site-ul 🙂</p>
<h2>Cum să vizualizați codul sursă pe un telefon Android</h2>
<p>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ă.</p>
<p>Pentru a face acest lucru, adăugați prefixul sursă de vizualizare la adresa URL a paginii inspectate:</p>
<p>De exemplu:</p>
<p>vizualizare-sursa:https://site-ul/turbo-mode-opera/</p>
<p><span class="N9JyJMmIZr8"></span></p>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy loading=lazy>");</script>
</div>
<div class="post-social-counters-block">
<div style="margin-top: 12px">
<noindex></noindex>
</div>
</div>
</div>
</div>
<a name="comments"></a>
<h3 class="best-theme-posts-title">Top articole similare</h3>
<div class="container-fluid">
<div class="best-theme-posts row">
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/ro/obyazannosti-funkcii-dostizheniya-kontent-menedzher-professiya-kontent-menedzher-kto-eto-takoi-i-chem-on.html">
<div class="img_container"><img src="/uploads/0d4bc2a3b0ff1813bc793537a532f30b.jpg" border="0" alt="Manager de conținut de profesie: cine este și ce face" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">Manager de conținut de profesie: cine este și ce face</span>
</a>
</div>
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/ro/kak-ustanavlivat-prilozheniya-bez-google-play-kak-skachat-platnye-igry-i-prilozheniya.html">
<div class="img_container"><img src="/uploads/8c4726e562ad77e2b56bf2bb801c8bcf.jpg" border="0" alt="Cum să descărcați jocuri și aplicații cu plată gratuit Play market pentru a descărca jocuri" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">Cum să descărcați jocuri și aplicații cu plată gratuit Play market pentru a descărca jocuri</span>
</a>
</div>
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/ro/akt-obezzhirivaniya-kislorodnyh-manometrov-primer-domeny-obezzhirivanie.html">
<div class="img_container"><img src="/uploads/044a2ba4a0370f43165c2696f9440442.jpg" border="0" alt="Exemplu de act de degresare a manometrelor de oxigen" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">Exemplu de act de degresare a manometrelor de oxigen</span>
</a>
</div>
</div>
</div>
</div>
<a name="comments"></a>
</div>
<div class="right-column col-sm-4 col-md-4">
<div class="write">
<span class="tags-title">Categorii:</span>
<ul style="height: 286px;" id="right-tags" data-tagscount="18" data-currentmaxtag="10" class="tags">
<li class=""><a href="https://bumotors.ru/ro/category/programs/">Programe</a></li>
<li class=""><a href="https://bumotors.ru/ro/category/safety/">Securitate</a></li>
<li class=""><a href="https://bumotors.ru/ro/category/windows-10/">Windows 10</a></li>
<li class=""><a href="https://bumotors.ru/ro/category/iron/">Fier</a></li>
<li class=""><a href="https://bumotors.ru/ro/category/windows-8/">Windows 8</a></li>
<li class=""><a href="https://bumotors.ru/ro/category/vkontakte/">In contact cu</a></li>
<li class=""><a href="https://bumotors.ru/ro/category/errors/">Greșeli</a></li>
</ul>
</div>
<div class="banner">
</div>
</div>
</div>
</div>
<div style="clear:both"></div>
</div>
<div class="footer">
<div class="subscribe">
<div class="main-wrapper container">
<div class="row">
<div class="col-sm-8">
</div>
<div class="col-sm-4">
<div class="social">
<a href="" class="vk social-ico"></a>
<a href="https://facebook.com/" class="fb social-ico"></a>
<a href="https://twitter.com/" class="tw social-ico"></a>
</div>
</div>
</div>
</div>
</div>
<div class="info">
<div class="main-wrapper container">
<div class="row">
<span class="footer-info col-xs-12">© 2022 bumotors.ru. Cum se configurează smartphone-uri și PC-uri. Portal informativ.</span>
</div>
</div>
</div>
</div>
</body>
</html> 