Tastele pentru a lansa consola Yandex. Cum să deschideți consola în browserul Yandex și în alte browsere

Mulți oameni folosesc browsere care ne fac una cu retea globala Internet. Cu toate acestea, cum sunt structurate paginile de internet, cum să le scrieți singur - aceste informații sunt doar pentru cei care doresc să creeze ceva nou. Toate aceste caracteristici sunt ascunse pentru utilizatorii obișnuiți, toate din motive de simplitate și intuitivitate, dar în acest articol vom examina subiectul despre cum să deschideți consola în browserul Yandex, de ce a fost creată, ce limbă acceptă și multe altele . Articolul este recomandat utilizatorilor nu numai ai browserului Yandex

De ce ai nevoie de o consolă într-un browser?

Există trei motive pentru a crea o consolă în browser:

1. Pentru a depana browserul în sine în faza de proiectare.
2. Pentru a instrui tineri profesioniști în funcțiile unui anumit browser.
3. Pentru ca profesioniștii să-și depaneze paginile de internet în timp real.

Puțini oameni știu, dar îți poți scrie propriul site folosind doar 2 lucruri: cunoștințe și un bloc de note. Cu toate acestea, această metodă este extrem de irosită de timp, deoarece va trebui să resaveți documentul după fiecare modificare a oricăror parametri. O consolă specială de depanare vine în ajutor - acesta este un anumit câmp de browser care conține absolut toate informațiile despre pagină și codul sursă. Explorându-l, puteți găsi o mulțime de lucruri interesante, inclusiv erori ale dezvoltatorului. Pentru a evita greșelile, utilizați consola browserului.

Să presupunem că ați creat o pagină de Internet, dar trebuie să ajustați imaginea la dimensiunile necesare, rezultatul vine la consolă, care are capacitatea de a depana pagina în timp real, ceea ce economisește mult timp și efort. În următoarea parte a articolului, vă vom spune cum să deschideți consola în browserul Yandex. Aceste cunoștințe vă vor ajuta cu siguranță dacă sunteți un webmaster începător.

Cum se deschide consola pentru dezvoltatori în Yandex

Pentru a deschide consola, veți avea nevoie de o comandă rapidă specială de la tastatură. Dacă citiți documentația pentru absolut orice browser, veți constata că folosirea mouse-ului nici măcar nu este necesară. Există un număr incredibil de comenzi rapide de la tastatură care vă pot îndeplini fiecare dorință.

Instrucțiuni despre cum să deschideți consola în browserul Yandex:

1. Lansați browserul din Yandex, apoi așteptați să se încarce complet în RAM, va dura doar câteva secunde.
2. Acum deschide orice pagină de internet, de exemplu, Google, dar nu contează deloc, orice va face.
3. Pentru a deschide instrumentele Yandex, apăsați următoarele taste: „Ctrl + Shift + I”
4. Dacă doriți să lucrați în mod specific cu JavaScript - acesta este un limbaj de programare, atunci va trebui să țineți apăsate următoarele taste: „Ctrl + Shift + J”

Cu toate acestea, în browsere diferite Există diferite moduri de a deschide consola, așa că în paragraful următor vom trece prin cele mai populare browsere.

Deschiderea consolei în alte browsere

În primul rând, merită informat: nu încercați să utilizați aceleași combinații de taste pe browsere diferite. Au existat multe cazuri în care utilizatorii și-au șters din greșeală toate marcajele, iar recuperarea acestora poate fi destul de problematică și uneori imposibilă. Prin urmare, mai jos vor fi exemple despre cum să deschideți corect consolele.

1. Google Chrome. Există două opțiuni: mergeți la setări, unde va exista un buton pentru a deschide consola sau apăsați combinația de taste „Ctrl + Shift + I”.
2. Operă. În meniul „Instrumente de dezvoltare” va apărea un buton „ Cod sursă„, sau combinația de taste „Ctrl + U”.
3. Firefox. În setările browserului, fie „Ctrl + Shift + J”.
4. Safari. F12 sau accesați „Suplimente”, unde va apărea „Afișați meniul pentru dezvoltator”

În concluzie

