Meestal gebruiken we bij het bewerken van een webpagina een specifieke bewerkingstool zoals Adobe Dreamweaver, CoffeeCup, Bluefish of een van de andere ontwikkeltools. Maar hoe zit het als we gewoon brainstormen of iets op een live-pagina willen uitproberen? We kunnen een kopie van de pagina maken in onze favoriete tool en daarmee spelen. Of we zouden het in onze webbrowser kunnen doen. Deze tutorial laat je zien hoe je een webpagina in je browser kunt bewerken.
Firefox wordt de functie Inspect Element genoemd, terwijl Chrome het Inspect noemt. Hoe dan ook, het is een manier voor de browser om achter de glans van uw ontwerp te gluren en de code te bekijken die ervoor zorgt. Deze functie is redelijk bekend en wordt veel gebruikt. Wat niet zo bekend is, is de mogelijkheid om die code meteen te wijzigen.
Elke wijziging die u aanbrengt, wordt niet opgeslagen en heeft geen effect op live. Als u de pagina niet in uw ontwikkelaarstool wilt laden, is dit een handige manier om te experimenteren.
Bewerk elke webpagina in uw browser
Dreamweaver en dergelijke tools hebben een ingebouwde browseremulator die simuleert hoe een ontwerp eruit zal zien in verschillende browsers. Hoe goed ze ook zijn, ze zijn niet altijd exact en je merkt vaak bij het lanceren van een site dat wat er fantastisch uitzag in je ontwikkelaarstool er iets anders uitziet in een zelfstandige browser.
Gewoonlijk start u de site op een interne webserver en test u deze in een browser voordat u om deze reden live start. Als een pagina al live is of u wilt gewoon iets proberen, hoeft u deze niet te kopiëren en in uw ontwikkelingstool te laden, u kunt gewoon de ontwikkelaarstool van de browser gebruiken.
Ik gebruik Firefox, dus ik zal je laten zien hoe je dat kunt gebruiken. Chrome is echter veel hetzelfde.
- Open een webpagina waarmee u wilt experimenteren in uw browser.
- Klik met de rechtermuisknop ergens op de pagina en selecteer Inspecteren.
U zou uw pagina in tweeën moeten zien verdelen met een nieuw venster onderaan met een code erin. Deze code is de drijvende kracht van de pagina die u hebt geselecteerd. Verschillende pagina-elementen zijn toegankelijk via de tabbladen bovenaan het onderste tabblad. We zien bijvoorbeeld Inspector, Console, Debugger, Style Editor enzovoort in Firefox.
Als u uw cursor over de lijnen in het onderste deelvenster beweegt, ziet u verschillende delen van de webpagina markeren. De coderegel waarop u zich tijdens de markering bevindt, is de code die dat deel van de pagina beïnvloedt.
- Als je wilt spelen met hoe de pagina eruitziet, probeer je Style Editor.
- Als u wilt spelen met hoe de pagina werkt, probeer dan Console of Toegankelijkheid.
- Als u bugs wilt verhelpen of een probleem wilt oplossen, gebruikt u Console of Debugger
Prestaties zijn handig voor on-site SEO, maar geheugen, netwerk en opslag worden niet zoveel gebruikt.
Vergeet niet dat je zoveel kunt rommelen in de ontwikkelaarstools als je wilt en dit heeft geen invloed op de site. Wijzigingen worden alleen aangebracht in de manier waarop de pagina in uw individuele browser wordt weergegeven, u heeft geen invloed op de website zelf. Zodra u het hulpprogramma sluit, gaan alle wijzigingen verloren.
Wijzigingen aanbrengen op een pagina
Nu weet je dat je alles wat je maar wilt kunt veranderen zonder de daadwerkelijke website te beïnvloeden, laten we een beetje plezier hebben. Zoek een element op de pagina dat u wilt bewerken. Je kunt een lettertype, een letterkleur, een achtergrondafbeelding of wat je maar wilt veranderen. In dit voorbeeld ga ik de lettertypekleur van de kop van de banner wijzigen.
- Klik met de rechtermuisknop op het exacte element dat u wilt wijzigen en selecteer Inspecteren.
- Markeer de regel met 'titel' of 'H1' zodat de tekst in het bovenste deelvenster wordt gemarkeerd.
- Navigeer naar de linker twee deelvensters en zoek de lettertypekleur.
- Wijzig de waarde in iets anders of selecteer de kleurstip om een selector te gebruiken.
Uw wijziging wordt dynamisch weergegeven wanneer u de wijziging voltooit. U kunt de kleur, grootte, lettertype, achtergrond en alles over het lettertype wijzigen. U kunt het werk niet opslaan, maar uw wijzigingen blijven behouden voor die sessie.
Je kunt alles aan de pagina veranderen, wat ideaal is als je een idee hebt en het snel wilt bekijken voordat je al je ontwikkelings-apps start. Het enige wat u hoeft te doen is onthouden welke wijzigingen u hebt aangebracht en waar u ze hier niet kunt opslaan. U moet een screenshot maken of de wijzigingen vastleggen en deze repliceren in uw ontwikkelaarstools om het vast te houden.
Een webpagina in uw browser bewerken is een handige manier om met pagina's te experimenteren of te spelen. Het is ook een goede manier om een beetje te leren over webontwikkeling zonder dure ontwikkelaarstools te hoeven kopen. Nu weet je hoe, ga eens spelen!
