Når vi redigerer en webside, bruger vi normalt et specifikt redigeringsværktøj som Adobe Dreamweaver, CoffeeCup, Bluefish eller et af de andre udviklingsværktøjer. Men hvad med hvis vi bare brainstormer eller vil prøve noget på en live side? Vi kunne lave en kopi af siden i vores valg af værktøj og lege med det. Eller vi kunne gøre det i vores webbrowser. Denne tutorial viser dig, hvordan du redigerer en webside i din browser.
Firefox, der kaldes Developer Tools, kalder funktionen Inspect Element, mens Chrome kalder den Inspect. Uanset hvad, er det en måde for browseren at kigge bag glansen på dit design og se på koden, der driver det. Denne funktion er ganske velkendt og bruges meget. Hvad der ikke er så kendt, er evnen til at foretage ændringer i denne kode undervejs.
Enhver ændring, du foretager, gemmes ikke, og det vil ikke påvirke live. Hvis du ikke vil indlæse siden i dit udviklerværktøj, er dette en pæn måde at eksperimentere på.
Rediger enhver webside i din browser
Dreamweaver og lignende værktøjer har en indbygget browseremulator, der simulerer, hvordan et design vil se ud i forskellige browsere. Så gode som de er, er de ikke altid nøjagtige, og du finder ofte, når du starter et websted, at det, der så fantastisk ud i dit udviklerværktøj, ser lidt anderledes ud i en enkeltstående browser.
Normalt ville du starte stedet på en intern webserver og teste i en browser, inden du starter live af netop denne grund. Hvis en side allerede er live, eller du bare vil prøve noget, er der ikke behov for at kopiere og indlæse den i dit udviklingsværktøj, du kan bare bruge browserens udviklerværktøj.
Jeg bruger Firefox, så jeg viser dig, hvordan du bruger det. Chrome er dog stort set det samme.
- Åbn en webside, du vil eksperimentere med i din browser.
- Højreklik hvor som helst på siden og vælg Inspekter.
Du skal se din side opdele i to med en ny rude, der vises i bunden med en kode deri. Denne kode er drivkraften på den valgte side. Forskellige sideelementer er tilgængelige fra fanerne øverst på den nederste fane. For eksempel ser vi Inspector, Console, Debugger, Style Editor og så videre i Firefox.
Hvis du kører din markør over linjerne i den nederste rude, vil du se forskellige dele af websiden fremhæve. Den kodelinje, du er på under fremhævningen, er den kode, der har indflydelse på den del af siden.
- Hvis du vil lege med, hvordan siden ser ud, kan du prøve Style Editor.
- Hvis du vil lege med, hvordan siden fungerer, kan du prøve Console eller Accessibility.
- Hvis du vil afbryde fejl eller løse et problem, skal du bruge Console eller Debugger
Ydeevne er nyttig til SEO på stedet, men hukommelse, netværk og opbevaring bruges ikke så meget.
Husk, at du kan rod rundt i Developer Tools så meget som du vil, og det vil ikke påvirke webstedet. Eventuelle ændringer foretages kun i, hvordan siden vises i din individuelle browser, du påvirker ikke selve websitet. Når du lukker værktøjet, mistes alle ændringer.
Foretag ændringer på en side
Nu ved du, at du kan ændre alt, hvad du kan lide uden at påvirke det aktuelle websted, lad os have det lidt sjovt. Find et element på den side, du gerne vil redigere. Du kan ændre en skrifttype, en fontfarve, baggrundsbillede eller hvad du end vil. I dette eksempel vil jeg ændre skrifttypefarve på bannernoverskriften.
- Højreklik på det nøjagtige element, du vil ændre, og vælg Inspekter.
- Fremhæv linjen med enten 'titel' eller 'H1', så teksten fremhæves i øverste rude.
- Naviger til de to venstre ruder og find fontfarve.
- Skift værdien til noget andet, eller vælg farveprik for at bruge en vælger.
Din ændring vises dynamisk, når du er færdig med ændringen. Du kan ændre farve, størrelse, skrifttype, baggrund og alt om skrifttypen. Du kan ikke gemme arbejdet, men dine ændringer forbliver i den session.
Du kan ændre alt ved siden, som er ideel, hvis du har en idé og hurtigt vil tjekke den ud, før du fyrer op for alle dine udviklingsapps. Alt hvad du skal gøre er at huske, hvilke ændringer du har foretaget, og hvor du ikke kan gemme dem her. Du bliver nødt til at tage et skærmbillede eller registrere ændringerne og gentage dem i dine udviklerværktøjer for at gøre det klistret.
Redigering af en webside i din browser er en pæn måde at eksperimentere eller lege med sider på. Det er også en god måde at lære lidt om webudvikling uden at skulle købe dyre udviklerværktøjer. Nu ved du hvordan, gå og leg en leg!