Sperăm că acest articol v-a ajutat să înțelegeți cum să deschideți consola în browserul Yandex. Aceste cunoștințe vor ajuta în special studenții, tinerii dezvoltatori, precum și utilizatorii obișnuiți care doresc să învețe puțin mai multe despre tehnologia computerelor, deoarece ei sunt viitorul lumii noastre.

Mulți oameni folosesc browsere care ne fac una cu internetul global. Cu toate acestea, cum sunt structurate paginile de internet, cum să le scrieți singur - aceasta este o informație numai pentru cei care doresc să creeze ceva nou. Toate aceste caracteristici sunt ascunse pentru utilizatorii obișnuiți, toate din motive de simplitate și intuitivitate, dar în acest articol vom examina subiectul despre cum să deschideți consola în browserul Yandex, de ce a fost creată, ce limbă acceptă și multe altele . Articolul este recomandat utilizatorilor nu numai ai browserului Yandex

De ce ai nevoie de o consolă într-un browser?

Există trei motive pentru a crea o consolă într-un browser:

Nu mulți oameni știu, dar îți poți scrie propriul site folosind doar 2 lucruri: cunoștințe și un bloc de note. Cu toate acestea, această metodă este extrem de irosită de timp, deoarece va trebui să resaveți documentul după fiecare modificare a oricăror parametri. O consolă specială de depanare vine în ajutor - acesta este un anumit câmp de browser care conține absolut toate informațiile despre pagină și codul sursă. Explorându-l, puteți găsi o mulțime de lucruri interesante, inclusiv erori ale dezvoltatorului. Pentru a evita greșelile, utilizați consola browserului.

Să presupunem că ați creat o pagină de Internet, dar trebuie să ajustați imaginea la dimensiunile necesare, rezultatul vine la consolă, care are capacitatea de a depana pagina în timp real, ceea ce economisește mult timp și efort. În următoarea parte a articolului, vă vom spune cum să deschideți consola în browserul Yandex. Aceste cunoștințe vă vor ajuta cu siguranță dacă sunteți un webmaster începător.

Cum se deschide consola pentru dezvoltatori în Yandex

Deschiderea consolei va necesita o comandă rapidă specială de la tastatură. Dacă citiți documentația pentru absolut orice browser, veți constata că folosirea mouse-ului nici măcar nu este necesară. Există un număr incredibil de comenzi rapide de la tastatură care vă pot îndeplini fiecare dorință.

Instrucțiuni despre cum să deschideți consola în browserul Yandex:

Cu toate acestea, diferite browsere au moduri diferite de deschidere a consolei, așa că în paragraful următor vom trece prin cele mai populare browsere.

Deschiderea consolei în alte browsere

În primul rând, merită informat: nu încercați să utilizați aceleași combinații de taste pe browsere diferite. Au existat multe cazuri în care utilizatorii și-au șters din greșeală toate marcajele, iar recuperarea acestora poate fi destul de problematică și uneori imposibilă. Prin urmare, mai jos vom oferi exemple despre cum să deschideți corect consolele.

În concluzie

Sperăm că acest articol v-a ajutat să înțelegeți cum să deschideți consola în browserul Yandex. Aceste cunoștințe vor ajuta în special studenții, tinerii dezvoltatori, precum și utilizatorii obișnuiți care doresc să învețe puțin mai multe despre tehnologia computerelor, deoarece ei sunt viitorul lumii noastre.

Am decis să scriu acest articol sub impresia unor utilizatori care sunt administratori ai mai multor site-uri, dar habar nu au despre consola browserului și, prin urmare, primesc constant întrebări de genul „cum pot schimba culoarea butonului” sau „mesajele mele private”. nu funcționează, ce ar trebui să fac?” Și la întrebările „ce erori sunt afișate în consolă?” sau "ce returnează serverul?" Ei doar te invită să vezi singur.

Un webmaster care nu știe să folosească instrumentele sau nu știe deloc despre ele nu este bun, ar trebui să facă niște eforturi în dezvoltarea sa și, între crearea următoarei capodopere web, să citească acest articol pentru a rezolva în mod independent problemele; site-ul său, sau cel puțin, să ofere informații mai complete pentru a susține cererile.

