Vanligtvis när vi redigerar en webbsida använder vi ett specifikt redigeringsverktyg som Adobe Dreamweaver, CoffeeCup, Bluefish eller ett av de andra utvecklingsverktygen. Men vad sägs om vi bara brainstormar eller vill prova något på en live-sida? Vi kan göra en kopia av sidan i vårt valbara verktyg och leka med det. Eller så kan vi göra det i vår webbläsare. Den här tutorialen kommer att visa dig hur du redigerar en webbsida i din webbläsare.
Firefox, som kallas utvecklarverktyg, kallar funktionen Inspect Element medan Chrome kallar det Inspect. Hur som helst, det är ett sätt för webbläsaren att titta bakom glansen i din design och titta på koden som driver den. Denna funktion är ganska välkänd och används mycket. Det som inte är så välkänt är förmågan att göra ändringar i den koden på farten.
Alla ändringar du gör kommer inte att sparas och det kommer inte att påverka live. Om du inte vill ladda sidan i utvecklarverktyget är detta ett snyggt sätt att experimentera.
Redigera valfri webbsida i din webbläsare
Dreamweaver och liknande verktyg har en inbyggd webbläsaremulator som simulerar hur en design kommer att se ut i olika webbläsare. Så bra som de är, de är inte alltid exakta och du hittar ofta när du startar en webbplats att det som såg fantastiskt ut i ditt utvecklarverktyg ser något annorlunda ut i en fristående webbläsare.
Vanligtvis skulle du starta webbplatsen på en intern webbserver och testa i en webbläsare innan du startar live av just detta skäl. Om en sida redan är live eller om du bara vill prova något behöver du inte kopiera och ladda den i ditt utvecklingsverktyg, du kan bara använda webbläsarens utvecklingsverktyg.
Jag använder Firefox så jag visar dig hur du använder det. Chrome är dock mycket samma.
- Öppna en webbsida du vill experimentera med i din webbläsare.
- Högerklicka var som helst på sidan och välj Inspektera.
Du bör se din sida delas upp i två med en ny ruta som visas längst ner med en kod i den. Den här koden är drivkraften för den sida du valt. Olika sidelement är tillgängliga från flikarna högst upp på den nedre fliken. Vi ser till exempel Inspector, Console, Debugger, Style Editor och så vidare i Firefox.
Om du kör markören över linjerna i det nedre rutan ser du olika delar av webbsidan markera. Kodraden du är på under höjdpunkten är koden som påverkar den delen av sidan.
- Om du vill leka med hur sidan ser ut kan du prova Style Editor.
- Om du vill leka med hur sidan fungerar kan du prova Console eller Accessibility.
- Om du vill stoppa fel eller lösa ett problem använder du Console eller Debugger
Prestanda är användbart för SEO på plats men minne, nätverk och lagring används inte så mycket.
Kom ihåg att du kan röra dig i utvecklarverktygen så mycket du vill och det kommer inte att påverka webbplatsen. Alla ändringar görs endast på hur sidan visas i din individuella webbläsare, du påverkar inte själva webbplatsen. När du stänger verktyget går alla ändringar bort.
Gör ändringar på en sida
Nu vet du att du kan ändra allt du gillar utan att påverka själva webbplatsen, låt oss ha lite kul. Hitta ett element på sidan som du vill redigera. Du kan ändra ett teckensnitt, en teckensnittsfärg, bakgrundsbild eller vad du vill. I det här exemplet kommer jag att ändra teckensnittsfärgen på bannerrubriken.
- Högerklicka på det exakta elementet du vill ändra och välj Inspektera.
- Markera raden med antingen 'titel' eller 'H1' så att texten markeras i det övre fönstret.
- Navigera till de två vänstra rutorna och hitta teckensnittsfärg.
- Ändra värdet till något annat eller välj färgprick för att använda en väljare.
Din förändring kommer att visas dynamiskt när du är klar med ändringen. Du kan ändra färg, storlek, teckensnitt, bakgrund och allt om teckensnittet. Du kan inte spara arbetet men dina ändringar förblir under den sessionen.
Du kan ändra allt om sidan som är idealisk om du har en idé och snabbt vill kolla in den innan du startar upp alla dina utvecklingsappar. Allt du behöver göra är att komma ihåg vilka ändringar du gjorde och var eftersom du inte kan spara dem här. Du måste ta en skärmdump eller spela in ändringarna och replikera dem i dina utvecklarverktyg för att få det att hålla sig fast.
Att redigera en webbsida i din webbläsare är ett snyggt sätt att experimentera eller leka med sidor. Det är också ett bra sätt att lära sig lite om webbutveckling utan att behöva köpa in dyra utvecklarverktyg. Nu vet du hur, gå och spela!
