Cum se deschide codul sursă al paginii. Cum să vizualizați codul sursă al paginii și codul elementului

Cineva la început va părea că acest lucru nu este instrumentul necesar, dar punctul de vedere al întregului cod HTML este excelent pentru căutarea în codul articolelor necesare, poate fi link-uri, etichete, meta-etichete, atribute și alte elemente.

O combinație de chei fierbinți + Deschideți caseta de căutare, în browserul Chrome apare în partea dreaptă:

Figura 3. Site-ul de căutare a codului

După ce vi se solicită să căutați formularul Formular, ecranul se va deplasa la primul element găsit, folosind săgețile pe care le puteți deplasa între ele și selectați:

Figura 4. Căutați după codul site-ului HTML

Instrucțiunea 2: Cum să vizualizați și să editați codul site-ului HTML și CSS în browserul Google Chrome

Acum sameya. o parte importantăÎn care voi arăta cum puteți edita codul site-ului HTML și CSS în browser. După ce transferul se schimbă în browser.

Iată un instrument util este întotdeauna disponibil în browser-ul dvs., experimentați alte comenzi pe care le veți facilita editarea site-ului.

" Același element este în meniul contextualcare, dacă faceți clic dreapta pe text pagini. Puteți utiliza o combinație keys Ctrl. + U. Mozilla Firefox. Nu utilizează programe externe - originalul codul pagini Sincronizarea sintaxei va fi deschisă într-o fereastră de browser separată.

În observator Internet Explorer. Faceți clic pe meniul secțiunii fișierelor și selectați Editare în Notepad. În loc de numele Notepad Nume, altul poate fi scris, vă este atribuit în setările browserului pentru a vizualiza sursa coduldar. Clic pagini Butonul din dreapta al mouse-ului scade meniul contextual, în care există, de asemenea, un element care vă permite să deschideți sursa codul pagini în program extern - Vizualizați HTML coduldar".

ÎN browser Opera. Deschideți meniul, accesați secțiunea "Pagină" și veți avea posibilitatea de a alege subsecțiunea "Dezvoltare sursă" codul"Sau punct" sursă codul Freum. Această selecție este atribuită tastelor fierbinți Ctrl + U și Ctrl + Shift + U, respectiv. În meniul contextual, legat pentru a face clic pe pagini Faceți clic dreapta, de asemenea, există un element "Sursa codul" Codul sursă de operă pagini În programul extern, care este atribuit OS sau în setările browserului pentru editarea fișierelor HTML.

Browserul Google Chrome fără îndoială are cea mai bună organizare a sursei de vizionare coduldar. Prin clic dreapta, puteți selecta "Vizualizare coduldar pagini"Și apoi sursa de iluminare a iluminatului de sintaxă va fi deschisă într-o filă separată. Puteți alege în același șir de meniu "Vizualizare coduliar elementul "și în aceeași filă vor deschide două cadre suplimentare în care puteți inspecta HTML și CSS codul Element pagini. Browserul va răspunde la mișcarea cursorului pe rânduri codula, evidențiind elementele de pe pagina corespunzătoare acestei secțiuni de HTML coduldar.

Așadar, astăzi vom lua în considerare mai multe fonduri utile pentru Web Wizards, care facilitează viața la stabilirea site-ului. Să începem cu consola pentru maeștrii web în Google Chrome. Și vom merge la întrebări care apar cel mai adesea de la Web-master în timpul aspectului site-ului.

Pentru a intra în consola, deschideți site-ul dvs. în Google Chrome, faceți clic dreapta oriunde în pagina web și selectați "Vizualizați codul paginii" în meniul derulant contextual sau pe un anumit element pentru studiu selectând " Vizualizați elementul de cod. "

În partea de sus, veți fi listați mai multe tab-uri. Astăzi vom vorbi despre fila "elemente" , Pe care elementele paginii web cu etichete iluminate, proprietăți, selecția elementelor de cuibărit, reprezentarea ierarhiei elementului în copacul DOM (vârful în partea de jos, de la părintele rădăcinilor la studiul actual), abilitatea de a Editați elementele, lista proprietăților lor, luați în considerare căutarea după articole, de asemenea, vom obține cu vizionarea stilurilor CSS legate de elemente etc.