Voi spune imediat că acest articol nu va descrie toată funcționalitatea panoului, dar funcționalitatea și capacitățile mai multor file care sunt cele mai interesante pentru un webmaster începător vor fi discutate în detaliu.

Panoul pentru dezvoltatori de browser este probabil cel mai important instrument al unui webmaster real, care vă permite să obțineți o imagine completă a ceea ce se întâmplă la încărcarea unei pagini de site și după aceasta.

Informațiile obținute din panou sunt adesea suficiente pentru a indica cauza aproape oricărei probleme de pe site neglijarea acestor informații este, cel puțin, neînțeleaptă.

În zilele noastre, dezvoltatorii de browser nu uită de panoul pentru dezvoltatori, acesta este neapărat disponibil în orice, mai mult sau mai puțin browser modernși putem spune că prezența sa este standard, așa că este posibil să-l găsiți în browser, chiar dacă anterior nu erați conștient de existența lui.

Există multe browsere, există și mai multe nuanțe de lucru cu ele, dar ca exemplu voi folosi panoul browser Chrom, dar nu vă fie teamă, principiul funcționării acestuia este același pentru aproape toate browserele și când comparăm funcționalitatea unui browser cu altul, veți găsi adesea multe în comun între panourile lor.

Deci, să aruncăm o privire la acest panou.

Apăsați tasta F12 și va apărea panoul pentru dezvoltatori.

Ochii mi-au fugit imediat, nu era clar unde să mă uit, ce să apăs. Să mergem în ordine.

În mod implicit, prima filă „Elemente” este deschisă.

Această filă afișează codul html al paginii curente.

În interiorul filei, puteți obține informații complete nu numai despre locația blocurilor html, ci și să vedeți ce fișiere js și css sunt incluse la încărcarea acesteia și chiar să vă familiarizați cu conținutul acestor fișiere făcând clic pe linkul corespunzător. în codul paginii.

În dreapta codului paginii, este afișată o coloană cu stiluri CSS și reguli în vigoare pentru pagina curentă sau blocul html pe care îl selectați.

Aici încep minunile. Fila vă permite să editați atât codul html, cât și regulile css.

Selectați blocul html de interes, selectați-l și stilurile sale css vor fi afișate în coloana din dreapta. Faceți clic dreapta pe acest bloc și selectați una dintre acțiunile sugerate „Editați ca HTML” și veți putea edita codul html al acestui bloc. Veți vedea rezultatul acestei editări imediat după finalizare, toată editarea are loc, ca să spunem așa, online, rezultatul este afișat imediat pe pagină.

Imaginea este aceeași cu editarea regulilor CSS pentru un bloc selectat. Puteți vedea ce stiluri se aplică acestui bloc în în acest momentși, dacă este necesar, ajustați-le, dezactivați-le pe cele inutile sau invers - adăugați un fel de regulă proprie. Rezultatul acestor acțiuni va fi aplicat elementului imediat.

Nu ar trebui să credeți că modificările html și css din această filă afectează cumva starea reală a lucrurilor pe serverul dvs. și că de fapt editați fișierele html și css ale site-ului dvs. Toate acestea se întâmplă numai în browser și va trebui să transferați singur toate modificările acestor fișiere.

Dacă totul pare să fie clar cu fișierele html, un fișier este o pagină, atunci stilurile de pagină pot consta din multe fișiere CSS și trebuie să știți exact ce fișiere trebuie editate.

Ne uităm la coloana cu stiluri și observăm că lângă fiecare bloc de stil este afișată nu doar un link către un fișier css, ci și o linie în care această regulă este plasată în interior. fișierul specificat. Folosind aceste informații, puteți găsi cu ușurință fișierul necesar pe server și un loc de editat în interiorul acestui fișier.

După ce stăpâniți această filă, veți putea rezolva problemele legate de efectuarea de mici modificări la aspectul paginii și la afișarea stilului acesteia elemente individuale, ceea ce vă va economisi în mod semnificativ timpul și nervii. Această filă trebuie studiată mai întâi.

Să trecem la următoarea filă - „Rețea”.

