hjem › Multimedia › Nettsidefeil ved feilsøking. Skriptfeil i Internet Explorer. Årsaker og metoder for eliminering. Profilering av SQL-spørringer Feilsøk en nettside

Nettsidefeil ved feilsøking. Skriptfeil i Internet Explorer. Årsaker og metoder for eliminering. Profilering av SQL-spørringer Feilsøk en nettside

Mens du surfer på Internett nettleser Utforsker kan vise meldinger om at siden inneholder feil og kanskje ikke vises riktig. La oss se på noen måter å løse dette problemet på.

Instruksjon

Hvis det ikke er noen synlige problemer i nettleseren, bortsett fra en periodisk feil, kan du prøve å slå av skriptfeilsøking slik at meldingen ikke vises igjen (hvis feilen vises på mer enn ett nettsted, men på flere nettsteder samtidig, fortsett til neste trinn). Fra Verktøy-menyen, åpne Alternativer for Internett, velg kategorien Avansert og merk av i boksen ved siden av Forhindre skriptfeilsøking. Hvis du trenger å slå av varslingen om alle feil, fjerner du merket for «Vis varsling om hver skriptfeil».

Prøv å åpne nettstedet som forårsaker feilen mens du surfer fra en annen konto eller fra en annen datamaskin for å se om problemet er lokalt. Hvis feilen vises, er det mest sannsynlig forårsaket av feil nettsidekode. I dette tilfellet kan du deaktivere skriptfeilsøking ved å følge instruksjonene i forrige trinn. Hvis problemet forsvinner når du surfer på nettstedet med en annen datamaskin eller konto, fortsett til neste trinn.

Det er mulig at Internet Explorer ikke blokkerer aktive skript, Java og ActiveX, som bestemmer visningen av informasjon på siden ved surfing. For å fikse problemet må du tilbakestille nettleserens sikkerhetsinnstillinger. For å gjøre dette, i "Verktøy"-menyen, velg "Alternativer for Internett" og gå til fanen "Sikkerhet". Klikk på "Standard"-knappen og deretter "OK". Hvis problemet vedvarer etter restart av siden som forårsaket feilen, prøv neste metode.

Som du vet, lagrer nettleseren midlertidige filer og kopier av sider i en egen mappe for senere tilgang til dem. Hvis mappestørrelsen blir for stor, kan noen sider vise feil. Problemet kan løses ved å tømme mappen for midlertidige filer med jevne mellomrom. For å gjøre dette, åpne dialogboksen Alternativer for Internett fra Verktøy-menyen. I kategorien Generelt, i Historikk-gruppen, klikker du på Slett-knappen. Merk av i boksene for Midlertidige Internett-filer, Informasjonskapsler, Historie, Webskjemadata, og klikk OK.

Det finnes selvfølgelig andre – jeg vil definitivt nevne dem.

Firebug for Firefox

Jeg vet ikke sikkert om brannbug stamfaderen til andre utviklerverktøy, men det er definitivt det mest populære, praktiske og funksjonelle til dags dato.

Firebug er et tillegg for Firefox, noe som betyr at det må lastes ned fra Firefox-tilleggssiden og installeres.

For å ringe brannfeilen, trykk bare F12.

Funksjoner til dette tillegget:

Inspeksjon og redigering av dynamisk endrende HTML;
CSS-redigering på farten;
Feilsøking av JavaScript kommandolinjeå utføre skript;
Overvåking av nettverksforespørsler - du kan se størrelsen og nedlastingstiden for filer og skript, forespørselshoder;
DOM-parser.

Du kan snakke om disse funksjonene i detalj i lang tid, men jeg tror at de er kjent for alle våre lesere, og hvis ikke - detaljert informasjon er på hjemmesiden til Firebug eller det samme i oversettelsen av Ilya Kantor.

I tillegg til selve firebug, kan det hende du trenger nyttig lotion til ham - branninformasjonskapsel, som (overraskelse:-) du kan se og endre informasjonskapsler med.

WEB Developer Toolbar for Firefox

Nok et nyttig tillegg til Ognelis. Det ser slik ut:

La oss gå gjennom punktene.

Deaktiver

Lar deg slå av JavaScript, deaktivere bruken av cachen, noe som er veldig nyttig når du utvikler ( lar deg være sikker på at siden lastet med siste oppdateringer), avbryt fargene som brukes på siden og erstatt dem med standardfarger, deaktiver sending i henvisningshodet (siden som overgangen ble gjort fra).

Informasjonskapsler

Et nyttig alternativ for å jobbe med informasjonskapsler: de kan vises, slettes, blokkeres og legges til.

css

Denne menyen inneholder utviklerverktøylinjens kuleste funksjon - CSS-redigering underveis. I tillegg er det mulig å se css, deaktivere, og så videre og så videre. Etter min mening er tilstedeværelsen av tastatursnarveier veldig nyttig her (CTRL + SHIFT + C, for eksempel, lar deg umiddelbart gå til å vise sidestiler)

Skjemaer

