Find ud af problemer med websitet med Chrome-udviklingsværktøjer eller Firebug

Hvis du har fulgt min jQuery Making The Web Interactive: En introduktion til jQuery Making The Web Interactive: En introduktion til jQuery jQuery er et script-bibliotek på klientsiden, som næsten alle moderne websteder bruger - det gør websteder interaktive. Det er ikke det eneste Javascript-bibliotek, men det er det mest udviklede, mest understøttede og mest anvendte ... tutorials jQuery Tutorial - Kom godt i gang: Basics & Selectors jQuery Tutorial - Kom godt i gang: Basics & Selectors Sidste uge talte jeg om, hvor vigtigt jQuery er for enhver moderne webudvikler, og hvorfor det er fantastisk. Denne uge tror jeg, det er på tide, at vi får vores hænder beskidte med noget kode og lærte hvordan ... indtil videre har du muligvis allerede fået nogle kodeproblemer og ikke ved, hvordan du løser dem. Når man står over for en ikke-funktionel kodekode, er det meget vanskeligt at fastlægge den fornærmende kodelinje - og det er her, fejlfinding og udviklerværktøjer kommer ind.

Så før jeg fortsatte med en mere kompleks jQuery-kode, troede jeg, at vi ville undersøge de tilgængelige værktøjer i verdens mest populære browser - Chrome. Disse værktøjer er dog ikke kun til Javascript - de kan også hjælpe dig med at debug alle AJAX-anmodninger, ressourcer, som dit websted har brug for at indlæse, undersøge DOM-strukturen og en hel masse andre ting.

Ingen kærlighed til Firefox?

Selvom jeg specifikt vil henvise til Chrome-udviklerværktøjer i dag ud fra personlig præference, og det faktum, at de er indbygget i browseren, er den samme funktionalitet tilgængelig i et plugin til Firefox, der hedder Firebug. Sådan installeres Firebug på IE, Safari, Chrome & Opera Sådan installeres Firebug på IE, Safari, Chrome & Opera - grænsefladen er næsten identisk, så denne vejledning skal stadig anvendes.

Start af fejlfindingsværktøjer

Dette kunne ikke være lettere. I Chrome skal du blot ramme CTRL-SHIFT-I (CMD-ALT-I på Mac) eller højreklik overalt og vælg Kontroller elementet. Du skulle se noget, der ligner følgende:

Der er en lille forskel på disse to metoder til at starte debug-konsollen. Genvejstasten åbner den simpelthen i en standardvisning, mens Inspect Element fokuserer DOM-træet på det specifikke element, som du højreklikkede på. Hvilket bringer os til den første fantastiske bit af funktionalitet, vi får fra disse værktøjer.

Elementer og CSS

Det elementer fanen er opdelt i to sektioner; til venstre er det komplette DOM-træ. Dette svarer til kildekoden på siden, men er tydeligt mere nyttig.

Først har det været Parsede ind i en træstruktur, så elementer kan kollapses og udvides, så du kan undersøge børnelementer, forældre og søskende tydeligere end bare at læse kildekoden. For det andet afspejler det eventuelle dynamiske ændringer på siden, der følger af Javascript. For eksempel, hvis jQuery skulle tilføje en klasse til bestemte elementer på sideLoad, vil du se det afspejles i DOM-træet, men ikke sidekilden.

Du kan også redigere DOM lige der ved blot at dobbeltklikke på den. Ja, du kan bruge dette til at lege rundt og redigere websteder for at lave dumme skærmbilleder, så det er godt til simpel eksperimentering.

Her er jeg rodet med BBC nyheds hjemmeside ...

På højre side kan du se alle CSS-regler, der anvendes på det aktuelle element, inklusive hvilke er blevet tilsidesat af højere ordensregler (disse har en linje gennem dem):

Du kan justere disse eller bare fjerne markeringen af ​​en bestemt regel for at se, hvad der ville ske.