Această filă nu oferă atât de multe posibilități de editare ca cea anterioară, dar informațiile obținute în ea nu sunt mai puțin valoroase. Aici putem urmări toate solicitările trimise către serverul nostru în timp ce pagina curentă se încarcă și putem obține răspunsuri de la serverul nostru ca urmare a acestei solicitări. Poate că această informație este prea complexă pentru webmasterii începători, unde mai putem afla răspunsul la întrebarea „De ce nu este trimis când trimit un mesaj privat în chat?”) Dacă decideți să găsiți răspunsul la această întrebare și întrebări ca aceasta, apoi uitați-vă la fila „Rețea” în toți ochii.

Paginile site-urilor moderne nu mai sunt spații HTML statice așa cum erau înainte scripturile de pagină în sine pot trimite în mod constant diverse solicitări către server sau la anumite acțiuni ale utilizatorului, iar acestea sunt cele care ne vor interesa în primul rând.

Să ne uităm la unele acțiune personalizată care va trimite o cerere către server și va primi un răspuns de la server, de exemplu, schimbând trimiterea unui mesaj personal dintr-un chat privat. Deschideți pagina de chat, deschideți panoul pentru dezvoltatori în fila „Rețea” și încercați să trimiteți un mesaj în chat.

Imediat după ce se face clic pe butonul „Trimite” din fila panoului, vom putea observa cererea către fișierul serverului, iar dacă facem clic pe el, vom primi informații complete despre ce fișier au fost trimise datele și ce fel de date.

Răspunsul de la server poate fi primit în fila Previzualizare a acestei cereri. Este foarte important ca răspunsul să fie așteptat, atunci acțiunea efectuată de utilizator va fi executată, în caz contrar apare o eroare. Dacă apare, răspunsul serverului vă va informa despre cauzele problemei.

Serverul poate returna un text de eroare, cum ar fi „Avertisment...” sau „Eroare fatală...”, sau returnează un număr de eroare de server, cum ar fi 404 sau 500, sau se poate întâmpla ca fila de răspuns să fie goală - nu a fost primit niciun răspuns. primit. Aceste informații vă vor fi de mare ajutor în rezolvarea problemei apărute în serviciul de asistență unde îl contactați, va indica acesta motive posibile apariția sa și adesea va arăta în mod clar unde să sape.

Deci, să nu ignorăm această filă, informațiile obținute din ea sunt foarte interesante și utile, cel puțin pentru dezvoltarea generală. Este întotdeauna util să știi ce merge unde și de unde ce vine)

Uneori se întâmplă că parcă ați dat clic pe butonul de evaluare sau ați trimis un mesaj într-un chat personal, dar nu se întâmplă nimic, ați căutat în fila „Rețea” din panoul browserului, dar cererile către server pur și simplu nu sunt trimise, majoritatea probabil, a apărut un conflict în scripturile js ale site-ului, așa că este timpul să mergeți la fila „Consola”.

Fila „Consola” afișează un jurnal al problemelor întâlnite la încărcarea paginii în scripturi js, astfel încât acestea să poată fi urmărite. De asemenea, poate afișa erori care au apărut la încercarea de a încărca un fișier lipsă la încărcarea paginii curente. Problemele critice sunt afișate în roșu și adesea soluția lor este cea care restabilește funcționalitatea întregului site dacă acesta a fost defect.

Informațiile din fila Consolă sunt foarte utile pentru un webmaster, vă permit să urmăriți imediat apariția conflictelor în scripturi la încărcarea unei pagini sau a erorilor banale. Textul erorii informează despre tipul acesteia și unde a apărut, fișierul js și locul din acest fișier unde a fost observată eroarea, ceea ce ajută la rezolvarea acestor erori.

Aruncați o privire la această filă când încărcați pagini de pe site-ul dvs., ce veți vedea acolo? Sunt multe mesaje roșii? Foarte des, un singur mesaj de eroare din această filă este suficient pentru ca toate scripturile de pe site să nu mai funcționeze, așa că cu siguranță nu ar trebui să neglijați aceste informații, iar dacă observați intrări în consolă, atunci ar trebui să luați măsuri pentru a identifica și remedia problemele . În mod ideal, nu ar trebui să fie deloc roșu în consolă.