Alt for å jobbe med skjemaer: vis passord, vis informasjon om skjemaer, konverter skjemametoder (GET » POST og omvendt) og mye mer. Nyttig funksjon "Fyll ut skjemafelt" for automatisk utfylling av skjemafelt (for eksempel når du tester et nettsted når passordhuskingsfunksjonen er deaktivert. Ellers ser jeg ikke noe nyttig i dette avsnittet.

Bilder

Det er en nyttig funksjon for å slå av bilder – for å se hvordan siden din ser ut uten bilder. Bilder kan sirkles, vise størrelsene deres, vise alt-attributter.

Informasjon

Denne menyen har mange alternativer. Det kan være nyttig å vise klasse- og id-attributtene på siden. I tillegg er elementet "Se fargeinformasjon" interessant - for raskt å få informasjon om fargene som brukes på siden. "Se dokumentstørrelse" - vis sidestørrelse. "Se svarhoder" - se sideoverskrifter.

Diverse

Den mest brukte funksjonen er å tømme hurtigbufferen. I tillegg er "Sidelinjal" - linjal, "Sideforstørrelsesglass" - forstørrelsesglass og "Linjeguider" - noen få linjer er tilgjengelige her, som kan være nyttige for å trimme malen.

disposisjon

Utvalg av ulike sideelementer - tabeller, overskrifter, lenker, rammer, blokker. Resize lar deg endre størrelsen på nettleservinduet for å passe til alle standard skjermutvidelser. Verktøy her er lagrede funksjoner for sidevalidering. Både lokalt og eksternt. Praktisk og rask tilgang validering av HTML, CSS og mer. Du kan bruke CTRL+SHIFT+H hurtigtastene for å validere HTML.

se kilde

Utsikt kildekode. Evne til å se i en ekstern applikasjon, se den genererte koden.

Den til høyre er min favoritt. Det er en rask HTML-, CSS-validator og JavaScript-feilindikator. Hvis det ikke er noen problemer, er ikonet grønt, og hvis det er problemer, er det rødt.

Utviklerverktøylinjen for Internet Explorer

Fra 8.0 er feilsøking allerede innebygd i denne nettleseren. Det kalles lett F12 nøkkel. Riktignok er han elendig som et program fra 90-tallet.

Men det finnes et mye kulere verktøy for denne nettleseren, den såkalte Internet Explorer Developer Toolbar kan lastes ned fra lenken.

Utseendemessig ser denne verktøylinjen selvfølgelig ut som en brannbug, men dessverre har den ikke vokst opp til den ennå. Selv om den på den annen side har noen funksjoner som firebuggen ikke har. Jeg vil kalle Internet Explorer Developer Toolbar en hybrid av Firebug og firefox nettutvikler Verktøylinje.

Som i firebug, er det en mulighet for å inspisere et element med et enkelt klikk. Men hvis vi umiddelbart kan se polstringer og marginer, er det ingen slik mulighet her.

Internet Explorer Developer Toolbar oppdaterer heller ikke elementtreet dynamisk, slik Firebug gjør. Det vil si at hvis vi endrer noe på siden ved hjelp av js, vil vi ikke se noe ved å bruke denne verktøylinjen.

Fra det du kan glede deg over - å endre CSS på farten (en enkel måte å finne hva du skal hacke :), muligheten til å deaktivere CSS og bilder, muligheten til raskt å tømme cachen og leke med informasjonskapsler, rask tilgang til validering.

Det deiligste: det er en innebygd fargevelger som lar deg hente hvilken som helst farge fra siden ved hjelp av en pipette. (for ff er det en egen ColorZilla-plugin).

Debug Debug Bar for Internet Explorer

Du kan laste ned DebugBar for Internet Explorer fra den angitte lenken.

En interessant utvidelse i seg selv. Installert som et tilleggspanel til nettleseren:

Av en eller annen grunn er det en innebygd søkemotor, en pipette, muligheten til å endre størrelse på vinduet og, igjen, av en eller annen grunn, muligheten til å sende en side til en venn for såpe. Selv om det kan være nyttig. Men jeg klarte ikke å benytte meg av denne muligheten.

I tillegg er det en inspektør:

Metoden for inspeksjon ved å klikke eller peke passet ikke utviklerne: de kom opp med en mer interessant ting. I DebugBar må du dra målet til ønsket element for å se det i treet. Det er ingen mulighet til å redigere CSS. Men det er en validator og en innebygd js-konsoll.

Og hvis du graver i innstillingene, kan du finne dette:

Både morsomt og trist.

Det er kjent at utviklerverktøylinjen vil bygges inn i den åttende utforskeren. Den vil ligne på den som er beskrevet i tredje ledd, men vi håper at den blir bedre.

Feilsøk DragonFly for Opera

DragonFly har vært innebygd i Opera siden versjon 9.5, så det er ikke nødvendig å installere det. For å aktivere Dragonfly, gå til Verktøy → Avansert → Utviklerverktøy. Og hvis på engelsk, så Verktøy → Avansert → Utviklerverktøy.

Jeg vil umiddelbart advare deg om at DragonFly er i Alpha2-stadiet, dette forklarer mange av feilene.

Funksjonsliste:

DOM inspektør;
Klikk Inspeksjon (igjen, vi vil ikke se polstring som i FireFox);
Redigering;
Rask tilgang til feilkonsollen.

DF er noe som en egen side i en ramme. Hvis du åpner den, vil den være åpen for alle faner (i motsetning til firebug). Derfor, før vi inspiserer et element, må vi velge siden vi ønsker å se fra listen.

Dessverre, her, som i Internet Explorer, viser ikke Dav-verktøylinjen dynamisk opprettede elementer. Og generelt, når vi inspiserer siden, kjøres ingen JavaScript: lenker og knapper blir ikke klikket. La oss håpe at når DragonFly nærmer seg utgivelsen, vil vi se alle disse funksjonene.

Feilsøk WEB Inspector i Safari

Jeg vil si det med en gang om nettleseren safari Jeg plystret informasjonen, derfor, som de sier, er jeg ikke ansvarlig for at materialet er tilstrekkelig.

For å aktivere "Utvikling"-elementet i Safari-menyen, må du aktivere det tilsvarende elementet i innstillingene (fanen "Avansert"):

Følgende funksjoner er tilgjengelige for oss i "Utvikling"-menyen:

La oss se nærmere på WEB-inspektøren:

Som standard åpnes inspektøren i HTML-visningsmodus. Men den kan byttes til DOM-visningsmodus. For å gjøre dette er det en bryter på toppplaten. Når du holder musepekeren over et element i inspektøren, vil det bli uthevet på selve siden. Du kan ikke se utfylling, endre oppmerking eller CSS i farten, eller se dynamiske endringer i DOMe på flukt som du ikke kan i FireBug. Men, ser du, det ser veldig fint ut.

Hvis du ønsker å jobbe med inspektøren i et nettleservindu, kan du klikke på knappen i nedre venstre hjørne.

Selv i safari er en funksjon som "Nettverkstidslinje" tilgjengelig ("Nettverk"-knappen i inspektøren):

Du kan tydelig se når og hvor lenge filer er lastet. Du kan også se forespørselshodene, men du kan dessverre ikke se selve innholdet.

Feilsøking for utviklere i Google Chrome

Lame ble født i en avansert form, og han har umiddelbart, riktignok skjevt foreløpig, men fortsatt verktøy for utviklere.

DOM-inspektør;
javascript debugger;
JavaScript-konsoll.

For å inspisere et element, høyreklikk på det og kontekstmenyen velg "Vis elementkode":

Funksjonaliteten er den samme som i Safari: Elementer utheves ved hover, men CSS- og HTML-redigering er ikke tilgjengelig, endringer i DOM spores ikke. Bare knappen i nedre venstre hjørne, som skal feste inspektøren til nettleservinduet, fungerer ikke.

I fanen "Ressurser" kan vi se følgende:

Litt forskjellig fra skalaen i safarien. Gjennomsiktig i dette diagrammet er relative filstørrelser, og full farge er nedlastingstid. På en eller annen måte er det åpenbart at denne delen av Chrome fortsatt er langt fra fullført.

I denne artikkelen gjennomgikk jeg de mest kjente utvidelsene og innebygde verktøyene for nettlesere.

Det er andre, for eksempel:

Internet Explorer WEB Development Helper er en god hjelper for ASP.NET-utviklere (Internet Explorer);
WEB Developer Toolbar - verktøylinje for Internet Explorer og FireFox. Det er flere nyttige funksjoner;
WEB Accessibility Toolbar - verktøylinje for Internet Explorer. Ingenting interessant.

Hvis det er tillegg som jeg ikke nevnte, men som ville være verdt det, eller det er funksjoner for de nevnte utvidelsene jeg savnet, skriv.

Bruk på helse!

Å skrive HTML er flott, men hvordan vet du hvor feilen er når noe ikke fungerer? Denne artikkelen beskriver flere verktøy som hjelper deg med å finne og fikse feil i HTML.

Feilsøking er ikke skummelt

Mens du skriver litt kode, går alt vanligvis bra til det øyeblikket du gjør en feil. Så koden din fungerer ikke, eller fungerer ikke slik du hadde tenkt. Hvis du prøver å kompilere et rustprogram som ikke fungerer, vil kompilatoren rapportere en feil:

I dette tilfellet er feilmeldingen relativt lett å forstå - "uterminert dobbelt anførselstegn". Hvis du ser nøye på println!(Hei, verden!"); , vil du legge merke til at det ikke er noe dobbelt anførselstegn. Selvfølgelig kan feilmeldinger bli mye vanskeligere å forstå ettersom koden din vokser, og selv de enkleste tilfellene kan være skremmende for de som ikke vet noe om Rust.

Men ikke vær redd for å feilsøke! For å komfortabelt skrive og feilsøke hvilken som helst kode, må du forstå språket og dets verktøy.

HTML og feilsøking

HTML er ikke så vanskelig å forstå som Rust. HTML-en kompileres ikke til noen annen form før nettleseren analyserer den og viser resultatet (det er tolket, ikke kompilert). Syntaks HTML-elementer mye klarere enn "ekte programmeringsspråk" som Rust, JavaScript eller Python. Måten nettlesere leser HTML er mer tolerant enn programmeringsspråk som tolker koden deres strengere. Dette er både dårlig og bra på samme tid.

tolerant kode

Så hva betyr tolerant? Generelt sett, når du roter til i kode, er det to typer feil du vil støte på:

Syntaksfeil: Dette er stavefeil, som ovenfor i Rust-eksemplet. Disse er vanligvis enkle å fikse, så lenge du er kjent med språkets syntaks og vet hva feilmeldingene betyr.
Logiske feil: Dette er feil som vises når syntaksen er riktig, men koden oppfyller ikke formålet, det vil si at programmet ikke kjører riktig. Disse er vanskeligere å fikse enn syntaktiske, siden det ikke vises noen meldinger som indikerer stedet du gjorde en feil.

HTML lider ikke av syntaksfeil fordi nettleseren leser kodetolerant, i den forstand at sider kan gjengis selv om syntaksfeil er tilstede. Nettlesere har innebygde regler for å tolke dårlig skrevet markup, og du kan kjøre noe selv om du mente noe annet. Dette kan være et reelt problem!

På en lapp: HTML er lesbart fordi da nettet først ble til, ble det besluttet å la folk publisere innhold selv om koden var feil, da dette er mye viktigere enn å sørge for at syntaksen er helt korrekt. Nettet ville ikke vært så populært akkurat nå hvis det var strengt med nykommere.

Aktiv læring: Introduserer tolerant kode

På tide å utforske naturen til tolerant kode i HTML.

HTML-validering

Det er klart fra eksempelet ovenfor at det er verdt å sjekke gyldigheten til HTML. I det enkle eksemplet ovenfor kan du bare gå gjennom all koden og finne feil, men hva med enorme, komplekse sider?

Det er best å sjekke siden i oppmerkingsvalideringstjenesten. Den ble opprettet og vedlikeholdt av W3C, organisasjonen som er ansvarlig for spesifikasjonen av HTML, CSS og andre nettteknologier. Tjenesten vil sjekke HTML-en din og rapportere feil i den.

HTML kan sjekkes på adressen ved å laste opp filen eller ganske enkelt kopiere den til siden.

Aktiv læring: Validering av et HTML-dokument

Åpne oppmerkingsvalideringstjenesten i nettleseren din.
Bytt til modusen Valider med direkte inndata.
Kopier hele koden til dokumentet (ikke bare brødteksten) og lim den inn i inndatafeltet.
trykk Sjekk (sjekk).

Du vil se en liste over feil og annen informasjon.

Arbeid med feilmeldinger

Vanligvis er det umiddelbart klart hva meldingene betyr, men noen ganger må man prøve å forstå hva det er. Nå skal vi gå gjennom alle feilene og analysere hva de betyr. Merk at meldingene inkluderer en rad og en kolonne med kode for å gjøre det lettere å finne feil.

"End tag li implied, but there were open elements" (2 forekomster): Det er ingen eksplisitt slutttag, selv om nettleseren gjetter hvor den skal være. Meldingen peker på linjen etter den der sluttkoden var forventet, men du finner riktig sted.
"Ulukket element sterkt": Dette er veldig enkel feil- element) indikerer at innholdet er av stor betydning, alvor eller haster. Nettlesere gjengir vanligvis innhold med fet skrift."> er ikke lukket og meldingen peker direkte til startkoden.
"End tag strong violates Nesting rules": Elementet er nestet feil – det er ingen matchende åpningstag på dette nivået.
"Slutten på filen nådd når du er inne i en attributtverdi. Ignorerer tag": Mystisk melding. Saken er at et sted (mest sannsynlig, på slutten av dokumentet) er egenskapen til et element feil registrert, og slutten av filen dukket opp i denne egenskapen. Linken er ikke synlig i nettleseren - mest sannsynlig er problemet ved siden av den.
"Slutt på fil sett og det var åpne elementer": Filen er avsluttet, men noen elementer er ikke lukket. Meldingen indikerer slutten av filen, i dette tilfellet er ikke elementet lukket eksempel: lenke til Mozilla hjemmeside ↩

↩ ↩

Ganske ofte kan brukere observere en situasjon der en skriptfeilmelding vises i nettleseren (IE). Hvis situasjonen er isolert, bør du ikke bekymre deg, men når slike feil blir vanlige, bør du tenke på arten av dette problemet.

En skriptfeil i Internet Explorer er vanligvis forårsaket av at nettleseren ikke håndterer HTML-sidekoden på riktig måte, tilstedeværelsen av midlertidige Internett-filer, kontoinnstillinger og mange andre årsaker til at vil bli diskutert i dette materialet. Metoder for å løse dette problemet vil også bli vurdert.

Før du fortsetter med vanlige metoder for å diagnostisere problemer med Internet Explorer som forårsaker skriptfeil, må du sørge for at feilen ikke bare oppstår på ett bestemt nettsted, men på flere nettsider samtidig. Du må også sjekke nettsiden der problemet oppstår under en annen regnskap, på en annen nettleser og på en annen datamaskin. Dette vil begrense søket etter årsaken til feilen og ekskludere eller bekrefte hypotesen om at meldinger vises som et resultat av tilstedeværelsen av visse filer eller innstillinger på PC-en.

Blokkering av aktive skript i Internet Explorer, ActiveX og Java

Aktiv skripting, ActiveX-kontroller og Java påvirker måten informasjon genereres og vises på nettstedet og kan være den egentlige årsaken til det tidligere beskrevne problemet hvis de blokkeres på brukerens PC. For å være sikker på at skriptfeil oppstår av denne grunn, trenger du bare å tilbakestille nettleserens sikkerhetsinnstillinger. For å gjøre dette, følg følgende retningslinjer.

Åpne Internet Explorer 11
Service

Gå til fanen i vinduet Sikkerhet
Klikk deretter på knappen Misligholde og deretter knappen OK

Midlertidige filer i Internet Explorer

Hver gang du åpner en nettside, lagrer Internet Explorer en lokal kopi av denne nettsiden på din PC i såkalte midlertidige filer. Når det er for mange slike filer og størrelsen på mappen som inneholder dem når flere gigabyte, kan det oppstå problemer med å vise nettsiden, nemlig en skriptfeilmelding. Regelmessig tømming av mappen for midlertidige filer kan bidra til å løse dette problemet.
Følg trinnene nedenfor for å slette midlertidige Internett-filer.

Åpne Internet Explorer 11
Service
Gå til fanen i vinduet Er vanlig
I kapittel Nettleserhistorikk trykk på knappen Slett...

I vinduet Slett nettleserloggen merk av i boksene ved siden av elementene Midlertidige filer på Internett og nettsteder, Informasjonskapsler og nettsidedata, Blad
Klikk på knappen Slett

Drift av antivirusprogramvare

Skriptfeil er mulig gjennom arbeid antivirusprogram når den blokkerer aktive skript, ActiveX- og Java-kontroller på siden, eller mapper for å lagre midlertidige nettleserfiler. I dette tilfellet bør du se dokumentasjonen for det installerte antivirusproduktet og deaktivere skannemapper for å lagre midlertidige Internett-filer, samt blokkere interaktive objekter.

Feil behandling av HTML-sidekode

Den vises som regel på ett bestemt nettsted og indikerer at sidekoden ikke er fullt tilpasset for å fungere med Internet Explorer. I dette tilfellet er det best å deaktivere skriptfeilsøking i nettleseren. For å gjøre dette, følg disse trinnene.

Åpne Internet Explorer 11
Klikk på ikonet øverst til høyre i nettleseren Service i form av et tannhjul (eller tastekombinasjonen Alt + X). Velg deretter i menyen som åpnes
Gå til fanen i vinduet I tillegg
Deretter fjerner du merket i boksen Vis varsel for hver skriptfeil og trykk på knappen OK.

Dette er en liste over de fleste vanlige årsaker, som forårsaker skriptfeil i Internet Explorer, så hvis du er lei av slike meldinger, vær litt oppmerksom og løs problemet en gang for alle.

På dette øyeblikket det finnes et stort antall forskjellige nettlesere som til en viss grad støtter eksisterende HTML-standarder. Personlig foretrekker jeg nettleseren fra Mozilla Corporation. Denne nettleseren har en lang historie (den er basert på den berømte Netscape Navigator-nettleseren). Jeg liker også denne nettleseren fordi den støtter et system med plug-ins - separat distribuerte tillegg, når tilkoblet kan du endre funksjonaliteten og tilpasse den til dine behov. Og til slutt er denne nettleseren fritt distribuert med åpne kildekoder, noe som også er viktig. Derfor bestemte jeg meg for å beskrive mulighetene som denne nettleseren gir ikke bare til brukeren, men også til utvikleren av nettsider, hvor enkel og praktisk prosessen med å feilsøke skrevne produkter kan være.

Mozilla Firefox er en av de mest populære nettleserne blant utviklere og webutviklere. Det tiltrekker seg oppmerksomheten deres på grunn av mulighetene denne nettleseren gir for å feilsøke opprettede prosjekter, fikse feil og forbedre. Nettleseren leveres som standard med en java-konsoll (eller "feilkonsoll"). Dette verktøyet lar deg feilsøke innebygde java-skript. Men tredjeparts plugins gir mye mer funksjonalitet til nettleseren, som kan lastes ned og installeres fra den offisielle nettsiden til Mozilla Foundation. Nå vil jeg se på to av disse pluginene - Web Developer og Firebug. Begge disse tilleggene kan lastes ned fra koblingene ovenfor fra det offisielle tilleggsnettstedet. Etter å ha installert dem og startet nettleseren på nytt, har utvikleren mange muligheter, som jeg vil beskrive nedenfor, i sin tur for hver av pluginene.

firebug-plugin

Som det står på den offisielle siden: "Firebug integreres med Firefox-nettleseren for å berike utviklerverktøysettet. Du vil kunne redigere, feilsøke og utforske CSS, HTML og Javascript live, på hvilken som helst nettside." Og det er det faktisk. Vurder noen av funksjonene til denne plugin-en, nemlig:

Se og rediger HTML.
Bygge CSS.
Overvåking av nettverksforespørsel
Feilsøking av JavaScript
JavaScript-forskning
Logger for JavaScript

Dette er ikke en fullstendig liste over alle funksjonene. Siden prosjektet er åpen kildekode, kan hvem som helst endre og legge til funksjonalitet.

For å jobbe med plugin-en må du trykke på F12-tasten (Ctrl-F12 for å jobbe med den i et eget vindu). Etter en vellykket lansering får vi følgende - Figur 1a, 1b.

Figur 1a. Det første vinduet til firebug-pluginen.

Figur 1b. Det første vinduet til firebug-pluginen.

Deretter begynner selve arbeidet med plugin-en. La oss si at vi må finne dette eller det objektet i HTML-koden, eller bestemme nøyaktig hvordan det implementeres med bruker CSS nåværende fragment. For å gjøre dette trenger du bare å velge de nødvendige alternativene i plug-in-vindusmenyen med musen. I eksemplet nedenfor er dette HTML i inspeksjonsmodus. Gå til siden av dokumentet, under musepekeren vil vi legge merke til et rektangulært område som her illustrerer området vi jobber med. I plugin-vinduet vil vi se HTML- og CSS-parametrene som brukes. Ved å klikke på hver av dem kan du også gjøre endringer og spore dem i dynamikk. De beskrevne handlingene er illustrert i figurene 2,3,4.

I utviklingen av dette prosjektet ble plugin beskrevet ovenfor brukt nettopp for disse formålene. Men selv om det ikke er brukt noe java-script her, kan firebug-pluginen også brukes til å feilsøke det. Et eksempel på feilsøking er vist i figur 5.

På dette, som beskrevet ovenfor, er funksjonaliteten til denne utvidelsen ikke begrenset. Du kan studere det fullstendig og bruke det til dine behov ved å laste det ned fra koblingene som følger med, etter at du har installert Mozilla Firefox.

nettutvikler plugin

Webutvikler - den andre utvidelsen for Mozilla nettleser Firefox, veldig kraftig og funksjonell, som muliggjør rask og effektiv feilsøking. Etter installering vil en ekstra verktøylinje vises i nettleservinduet, vist i figur 6.

Videre arbeid med plugin er intuitivt. For eksempel, hvis vi trenger å gjøre CSS-arbeid (men ikke så fullt funksjonelt som med Firebug-plugin), kan vi klikke på CSS-menyen og deaktivere, aktivere eller deaktivere.

Det er veldig praktisk for en utvikler å kunne se hvordan prosjektet hans vil se ut på skjermer med forskjellige oppløsninger. For å gjøre dette, bruk Endre størrelse-fanen. Her kan du stille inn manuelt nødvendige tillatelser skjerm (800x600, 1024x768, etc.), og deretter fritt bytte mellom dem, zoome inn eller ut av innhold. Denne funksjonaliteten er vist i figur 7.

Denne utvidelsen har også rik funksjonalitet, som alle er beskrevet og tilgjengelig på de offisielle sidene.

Liste over kilder som er brukt

1. www.getfirebug.com
Offisiell nettside for tillegget.
2. http://addons.mozilla.org
Mozillas offisielle nettsted hoster plugins for Firefox nettleser, informasjon for utviklere, informasjon om bruk av plugins.
3. http://chrispederick.com/work/web-developer/
Den offisielle nettsiden til WebDeveloper-pluginutvikleren.

Mens du surfer på Internett, kan Internet Explorer vise meldinger om at siden inneholder feil og kanskje ikke vises riktig. La oss se på noen måter å løse dette problemet på.

Instruksjon

Ganske ofte kan brukere observere en situasjon der en skriptfeilmelding vises i nettleseren Internet Explorer (IE). Hvis situasjonen er isolert, bør du ikke bekymre deg, men når slike feil blir vanlige, bør du tenke på arten av dette problemet.

En skriptfeil i Internet Explorer er vanligvis forårsaket av at nettleseren ikke behandler HTML-sidekoden riktig, tilstedeværelsen av midlertidige Internett-filer, kontoinnstillinger og mange andre årsaker, som vil bli diskutert i dette materialet. Metoder for å løse dette problemet vil også bli vurdert.

Før du fortsetter med vanlige metoder for å diagnostisere problemer med Internet Explorer som forårsaker skriptfeil, må du sørge for at feilen ikke bare oppstår på ett bestemt nettsted, men på flere nettsider samtidig. Du må også sjekke nettsiden som opplever dette problemet under en annen konto, på en annen nettleser og på en annen datamaskin. Dette vil begrense søket etter årsaken til feilen og ekskludere eller bekrefte hypotesen om at meldinger vises som et resultat av tilstedeværelsen av visse filer eller innstillinger på PC-en.

Blokkering av aktive skript i Internet Explorer, ActiveX og Java

Åpne Internet Explorer 11
Service

Gå til fanen i vinduet Sikkerhet
Klikk deretter på knappen Misligholde og deretter knappen OK

Midlertidige filer i Internet Explorer

Åpne Internet Explorer 11
Klikk på ikonet øverst til høyre i nettleseren Service i form av et tannhjul (eller tastekombinasjonen Alt + X). Velg deretter i menyen som åpnes
Gå til fanen i vinduet Er vanlig
I kapittel Nettleserhistorikk trykk på knappen Slett...

I vinduet Slett nettleserloggen merk av i boksene ved siden av elementene Midlertidige filer på Internett og nettsteder, Informasjonskapsler og nettsidedata, Blad
Klikk på knappen Slett

Drift av antivirusprogramvare

Skriptfeil er mulig gjennom driften av et antivirusprogram når det blokkerer aktive skript, ActiveX- og Java-kontroller på en side, eller mapper for å lagre midlertidige nettleserfiler. I dette tilfellet bør du se dokumentasjonen for det installerte antivirusproduktet og deaktivere skannemapper for å lagre midlertidige Internett-filer, samt blokkere interaktive objekter.

Feil behandling av HTML-sidekode

Åpne Internet Explorer 11
Klikk på ikonet øverst til høyre i nettleseren Service i form av et tannhjul (eller tastekombinasjonen Alt + X). Velg deretter i menyen som åpnes
Gå til fanen i vinduet I tillegg
Deretter fjerner du merket i boksen Vis varsel for hver skriptfeil og trykk på knappen OK.

Dette er en liste over de vanligste årsakene som forårsaker skriptfeil i Internet Explorer, så hvis du er lei av slike meldinger, vær litt oppmerksom og løs problemet en gang for alle.

Det finnes selvfølgelig andre – jeg vil definitivt nevne dem.

Firebug for Firefox

Jeg vet ikke sikkert om brannbug stamfaderen til andre utviklerverktøy, men det er definitivt det mest populære, brukervennlige og funksjonsrike .

Firebug er et tillegg for Firefox, noe som betyr at det må lastes ned fra Firefox-tilleggssiden og installeres.

For å ringe brannfeilen, trykk bare F12.

Funksjoner til dette tillegget:

Inspeksjon og redigering av dynamisk endrende HTML;
CSS-redigering på farten;
Feilsøking av JavaScript, kommandolinje for utføring av skript;
Overvåking av nettverksforespørsler - du kan se størrelsen og nedlastingstiden for filer og skript, forespørselshoder;
DOM-parser.

Du kan snakke om disse funksjonene i detalj i lang tid, men jeg tror at de er kjent for alle leserne våre, og hvis ikke, er detaljert informasjon på Firebug-hjemmesiden eller den samme er oversatt av Ilya Kantor.

I tillegg til selve firebug, kan det hende du trenger en nyttig lotion for det - branninformasjonskapsel, som (overraskelse:-) du kan se og endre informasjonskapsler med.

WEB Developer Toolbar for Firefox

Nok et nyttig tillegg til Ognelis. Det ser slik ut:

La oss gå gjennom punktene.

Deaktiver

Lar deg slå av JavaScript, deaktivere bruken av cachen, noe som er veldig nyttig i utviklingen (lar deg være sikker på at siden lastet med de siste oppdateringene), kansellere fargene som brukes på siden og erstatte dem med standard, deaktiver sending i henvisningsoverskriften (siden som overgangen var fra).

Informasjonskapsler

Et nyttig alternativ for å jobbe med informasjonskapsler: de kan vises, slettes, blokkeres og legges til.

css

Skjemaer

Bilder

Det er en nyttig funksjon for å slå av bilder – for å se hvordan siden din ser ut uten bilder. Bilder kan sirkles, vise størrelsene deres, vise alt-attributter.

Informasjon

Diverse

disposisjon

Utvalg av ulike sideelementer - tabeller, overskrifter, lenker, rammer, blokker. Resize lar deg endre størrelsen på nettleservinduet for å passe til alle standard skjermutvidelser. Verktøy her er lagrede funksjoner for sidevalidering. Både lokalt og eksternt. Praktisk og rask tilgang til å validere HTML, CSS og mer. Du kan bruke CTRL+SHIFT+H hurtigtastene for å validere HTML.

se kilde

Se kildekoden. Evne til å se i en ekstern applikasjon, se den genererte koden.

Den til høyre er min favoritt. Det er en rask HTML-, CSS-validator og JavaScript-feilindikator. Hvis det ikke er noen problemer, er ikonet grønt, og hvis det er problemer, rødt.

Utviklerverktøylinjen for Internet Explorer

Fra 8.0 er feilsøking allerede innebygd i denne nettleseren. Det kalles lett F12 nøkkel. Riktignok er han elendig som et program fra 90-tallet.

Men det finnes et mye kulere verktøy for denne nettleseren, den såkalte Internet Explorer Developer Toolbar kan lastes ned fra lenken.

Som i firebug er det mulig å inspisere et element med et enkelt klikk. Men hvis vi umiddelbart kan se polstringer og marginer, er det ingen slik mulighet her.

Det deiligste: det er en innebygd fargevelger som lar deg hente hvilken som helst farge fra siden ved hjelp av en pipette. (for ff er det en egen ColorZilla-plugin).

Debug Debug Bar for Internet Explorer

Du kan laste ned DebugBar for Internet Explorer fra den angitte lenken.

En interessant utvidelse i seg selv. Installert som et tilleggspanel til nettleseren:

I tillegg er det en inspektør:

Og hvis du graver i innstillingene, kan du finne dette:

Både morsomt og trist.

Det er kjent at utviklerverktøylinjen vil bygges inn i den åttende utforskeren. Den vil ligne på den som er beskrevet i tredje ledd, men vi håper at den blir bedre.

Feilsøk DragonFly for Opera

Jeg vil umiddelbart advare deg om at DragonFly er i Alpha2-stadiet, dette forklarer mange av feilene.

Funksjonsliste:

DOM inspektør;
Klikk Inspeksjon (igjen, vi vil ikke se polstring som i FireFox);
Redigering ;
Rask tilgang til feilkonsollen.

Feilsøk WEB Inspector i Safari

Jeg vil si det med en gang om nettleseren safari Jeg plystret informasjonen, derfor, som de sier, er jeg ikke ansvarlig for at materialet er tilstrekkelig.

For å aktivere "Utvikling"-elementet i Safari-menyen, må du aktivere det tilsvarende elementet i innstillingene (fanen "Avansert"):

Følgende funksjoner er tilgjengelige for oss i "Utvikling"-menyen:

La oss se nærmere på WEB-inspektøren:

Hvis du ønsker å jobbe med inspektøren i et nettleservindu, kan du klikke på knappen i nedre venstre hjørne.

Selv i safari er en funksjon som "Nettverkstidslinje" tilgjengelig ("Nettverk"-knappen i inspektøren):

Du kan tydelig se når og hvor lenge filer er lastet. Du kan også se forespørselshodene, men du kan dessverre ikke se selve innholdet.

Feilsøking for utviklere i Google Chrome

Lame ble født i en avansert form, og han har umiddelbart, riktignok skjevt foreløpig, men fortsatt verktøy for utviklere.

DOM-inspektør;
javascript debugger;
JavaScript-konsoll.

For å inspisere et element, høyreklikk på det og velg "Se elementkode" i kontekstmenyen:

I fanen "Ressurser" kan vi se følgende:

I denne artikkelen gjennomgikk jeg de mest kjente utvidelsene og innebygde verktøyene for nettlesere.

Det er andre, for eksempel:

Internet Explorer WEB Development Helper er en god hjelper for ASP.NET-utviklere (Internet Explorer);
WEB Developer Toolbar - verktøylinje for Internet Explorer og FireFox. Det er flere nyttige funksjoner;
WEB Accessibility Toolbar - verktøylinje for Internet Explorer. Ingenting interessant.

Hvis det er tillegg som jeg ikke nevnte, men som ville være verdt det, eller det er funksjoner for de nevnte utvidelsene jeg savnet, skriv.

Bruk på helse!

Internet Explorer 11 i Windows 8.1 og Windows 7 kommer med et fullstendig redesignet og forbedret sett med utviklerverktøy innebygd i nettleseren for å hjelpe utviklere med å lage, diagnostisere og optimalisere moderne nettsteder og apper på tvers av mange enheter. De nye verktøyene, som vi bare refererer til som F12 for korthets skyld, lar webutviklere jobbe raskt og effektivt.

Visual Studio- og Internet Explorer-arbeidsgruppene jobbet sammen for å lage F12-verktøyene, som er basert på prinsippet om å hjelpe utviklere med å gå raskt fra problem til løsning ved å bruke meningsfulle data. Den nye F12-pakken gir en rask og fleksibel nettopplevelse med verktøy for å diagnostisere og fikse ytelsesproblemer, samt verktøy for å hjelpe deg bedre å forstå hvordan Internet Explorer legger ut og gjengir nettapplikasjoner. F12-verktøy støtter den raske, interaktive arbeidsflyten som brukes av dagens nettutviklere.

Universelt sett med verktøy

Det nye F12-settet hjelper utviklere med å gå raskt fra problem til løsning. Noen av de spennende nye funksjonene inkluderer:

UI-responsanalyse og minneprofileringsverktøy for å hjelpe utviklere med å bygge raske og fleksible nettapplikasjoner.
Live DOM Explorer og CSS-kontroller oppdatert med siden slik at utviklere interaktivt kan utforske hvordan dynamisk innhold påvirker layout og stil
Evne til å feilsøke JavaScript som starter raskt uten å oppdatere siden slik at utviklere kan komme i gang raskere

Når du bruker F12-verktøyene, vil du legge merke til mange andre forbedringer som hjelper deg med å oppnå en rask, interaktiv arbeidsflyt:

Rask tilgang til disse verktøyene ved å høyreklikke på et menyelement med "inspeksjonselementet"
Effektiv tastaturinteraksjon
Omfattende evne til å kopiere elementer og komponenter fra verktøy, slik at de kan limes inn i hvilken som helst editor uten ekstra formatering

Det viktigste er at disse verktøyene nå viser den mest komplette og nøyaktige informasjonen som er tilgjengelig, fra @media og!important-reglene i DOM Explorer til kostnadsstrukturen per element i UI Response Profiler. Disse verktøyene gir også direkte meningsfulle data; for eksempel identifiserer minneprofiler DOM-noder som er "live", men som ikke refereres fra markering eller gjengivelsestreet.

Mulighetene til den nye F12-pakken er også tilgjengelig i Visual Studio, slik at utviklere har en konsistent og sømløs opplevelse på tvers av alle våre nettutviklingsverktøy og plattformer.

La oss nå ta en rask titt på disse verktøyene i aksjon.

Profilering av applikasjoner med UI Responsiveness Analyzer

UI-responsverktøyet hjelper deg med å forstå hvor CPU-tiden brukes, slik at applikasjonen din kan oppnå sitt fulle ytelsespotensial. Dette verktøyet gir deg innsikten du trenger for å forstå den indre funksjonen til Internet Explorer, og gir kjøretidsvisualisering av HTML, CSS og JavaScript-kode, samt viktige bivirkninger som markering og søppelinnsamling. Med et øyeblikk kan du se nøyaktig hvor raskt appen din er responsiv og hvordan den gjengis. Dette vil tillate deg å identifisere spesifikke kilder flaskehalser og mer intelligent tilnærming til optimalisering.

Profilering av nettsider

Analyser applikasjonens minnebruk med Memory Profiler

Denne minneanalysatoren vil hjelpe deg å unngå minnelekkasjer eller overdreven minneforbruk. Oppretting av webapplikasjoner som fungerer for klienter døgnet rundt, eller komplekse interaktive applikasjoner betyr ofte at utvikleren deres må være spesielt oppmerksom på problemer med minnebruk.

Mens JavaScript er et søppelsamlet miljø, bruker applikasjoner vanligvis mer minne rett og slett fordi objektreferanser ikke har (og ikke kan) frigjøres. Minneanalysatoren hjelper deg med å identifisere disse problemene ved å gi informasjon om hvert objekt på siden, enten det er et JavaScript-objekt eller DOM. Med denne informasjonen kan du for eksempel se hvor mye minne som holdes av et element og hvilke gjenstander som støtter dens utholdenhet. Men viktigst av alt, du kan sammenligne to øyeblikksbilder og se hva som har endret seg. Dette vil tillate deg å forstå hvorfor applikasjonen din har brukt mer minne og rette opp denne situasjonen.

Heap-øyeblikksbilde som viser deaktiverte DOM-elementer

Få en rask forståelse av applikasjonsytelsen med Performance Dashboard

For å hjelpe deg raskt å identifisere problemer som påvirker ytelsen til siden din, tilbyr Internet Explorer 11 en "side"-widget kalt Performance Dashboard, som du får tilgang til ved å bruke hurtigtasten Ctrl+Shift+U eller det tilsvarende menyelementet Verktøy ( Alt+T ). Dette panelet viser dynamisk statistikk i Internet Explorer for nøkkelytelsesmålinger som gjengivelsestid, minne, bilder per sekund (fps) og CPU-bruk. Performance Dashboard krever ikke bruk av F12-verktøy og kan også brukes i moderne nettlesere.

Med Performance Dashboard kan du raskt identifisere sideinteraksjoner som forårsaker fall i bildefrekvens eller høy CPU-bruk. Du kan deretter bytte til F12 for å reprodusere problemet og finne en løsning.

Inspisere elementer og endre markering og stiler ved hjelp av DOM Explorer

DOM Explorer gjør det enkelt å interaktivt sette opp @media-spørringer og CSS-regler og deres egenskaper. Derfor brukergrensesnitt applikasjonen din blir et svært responsivt grensesnitt for flere enheter. Du kan raskt komme i gang på en nettside ved å høyreklikke og inspisere ønsket element, som vil starte F12-verktøyene sammen med det elementet valgt i DOM Explorer, og dynamisk vise DOM og anvendte CSS-regler. De gjengitte DOM- og CSS-tabellene er dynamiske, slik at du kan forstå hvordan Internet Explorer tolker de spesielle egenskapene til markup, CSS-stiler og regler. Når du samhandler med eller endrer siden ved hjelp av DOM Explorer, vil endringene du gjør, vises umiddelbart.

Sjekk markering og stiler

DOM Explorer gjør det enkelt å få riktig verdi av en egenskap eller egenskaper ved hjelp av IntelliSense når du gjør endringer i en CSS-tabell. Du kan enkelt se hvilke egenskaper som er feil eller ukjente, og deretter kopiere regelen for å bruke den på nytt på kilden din.

Feilsøking av JavaScript med debugger og konsoll

Den nye JavaScript-feilsøkeren gir deg verktøyene for å finne og raskt fikse uklarert kode. JavaScript-feilsøkeren kan åpne og vise flere filer selv om skriptbiblioteket ditt har blitt forminsket, angi bruddpunkter og sporingspunkter, inspisere JavaScript-objekter, verdier, omfangskjeder og se innholdet i stabelen. Å kjøre F12-verktøyene vil også starte JavaScript debugger umiddelbart, slik at du kan komme i gang med en gang

Mens du feilsøker, vil du sannsynligvis ønske å samhandle med nettstedet ditt. Konsollen er nøkkelverktøyet for denne oppgaven. Du kan få tilgang til konsollen når som helst, noe som gjør bruken av dette interaktive miljøet med IntelliSense og objektgjengivelser effektivt. Konsollen tilbyr også et bredt spekter av spesialiserte APIer som lar deg logge utdata, analysere hvor mye tid som brukes i spesifikk kode, og gi objektgjengivelser når du trenger å gjøre dyp inspeksjon av JavaScript-objekter.

Oppsummering

Dette blogginnlegget inneholder ganske enkelt en skisse av beskrivelsen av de nye elementene i F12-verktøyene. du kan finne full liste ny funksjonalitet tilgjengelig for utviklere i Internet Explorer 11 i artikkelen "Hva er nytt i F12 Tools" og i "Internet Explorer 11 Preview Developer Guide ." Du kan også lære mer i testdemoen for Internet Explorer, "F12 Adventure".

Vi ser frem til din tilbakemelding og ser frem til et langt samarbeid med utviklermiljøet. Del forslagene dine gjennom tilbakemeldings- og forslagsverktøyet i Internet Explorer 11 eller på Connect-siden.

P. J. Hough
, visepresident, Visual Studio

Populær i kategorien: