Webbsida fel att felsöka. Skriptfel i Internet Explorer. Orsaker och metoder för eliminering. Profilering av SQL-frågor Felsök en webbsida
När du surfar på Internet webbläsare Utforskaren kan visa meddelanden om att sidan innehåller fel och kanske inte visas korrekt. Låt oss titta på några sätt att lösa detta problem.
Instruktion
Det finns förstås andra – jag kommer definitivt att nämna dem.
Firebug för Firefox
Jag vet inte säkert om pyroman stamfadern till andra utvecklarverktyg, men det är definitivt det mest populära, bekväma och funktionella hittills.
Firebug är ett tillägg för Firefox, vilket innebär att det måste laddas ner från Firefox tilläggswebbplats och installeras.
För att anropa firebuggen, tryck bara på F12.
Funktioner i detta tillägg:
- Inspektion och redigering av dynamiskt föränderlig HTML;
- CSS-redigering i farten;
- Felsökning av JavaScript kommandorad att exekvera skript;
- Övervakning av nätverksförfrågningar - du kan se storleken och nedladdningstiden för filer och skript, förfrågningsrubriker;
- DOM-parser.
Du kan prata om dessa funktioner i detalj under lång tid, men jag tror att de är kända för alla våra läsare, och om inte - detaljerad information finns på startsidan för Firebug eller samma i översättningen av Ilya Kantor.
Förutom firebug själv kan du behöva användbar lotion till honom - eldkaka, med vilken (överraskning:-) du kan se och ändra cookies.
WEB Developer Toolbar för Firefox
Ytterligare ett användbart tillägg till Ognelis. Det ser ut så här:
Låt oss gå igenom punkterna.
Inaktivera
Låter dig stänga av JavaScript, inaktivera användningen av cachen, vilket är mycket användbart vid utveckling (låter dig vara säker på att sidan laddas med senaste uppdateringarna), avbryt färgerna som används på sidan och ersätt dem med standardfärger, inaktivera sändning i hänvisningshuvudet (sidan från vilken övergången gjordes).
Småkakor
Ett användbart alternativ för att arbeta med cookies: de kan visas, raderas, blockeras och läggas till.
css
Den här menyn innehåller utvecklarverktygsfältets coolaste funktion - direkt CSS-redigering. Dessutom är det möjligt att visa css, inaktivera och så vidare och så vidare. Enligt min mening är närvaron av kortkommandon mycket användbar här (CTRL + SHIFT + C, till exempel låter dig omedelbart gå till visning av sidstilar)
Blanketter
Allt för att arbeta med formulär: visa lösenord, visa information om formulär, konvertera formulärmetoder (GET » POST och vice versa) och mycket mer. Användbar funktion "Fyll i formulärfält" för automatisk ifyllning av formulärfält (till exempel när du testar en webbplats när lösenordsminnesfunktionen är inaktiverad. Annars ser jag inget användbart i det här stycket.
bilder
Det finns en användbar funktion för att stänga av bilder – för att se hur din sida ser ut utan bilder. Bilder kan ringas in, visa deras storlekar, visa alt-attribut.
Information
Den här menyn har många alternativ. Det kan vara användbart att visa klass- och id-attributen på sidan. Dessutom är objektet "Visa färginformation" intressant - för att snabbt få information om färgerna som används på sidan. "Visa dokumentstorlek" - visa sidstorlek. "Visa svarsrubriker" - visa sidhuvuden.
Diverse
Den vanligaste funktionen är att rensa cacheminnet. Dessutom finns "Sidlinjalen" - linjal, "Sidförstoringsglaset" - förstoringsglas och "Linjeguider" - några rader finns här, som kan vara användbara för att trimma mallen.
skissera
Val av olika sidelement - tabeller, rubriker, länkar, ramar, block. Ändra storlek låter dig ändra storlek på webbläsarfönstret så att det passar alla standardskärmtillägg. Verktyg här är lagrade funktioner för sidvalidering. Både lokalt och externt. Bekvämt och snabb åtkomst validerar HTML, CSS och mer. Du kan använda kortkommandot CTRL+SHIFT+H för att validera HTML.
visa källa
Se källkod. Möjlighet att visa i en extern applikation, se den genererade koden.
Den till höger är min favorit. Det är en snabb HTML-, CSS-validator och JavaScript-felindikator. Om det inte finns några problem är ikonen grön och om det finns problem är den röd.
Internet Explorer Developer Toolbar
Från och med 8.0 är felsökning redan inbyggd i den här webbläsaren. Det kallas lätt F12 nyckel. Det är sant att han är bedrövlig som ett 90-talsprogram.
Men det finns ett mycket coolare verktyg för denna webbläsare, det så kallade Internet Explorer Developer Toolbar kan laddas ner från länken.
Utseendemässigt ser det här verktygsfältet naturligtvis ut som en brandbug, men tyvärr har det inte växt upp till det än. Även om den å andra sidan har vissa funktioner som firebuggen inte har. Jag skulle kalla Internet Explorer Developer Toolbar för en hybrid av Firebug och firefox webbutvecklare Verktygsfält.
Som i firebug finns det ett alternativ att inspektera ett element med ett enkelt klick. Men om vi omedelbart kan se vadderingar och marginaler, så finns det ingen sådan möjlighet här.
Utvecklarverktygsfältet i Internet Explorer uppdaterar inte heller elementträdet dynamiskt, som Firebug gör. Det vill säga, om vi ändrar något på sidan med hjälp av js, kommer vi inte att se något med detta verktygsfält.
Från vad du kan njuta av - att byta CSS i farten (ett enkelt sätt att hitta vad du ska hacka :), möjligheten att inaktivera CSS och bilder, möjligheten att snabbt rensa cacheminnet och spela med cookies, snabb tillgång till validering.
Det godaste: det finns en inbyggd färgväljare som låter dig få vilken färg som helst från sidan med en pipett. (för ff finns det ett separat ColorZilla-plugin).
Debug Debug Bar för Internet Explorer
Du kan ladda ner DebugBar för Internet Explorer från den angivna länken.
En intressant förlängning i sig. Installerad som en extra panel till webbläsaren:
Av någon anledning finns det en inbyggd sökmotor, en pipett, möjligheten att ändra storlek på fönstret och, återigen, av någon anledning, möjligheten att skicka en sida till en vän för tvål. Även om det kan vara användbart. Men jag misslyckades med att utnyttja denna möjlighet.
Dessutom finns en inspektör:
Inspektionsmetoden genom att klicka eller peka passade inte utvecklarna: de kom på en mer intressant sak. I DebugBar måste du dra målet till önskat element för att se det i trädet. Det finns inget alternativ att redigera CSS. Men det finns en validator och en inbyggd js-konsol.
Och om du gräver i inställningarna kan du hitta detta:
Både rolig och sorglig.
Det är känt att verktygsfältet för utvecklare kommer att byggas in i den åttonde utforskaren. Det kommer att likna det som beskrivs i tredje stycket, men vi hoppas att det blir bättre.
Felsök DragonFly för Opera
DragonFly har byggts in i Opera sedan version 9.5, så det finns inget behov av att installera det. För att aktivera Dragonfly, gå till Verktyg → Avancerat → Utvecklarverktyg. Och om på engelska, då Verktyg → Avancerat → Utvecklarverktyg.
Jag kommer omedelbart att varna dig för att DragonFly är i Alpha2-stadiet, detta förklarar många av dess problem.
Funktionslista:
- DOM-inspektör;
- Klicka på Inspektion (igen, vi kommer inte att se utfyllnad som i FireFox);
- Redigering;
- Snabb åtkomst till felkonsolen.
DF är ungefär en separat sida i en ram. Om du öppnar den kommer den att vara öppen för alla flikar (till skillnad från firebug). Innan vi inspekterar ett element måste vi därför välja sidan vi vill se från listan.
Tyvärr, här, som i Internet Explorer, visar Dav Toolbar inte dynamiskt skapade element. Och i allmänhet, när vi inspekterar sidan, körs inget JavaScript: länkar och knappar klickas inte. Låt oss hoppas att när DragonFly närmar sig release kommer vi att se alla dessa funktioner.
Felsök WEB Inspector i Safari
Jag ska genast säga det om webbläsaren safari Jag visslade informationen, därför, som de säger, är jag inte ansvarig för att materialet är adekvat.
För att aktivera alternativet "Utveckling" i Safari-menyn måste du aktivera motsvarande objekt i inställningarna (fliken "Avancerat"):
Följande funktioner är tillgängliga för oss i menyn "Utveckling":
Låt oss ta en närmare titt på WEB-inspektören:
Som standard öppnas inspektören i HTML-vyläge. Men den kan växlas till DOM-visningsläge. För att göra detta finns det en strömbrytare på toppplattan. När du håller muspekaren över ett element i inspektören kommer det att markeras på själva sidan. Du kan inte se utfyllnad, ändra uppmärkning eller CSS i farten, eller se dynamiska ändringar av DOMe i farten som du inte kan i FireBug. Men du ser, det ser väldigt fint ut.
Om du vill arbeta med inspektören i ett webbläsarfönster kan du klicka på knappen i det nedre vänstra hörnet.
Även i safari är en sådan funktion som "Network Timeline" tillgänglig (knappen "Nätverk" i inspektören):
Du kan tydligt se när och hur länge filer laddas. Du kan också se rubrikerna för begäran, men du kan tyvärr inte se själva innehållet.
Felsökning för utvecklare i Google Chrome
Lame föddes i en avancerad form, och han har direkt, om än snett för nu, men fortfarande verktyg för utvecklare.
- DOM-inspektör;
- javascript debugger;
- JavaScript-konsol.
För att inspektera ett element, högerklicka på det och innehållsmeny välj "Visa elementkod":
Funktionaliteten är densamma som i Safari: element markeras vid hovring, men CSS- och HTML-redigering är inte tillgänglig, ändringar i DOM spåras inte. Bara knappen i det nedre vänstra hörnet, som ska fästa inspektören i webbläsarfönstret, fungerar inte.
På fliken "Resurser" kan vi se följande:
Lite annorlunda än skalan i safarin. Genomskinliga i detta diagram är relativa filstorlekar, och fullfärg är nedladdningstid. På ett eller annat sätt är det uppenbart att denna del av Chrome fortfarande är långt ifrån färdigställd.
I den här artikeln har jag granskat de mest kända tilläggen och inbyggda verktyg för webbläsare.
Det finns andra, till exempel:
- Internet Explorer WEB Development Helper är en bra hjälpare för ASP.NET-utvecklare (Internet Explorer);
- WEB Developer Toolbar - verktygsfält för Internet Explorer och FireFox. Det finns flera användbara funktioner;
- WEB Accessibility Toolbar - verktygsfält för Internet Explorer. Inget intressant.
Om det finns tillägg som jag inte nämnde, men som skulle vara värt det, eller om det finns funktioner för de nämnda tilläggen som jag missat, skriv.
Använd på hälsan!
Att skriva HTML är bra, men hur vet du var felet finns när något inte fungerar? Den här artikeln beskriver flera verktyg som hjälper dig att hitta och åtgärda fel i HTML.
Felsökning är inte skrämmande
När du skriver lite kod går allt vanligtvis bra tills du gör ett misstag. Så din kod fungerar inte, eller fungerar inte som du tänkt dig. Om du försöker kompilera ett Rust-program som inte fungerar kommer kompilatorn att rapportera ett fel:
I det här fallet är felmeddelandet relativt lätt att förstå - "oavslutad dubbel citatsträng". Om du tittar noga på println!(Hej världen!"); , kommer du att märka att det inte finns någon dubbelt citat. Naturligtvis kan felmeddelanden bli mycket svårare att förstå när din kod växer, och även de enklaste fallen kan vara skrämmande för dem som inte vet något om Rust.
Men var inte rädd för att felsöka! För att bekvämt kunna skriva och felsöka kod måste du förstå språket och dess verktyg.
HTML och felsökning
HTML är inte lika svårt att förstå som Rust. HTML-koden kompileras inte till någon annan form innan webbläsaren analyserar den och visar resultatet (det tolkas, inte kompilerats). Syntax HTML-element mycket tydligare än "riktiga programmeringsspråk" som Rust, JavaScript eller Python. Hur webbläsare läser HTML är mer tolerantän programmeringsspråk som tolkar sin kod mer strikt. Detta är både dåligt och bra på samma gång.
tolerant kod
Så vad betyder tolerant? Generellt sett, när du rör dig i kod, finns det två typer av fel du kommer att stöta på:
- Syntaxfel: Dessa är stavfel, som ovan i Rust-exemplet. Dessa är vanligtvis lätta att fixa, så länge du är bekant med språkets syntax och vet vad felmeddelandena betyder.
- Logiska fel: Detta är fel som visas när syntaxen är korrekt, men koden uppfyller inte sitt syfte, det vill säga programmet körs inte korrekt. Dessa är svårare att fixa än syntaktiska, eftersom inga meddelanden visas som anger var du gjorde ett misstag.
HTML lider inte av syntaxfel eftersom webbläsaren läser kod tolerant, i den meningen att sidor kan renderas även om syntaxfel förekommer. Webbläsare har inbyggda regler för att tolka dåligt skriven uppmärkning, och du kan köra något även om du menade något annat. Detta kan vara ett verkligt problem!
På en lapp: HTML är läsbar eftersom när webben först kom till, beslutades det att tillåta människor att publicera innehåll även om koden var felaktig, eftersom detta är mycket viktigare än att se till att syntaxen är helt korrekt. Webben skulle inte vara så populär just nu om den var strikt om nykomlingar.
Aktivt lärande: Introduktion av tolerant kod
Dags att utforska karaktären av tolerant kod i HTML.
HTML-validering
Det framgår av exemplet ovan att det är värt att kontrollera HTML:ens giltighet. I det enkla exemplet ovan kan du bara gå igenom all kod och hitta fel, men hur är det med enorma, komplexa sidor?
Det är bäst att kontrollera sidan i tjänsten för uppmärkningsvalidering. Det skapades och underhålls av W3C, organisationen som ansvarar för specifikationen av HTML, CSS och andra webbteknologier. Tjänsten kommer att kontrollera din HTML och rapportera fel i den.
HTML kan kontrolleras på adressen genom att ladda upp filen eller helt enkelt kopiera den till sidan.
Aktivt lärande: Validera ett HTML-dokument
- Öppna tjänsten för kodningsvalidering i din webbläsare.
- Växla till läget Validera med direktinmatning.
- Kopiera hela koden för dokumentet (inte bara brödtexten) och klistra in den i inmatningsutrymmet.
- Tryck Kontrollera (kontrollera).
Du kommer att se en lista med fel och annan information.
Arbeta med felmeddelanden
Oftast är det direkt tydligt vad budskapen betyder, men ibland måste man försöka förstå vad det är. Nu ska vi gå igenom alla fel och analysera vad de betyder. Observera att meddelandena innehåller en rad och en kolumn med kod för att göra det lättare att hitta fel.
- "End tag li implied, but there were open elements" (2 instanser): Det finns ingen explicit sluttagg, även om webbläsaren gissar var den ska vara. Meddelandet pekar på raden efter den där sluttaggen förväntades, men du hittar rätt plats.
- "Ostängt element starkt": Det här är väldigt enkelt misstag- element) indikerar att dess innehåll är av stor betydelse, allvar eller brådskande. Webbläsare renderar vanligtvis innehåll i fetstil."> är inte stängd och meddelandet pekar direkt på starttaggen.
- "Sluttagg stark bryter mot kapslingsregler": Elementet är felaktigt kapslat - det finns ingen matchande öppningstagg på den här nivån.
- "Slutet på filen nått när du är inne i ett attributvärde. Ignorerar tagg": Mystiskt meddelande. Saken är att någonstans (mest troligt, i slutet av dokumentet) är egenskapen för ett element felaktigt registrerad, och slutet av filen dök upp i den här egenskapen. Länken är inte synlig i webbläsaren - troligen ligger problemet bredvid den.
- "Slutet på filen sett och det fanns öppna element": Filen har avslutats, men vissa element är inte stängda. Meddelandet indikerar slutet på filen, i detta fall är elementet inte stängt exempel: länk till Mozillas hemsida ↩
Ganska ofta kan användare observera en situation där ett skriptfelmeddelande visas i webbläsaren (IE). Om situationen är isolerad bör du inte oroa dig, men när sådana fel blir regelbundna, bör du tänka på arten av detta problem.
Ett skriptfel i Internet Explorer orsakas vanligtvis av att webbläsaren inte hanterar HTML-sidans kod korrekt, närvaron av tillfälliga internetfiler, kontoinställningar och många andra orsaker som kommer diskuteras i detta material. Metoder för att lösa detta problem kommer också att övervägas.
Innan du fortsätter med vanliga metoder för att diagnostisera problem med Internet Explorer som orsakar skriptfel, måste du se till att felet inte bara uppstår på en viss webbplats, utan på flera webbsidor samtidigt. Du måste också kontrollera webbsidan där problemet uppstår under en annan konto, på en annan webbläsare och på en annan dator. Detta kommer att begränsa sökningen efter orsaken till felet och utesluta eller bekräfta hypotesen att meddelanden visas som ett resultat av närvaron av vissa filer eller inställningar på datorn.
Blockerar aktiva skript i Internet Explorer, ActiveX och Java
Aktivt skript, ActiveX-kontroller och Java påverkar hur information genereras och visas på webbplatsen och kan vara den verkliga orsaken till det tidigare beskrivna problemet om de blockeras på användarens dator. För att säkerställa att skriptfel uppstår av denna anledning behöver du bara återställa webbläsarens säkerhetsinställningar. För att göra detta, följ följande riktlinjer.
- Öppna Internet Explorer 11
- Service
- Gå till fliken i fönstret Säkerhet
- Klicka sedan på knappen Standard och sedan knappen OK
Tillfälliga filer i Internet Explorer
Varje gång du öppnar en webbsida sparar Internet Explorer en lokal kopia av denna webbsida på din PC i så kallade temporära filer. När det finns för många sådana filer och storleken på mappen som innehåller dem når flera gigabyte, kan problem med att visa webbsidan uppstå, nämligen ett skriptfelmeddelande. Att regelbundet rensa mappen med temporära filer kan hjälpa till att lösa det här problemet.
Följ stegen nedan för att ta bort tillfälliga internetfiler.
- Öppna Internet Explorer 11
- Service
- Gå till fliken i fönstret Är vanliga
- I kapitel Webbläsarhistorik tryck på knappen Radera…
- I fönstret Radera webbläsarhistorik markera rutorna bredvid objekten Tillfälliga filer på Internet och webbplatser, Småkakor och webbplatsdata, Tidskrift
- Klicka på knappen Radera
Drift av antivirusprogram
Skriptfel är möjliga genom arbete antivirusprogram när den blockerar aktiva skript, ActiveX- och Java-kontroller på sidan eller mappar för att spara temporära webbläsarfiler. I det här fallet bör du hänvisa till dokumentationen för den installerade antivirusprodukten och inaktivera skanningsmappar för att spara temporära Internetfiler, samt blockera interaktiva objekt.
Felaktig bearbetning av HTML-kod
Den visas som regel på en viss webbplats och indikerar att sidkoden inte är helt anpassad för att fungera med Internet Explorer. I det här fallet är det bäst att inaktivera skriptfelsökning i webbläsaren. För att göra detta, följ dessa steg.
- Öppna Internet Explorer 11
- Klicka på ikonen i det övre högra hörnet av webbläsaren Service i form av ett kugghjul (eller tangentkombinationen Alt + X). Välj sedan i menyn som öppnas
- Gå till fliken i fönstret Dessutom
- Avmarkera sedan rutan Visa meddelande för varje skriptfel och tryck på knappen OK.
Detta är en lista över de flesta vanliga orsaker, som orsakar skriptfel i Internet Explorer, så om du är trött på sådana meddelanden, var lite uppmärksam och lös problemet en gång för alla.
På det här ögonblicket det finns ett stort antal olika webbläsare som till viss del stöder befintliga HTML-standarder. Personligen föredrar jag webbläsaren från Mozilla Corporation. Den här webbläsaren har en lång historia (den är baserad på den berömda webbläsaren Netscape Navigator). Jag gillar också den här webbläsaren eftersom den stöder ett system med plug-ins - separat distribuerade tillägg, när du är ansluten kan du ändra funktionaliteten och anpassa den efter dina behov. Och slutligen, den här webbläsaren distribueras fritt med öppna källkoder, vilket också är viktigt. Därför bestämde jag mig för att beskriva möjligheterna som den här webbläsaren ger inte bara för användaren utan också för utvecklaren av webbsidor, hur enkel och bekväm processen med att felsöka skrivna produkter kan vara.
Mozilla Firefoxär en av de mest populära webbläsarna bland utvecklare och webbutvecklare. Det lockar deras uppmärksamhet på grund av möjligheterna som den här webbläsaren ger för att felsöka skapade projekt, fixa buggar och förbättra. Webbläsaren levereras som standard med en java-konsol (eller "felkonsol"). Detta verktyg låter dig felsöka inbäddade java-skript. Men plugins från tredje part ger mycket mer funktionalitet till webbläsaren, som kan laddas ner och installeras från Mozilla Foundations officiella webbplats. Nu vill jag titta på två av dessa plugins - webbutvecklare och Firebug. Båda dessa tillägg kan laddas ner från ovanstående länkar från den officiella tilläggssidan. Efter att ha installerat dem och startat om webbläsaren har utvecklaren gott om möjligheter, som jag kommer att beskriva nedan, i sin tur för var och en av plugins.
firebug plugin
Som det står på den officiella sidan: "Firebug integreras med webbläsaren Firefox för att berika utvecklarverktyget avsevärt. Du kommer att kunna redigera, felsöka och utforska CSS, HTML och Javascript live, på vilken webbsida som helst.” Och det är det verkligen. Tänk på några av funktionerna i detta plugin, nämligen:
- Visa och redigera HTML.
- Bygger CSS.
- Övervakning av nätverksförfrågningar
- Felsökning av JavaScript
- JavaScript-forskning
- Loggar för JavaScript
Detta är inte en komplett lista över alla dess funktioner. Eftersom projektet är öppen källkod kan vem som helst ändra och lägga till funktionalitet.
För att arbeta med plugin-programmet måste du trycka på F12-tangenten (Ctrl-F12 för att arbeta med det i ett separat fönster). Efter en lyckad lansering får vi följande - Figur 1a, 1b.
Figur 1a. Det första fönstret för firebug-insticksprogrammet.
Figur 1b. Det första fönstret för firebug-insticksprogrammet.
Därefter börjar själva arbetet med plugin. Låt oss säga att vi måste hitta det här eller det objektet i HTML-koden, eller bestämma hur exakt det implementeras med använder CSS nuvarande fragment. För att göra detta behöver du bara välja de nödvändiga alternativen i plugin-fönstrets meny med musen. I exemplet nedan är detta HTML i inspektionsläge. Gå nu till sidan i dokumentet, under muspekaren kommer vi att märka ett rektangulärt område som här illustrerar området som vi arbetar med. I pluginfönstret kommer vi att se HTML- och CSS-parametrarna som används. Genom att klicka på var och en av dem kan du också göra ändringar och spåra dem i dynamik. De beskrivna åtgärderna illustreras i figurerna 2,3,4.
I utvecklingen av detta projekt användes plugin som beskrivs ovan just för dessa ändamål. Men även om inget java-script har använts här, kan firebug-pluginen användas för att felsöka det också. Ett exempel på felsökning visas i figur 5.
På detta, som beskrivits ovan, är funktionaliteten för denna tillägg inte begränsad. Du kan studera det fullständigt och använda det efter dina behov genom att ladda ner det från länkarna som tillhandahålls, efter att du har installerat Mozilla Firefox.
plugin för webbutvecklare
Webbutvecklare - det andra tillägget för Mozilla webbläsare Firefox, mycket kraftfull och funktionell, som möjliggör snabb och effektiv felsökning. Efter att du har installerat det kommer ett extra verktygsfält att visas i webbläsarfönstret, som visas i figur 6.Fortsatt arbete med plugin är intuitivt. Till exempel, om vi behöver göra CSS-arbete (men inte lika fullt fungerande som med Firebug-pluginet), kan vi klicka på CSS-menyn och inaktivera, aktivera eller inaktivera.
Det är väldigt bekvämt för en utvecklare att kunna se hur hans projekt kommer att se ut på bildskärmar med olika upplösningar. För att göra detta, använd fliken Ändra storlek. Här kan du ställa in manuellt nödvändiga behörigheter skärm (800x600, 1024x768, etc.), och växla sedan fritt mellan dem, zooma in eller ut på innehåll. Denna funktion visas i figur 7.
Denna tillägg har också rik funktionalitet, som alla beskrivs och är tillgängliga på de officiella webbplatserna.
Lista över använda källor
- 1. www.getfirebug.com
Officiell webbplats för tillägget. - 2. http://addons.mozilla.org
Mozillas officiella webbplats värd plugins för Firefox webbläsare, information för utvecklare, information om hur du använder plugins. - 3. http://chrispederick.com/work/web-developer/
Officiell webbplats för WebDeveloper-pluginutvecklaren.
När du surfar på Internet kan Internet Explorer visa meddelanden om att sidan innehåller fel och kanske inte visas korrekt. Låt oss titta på några sätt att lösa detta problem.
Instruktion
Ganska ofta kan användare observera en situation där ett skriptfelmeddelande visas i webbläsaren Internet Explorer (IE). Om situationen är isolerad bör du inte oroa dig, men när sådana fel blir regelbundna, bör du tänka på arten av detta problem.
Ett skriptfel i Internet Explorer orsakas vanligtvis av att webbläsaren inte bearbetar HTML-sidans kod korrekt, närvaron av tillfälliga internetfiler, kontoinställningar och många andra orsaker, som kommer att diskuteras i det här materialet. Metoder för att lösa detta problem kommer också att övervägas.
Innan du fortsätter med vanliga metoder för att diagnostisera problem med Internet Explorer som orsakar skriptfel, måste du se till att felet inte bara uppstår på en viss webbplats, utan på flera webbsidor samtidigt. Du måste också kontrollera webbsidan som har det här problemet under ett annat konto, på en annan webbläsare och på en annan dator. Detta kommer att begränsa sökningen efter orsaken till felet och utesluta eller bekräfta hypotesen att meddelanden visas som ett resultat av närvaron av vissa filer eller inställningar på datorn.
Blockerar aktiva skript i Internet Explorer, ActiveX och Java
Aktivt skript, ActiveX-kontroller och Java påverkar hur information genereras och visas på webbplatsen och kan vara den verkliga orsaken till det tidigare beskrivna problemet om de blockeras på användarens dator. För att säkerställa att skriptfel uppstår av denna anledning behöver du bara återställa webbläsarens säkerhetsinställningar. För att göra detta, följ följande riktlinjer.
- Öppna Internet Explorer 11
- Service
- Gå till fliken i fönstret Säkerhet
- Klicka sedan på knappen Standard och sedan knappen OK
Tillfälliga filer i Internet Explorer
Varje gång du öppnar en webbsida sparar Internet Explorer en lokal kopia av denna webbsida på din PC i så kallade temporära filer. När det finns för många sådana filer och storleken på mappen som innehåller dem når flera gigabyte, kan problem med att visa webbsidan uppstå, nämligen ett skriptfelmeddelande. Att regelbundet rensa mappen med temporära filer kan hjälpa till att lösa det här problemet.
Följ stegen nedan för att ta bort tillfälliga internetfiler.
- Öppna Internet Explorer 11
- Klicka på ikonen i det övre högra hörnet av webbläsaren Service i form av ett kugghjul (eller tangentkombinationen Alt + X). Välj sedan i menyn som öppnas
- Gå till fliken i fönstret Är vanliga
- I kapitel Webbläsarhistorik tryck på knappen Radera…
- I fönstret Radera webbläsarhistorik markera rutorna bredvid objekten Tillfälliga filer på Internet och webbplatser, Cookies och webbplatsdata, Tidskrift
- Klicka på knappen Radera
Drift av antivirusprogram
Skriptfel är möjliga genom driften av ett antivirusprogram när det blockerar aktiva skript, ActiveX- och Java-kontroller på en sida eller mappar för att spara temporära webbläsarfiler. I det här fallet bör du hänvisa till dokumentationen för den installerade antivirusprodukten och inaktivera skanningsmappar för att spara temporära Internetfiler, samt blockera interaktiva objekt.
Felaktig bearbetning av HTML-kod
Den visas som regel på en viss webbplats och indikerar att sidkoden inte är helt anpassad för att fungera med Internet Explorer. I det här fallet är det bäst att inaktivera skriptfelsökning i webbläsaren. För att göra detta, följ dessa steg.
- Öppna Internet Explorer 11
- Klicka på ikonen i det övre högra hörnet av webbläsaren Service i form av ett kugghjul (eller tangentkombinationen Alt + X). Välj sedan i menyn som öppnas
- Gå till fliken i fönstret Dessutom
- Avmarkera sedan rutan Visa meddelande för varje skriptfel och tryck på knappen OK.
Det här är en lista över de vanligaste orsakerna som orsakar skriptfel i Internet Explorer, så om du är trött på sådana meddelanden, var lite uppmärksam och lös problemet en gång för alla.
Det finns förstås andra – jag kommer definitivt att nämna dem.
Firebug för Firefox
Jag vet inte säkert om pyroman stamfadern till andra utvecklarverktyg, men det är definitivt det mest populära, användarvänliga och funktionsspäckade .
Firebug är ett tillägg för Firefox, vilket innebär att det måste laddas ner från Firefox tilläggswebbplats och installeras.
För att anropa firebuggen, tryck bara på F12.
Funktioner i detta tillägg:
- Inspektion och redigering av dynamiskt föränderlig HTML;
- CSS-redigering i farten;
- Felsökning av JavaScript, kommandorad för att köra skript;
- Övervakning av nätverksförfrågningar - du kan se storleken och nedladdningstiden för filer och skript, förfrågningsrubriker;
- DOM-parser.
Du kan prata om dessa funktioner i detalj under lång tid, men jag tror att de är kända för alla våra läsare, och om inte, finns detaljerad information på Firebugs hemsida eller densamma är översatt av Ilya Kantor.
Förutom själva Firebug kan du behöva en användbar lotion för det - eldkaka, med vilken (överraskning:-) du kan se och ändra cookies.
WEB Developer Toolbar för Firefox
Ytterligare ett användbart tillägg till Ognelis. Det ser ut så här:
Låt oss gå igenom punkterna.
Inaktivera
Låter dig stänga av JavaScript, inaktivera användningen av cachen, vilket är mycket användbart vid utveckling (låter dig vara säker på att sidan laddas med de senaste uppdateringarna), avbryta färgerna som används på sidan och ersätta dem med standardfärger, inaktivera sändning i hänvisningshuvudet (sidan från vilken övergången var ).
Småkakor
Ett användbart alternativ för att arbeta med cookies: de kan visas, raderas, blockeras och läggas till.
css
Den här menyn innehåller utvecklarverktygsfältets coolaste funktion - direkt CSS-redigering. Dessutom är det möjligt att visa css, inaktivera och så vidare och så vidare. Enligt min mening är närvaron av kortkommandon mycket användbar här (CTRL + SHIFT + C, till exempel låter dig omedelbart gå till visning av sidstilar)
Blanketter
Allt för att arbeta med formulär: visa lösenord, visa information om formulär, konvertera formulärmetoder (GET » POST och vice versa) och mycket mer. Användbar funktion "Fyll i formulärfält" för automatisk ifyllning av formulärfält (till exempel när du testar en webbplats när lösenordsminnesfunktionen är inaktiverad. Annars ser jag inget användbart i det här stycket.
bilder
Det finns en användbar funktion för att stänga av bilder – för att se hur din sida ser ut utan bilder. Bilder kan ringas in, visa deras storlekar, visa alt-attribut.
Information
Den här menyn har många alternativ. Det kan vara användbart att visa klass- och id-attributen på sidan. Dessutom är objektet "Visa färginformation" intressant - för att snabbt få information om färgerna som används på sidan. "Visa dokumentstorlek" - visa sidstorlek. "Visa svarsrubriker" - visa sidhuvuden.
Diverse
Den vanligaste funktionen är att rensa cacheminnet. Dessutom finns "Sidlinjalen" - linjal, "Sidförstoringsglaset" - förstoringsglas och "Linjeguider" - några rader finns här, som kan vara användbara för att trimma mallen.
skissera
Val av olika sidelement - tabeller, rubriker, länkar, ramar, block. Ändra storlek låter dig ändra storlek på webbläsarfönstret så att det passar alla standardskärmtillägg. Verktyg här är lagrade funktioner för sidvalidering. Både lokalt och externt. Bekväm och snabb åtkomst för att validera HTML, CSS och mer. Du kan använda kortkommandot CTRL+SHIFT+H för att validera HTML.
visa källa
Se källkoden. Möjlighet att visa i en extern applikation, se den genererade koden.
Den till höger är min favorit. Det är en snabb HTML-, CSS-validator och JavaScript-felindikator. Om det inte finns några problem är ikonen grön och om det finns problem röd.
Internet Explorer Developer Toolbar
Från och med 8.0 är felsökning redan inbyggd i den här webbläsaren. Det kallas lätt F12 nyckel. Det är sant att han är bedrövlig som ett 90-talsprogram.
Men det finns ett mycket coolare verktyg för denna webbläsare, det så kallade Internet Explorer Developer Toolbar kan laddas ner från länken.
Utseendemässigt ser det här verktygsfältet naturligtvis ut som en brandbug, men tyvärr har det inte växt upp till det än. Även om den å andra sidan har vissa funktioner som firebuggen inte har. Jag skulle kalla Internet Explorer Developer Toolbar för en hybrid av Firebug och firefox webbutvecklare Verktygsfält.
Precis som i firebug är det möjligt att inspektera ett element med ett enkelt klick. Men om vi omedelbart kan se vadderingar och marginaler, så finns det ingen sådan möjlighet här.
Utvecklarverktygsfältet i Internet Explorer uppdaterar inte heller elementträdet dynamiskt, som Firebug gör. Det vill säga, om vi ändrar något på sidan med hjälp av js, kommer vi inte att se något med detta verktygsfält.
Från vad du kan njuta av - att byta CSS i farten (ett enkelt sätt att hitta vad du ska hacka :), möjligheten att inaktivera CSS och bilder, möjligheten att snabbt rensa cacheminnet och spela med cookies, snabb tillgång till validering.
Det godaste: det finns en inbyggd färgväljare som låter dig få vilken färg som helst från sidan med en pipett. (för ff finns det ett separat ColorZilla-plugin).
Debug Debug Bar för Internet Explorer
Du kan ladda ner DebugBar för Internet Explorer från den angivna länken.
En intressant förlängning i sig. Installerad som en extra panel till webbläsaren:
Av någon anledning finns det en inbyggd sökmotor, en pipett, möjligheten att ändra storlek på fönstret och, återigen, av någon anledning, möjligheten att skicka en sida till en vän för tvål. Även om det kan vara användbart. Men jag misslyckades med att utnyttja denna möjlighet.
Dessutom finns en inspektör:
Inspektionsmetoden genom att klicka eller peka passade inte utvecklarna: de kom på en mer intressant sak. I DebugBar måste du dra målet till önskat element för att se det i trädet. Det finns inget alternativ att redigera CSS. Men det finns en validator och en inbyggd js-konsol.
Och om du gräver i inställningarna kan du hitta detta:
Både rolig och sorglig.
Det är känt att verktygsfältet för utvecklare kommer att byggas in i den åttonde utforskaren. Det kommer att likna det som beskrivs i tredje stycket, men vi hoppas att det blir bättre.
Felsök DragonFly för Opera
DragonFly har byggts in i Opera sedan version 9.5, så det finns inget behov av att installera det. För att aktivera Dragonfly, gå till Verktyg → Avancerat → Utvecklarverktyg. Och om på engelska, då Verktyg → Avancerat → Utvecklarverktyg.
Jag kommer omedelbart att varna dig för att DragonFly är i Alpha2-stadiet, detta förklarar många av dess problem.
Funktionslista:
- DOM-inspektör;
- Klicka på Inspektion (igen, vi kommer inte att se utfyllnad som i FireFox);
- Redigering ;
- Snabb åtkomst till felkonsolen.
DF är ungefär en separat sida i en ram. Om du öppnar den kommer den att vara öppen för alla flikar (till skillnad från firebug). Innan vi inspekterar ett element måste vi därför välja sidan vi vill se från listan.
Tyvärr, här, som i Internet Explorer, visar Dav Toolbar inte dynamiskt skapade element. Och i allmänhet, när vi inspekterar sidan, körs inget JavaScript: länkar och knappar klickas inte. Låt oss hoppas att när DragonFly närmar sig release kommer vi att se alla dessa funktioner.
Felsök WEB Inspector i Safari
Jag ska genast säga det om webbläsaren safari Jag visslade informationen, därför, som de säger, är jag inte ansvarig för att materialet är adekvat.
För att aktivera alternativet "Utveckling" i Safari-menyn måste du aktivera motsvarande objekt i inställningarna (fliken "Avancerat"):
Följande funktioner är tillgängliga för oss i menyn "Utveckling":
Låt oss ta en närmare titt på WEB-inspektören:
Som standard öppnas inspektören i HTML-vyläge. Men den kan växlas till DOM-visningsläge. För att göra detta finns det en strömbrytare på toppplattan. När du håller muspekaren över ett element i inspektören kommer det att markeras på själva sidan. Du kan inte se utfyllnad, ändra uppmärkning eller CSS i farten, eller se dynamiska ändringar av DOMe i farten som du inte kan i FireBug. Men du ser, det ser väldigt fint ut.
Om du vill arbeta med inspektören i ett webbläsarfönster kan du klicka på knappen i det nedre vänstra hörnet.
Även i safari är en sådan funktion som "Network Timeline" tillgänglig (knappen "Nätverk" i inspektören):
Du kan tydligt se när och hur länge filer laddas. Du kan också se rubrikerna för begäran, men du kan tyvärr inte se själva innehållet.
Felsökning för utvecklare i Google Chrome
Lame föddes i en avancerad form, och han har direkt, om än snett för nu, men fortfarande verktyg för utvecklare.
- DOM-inspektör;
- javascript debugger;
- JavaScript-konsol.
För att inspektera ett element, högerklicka på det och välj "Visa elementkod" i snabbmenyn:
Funktionaliteten är densamma som i Safari: element markeras vid hovring, men CSS- och HTML-redigering är inte tillgänglig, ändringar i DOM spåras inte. Bara knappen i det nedre vänstra hörnet, som ska fästa inspektören i webbläsarfönstret, fungerar inte.
På fliken "Resurser" kan vi se följande:
Lite annorlunda än skalan i safarin. Genomskinliga i detta diagram är relativa filstorlekar, och fullfärg är nedladdningstid. På ett eller annat sätt är det uppenbart att denna del av Chrome fortfarande är långt ifrån färdigställd.
I den här artikeln har jag granskat de mest kända tilläggen och inbyggda verktyg för webbläsare.
Det finns andra, till exempel:
- Internet Explorer WEB Development Helper är en bra hjälpare för ASP.NET-utvecklare (Internet Explorer);
- WEB Developer Toolbar - verktygsfält för Internet Explorer och FireFox. Det finns flera användbara funktioner;
- WEB Accessibility Toolbar - verktygsfält för Internet Explorer. Inget intressant.
Om det finns tillägg som jag inte nämnde, men som skulle vara värt det, eller om det finns funktioner för de nämnda tilläggen som jag missat, skriv.
Använd på hälsan!
Internet Explorer 11 i Windows 8.1 och Windows 7 kommer med en helt omdesignad och förbättrad uppsättning utvecklarverktyg inbyggda i webbläsaren för att hjälpa utvecklare att skapa, diagnostisera och optimera moderna webbplatser och appar på många enheter. De nya verktygen, som vi bara kallar F12 för korthetens skull, gör att webbutvecklare kan arbeta snabbt och effektivt.
Arbetsgrupperna Visual Studio och Internet Explorer arbetade tillsammans för att skapa F12-verktygen, som är baserade på principen att hjälpa utvecklare att snabbt gå från problem till lösning med hjälp av meningsfull data. Den nya F12-sviten ger en snabb och flexibel webbupplevelse med verktyg för att diagnostisera och åtgärda prestandaproblem, samt verktyg som hjälper dig att bättre förstå hur Internet Explorer lägger ut och renderar webbapplikationer. F12-verktyg stöder det snabba, interaktiva arbetsflödet som används av dagens webbutvecklare.
Universell uppsättning verktyg
Det nya F12-setet hjälper utvecklare att snabbt gå från problem till lösning. Några av de spännande nya funktionerna inkluderar:
- UI-svarsanalys och minnesprofileringsverktyg för att hjälpa utvecklare att bygga snabba och flexibla webbapplikationer.
- Live DOM Explorer och CSS checker uppdaterade med sidan så att utvecklare interaktivt kan utforska hur dynamiskt innehåll påverkar layout och stil
- Möjlighet att felsöka JavaScript som startar snabbt utan att uppdatera sidan så att utvecklare kan komma igång snabbare
När du använder F12-verktygen kommer du att märka många andra förbättringar som hjälper dig att uppnå ett snabbt, interaktivt arbetsflöde:
- Snabb åtkomst till dessa verktyg genom att högerklicka på ett menyalternativ med "inspektionsobjektet"
- Effektiv tangentbordsinteraktion
- Omfattande förmåga att kopiera element och komponenter från verktyg, så att de kan klistras in i valfri redigerare utan ytterligare formatering
Det viktigaste är att dessa verktyg nu visar den mest fullständiga och korrekta informationen som finns tillgänglig, från @media och!important-reglerna i DOM Explorer till kostnadsstrukturen per element i UI Response Profiler. Dessa verktyg ger också direkt meningsfull data; till exempel identifierar minnesprofileraren DOM-noder som är "live" men som inte refereras från uppmärkning eller renderingsträdet.
Möjligheterna i den nya F12-sviten är också tillgängliga i Visual Studio, så utvecklare har en konsekvent och sömlös upplevelse över alla våra webbutvecklingsverktyg och plattformar.
Låt oss nu ta en snabb titt på dessa verktyg i aktion.
Profilering av applikationer med UI Responsiveness Analyzer
Responsiveness-verktyget för användargränssnittet hjälper dig att förstå var CPU-tid spenderas så att din applikation kan uppnå sin fulla prestandapotential. Det här verktyget ger dig den insikt du behöver för att förstå Internet Explorers inre funktioner, och tillhandahåller körtidsvisualisering av HTML-, CSS- och JavaScript-kod, samt viktiga bieffekter som uppmärkning och skräpinsamling. Med ett ögonkast kan du se exakt hur snabbt din app är responsiv och hur den renderas. Detta gör att du kan identifiera specifika källor flaskhalsar och mer intelligent inställning till dess optimering.
Webbplatsprofilering
Analysera programmets minnesanvändning med Memory Profiler
Denna minnesanalysator hjälper dig att undvika minnesläckor eller överdriven minnesförbrukning. Skapande av webbapplikationer som fungerar för kunder dygnet runt, eller komplexa interaktiva applikationer innebär ofta att deras utvecklare måste ägna särskild uppmärksamhet åt problem med minnesanvändning.
Även om JavaScript är en skräpsamlad miljö, förbrukar applikationer vanligtvis mer minne bara för att objektreferenser inte har (och inte kan) frigöras. Minnesanalysatorn hjälper dig att identifiera dessa problem genom att tillhandahålla information om varje objekt på sidan, oavsett om det är ett JavaScript-objekt eller DOM. Med den här informationen kan du till exempel se hur mycket minne som hålls av ett element och vilka föremål som stöder dess uthållighet. Men viktigast av allt, du kan jämföra två ögonblicksbilder och se vad som har förändrats. Detta gör att du kan förstå varför din applikation har fått mer minne och korrigera denna situation.
Hög ögonblicksbild som visar inaktiverade DOM-element
Få en snabb förståelse för applikationsprestanda med Performance Dashboard
För att hjälpa dig att snabbt identifiera problem som påverkar din sidas prestanda tillhandahåller Internet Explorer 11 en "sida"-widget som kallas Performance Dashboard, som nås med kortkommandot Ctrl+Skift+U eller motsvarande menyalternativ för Verktyg ( Alt+T ). Den här panelen visar dynamiskt statistik i Internet Explorer för nyckelprestandamått som renderingstid, minne, bildrutor per sekund (fps) och CPU-användning. Performance Dashboard kräver inte användning av F12-verktyg och kan även användas i moderna webbläsare.
Med Performance Dashboard kan du snabbt identifiera sidinteraktioner som orsakar bildhastighetsfall eller hög CPU-användning. Du kan sedan byta till F12 för att återskapa problemet och hitta en lösning.
Inspektera element och ändra uppmärkning och stilar med DOM Explorer
DOM Explorer gör det enkelt att interaktivt ställa in @media-frågor och CSS-regler och deras egenskaper. Det är därför användargränssnitt din applikation blir ett mycket lyhört gränssnitt för flera enheter. Du kan snabbt komma igång på en webbsida genom att högerklicka och inspektera det önskade elementet, vilket kommer att starta F12-verktygen tillsammans med det element som valts i DOM Explorer, och dynamiskt visa DOM och tillämpade CSS-regler. De renderade DOM- och CSS-tabellerna är dynamiska, vilket gör att du kan förstå hur Internet Explorer tolkar särdragen i din uppmärkning, CSS-stilar och regler. När du interagerar med eller ändrar sidan med DOM Explorer, kommer ändringarna du gör att visas omedelbart.
Kontrollera märkning och stilar
DOM Explorer gör det enkelt att få rätt värde på en egenskap eller egenskaper med IntelliSense när man gör ändringar i en CSS-tabell. Du kan enkelt se vilka egenskaper som är felaktiga eller okända och sedan kopiera regeln för att tillämpa den igen på din källa.
Felsökning av JavaScript med felsökaren och konsolen
Den nya JavaScript-felsökaren ger dig verktygen för att hitta och snabbt åtgärda opålitlig kod. JavaScript-debuggern kan öppna och visa flera filer även om ditt skriptbibliotek har minifierats, ställer in brytpunkter och spårpunkter, inspekterar JavaScript-objekt, värden, omfångskedjor och visar innehållet i stacken. Att köra F12-verktygen kommer också att starta JavaScript-felsökaren omedelbart, så att du kan komma igång direkt
När du felsöker kommer du förmodligen vilja interagera med din webbplats. Konsolen är nyckelverktyget för denna uppgift. Du kan komma åt konsolen när som helst, vilket gör det effektivt att använda denna interaktiva miljö med IntelliSense och objektrenderare. Konsolen tillhandahåller också ett brett utbud av specialiserade API:er som låter dig logga utdata, analysera mängden tid som spenderas i specifik kod och tillhandahålla objektrenderare när du behöver göra en djupgående inspektion av JavaScript-objekt.
Summering
Det här blogginlägget innehåller helt enkelt en skiss över beskrivningen av de nya elementen i F12-verktygen. du kan hitta full lista ny funktionalitet tillgängligt för utvecklare i Internet Explorer 11 i artikeln "Vad är nytt i F12 Tools" och i "Internet Explorer 11 Preview Developer Guide ." Du kan också lära dig mer i Internet Explorer-testdemon, "F12 Adventure".
Vi ser fram emot din feedback och ser fram emot ett långt samarbete med utvecklargemenskapen. Dela dina förslag genom verktyget Feedback och förslag i Internet Explorer 11 eller på Connect-webbplatsen.
P. J. Hough
, Vice President, Visual Studio