Sper că acum, după ce v-ați familiarizat cu filele enumerate din panoul pentru dezvoltatori, vă va deveni mai ușor să lucrați cu site-urile dvs., să identificați și să remediați problemele fără a contacta specialiști sau să le oferiți acestor specialiști informații mai cuprinzătoare despre starea lucrurilor.

Browserele web au mult mai multe funcții decât sunt necesare pentru navigarea obișnuită pe web. Există funcții pentru a face informațiile mai ușor de găsit, tone de stocare, instrumente pentru gestionarea datelor și chiar instrumente pentru testarea și dezvoltarea site-urilor web. Consola de browser Yandex conține diverse instrumente pentru lucrul cu partea invizibilă a site-urilor: cod JavaScript, date și dispozitive conectate, cookie-uri, cache, certificate de securitate etc. Consola pentru dezvoltatori este un instrument extrem de util nu numai în mâinile unui programator, uneori, chiar și un nespecialist trebuie să folosească acest panou.

Panoul de dezvoltatori este implementat pentru a rezolva cinci sarcini principale:

Instrumentele pentru dezvoltatori și consola din browserul Yandex sunt instrumente universale, au tot ce are nevoie un programator și multe altele.

Cum se deschide consola în browserul Yandex?

Există mai multe moduri de a apela consola în browserul Yandex:

• Prin „Setări browser Yandex”;
• Din meniul contextual pagini;
• Utilizarea tastelor rapide.

Prin meniul browserului

Toate instrumentele necesare sunt plasate într-o singură secțiune " Instrumente suplimentare" De aici putem merge direct la consolă, instrumentele pentru dezvoltatori sau pur și simplu deschidem codul HTML al paginii.

Cum se deschide consola pentru dezvoltatori în browserul Yandex:

În același mod, putem deschide codul HTML după ce facem clic pe „Vizualizare codul paginii” și, de asemenea, mergem la „Instrumente pentru dezvoltatori” făcând clic pe elementul corespunzător.

Din meniul contextual

Acesta este unul dintre cele mai multe moduri simple deschide secțiunea necesară, pentru a-l implementa trebuie doar să facem 3 clicuri:

Prin taste rapide

Pentru a lansa consola în browserul Yandex, putem folosi taste rapide. Acestea vă permit să deschideți nu numai consola în sine, ci și instrumentele de dezvoltare.

Cum să porniți consola folosind comenzile rapide de la tastatură:

O altă modalitate de a ajunge la panoul dorit este să apăsați tasta F12.

Descrierea elementelor panoului pentru dezvoltatori

Este timpul să aruncăm o privire mai atentă la toate filele din consola pentru dezvoltatori și la funcțiile acestora. Pe descriere detaliată Va dura mult timp, așa că vom vorbi pe scurt despre rolul fiecăruia dintre ei.

Filele panoului pentru dezvoltatori:

• „Elemente” afișează cod HTML structurat. Menține structura codului precis și regulile de imbricare. Pe lângă codul HTML, afișează stilurile CSS pentru fiecare bloc sau element. Vă permite să înțelegeți structura, să vedeți clasele de elemente și stilurile alocate acestora;
  
• „Consola” afișează erori în codul paginii și vă permite să rulați propriul cod JavaScript, care va fi procesat instantaneu în browser;
  
• „Surse” este o filă care conține toate fișierele cu cod JavaScript și CSS care sunt conectate la resursă. Vă permite să vizualizați atât codul conectat local, cât și fișierele găzduite pe alte resurse (acestea pot fi JQuery, metrici Google, Yandex și alte fișiere temă, scripturi);
  
• „Rețea” este o filă foarte importantă, deoarece putem folosi informațiile din ea pentru a crește performanța site-ului. Aceasta afișează timpul necesar pentru încărcarea conținutului media și a fișierelor JS externe. Dacă site-ul folosește imagini de înaltă rezoluție sau sunt încărcate dintr-o resursă externă, încărcarea site-ului va dura mai mult. Această filă arată ce conținut determină încetinirea resursei web;
  