Fjernelse af “beregnede stilarter” viser dig et resume af alle CSS-regler, der i øjeblikket anvendes. Linjenummeret og fillinket helt til højre springer dig direkte til ressourcefilen, den er indlæst fra, selvom det i nogle tilfælde kan være en minimeret fil (så alt er på en linje).

Husk det ingen af ​​de ændringer, du foretager her, gemmes, så næste gang du opdaterer siden, vil den være tilbage til normal. Hvis du spiller med CSS, skal du huske at notere nøjagtigt, hvad du har ændret, når du får det ønskede resultat.

Fejlkonsol

Den næstvigtigste fane, hvad angår min daglige brug af disse fantastiske værktøjer, er fejl- og fejlfindingskonsollen, den sidste fane på listen. Til at begynde med vises alle Javascript-fejl her. Når du først starter med jQuery, kan du muligvis finde et par tilfælde af “$ er udefineret” eller “jQuery er ikke defineret” - en almindelig fejl, der betyder, at du har glemt at et link til jQuery i overskriften. Hvis du ser en fejl, som du ikke kan dechifrere, skal du bare kopiere den til et Google-søgefelt, og du vil mere end sandsynligt finde masser af andre mennesker, der havde det samme problem.

Fejlen peger også på den nøjagtige kodelinje, hvor fejlen først opstod; Klik på dette for at hoppe direkte til den linje og kodesektion. Hvis dette er i et af dine egne scripts, kan det ofte pege dig direkte til lovovertræderen - hvis fejlen dog er mere vag, kan den muligvis pege på jQuery-kildekoden, som er fuldstændig ikke-læsbar.

Det er tilstrækkeligt at sige, at konsollen er den første ting, du skal kontrollere, når noget ikke fungerer rigtigt, da det mere end sandsynligt er udskrevet en fejl der.

Den anden anvendelse til konsollen er at sende dine egne tilpassede debug-erklæringer. Du kan enten sende en smule tekst, såsom at fortælle dig selv, at scriptet har nået et bestemt punkt:

console.log ("fik denne bit i koden ok, prøver nu at ...");

Eller du kan udsende hele objekter og variabler så enkle som:

console.log (myVar);

Prøv nu ved at bruge nogle grundlæggende jQuery til at vælge nogle elementer, og send dem derefter ud for at se, hvordan de ser ud. Du kan bruge dette til at kontrollere, hvad dine vælgere f.eks. Har fundet.

Netværk

Det sidste værktøj i udviklerværktøjssættet, jeg ønskede at vise dig i dag, er Netværk fane. For at denne fane skal fungere, skal du være fokuseret på den og opdatere siden - den fanger derefter alle anmodninger, som siden fremsætter, til reklame, Javascript, CSS, billeder - alt - og giver dig en oversigt over information om denne interaktion, herunder:

• filnavn.
• type anmodning (GET eller POST).
• responskode, serveren sendte tilbage (200 OK, 304 Ikke ændret osv.).
• filstørrelse.
• timing.

Ved at klikke på en individuel fil vises nogle endnu mere detaljerede oplysninger om interaktionen mellem din browser og serveren. For mig er dette især nyttigt, når du fejler AJAX-anmodninger - du kan se nøjagtigt, hvilken type data der blev sendt med anmodningen, og det fulde output af svaret, der blev givet af det modtagende serversidescript.

Resumé

Jeg håber, at jeg har bevæbnet spirende udviklere med nogle ekstra værktøjer. Hvis du fandt dette indlæg nyttigt, ville jeg virkelig sætte pris på en andel, fordi det får mig til at føle mig varm og fuzzy indeni, og fortæller mig, at du vil have mig til at skrive mere som det. Jeg glæder mig også over kommentarer og feedback - især, hvilke andre værktøjer bruger du som webudvikler? Har du et arsenal af Firefox-plugins til rådighed?