Oavsett om du är nybörjare eller proffs kan felsökning av din HTML och CSS vara en verklig smärta om du inte är ordentligt utrustad. Idag ser vi på några verktyg för att hjälpa dig att tvinga den irriterande webbsidan till inlämning.
Standardwebbläsarverktygen
Innan vi startar in i tredje parts verktyg, applikationer och tillägg, bör du kolla in de verktyg som finns tillgängliga i din webbläsare. De flesta moderna webbläsare har några utvecklingsverktyg byggda direkt in i gränssnittet.
Låt oss ta en snabb titt på några av verktygen Safari ger utvecklare rätt ut ur lådan.
Felsökning i Safari
Safaris standardutvecklingsverktyg är mycket starkare än de flesta ger dem kredit för. För att aktivera dem, gå till Safari-inställningar och markera rutan under? Avancerat? fliken som säger? Visa utvecklingsmeny i menyraden.? Nu under utvecklarmenyn, gå ner till? Visa webbinspektör.?
Detta borde dyka upp en meny längst ner i ditt fönster som innehåller massor av bra alternativ för inspektion och felsökning av webbsidor. Idag fokuserar vi på två viktiga områden som innehåller verktyg för felsökningsprocessen: Resurser och Elements.
Under fliken Resurser kan du se alla filerna som utgör webbplatsen. Dessa inkluderar skript, bilder, html, css, etc. Du kan också se hur länge varje objekt tar för att ladda och om några fel uppstår under laddningsprocessen.
Under fliken Element ser du en expanderbar översikt av din HTML:
Här kan du sväva över delar av kod och se dem markerade på webbplatsen ovan. Du kan också klicka på förstoringsglaset längst ner för att direkt välja vad du ser på webbsidan för inspektion. Den markerade delen i förhandsgranskningen kan du se vaddering och marginal som påverkar det här elementet.
Genom att dubbelklicka på någon del av HTML-filen kan du ändra vad du vill ha. Tänk på att dessa är säkra, icke-permanenta ändringar som endast förhandsgranskar skillnaderna utan att faktiskt påverka din ursprungliga fil.
När du väl har valt en sektion eller ett objekt kan du se vilka stilar som är associerade med det objektet längst till höger om fönstret.
Som med HTML kan du felsöka och experimentera genom att redigera dina stilar här (dubbelklick). Om du till exempel vill ändra rubrikfärg till gul, dubbelklicka bara på? Vit? och skriv in ett nytt värde. Du kan också använda de lilla kryssrutorna för att inaktivera delar av kod för ytterligare felsökningsflexibilitet.
Slutligen, genom att klicka på den lilla stop skylten form med en? X? längst ner till höger på skärmen kan du se några fel som uppstår när sidan laddas (som nämnts ovan kan du också se dessa under Resurser).
Som du kan se är Safari ett utmärkt HTML / CSS-felsökningsverktyg som alla. Du kan se alla associerade filer och se hur / om de laddas, inspektera enskilda element nära varandra, redigera både HTML och CSS direkt i webbläsarfönstret och utvärdera fel.
Felsökning i andra webbläsare
Kolla in dessa artiklar för mer om hur du använder standardutvecklarverktygen i andra webbläsare:
- Webbutveckling med Firefox
- Upptäcka Utvecklarverktyg för Internet Explorer
- Operatörsverktyg
Pyroman
Du kan helt enkelt inte diskutera felsökningsverktyg utan att ta upp Firebug. Det anses allmänt som det bästa alternativet där ute för att anpassa din CSS i webbläsaren.
Firebug är ett gratis tillägg för Firefox och innehåller många kraftfulla och lättanvända funktioner för webbutvecklare. Klicka på bilden nedan för att kolla in webbplatsen och ladda ner tillägget.
När du har installerat och aktiverat Firebug ser du ett mycket liknande fönster till det vi såg i Safari dyker upp längst ner på skärmen. Precis som i Safari finns det en fin översikt över din HTML-fil med valbara delar och intelligent markering i förhandsvisningen. Här Firebug trumpar Safari men genom att färgkodning marginalerna och vadderingen på webbplatsens förhandsgranskning för enkel visuell referens.
Om du klickar på en sektion kommer den associerade CSS på höger sida att hämtas.
Alternativt kan du klicka på CSS-fliken och se hela din CSS-fil i en helt redigerbar vy. Precis som för Safari, de förändringar du gör här representerar inte faktiska ändringar i filen, de är bara för att ge dig en viss flexibilitet för felsökning och experimentering.
Detta reporerar bara ytan på vad Firebug kan göra. Det finns många mer avancerade funktioner för både nya och erfarna proffs. Oavsett om du är en dedikerad Firefox-användare, bör du verkligen försöka Firebug ut för dig själv.
Firebug Lite
Förhoppningsvis kommer vi, med det nya och förbättrade Safari 5-förlängningssystemet, att se en officiell Firebug-plugin eller annan tredje part som snart motsvarar. Men under tiden, om du är på någon annan webbläsare kan du använda Firebug Lite, en bokmärke med många (men definitivt inte alla) av samma funktioner som Firebug.
Xyle Omfattning
Cultured Code, utvecklarna av den fantastiska produktivitetsapp? Saker? skapade en imponerande liten applikation för debugging och tweaking dina webbsidor. Xyle Scope brukade kosta $ 20 men har nyligen blivit en gratis nedladdning.
Du kommer inte hitta en länk till den på hemsidan för odlad kod så jag skulle kunna föreställa mig att de har upphört med utvecklingen för Xyle Scope i ljuset av sakernas enorma framgång. Här är en direktlänk till hämtningssidan.
Xyle Scope har en fin split pane vy med webbplatsen förhandsvisning till vänster och alla dina verktyg till höger. Du kan välja objekt direkt på granskningen och se alla deras tillhörande attribut. Det finns massor av information att undersöka här, inklusive kaskadorder, tillämpade stilar, väljare, sidhierarki och mycket mer. Som med Firebug kan Xyle Scope du visuellt skilja mellan marginalerna och vadderingen som appliceras på ett element.
Du kan justera alla stilar du gillar och även välja att spara ändringarna. Xyle Scope är ett oerhört användbart och undervärderat verktyg för att justera din HTML och CSS. Det är verkligen olyckligt att vi kanske inte ser några ytterligare uppdateringar för CSS3 och HTML 5-support. Om någon vet annorlunda, låt mig veta!
CSS Debug Snippet
Det senaste felsökningsverktyget vi tittar på är ett smart litet hack som du kan använda till din CSS direkt för att undersöka layering av element på sidan. Jag är inte säker på vem som tänkte på det först, men jag har sett snippet på ett antal webbplatser runtom webben (jag hittade ursprungligen här).
Chris Page beskriver snippetsfunktionaliteten på följande sätt:? Jag använder följande bit av CSS för att hjälpa till att visualisera strukturen i ett XHTML-dokument (eller HTML) genom att lägga en färgad kontur runt gränsen för varje element. På varje nivå i hierarkin ändras färgen så att du kan se när? Djup? förändringar.?
Den resulterande sidan ska se ut som bilden nedan:
Det finns också en något annorlunda version som tillämpar ett svängningsobjekt till varje rad så att du bara ser de streckade linjerna när du sveper över en viss del. Annars visas sidan normal.
Slutsatser
Förutom verktygen ovan bör du alltid validera både din CSS och HTML. Att göra det hjälper dig att kringgå otaliga problem och ge dig enkel information om hur du bättre kan koda dina sidor.
Jag hoppas att verktygen ovan är till nytta för dig i din strävan efter pixel perfekt webbdesign och layout. Låt oss veta i kommentarsektionen nedan vilka verktyg du använder för att felsöka och tweak din HTML och CSS!