• „Performanța” este o pagină pentru verificarea în detaliu a performanței unei resurse. După procedura de testare a site-ului, apar statistici pentru fiecare element de pagină cu informatii complete prin viteza de descărcare;
  
• „Memorie” este similar cu fila anterioară, dar afișează informații despre greutatea paginii. Putem extinde datele și studiem în detaliu greutatea tuturor elementelor paginii. Se ia in calcul nu doar greutatea imaginilor sau textului, ci si a tuturor obiectelor, elementelor HTML si CSS etc.;
  
• „Aplicația” oferă acces la toată stocarea: cookie-uri, cache, stocare locală, sesiuni, fonturi, scripturi și multe altele. Există, de asemenea, un instrument util „Clear Storage”, acesta este conceput pentru a șterge toată stocarea;
  
• „Securitate” oferă informații despre certificatele de securitate și fiabilitatea conexiunii;
  
• „Audituri” este un instrument pentru auditarea rapidă a unui site web. La sfârșitul lucrării, rezultatul este afișat în 5 categorii: „Performanță”, „Progresivitate aplicație web”, „Ușurință de utilizare”, „ Cea mai bună practică„(sfaturi pentru îmbunătățirea paginii) și „SEO”.
  

Încă câteva puncte:

Acum știm de ce este nevoie și cum să deschidem consola în browserul Yandex și, de asemenea, ne-am familiarizat pe scurt cu funcțiile fiecărui element din instrumentele de dezvoltare. Folosind pe deplin acest instrument de dezvoltare, devine posibilă dezvoltarea unui site web mai bine și mai rapid. Utilizatori obișnuiți Consola este utilă pentru a furniza capturi de ecran ale defecțiunilor site-ului și pentru a șterge datele temporare.

Bună, dragi prieteni. Panoul pentru dezvoltatori (consola) din browser este un instrument indispensabil pentru fiecare proprietar de site, cu ajutorul căruia puteți vizualiza rapid codul html al paginii și stiluri css. De asemenea, puteți afla despre erorile care au apărut la încărcarea site-ului și puteți verifica site-ul pentru adaptabilitate.

Astăzi vom lua în considerare lucrul cu cod html, stiluri css și adaptabilitate în panoul pentru dezvoltatori. Acestea sunt instrumentele necesare pentru a rezolva majoritatea problemelor.

Pentru o înțelegere generală a imaginii, să dăm un exemplu când s-ar putea să aveți nevoie de panoul pentru dezvoltatori.

Să presupunem că ai venit pe blogul meu și te-a interesat ce font folosesc sau color și așa mai departe. În general, acesta poate fi orice element de pe site. Și ai vrut să faci același lucru pe site-ul tău.

Apoi te uiți prin panoul pentru dezvoltatori din browser la elementul dorit, unde poți vedea codul html și stilurile css pentru acesta.

O altă opțiune pentru utilizarea panoului este atunci când doriți să faceți ceva pe site, dar nu știți încă cum va arăta.

În acest caz, puteți utiliza și panoul pentru dezvoltatori și puteți vedea cum va arăta ideea dvs. în browser. La urma urmei, tot ceea ce faci în panoul pentru dezvoltatori este vizibil doar pentru tine. Și pentru ca experimentele dvs. să fie văzute de vizitatori, va trebui să transferați stiluri și coduri în fișierele site-ului.

Deschiderea panoului webmaster și familiarizarea cu interfața

Panoul pentru dezvoltatori este prezent în fiecare browser modern. Pentru a-l deschide, trebuie să apăsați tasta F12 de pe tastatură.

Interfața panoului va diferi în diferite browsere, dar principiile de funcționare sunt similare.

Prefer panoul din browserul Firefox.

Panoul în sine este împărțit în două jumătăți și conține file și instrumente pentru lucru.

În panou puteți vizualiza codul HTML al paginii și îl puteți edita chiar acolo. Pentru a face acest lucru, selectați elementul dorit și apăsați butonul din dreapta mouse-ul și selectați din meniu „Editați caHTML (EditacaHTML)".

Pentru a lucra cu stiluri, trebuie să accesați secțiunea panoului CSS, unde le puteți adăuga stiluri sau le puteți dezactiva pe cele existente eliminând caseta de selectare de lângă ele. Totul poate fi schimbat.