Cum să vizualizați toate stilurile legate de un element specific? Care dintre ele este aplicată acum? Ce fișiere sunt situate?

Deci, nu este nimic mai ușor! Deschideți browserul Google Chrome, deschideți site-ul nostru - sursa întrebărilor Faceți clic pe elementul dorit cu butonul din dreapta al mouse-ului, dacă este vizibil în contextul paginii și selectați elementul "Vizualizați codul elementului" în meniul contextual.

Mai jos, avem o consolă cu o filă evidențiată a elementelor stângi și toate legate de stilurile elementului din dreapta, unde: Stiluri computerizate. - Acestea sunt stiluri comune "rezumat" care au fost atribuite unui element din regulile CSS și setările browserului utilizatorului (mediul său de mediu), iar fila este minimizată.

Dar suntem interesați de fila Styles, implementați sub el, în care toate stilurile atribuite elementului, precum și fișierele, unde sunt specificate aceste reguli pentru acest element după tip, ID, clasa, numele, proprietatea, atributul etc. . În același timp, dacă regula CSS este traversată, înseamnă că a fost suprimată mai devreme / mai departe (ceea ce face ușor să se urmărească care dintre regulile CSS este o prioritate și se aplică în acest caz la element).

În partea de jos a consolei există un șir care afișează elementul 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 "prăjiturii de pâine".

Tag-ul HTML nu este vizibil în contextul paginii? Sau trebuie să găsești toate etichetele, de exemplu, pe o anumită clasă, nume, proprietate, tip?

