În timp ce lucrați pe Internet, browserul Internet Explorer poate emite mesaje pe care pagina conține erori și poate fi afișată incorect. Luați în considerare mai multe modalități de corectare a acestei probleme.
Instrucțiuni
În timp ce lucrați pe Internet, browserul Internet Explorer poate emite mesaje pe care pagina conține erori și poate fi afișată incorect. Luați în considerare mai multe modalități de corectare a acestei probleme.
Instrucțiuni
Există, desigur, și alții - îi voi menționa cu siguranță.
Firebug pentru Firefox.
Nu știu sigur dacă Firebug. Progenitorul altor mijloace pentru dezvoltatori, dar este cu siguranță cea mai populară, convenabilă și funcțională până în prezent.
Firebug este o adăugare pentru Firefox, ceea ce înseamnă că ar trebui să fie descărcat de pe site-ul web Firefox Add-ons și instalare.
Pentru a apela la Firebug, este suficient să apăsați F12.
Oportunități pentru acest add-on:
- Inspectarea și editarea HTML în mod dinamic;
- Editarea CSS în zbor;
- Depanarea JavaScript, linia de comandă pentru a executa scripturi;
- Monitorizarea interogărilor de rețea - Puteți vedea dimensiunea și timpul de descărcare a fișierelor și a scripturilor, anteturile de interogare;
- DOM analizor.
Puteți spune mult timp despre aceste oportunități în detalii, dar cred că sunt cunoscute tuturor cititorilor noștri și, dacă nu - există informații detaliate despre pagina de pornire a paginii de pornire sau aceeași în traducerea Ilya Cantor.
În plus față de Firebug'a, puteți folosi un rând util la ea - Firecookie.Cu care (surpriză :-) pot fi vizualizate și schimbate cookie-uri.
Bara de Instrumente de Dezvoltare Web pentru Firefox
O altă adăugare utilă a focului. Se pare așa:
Vom examina la puncte.
Dezactivați
Vă permite să dezactivați JavaScript, să interziceți utilizarea cache-ului, ceea ce este foarte util la dezvoltarea (vă permite să vă asigurați că pagina este încărcată împreună cu cele mai recente actualizări), anulați culorile utilizate pe pagină și înlocuiți-le cu standard, interziceți Plecarea în antetul de referință (pagina cu care a fost tranziția).
Cookie-uri.
Opțiune utilă pentru lucrul cu cookie-uri: ele pot fi vizualizate, șterse, interzice și adăugați.
Css.
Acest meniu stochează caracteristica răcită a barei de instrumente dezvoltator - editarea CSS în zbor. În plus, este posibil să se vizualizeze CSS, să interzică și așa mai departe și altele asemenea. În opinia mea, aici este foarte utilă pentru prezența tastelor rapide (CTRL + SHIFT + C, de exemplu, vă permite să mergeți imediat la vizualizarea stilurilor paginii)
Forme.
Toate pentru a lucra cu formulare: Afișați parole, Afișați informații despre formulare, convertiți metodele de formular (obțineți "postați și viceversa) și multe altele. Funcție utilă "Populați câmpuri de formă" pentru a completa automat câmpurile de formular (de exemplu, când testați site-ul, când funcția de memorare a parolei este dezactivată. Pentru restul, nu văd nimic util în acest moment.
Imagini
Există o caracteristică utilă de dezactivare a imaginilor - pentru a vedea cum arată site-ul dvs. fără imagini. Imaginile pot fi înconjurate, arată dimensiunea lor, arată atributele alt.
informație
Acest meniu are o mulțime de opțiuni. Puteți fi o caracteristică utilă de afișare a clasei de atribute și a ID-ului pe pagină. În plus, elementul "Vizualizați informații despre culori" este interesant - pentru a obține rapid informații despre culorile care sunt utilizate pe pagină. Vizualizați dimensiunea documentului - Vizualizați dimensiunea paginii. "Vizualizați anteturile de răspuns" - Vizualizați pozițiile paginii.
Diverse.
Caracteristica cea mai frecvent utilizată este curățarea cache. În plus, funcțiile "riglă de pagină" - o linie, "Mufă de pagină" - Magnifier și "Ghiduri de linie" - mai multe linii care pot fi utile pentru a împinge modelul.
Contur
Alocarea diferitelor elemente ale paginii - tabele, anteturi, link-uri, cadre, blocuri. Redimensionarea Vă permite să modificați dimensiunea ferestrei browserului pentru orice extensii standard de ecrane. Instrumentele Aici sunt caracteristicile de validare a paginilor. Atât locale cât și externe. Acces convenabil și rapid la HTML, validarea CSS și alte lucruri. Pentru validarea HTML, puteți utiliza clauza CTRL + SHIFT + H.
Vizualizare sursă.
Vizualizați codul sursă. Abilitatea de a vizualiza într-o aplicație externă, vizualizarea codului generat.
Ce este în colțul din dreapta îmi place cel mai mult. Acesta este un indicator HTML HTML rapid, indicator de eroare CSS și JavaScript. Dacă nu există probleme - pictograma verde și dacă există probleme - roșu.
Internet Explorer Developer Bara de instrumente
Începând cu 8.0 erori de depanare, acesta este deja construit în acest browser. Este ușor chemată de tasta F12.. Adevărat, el este sărac ca un program al anilor '90.
Dar există un instrument mai răcitor pentru acest browser, așa-numitele descărcări de instrumente de instrumente Internet Explorer Descărcări prin referință.
Cu forma acestei Tulbar, desigur, arată ca Firebug, dar, din păcate, nu am încă Doros. Deși, pe de altă parte, există unele oportunități pe care nu există Firebug. Aș suna bara de instrumente Internet Explorer Developer la un anumit Firebug Hybrid și Dezvoltator Web Firefox. Bara de instrumente.
Ca și în Firebug, există o oportunitate de a inspecta elementul prin apăsare simplă. Dar, dacă putem vedea imediat padding'i și marjă, atunci nu există o astfel de oportunitate.
În plus, bara de instrumente Internet Explorer Developer nu actualizează arborele elemente dinamic, așa cum face Firebug. Asta este, dacă schimbăm ceva pe pagina Fondului JS, nu vom vedea nimic cu această Tulbara.
Din ceea ce poate fi respins - schimbați CSS în zbor (o modalitate ușoară de a găsi că hacking-ul :), abilitatea de a interzice CSS și imagini, abilitatea de a curăța rapid cache-ul și de a juca cu cookie-uri, acces rapid la validare.
Cel mai delicios lucru este că există un picker color încorporat, care vă permite să obțineți orice culoare din conducte. (Pentru FF există un plugin Colorzilla separat).
Debugbbar pentru Internet Explorer
Debugbar pentru Internet Explorer, puteți descărca pe linkul specificat.
În expansiunea sa interesantă. Instalat ca panou suplimentar în browser:
Există un motor de căutare încorporat, o pipetă, capacitatea de a schimba dimensiunea ferestrei și, din nou, din anumite motive, capacitatea de a trimite o pagină unui prieten să soage. Deși poate fi utilă. Dar nu am putut profita de această ocazie.
În plus, există un inspector:
Metoda de creație făcând clic pe sau prin îndrumarea dezvoltatorilor nu sa potrivit: au venit cu o bucată mai interesantă. În Debugbar'e trebuie să trageți vederea pe elementul dorit pentru ao vedea în copac. Abilitatea de a edita CSS nr. Dar există un validator și consola JS încorporată.
Și dacă doriți să săturați în setări, o puteți găsi:
Și ridicol și trist.
Se știe că în cel de-al optulea exploatator va fi construit în bara de instrumente dezvoltator. El va fi similar cu cel descris în al treilea punct, dar sperăm că va fi mai bine.
Debug dragonfly pentru operă
Dragonfly este construit în operă, începând cu versiunea 9.5, deci nu este necesar să se instaleze. Pentru a activa Dragonflays mergeți la Instrumente → Avansat → Mijloace pentru dezvoltatori. Și dacă în engleză, Instrumente → Avansat → Instrumente de dezvoltatori.
Întotdeauna avertizează că Dragonfly se află în stadiul Alpha2, ceea ce explică multe dintre glitchele sale.
Caracteristicile listei:
- Dom inspector;
- O inspecție prin clic (din nou, nu vom vedea linii ca în Firefox);
- Editare;
- Acces rapid la consola de eroare.
DF - ceva de genul unei pagini separate în freme. Dacă l-ați deschis, acesta va fi deschis tuturor filelor (spre deosebire de FireBug'a). Prin urmare, înainte de a inspecta elementul, trebuie să selectați pagina din lista pe care vrem să o vizualizăm.
Din păcate, aici, ca în bara de instrumente Internet Explorer Dav, elementele create dinamic nu sunt afișate. Și, în general, când inspectăm pagina, nu începe JavaScript: legăturile și butoanele nu sunt apăsate. Să sperăm când Dragonfly este potrivit pentru lansare, vom vedea toate aceste oportunități.
Debug Inspector web în Safari
Îți spun asta despre browser Safari. Informațiile fluierate, astfel încât pentru adecvarea materialului, așa cum se spune, nu răspund.
Pentru a activa în meniul Safari, elementul "Dezvoltare" este necesar în setările (fila Advanced) din elementul corespunzător:
În meniul "Dezvoltare", sunt disponibile următoarele funcții:
Să luăm în considerare detaliile inspectorului web:
În mod implicit, inspectorul se deschide în modul de vizualizare HTML. Dar poate fi comutat la modul de vizualizare DOM. Pentru a face acest lucru, există un comutator pe partea de sus a erupției cutanate. Când vă deplasați peste un element al inspectorului, acesta va fi evidențiat pe pagina însăși. Pentru a vedea liniuțele, schimbați marcajul sau CSS în zbor sau vedeți schimbarea dinamică a cupolă în zbor, ca și în Firebug, este imposibil. Dar veți fi de acord, pare foarte drăguț.
Dacă există dorința de a lucra cu un inspector în fereastra browserului, puteți face clic pe butonul din colțul din stânga jos.
Chiar și în Safari, o astfel de funcție ca "scară de rețea" este disponibilă (butonul de rețea în inspector):
Puteți vedea clar când și cât timp sunt încărcate fișierele. De asemenea, puteți vizualiza anteturile de solicitare, dar conținutul însuși pentru a vedea, din păcate, nu poate fi vizualizat.
Debug pentru dezvoltatori din Google Chrome
Chrome a apărut pe lumina în formă avansată și el a lăsat imediat să fie curbe, dar fonduri pentru dezvoltatori.
- Dom inspector;
- JavaScript Debugger;
- Consola JavaScript.
Pentru a inspecta orice element, trebuie să faceți clic dreapta pe acesta și să selectați "Vizualizați codul elementului" din meniul contextual:
Funcționalitatea este aceeași ca în Safari: elementele sunt tipuite prin hovering, dar editarea CSS și HTML nu sunt disponibile, modificările în DOM nu sunt urmărite. Acesta este doar, butonul din colțul din stânga jos, care ar trebui să atașeze inspectorul la fereastra browserului nu funcționează.
În fila "Resurse", putem vedea următoarele:
Moto diferă de scara din Safaris. Translucid pe această schemă este o dimensiune relativă a fișierului și o culoare completă - Timp de descărcare. Într-un fel sau altul, este evident că această parte a cromului nu este încă finalizată.
În acest articol, am revizuit cele mai cunoscute extensii și instrumente încorporate pentru browsere.
Există alții, de exemplu:
- Internet Explorer Web Development Helper - un asistent bun pentru dezvoltatorii ASP.NET (Internet Explorer);
- Web Developer Toolbar - Tulbar pentru Internet Explorer și Firefox. Există mai multe caracteristici utile;
- Bara de instrumente pentru accesibilitate pe web - Tulbar pentru Internet Explorer. Nimic interesant.
Dacă există adăugări pe care nu le-am menționat, dar ar merita, sau există funcții de la extensiile menționate, pe care mi-am pierdut-o, scrie.
Utilizați sănătatea!
Scrieți HTML - mare, dar cum să înțelegeți unde eroarea atunci când ceva nu funcționează? Acest articol descrie mai multe instrumente care ajută la căutarea și corectarea erorilor din HTML.
Debugingul nu este înfricoșător
În timp ce scrieți un cod, de obicei totul merge bine până când apare momentul când faceți o greșeală. Deci codul dvs. nu funcționează sau nu funcționează așa cum credeți. Dacă încercați să compilați programul non-de lucru în limba rugină, compilatorul va indica o eroare:
În acest caz, mesajul de eroare este de a înțelege relativ simplu - "String dublu dublu unterminat". Dacă vă uitați cu atenție la Println! (Bună ziua, Lumea! ");, Apoi observați că nu există dublu Quotion aici. Desigur, mesajele de eroare pot deveni mult mai complexe pentru înțelegere, așa cum crește codul dvs. și chiar cele mai simple cazuri pot Pare înfricoșătoare pentru cei care nu știu nimic despre rugină.
Dar nu vă fie frică de depanare! Pentru a scrie confortabil și depanați orice cod, trebuie să înțelegeți limba și instrumentele sale.
HTML și depanarea
HTML nu este la fel de pliat pentru a înțelege cum să rugați. HTML nu este compilat în nicio altă formă înainte ca browserul să analizeze acest lucru și să arate rezultatul (este interpretat și nu compilat). Sintaxa elementelor HTML este mult mai clară decât cea a limbajelor de programare reale, cum ar fi rugina, JavaScript sau Python. Metoda la care browserele citesc mai mult HTML toleranțadecât în \u200b\u200blimbile de programare care interpretează codul lor este mai strictă. Este în același timp rău și bine.
Cod de toleranță
Deci, ce înseamnă toleranți? În termeni generali, când ați fost injectat în cod, există două tipuri de erori cu care vă veți întâlni:
- Erori de sintaxă (erori de sintaxă): Acestea sunt greșeli în corectitudinea scrisului, așa cum era mai mare, în exemplul cu rugina. Acesta este, de obicei, ușor de corectat, în măsura în care știți cât de familiarizați cu sintaxa limbii și cunoașteți ce înseamnă mesaje de eroare.
- Erori logice (erori logice): Acestea sunt erori care apar în cazul în care sintaxa este corectă, dar codul nu își îndeplinește scopul, adică programul este incorect. O astfel de corecție este mai complicată decât sintactică, deoarece mesajele indică locul în care vă înșelați.
HTML nu suferă de erori de sintaxă, deoarece browserul citește codul tolerant, în sensul că paginile pot fi afișate chiar dacă sunt prezente erorile de sintaxă. Browserele au reguli încorporate pentru interpretarea marcajului incorect scris și puteți rula ceva, chiar dacă ați vrut să spuneți altul. Aceasta poate fi o problemă reală!
Pe o notă: HTML citește tolerant, deoarece atunci când Webul a apărut numai, sa decis să permită oamenilor să publice conținut chiar dacă este incorectă în cod, deoarece este mult mai importantă decât încrederea în sintaxa absolut corectă. Web nu ar fi atât de popular acum, dacă ar fi fost tratați cu strictețe.
Învățarea activă: Familiarizarea cu codul tolerant
Este timpul să studiem natura codului tolerant în HTML.
Validarea HTML.
Din exemplul de mai sus este clar că merită verificarea valabilității HTML. Într-un exemplu simplu de mai sus, puteți vedea pur și simplu toate codurile și găsiți erori, dar ce zici de pagini imense și complexe?
Cel mai bine este să verificați pagina din marcajul de validare. A fost creat și susținut de W3C - o organizație care este implicată în HTML, specificații CSS și alte tehnologii Web. Serviciul va verifica HTML-ul dvs. și va efectua un raport despre erorile din acesta.
HTML poate fi verificată la adresa descărcând fișierul sau pur și simplu răzuirea paginii.
Învățare activă: Validarea documentului HTML
- Deschideți serviciul de validare a marcajului în browser.
- Mergeți la validare prin modul de intrare directă.
- Copiați întregul cod al documentului (nu doar corpul) și introduceți în loc pentru a intra.
- presa Verificați (verificați).
Veți vedea o listă de erori și alte informații.
Lucrul cu mesaje de eroare
Este de obicei clar clar ce înseamnă mesajele, dar uneori trebuie să încercați să înțelegeți ce se întâmplă. Acum vom trece prin toate greșelile și vom întreba ce înseamnă ei. Rețineți că mesajele indică linia și coloana cod astfel încât erorile să fie mai ușor de căutat.
- "Eticheta de capăt Li implicită, dar au existat elemente deschise" (2 cazuri): Nu există o etichetă clară de închidere, deși browserul ghicește unde ar trebui să fie. Mesajul indică un șir după cel pe care a fost așteptat eticheta de închidere, dar veți găsi locul potrivit.
- "Element neclintit puternic": Aceasta este o eroare foarte simplă - elementul) indică faptul că conținutul său este de mare importanță, seriozitate sau urgență. Browserele afișează de obicei conținutul lui Bold. "\u003e Nu este închis, iar mesajul indică direct la eticheta de deschidere.
- "Tag-ul final puternic încalcă regulile de cuibărit": elementul este investit incorect - la acest nivel nu există nici o pereche de etichetă de deschidere.
- "Sfârșitul fișierului atins când se află într-o valoare a atributului. Ignorarea etichetei": Mesaj misterios. Faptul este că undeva (cel mai probabil, la sfârșitul documentului) a scris incorect proprietatea elementului, iar sfârșitul dosarului se afla în interiorul acestei proprietăți. Browserul nu vede legăturile - cel mai probabil problema de lângă ea.
- "Sfârșitul fișierului văzut și au fost elemente deschise": Fișierul sa terminat, dar unele elemente nu sunt închise. Mesajul indică sfârșitul fișierului, în acest caz elementul de exemplu nu este închis: link-ul la pagina de pornire Mozilla ↩
Destul de des, utilizatorii pot observa situația când apare eroarea de script în browser (adică). Dacă situația face parte dintr-un singur caracter, atunci nu este îngrijorat, dar când astfel de greșeli devin regulate, atunci merită să ne gândim la natura acestei probleme.
Scriptul de eroare din Internet Explorer este de obicei numit procesarea incorect a browserului de cod HTML, prezența fișierelor temporare de internet, parametrii de cont, precum și multe alte motive despre care vor fi discutate în acest material. Se vor lua în considerare și metode de rezolvare a acestei probleme.
Înainte de a continua cu metode general acceptate pentru diagnosticarea problemelor cu Internet Explorer, care provoacă erori de scenariu, trebuie să vă asigurați că eroarea apare nu numai pe un anumit site și imediat pe mai multe pagini web. De asemenea, trebuie să verificați pagina web pe care a apărut această problemă sub un alt cont, pe un alt browser și pe un alt computer. Acest lucru va determina gama de căutare a cauzelor erorii și va elimina sau confirma ipoteza că mesajele apar ca o consecință a prezenței unor fișiere sau setări de pe PC
Blocarea scripturilor active Internet Explorer, ActiveX și Java
Scenariile active, elementele ActiveX și Java afectează metoda de formare și afișare a informațiilor pe site și pot fi un motiv real pentru problema descrisă anterior dacă sunt blocate pe PC-ul utilizatorului. Pentru a vă asigura că erorile de script apar din acest motiv, este necesar să resetați pur și simplu setările de securitate a browserului. Pentru a implementa acest lucru, urmați recomandările.
- Deschide Internet Explorer 11
- Serviciu
- În fereastră, mergeți la fila Siguranță
- Apoi apăsați butonul Mod implicitși apoi butonul O.K
Fișierele temporare de Internet Explorer
De fiecare dată când deschideți o pagină web, Internet Explorer păstrează o copie locală a acestei pagini online la PC în așa-numitele fișiere temporare. Atunci când astfel de fișiere devine prea mult și dimensiunea folderului care le conține mai multe gigaocteți, pot apărea probleme cu afișarea unei pagini web, și anume, apare un mesaj despre eroarea de script. Dosarul de curățare obișnuit cu fișiere temporare poate ajuta la eliminarea acestei probleme.
Pentru a șterge fișierele temporare de Internet, urmați următoarea secvență de acțiuni.
- Deschide Internet Explorer 11
- Serviciu
- În fereastră, mergeți la fila General
- În capitolul. Browser Magazine. apasa butonul Elimina ...
- La fereastră Îndepărtarea istoriei revizuirii Verificați steagurile de lângă paragrafe Internet temporar și site web, Cookie-uri și date de site-uri web, Revistă
- apasa butonul Șterge
Lucrări de software anti-virus
Erori de script sunt posibile prin funcționarea programului antivirus atunci când blochează scenarii active, elemente ActiveX și Java pe o pagină sau un dosar pentru a salva fișierele temporare ale browserului. În acest caz, trebuie să vă îndreptați la documentația pentru produsul antivirus instalat și să dezactivați scanarea folderului pentru a economisi fișiere de internet în timp, precum și blocarea obiectelor interactive.
Procesarea codului paginii HTML incorectă
Ne manifestă, de regulă, pe unul dintre locurile particulare și indică faptul că codul paginii nu este complet adaptat la locul de muncă cu Internet Explorer. În acest caz, este mai bine să dezactivați depanarea scripturilor în browser. Pentru a face acest lucru, urmați acești pași.
- Deschide Internet Explorer 11
- În colțul superior al browserului (dreapta), faceți clic pe pictograma Serviciu Sub formă de unelte (sau o combinație a tastelor Alt + X). Apoi, în meniul deschis, selectați element.
- În fereastră, mergeți la fila În plus
- Apoi, debifați caseta de selectare din punct Afișați notificarea despre fiecare eroare de script și faceți clic pe O.K.
Această listă a celor mai frecvente motive care cauzează erori de script în Internet Explorer, deci dacă sunteți obosit de astfel de mesaje, acordați o atenție ușoare și rezolvați problema o dată pentru totdeauna.
În prezent, există un număr mare de browsere diferite, la un grad sau la altul, care sprijină standardele HTML existente. Personal, prefer browserul de la Mozilla Corporation. Acest browser are o istorie lungă (este scrisă pe baza faimosului browser Navigator Netscape). De asemenea, îmi place și acest browser prin faptul că acceptă sistemul de adăugiri separat separat, atunci când puteți să schimbați funcționalitatea și să vă configurați nevoile. Și în cele din urmă, acest browser este distribuit în mod liber cu coduri open source, care este, de asemenea, important. Prin urmare, am decis să descriu oportunitățile pe care acest browser le oferă nu numai utilizatorului, ci și dezvoltator de pagini web, cât de ușor și convenabil este procesul de depanare a produselor scrise.
Mozilla Firefox este unul dintre cei mai populari dezvoltatori și browsere de web dezvoltatori. Își atrage atenția datorită capabilităților pe care acest browser le oferă proiecte create, corectarea erorilor, îmbunătățiri. Livrarea standard a browserului include consola Java (sau "Consola de eroare"). Acest utilitar vă permite să reparați scripturile Java-script încorporate. Dar, o funcționalitate mult mai mare a browserului oferă plugin-uri terțe care pot fi descărcate și instalate de pe site-ul oficial al Fundației Mozilla. Acum vreau să iau în considerare două dintre aceste pluginuri - acesta este dezvoltatorul web și Firebug. Ambele adăugări pot fi descărcate în conformitate cu legăturile de mai sus de la site-ul oficial al add-on. După browserul de instalare și de repornire, dezvoltatorul oferă oportunități ample pe care le voi descrie mai jos, la rândul său pentru fiecare plugin-uri.
Pluginul Firebug.
După cum se menționează pe pagina oficială: "Firebug se integrează cu browser-ul Firefox pentru a îmbogăți foarte mult setul de instrumente al dezvoltatorului. Puteți edita, depana și explora CSS, HTML și JavaScript "Live", pe orice pagină web. " Și într-adevăr este. Luați în considerare unele dintre funcțiile acestui plugin, și anume:
- Vizualizați și editați HTML.
- Construi css.
- Monitorizarea interogărilor de rețea
- Depanarea JavaScript.
- Studiul JavaScript.
- Conectare pentru JavaScript
Aceasta nu este o listă completă a tuturor capacităților sale. Deci, proiectul este deschis (OpenSource), atunci oricine poate schimba și completa funcționalitatea.
Pentru a lucra cu pluginul, trebuie să apăsați tasta F12 (Ctrl-F12 pentru a lucra cu acesta într-o fereastră separată). După lansarea cu succes, obținem următoarele - Figura 1A, 1b.
Figura 1a. Fereastra inițială a pluginului Firebug.
Figura 1b. Fereastra inițială a pluginului Firebug.
Apoi, începe lucrarea reală cu pluginul. De exemplu, trebuie să găsim un obiect particular în codul HTML sau să determinăm exact fragmentul curent este implementat utilizând CSS. Pentru a face acest lucru, trebuie doar să selectați opțiunile necesare în meniul ferestrei pluginului. Exemplul de mai jos este HTML în modul Inspect. Acum, mergând la pagina de document, sub cursorul mouse-ului, vom observa zona dreptunghiulară care ilustrează complotul aici cu care lucrează în desfășurare. În fereastra plug-in, vom vedea acei parametri HTML și CSS care sunt utilizați. De asemenea, făcând clic pe fiecare dintre ele, puteți face schimbări și să le urmăriți în dinamică. Acțiunile descrise sunt ilustrate în figurile 2,3,4.
Dezvoltarea acestui proiect descrisă mai sus a pluginului a fost utilizată în aceste scopuri. Cu toate acestea, deși scriptul Java nu a fost folosit aici, pluginul Firebug poate fi, de asemenea, utilizat pentru a-l depana. Un exemplu de depanare este prezentat în Figura 5.
În acest sens, așa cum este descris mai sus, funcționalitatea acestei expansiuni nu este limitată. Puteți să o studiați complet și să utilizați în nevoile dvs. descărcând următoarele linkuri prin instalarea Mozilla Firefox.
Web Developer Plugin.
Dezvoltatorul web este a doua extindere a browserului Mozilla Firefox, foarte puternic și funcțional, care vă permite să produceți depanarea rapidă și eficientă. După instalarea acesteia, în fereastra browserului apare un panou suplimentar cu unelte, prezentat în Figura 6.Lucrați suplimentar cu pluginul intuitiv de înțeles. De exemplu, dacă trebuie să efectuăm lucrări cu CSS (deși nu la fel de complet funcțional, ca și în cazul unui plugin Firebug), puteți face clic pe meniul CSS și blocați, porniți sau dezactivați.
Foarte convenabil pentru dezvoltator este călcatul de a vedea cum va arăta proiectul său pe monitoare, cu o rezoluție diferită. Pentru a face acest lucru, utilizați fila Redimensionare. Aici puteți seta manual rezoluțiile necesare (800x600, 1024x768, etc.), apoi comutați liber între ele, contactați sau ștergeți conținutul. Această funcționalitate este descrisă în Figura 7.
Această extindere are, de asemenea, o funcționalitate bogată, care sunt descrise și disponibile pe site-uri oficiale.
Lista surselor utilizate
- 1. www.getfirebug.com.
Site-ul oficial. - 2. http://addons.mozilla.org.
Site-ul oficial al Mozilla, care plasează pluginurile pentru browserul Firefox, informații pentru dezvoltatori, informații despre utilizarea pluginurilor. - 3. http://chrispederick.com/work/web-developer/
Site-ul oficial Developer WebDeveloper Plugin.
Scrieți HTML - mare, dar cum să înțelegeți unde eroarea atunci când ceva nu funcționează? Acest articol descrie mai multe instrumente care ajută la căutarea și corectarea erorilor din HTML.
Debugingul nu este înfricoșător
În timp ce scrieți un cod, de obicei totul merge bine până când apare momentul când faceți o greșeală. Deci codul dvs. nu funcționează sau nu funcționează așa cum credeți. Dacă încercați să compilați programul non-de lucru în limba rugină, compilatorul va indica o eroare:
În acest caz, mesajul de eroare este de a înțelege relativ simplu - "String dublu dublu unterminat". Dacă vă uitați cu atenție la Println! (Bună ziua, Lumea! ");, Apoi observați că nu există dublu Quotion aici. Desigur, mesajele de eroare pot deveni mult mai complexe pentru înțelegere, așa cum crește codul dvs. și chiar cele mai simple cazuri pot Pare înfricoșătoare pentru cei care nu știu nimic despre rugină.
Dar nu vă fie frică de depanare! Pentru a scrie confortabil și depanați orice cod, trebuie să înțelegeți limba și instrumentele sale.
HTML și depanarea
HTML nu este la fel de pliat pentru a înțelege cum să rugați. HTML nu este compilat în nicio altă formă înainte ca browserul să o analiza și să arate rezultatul (este interpretat, dar nu compilated.). Sintaxa elementelor HTML este mult mai clară decât cea a limbajelor de programare reale, cum ar fi rugina, JavaScript sau Python. Metoda la care browserele citesc mai mult HTML toleranțadecât în \u200b\u200blimbile de programare care interpretează codul lor este mai strictă. Este în același timp rău și bine.
Cod de toleranță
Deci, ce înseamnă toleranți? În termeni generali, când ați fost injectat în cod, există două tipuri de erori cu care vă veți întâlni:
- Erori de sintaxă (erori de sintaxă): Acestea sunt greșeli în corectitudinea scrisului, așa cum era mai mare, în exemplul cu rugina. Acesta este, de obicei, ușor de corectat, în măsura în care știți cât de familiarizați cu sintaxa limbii și cunoașteți ce înseamnă mesaje de eroare.
- Erori logice (erori logice): Acestea sunt erori care apar în cazul în care sintaxa este corectă, dar codul nu își îndeplinește scopul, adică programul este incorect. O astfel de corecție este mai complicată decât sintactică, deoarece mesajele indică locul în care vă înșelați.
HTML nu suferă de erori de sintaxă, deoarece browserul citește codul tolerant, în sensul că paginile pot fi afișate chiar dacă sunt prezente erorile de sintaxă. Browserele au reguli încorporate pentru interpretarea marcajului incorect scris și puteți rula ceva, chiar dacă ați vrut să spuneți altul. Aceasta poate fi o problemă reală!
Pe o notă: HTML citește tolerant, deoarece atunci când Webul a apărut numai, sa decis să permită oamenilor să publice conținut chiar dacă este incorectă în cod, deoarece este mult mai importantă decât încrederea în sintaxa absolut corectă. Web nu ar fi atât de popular acum, dacă ar fi fost tratați cu strictețe.
Învățarea activă: Familiarizarea cu codul tolerant
Este timpul să studiem natura codului tolerant în HTML.
- Pentru a începe, descărcați Debugging-ul nostru exemplu și salvați local. Această demonstrație este scrisă în mod intenționat cu erorile pe care trebuie să le detectăm.
- Apoi, deschideți-l în browser. Veți vedea ceva de genul acesta:
- Acum documentul nu arată foarte bun; Să privim codul și să aflăm de ce este prezentat numai organismul de documente):
Exemple de depanare HTML.
Ce cauzează erori în HTML?
- Elemente nedculzate: dacă este un element nu este închis corect, atunci efectul său se poate răspândi în zone pe care nu le-ați intenționat
- Elementele prost imbricate: elementele de cuibărit sunt, de asemenea, foarte importante pentru ca codul să se comporte corect. puternic. puternic subliniat? Ce este asta?
- Atributele nedculzate: O altă sursă comună de probleme HTML. Să privim un exemplu: link-ul la pagina de pornire Mozilla
- Elemente nedculzate: dacă este un element nu este închis corect, atunci efectul său se poate răspândi în zone pe care nu le-ați intenționat
- Luați în considerare problemele:
- W. параграфа!} Și este folosit pentru a crea un element de listă. "\u003e Elementul de listă nu este închis etichete. În imagine, este clar că marcajul nu este afectat, deoarece browserul este ușor de încheiat în cazul în care un element se încheie și celălalt începe .
- Primul) indică faptul că conținutul său este de mare importanță, seriozitate sau urgență. Browserele afișează de obicei conținutul lui Bold. "\u003e Elementul nu are, de asemenea, o etichetă de închidere. Este deja mai problematică, deoarece este dificil de spus unde trebuie să se încheie elementul. De fapt, tot textul rămas a fost alocat grăsime.
- Următoarea parte încalcă defecțiunea cuibării: puternic. puternic subliniat? Ce este asta? . În acest caz, codul este, de asemenea, dificil de interpretat datorită celor descrise mai sus.
- Atributul HREF nu are o cotație dublă de închidere. Aceasta a fost cauza unei probleme majore - legătura nu a fost reprodusă deloc.
- Acum, să vedem cum a generat browser-ul propriu marcaj, spre deosebire de marca inițială a documentului. Pentru a face acest lucru, utilizați instrumentele de dezvoltator. Dacă nu sunteți familiarizat cu instrumentele de dezvoltator, luați câteva minute pentru a analiza instrumentele de dezvoltare din browsere.
- În Inspectorul DOM puteți vedea cum a fost generată noul marcaj:
- Folosind Inspectorul DOM, să ne uităm la detaliile codului nostru pentru a vedea cum browserul încearcă să remedieze erorile noastre în HTML (revizuim în Firefox, un alt browser modern trebuie să emită aceleași rezultate):
- Paragrafele și elementele de listă sunt obținute cu etichete de închidere.
- Nu era evident unde elementul Ar fi trebuit să fie închisă, astfel încât browserul a înfășurat fiecare bloc de text cu propriile etichete puternice și până la partea de jos a documentului!
- Cuibul incorect a fost fixat de browser, după cum urmează: puternic. puternic subliniat? Ce este asta?
- Legătura cu ghilimele duble lipsă a fost îndepărtată de comemorare. Ultimul element al listei va arăta astfel:
- Atributele nedculzate: O altă sursă comună de probleme HTML. Să privim un exemplu:
Validarea HTML.
Din exemplul de mai sus este clar că merită verificarea valabilității HTML. Într-un exemplu simplu de mai sus, puteți vedea pur și simplu toate codurile și găsiți erori, dar ce zici de pagini imense și complexe?
Cel mai bine este să verificați pagina din marcajul de validare. A fost creat și susținut de W3C - o organizație care este implicată în HTML, specificații CSS și alte tehnologii Web. Serviciul va verifica HTML-ul dvs. și va efectua un raport despre erorile din acesta.
HTML poate fi verificată la adresa descărcând fișierul sau pur și simplu răzuirea paginii.
Învățare activă: Validarea documentului HTML
- Deschideți serviciul de validare a marcajului în browser.
- Mergeți la validare prin modul de intrare directă.
- Copiați întregul cod al documentului (nu doar corpul) și introduceți în loc pentru a intra.
- presa Verificați (verificați).
Veți vedea o listă de erori și alte informații.
Lucrul cu mesaje de eroare
Este de obicei clar clar ce înseamnă mesajele, dar uneori trebuie să încercați să înțelegeți ce se întâmplă. Acum vom trece prin toate greșelile și vom întreba ce înseamnă ei. Rețineți că mesajele indică linia și coloana cod astfel încât erorile să fie mai ușor de căutat.
- "Eticheta de capăt Li implicită, dar au existat elemente deschise" (2 cazuri): Nu există o etichetă clară de închidere, deși browserul ghicește unde ar trebui să fie. Mesajul indică un șir după cel pe care a fost așteptat eticheta de închidere, dar veți găsi locul potrivit.
- "Element neclintit puternic": Aceasta este o eroare foarte simplă - elementul) indică faptul că conținutul său este de mare importanță, seriozitate sau urgență. Browserele afișează de obicei conținutul lui Bold. "\u003e Nu este închis, iar mesajul indică direct la eticheta de deschidere.
- "Tag-ul final puternic încalcă regulile de cuibărit": elementul este investit incorect - la acest nivel nu există nici o pereche de etichetă de deschidere.
- "Sfârșitul fișierului atins când se află într-o valoare a atributului. Ignorarea etichetei": Mesaj misterios. Faptul este că undeva (cel mai probabil, la sfârșitul documentului) a scris incorect proprietatea elementului, iar sfârșitul dosarului se afla în interiorul acestei proprietăți. Browserul nu vede legăturile - cel mai probabil problema de lângă ea.
- "Sfârșitul fișierului văzut și au fost elemente deschise": Fișierul sa terminat, dar unele elemente nu sunt închise. Mesajul indică sfârșitul fișierului, în acest caz elementul de exemplu nu este închis: link-ul la pagina de pornire Mozilla ↩