Aici puteți afla în ce fișier se află stilurile și pe ce linie.

Cum să analizați un element html pe un site web și să aflați stilurile sale css

Să ne uităm la exemplul meu, care se află în fiecare articol.

Pentru a analiza elementul dorit, trebuie să faceți clic dreapta pe el și să selectați elementul de meniu .

Întregul principiu al lucrului cu codul din panou este că trebuie să selectați codul html în fereastra din stânga, iar în fereastra din dreapta vor exista stiluri pentru acest element.

Și dacă totul este destul de simplu cu stiluri, atunci când lucrați cu cod html trebuie să înțelegeți integritatea acestuia. Adică, fiecare element are etichete în care se află. Acestea pot fi paragrafe, link-uri, imagini și așa mai departe. Cel mai adesea acestea sunt blocuri DIV care au o etichetă de deschidere < div> si inchidere div>. Și totul este clar vizibil în panou.

Când copiați sau editați, este important să înțelegeți unde începe și unde se termină un bloc. A face cea mai mică greșeală aici poate perturba întregul aspect al șablonului.

În tutorialul video voi intra în detaliu asupra acestui punct. Și dacă vrei să stăpânești rapid cunoștințele de bază de html și css, te sfătuiesc să mergi pe pagină "Pe gratis"și descărcați cursuri de Evgeniy Popov.

Cum să copiați codul html din panou în fișierele site-ului

Pot exista multe idei pentru utilizarea panoului pentru dezvoltatori. După experimentarea în panou, rezultatul trebuie transferat în fișierele site-ului. Și există unele dificultăți aici. Cert este că panoul afișează cod html, iar majoritatea site-urilor moderne, inclusiv cele de pe platforma WordPress, sunt create folosind limbajul de programare PHP. Și acesta este ca cerul și pământul.

Deci, să ne uităm la un exemplu de copiere a unui banner de pe blogul meu și transfer pe alt site.

Pentru a face acest lucru, trebuie să deschideți panoul pentru dezvoltatori, examinând elementul dorit. După ce ați determinat începutul blocului DIV, apăsați butonul din dreapta al lunetei și selectați elementul de meniu „Copiați externHTML"

Codul a fost copiat în clipboard și acum trebuie să-l lipiți acolo unde doriți să vedeți acest banner.

Acest proces este destul de greu de descris, așa că vă sugerez să vizionați un tutorial video în care totul este explicat și prezentat în detaliu.

Cum să transferați stiluri din panoul dezvoltatorului în fișierele site-ului

Odată ce v-ați decis asupra codului și stilurilor, puteți începe să le transferați în fișierele site-ului. Deoarece deocamdată toate aceste modificări sunt vizibile doar pentru dvs. în browser, iar dacă reîmprospătați pagina, toate modificările vor dispărea.

, pentru mine este mai convenabil. Deoarece atunci când lucrați în Notepad++ există evidențierea codului și numerotarea liniilor. Și acest lucru vă ajută foarte mult atunci când nu trebuie doar să copiați stiluri, ci să faceți modificări pe cele existente. Aceste stiluri sunt ușor de găsit după numărul de rând.

Cum să verificați receptivitatea șablonului în panoul pentru dezvoltatori

Pentru a comuta panoul în modul adaptiv, trebuie să apăsați combinația de taste CTRL+SHIFT+M sau butonul din panoul pentru dezvoltatori, care este situat diferit în diferite browsere.

Concluzie

În acest articol, nu m-am uitat la toate instrumentele panoului de dezvoltatori, ci doar la cele care pot fi utile și sunt folosite cel mai des de mulți webmasteri.

Utilizarea panoului și abilitățile în lucrul cu codul și stilurile sunt indispensabile atunci când lucrați cu site-uri web și programe de afiliere.

Luați instrumentul în funcțiune, vă va fi util de mai multe ori.

Dacă aveți întrebări, vă voi răspunde cu plăcere în comentarii.

Prieteni, vă doresc succes. Ne vedem în articole noi.

Salutări, Maxim Zaitsev.