Deschideți site-ul în Google Chrome, faceți clic pe clic dreapta, apelați meniul contextual, selectați « Vizualizați codul paginii » . Faceți clic pe tasta de tastatură "CTRL + F" În același timp, introducem fraza de care aveți nevoie ( de exemplu: clasa \u003d "padding ») Și ne mutăm pe lista rezultatelor găsite simultan prin toate stilurile asociate cu elementele necesare din partea dreaptă a paginii.

Cum să vizualizați codul HTML al elementului (elementelor) încărcat dinamic (de exemplu: de AJAX)

Așteptăm descărcările de pagină în Google Chrome. Realizăm acțiunile necesare pentru a lucra Ajax. Faceți clic pe clic dreapta pe datele descărcate, selectați "Vizualizare cod de element" din meniul contextual, investigăm rezultatul în fila Elements din stânga.

Vizualizați modificările stilului CSS în timp real

Apropo, de asemenea, este convenabil să se observe dacă este necesar: ce stiluri sunt atribuite unui element al raidului, de exemplu, atunci când galeriile de derulare și alte evenimente de cronometre. Toate stilurile în timp real atribuite prin JavaScript vor fi afișate în proprietate. stil. Element selectat în fereastra din fila "Elemente".

Vizualizarea interactivă a influenței regulilor CSS asupra reprezentării etichetelor HTML

Google Chrome oferă o consolă interactivă pentru stilurile CSS. Și acest lucru înseamnă că nu numai că puteți vizualiza ce stiluri se aplică elementului, dar și aduceți cursorul mouse-ului într-o anumită proprietare CSS, porniți utilizând pop-upul Bifați spre dreapta sau dezactivați-l prin scoaterea pavilionului și Vizualizarea rezultatului rezultat pe pagină.

Schimbați structura de depunere a elementelor HTML ale raidului (chiar în browser)

Deci, pentru a explora structura documentului web din Google Chrome, am învățat deja, acum luați în considerare editarea pe scurt a elementelor raidului. Du-te la consola în orice mod convenabil pentru noi. Găsim articolul dorit în fila "Elemente", faceți clic pe acesta cu butonul din dreapta al mouse-ului, apelând astfel la meniul contextual pop-up:

• Adăugați atributul. - Adăugați un atribut pentru elementul specificat. De îndată ce cursorul devine activ, începeți să specificați proprietatea dorită. de exemplu: Scrieți NAME \u003d "GATEMENTIMAGE", care va fi adăugat imediat la elementul nostru.
• Editați atributul. - Dacă faceți clic pe atributul clic dreapta la element, acesta devine disponibil editați | ×.atribut.. Faceți clic pe, editați.

Exemplu de utilizare:am uitat parola stocată sub asteristers în Google Chrome (dacă parola a fost salvată în acest browser). Faceți clic pe clic dreapta pe elementul cu intrarea parolei, faceți clic pe "Vizualizare Cod element.» , În consola din stânga din tabară Elementefaceți clic pe butonul Atribut Type \u003d "Parolă" Faceți clic dreapta, faceți clic stânga pe mouse Editați | ×.aTRIBUT,schimbăm atributul type \u003d "pAROLA " pe type \u003d "text "Și aici avem deja cea mai mare parolă sub formă de text în loc de stele.

• Editați | ×.hTML. - Faceți clic dreapta pe clic pe elementul din consola Elemente, Alegeți Editați | ×.hTML,schimbați codul la preferințele dvs.
• Copie.la fel deHTML. - Copiați porțiunea HTML de care aveți nevoie pentru cercetări suplimentare, să spuneți, în notebook, sau în alte scopuri, unde trebuie să aplicăm exact același aspect. Economisim timp.
• Copie.Xpath. - Copiază reprezentarea XPAH a structurii de la rădăcina elementului părinte la elementul dedicat.
• Șterge.nodul. - dacă trebuie să eliminați elementul dedicat curent și toate filialele sale din context pagini webși vedeți rezultatul.
• Cuvânt.Înfășurați. - Faceți o vizualizare a paginii web în contextul consolei Elemente mai ușor de citit.

În următoarele articole, vom continua să luăm în considerare fondurile pentru un maestru web, în \u200b\u200bspecial, vom cunoaște celelalte file de instrumente pentru maestrul web Google Chrome.și, de asemenea, să ia în considerare depanarea instrumentelor de erori JavaScript din diferite browsere

Fiecare utilizator de Internet are site-urile preferate pe care își petrece o lungă perioadă de timp. Și numai leneșul nu sa gândit să vadă cum a fost creat și despre ce constă. Răspundeți la toate aceste întrebări nu va funcționa, deoarece există multe modalități de a crea un site, dar pentru a vedea acele echipe și coduri din care constă - este posibil și accesibil tuturor.

O altă întrebare este dacă o persoană va înțelege cine nu este angajat în programarea acelui personaje care alcătuiesc codul. Dar din exemplele care vor fi ascunse sub orice utilizator al Google Chrome, va putea vedea elemente individuale ale site-urilor.

Cum să vizualizați codul sursă al paginilor HTML din browser de la Google

Ceea ce ați putea vedea codul paginii în Chrome trebuie să meargă la site-ul care vă interesează și să efectuați următoarele acțiuni:

Două dintre aceste elemente diferă între ele cu funcționalitatea și informațiile despre utilizator, programator sau hacker.

Care este diferența dintre codul paginii și doar comanda "Vizualizare cod"

Vizualizarea fiecăreia dintre aceste funcții poate fi scrisă un element separat. Pentru programatori, această diferență este esențială și înțeleg în ce cazuri este necesar să se utilizeze "codul de vizualizare" și în ce "Vedere a paginii" în browser Google. Crom.

Dar explicarea pentru utilizatorul obișnuit puteți împărți aceste funcții în următoarele scopuri:

1. "Vizualizați codul paginii" este necesar numai pentru a vedea combinația principală a paginii. Practic, aceasta este structura site-ului (fără modele suplimentare sub formă de fișiere CSS și alte adaosuri care au rămas în dosarul Creatorului site). Această structură nu este potrivit pentru crearea pagina proprie Prin "Copiere - Inserare", dar vă va permite să vedeți ce a făcut programul și în ce secvență, astfel încât site-ul din browserul Google Chrome să aibă un design extern.
2. "Codul View" afișează o structură detaliată cu alocarea tuturor zonelor afectate de pagină. Dacă aduceți la un cod specific de listă - acesta va aloca un element pe site la care aparține.
3. Vizualizarea codului paginii se deschide într-un browser separat fără capacitatea de ao edita. Adică, este potrivit numai pentru copierea și citirea codului site-ului. Dar aceasta nu este o caracteristică mai puțin utilă.
4. "Vizualizați codul" Schimbați și puteți edita orice element deoarece acesta va fi convenabil pentru dvs. Desigur, toate modificările vor "trăi" până când pagina este actualizată, dar uneori este distractiv să urcați setările și să înțelegeți pur și simplu de ce este necesar și ce se va întâmpla dacă este schimbat. Nu trebuie să presupunem că astfel de acțiuni vă rănești sau pe site - aceste modificări sunt valabile numai în codul Google Chrome și nu merge online.

Luați în considerare problema modului de a vedea codul elementului

Dacă răspundeți cu adevărat o astfel de întrebare, atunci numai o opțiune ca exemplu. Pentru că, pentru un articol să devină o persoană care va înțelege acest subiect (dezvoltator web) este foarte dificil, dar pentru a arăta exemplul de epuizare - pentru a face mult mai ușor.

Funcționalitatea codului elementului este foarte largă, deci luăm unul dintre cuvintele de pe site-ul browserului Google Chrome. Am dorit să luăm în considerare ce cuvinte cheie (În cod, acesta va fi înregistrat ca "Cuvinte cheie") au fost utilizate pentru site-ul nostru. Pentru a face acest lucru, efectuați următorul algoritm:

Alte modalități de utilizare a acestei funcții în browserul Google Chrome

În general, continuând să răspundă la întrebarea modului de a vedea codul articolului și de ce este necesar, acesta ar trebui transferat funcțiilor sale. Anume datorită capacității de a vedea codul elementului oricărui site din browserul Google Chrome, putem:

• Consultați structura site-ului care pornește de la cap ("capacul site-ului") și încheierea încheierii (comandantul final al oricărui program);
• Vizualizați toate funcțiile site-ului, și anume: link-uri către alte site-uri, module suplimentare de pe site-uri externe și prezența metre încorporate pentru a colecta informații diferite;
• Aflați dacă copierea de pe site este interzisă sau nu;
• În cod, toate legăturile către alte pagini ale site-ului vor fi înregistrate, precum și designul lor și acțiunile ulterioare după ce au făcut clic pe ele.

Aceasta nu este o listă finită. Dar ar trebui să se reamintească faptul că fără cunoștințe speciale - codul "citit" pagini Google. Chrome este aproape imposibil, iar datele rezultate nu sunt practic necesare utilizatorului obișnuit.

Element "Vizualizați codul elementului" nu funcționează

Ar trebui să spun imediat - fiecare site va fi cu acces deschis La codurile elementelor. Adică, chiar și cele mai populare și mai scumpe site-uri vor fi deschise pentru a vedea codul lor. Prin urmare, în cazul în care elementul din browserul Google Chrome nu este activ sau emis o eroare are următoarele motive posibile:

• Profilul utilizatorului este deteriorat;
• Prezența software-ului rău intenționat pe computer;
• Blocarea cu o extensie specifică pentru a crește productivitatea (chiar și acest lucru poate fi).

Corectați profilul de utilizator deteriorat

A crea profil nouTrebuie să eliminați cel vechi de pe computer. Pentru a face acest lucru, efectuați următoarele:

1. Închideți Google Chrome și lansați încorporarea browser Windows. Explorator.
2. Introducem următoarea comandă la bara de adrese:% LocalAppdata% \\ Google \\ Chrome \\ User Data \\.
3. Când se deschide directorul, căutăm dosarul "Implicit" și adăugăm la numele său "Backup", astfel încât următoarele: "Implicit de backup".
4. Acum, după noua lansare a browserului Chrome, va fi creat un nou profil.

Îndepărtați software-ul rău intenționat sau resturile sale

Dacă un profil nou nu a deschis accesul la pagina elementului de pagină și mai vedem eroarea, următorii pași:

1. Deschis linie de comanda Windows ("Run") și introduceți comanda "cmd" acolo.
2. Introduceți următoarea comandă în linie: RD / S / Q "% WINDIR% \\ SYSTER32 \\ grouppolyuzers".
3. După confirmarea acțiunii, conduceți acest lucru: RD / S / Q "% WINDIR% \\ sistem32 \\ grouppolicy".
4. Acum "gpupdate / forță" (fără ghicitori).

Dacă totul a fost făcut corect, apoi după repornire computer Google. Chrome va deschide codul elementelor și capacitatea de lucru a browserului va fi în mod normal.