Hoe valse website-screenshots maken met Firebug

Wanneer je denkt aan nep of bewerkte schermafbeeldingen, komen programma's zoals Photoshop waarschijnlijk in je op. Ik ben nog nooit creatief geweest met ontwerpen en grafisch werken, dus dat is voor mij bijna niet mogelijk. Als u gezichten in een afbeelding wilt verwisselen, moet u leren hoe u dergelijke programma's kunt gebruiken. Als je iets probeert te doen om de tekst in een Facebook-gesprek te veranderen, is dat niet nodig. Alles wat je nodig hebt is Firebug en een PrtScrn-sleutel.

Firebug is beschikbaar voor elke grote browser. How To Install Firebug op IE, Safari, Chrome & Opera. How to Install Firebug op IE, Safari, Chrome & Opera Lees meer: ​​IE6 +, Firefox, Opera, Safari en Chrome. In dit voorbeeld zal ik u een handleiding voorleggen over hoe u dit kunt gebruiken voor de eigen browser, Firefox. Wat is Firebug eigenlijk? Firebug is een browser add-on waarmee je CSS kunt bewerken, debuggen en controleren De volgende stappen op weg naar een CSS Jedi Master De volgende stappen op weg naar een CSS worden Jedi Master CSS is absoluut een van de belangrijkste technologieën rond op het internet van vandaag, en hoewel de meeste mensen toegeven een beetje HTML te kennen, zijn we over het algemeen geen idee van CSS. De laatste keer dat ik je introduceerde ... Lees meer, HTML en JavaScript. Om webpagina's te manipuleren zoals ik u vandaag laat zien, hoeft u geen van deze talen te kennen.

Firebug installeren

Installatie is ongelooflijk eenvoudig. Ga naar de officiële website om de add-on [Niet langer beschikbaar] te downloaden. Selecteer daar uw browser (Firefox heeft de voorkeur, zodat het volgen gemakkelijker is). Installeer de invoegtoepassing en start indien nodig uw browser opnieuw.

Firebug gebruiken

Bij het installeren van Firebug moet het pictogram standaard worden weergegeven in uw add-onbalk, het menu Extra en mogelijk in het contextmenu. Klik op het pictogram in uw add-on-balk en u zult een nieuw tabblad zien verschijnen aan de onderkant van uw scherm.

Wat u hier ziet, is een HTML-weergave van de elementen van de webpagina waarop u zich bevindt. In dit voorbeeld is dit de Firebug-downloadpagina op Firefox-add-ons. Als u interesse heeft om Firebug te gebruiken voor de meer gebruikelijke doeleinden, kunt u een kijkje nemen in de tabbladen en een gevoel voor zijn functies krijgen.

De knop die ik in die schermafbeelding heb gemarkeerd, is de inspectietool. Dit is de tool die we gaan gebruiken. Klik op die knop en dan zul je merken dat elk tekstgebied waarop je de muisaanwijzer plaatst, wordt gemarkeerd in de webpaginaweergave en vervolgens wordt gemarkeerd in de HTML-weergave van Firebug.

Tekst veranderen

Klik op het tekstblok dat u wilt manipuleren. U zult zien dat de tekst is geselecteerd in de HTML-weergave van Firebug. Dubbelklik vanaf daar op de HTML-regel met de tekst die u wilt wijzigen. Je kunt beginnen met typen in wat je maar wilt.

Terwijl u typt, ziet u dat de voorbeeldupdates live op de webpagina staan.

Cool toch? Het is vooral gemakkelijk vanwege de manier waarop je met Firebug onbewerkte tekst kunt isoleren van ingepakte HTML. Op die manier blijven alle HTML-elementen, CSS-stijlen en andere belangrijke visuals behouden, zodat het lijkt op de echte kopie.

Naarmate u meer vertrouwd raakt met Firebug of als u al HTML kent, vindt u het net zo gemakkelijk om andere elementen op de pagina, zoals afbeeldingen, te wijzigen. De mogelijkheden zijn vrij eindeloos en ik ben er zeker van dat je al op de proppen komt met manieren waarop je dit kleine kunstje kunt gebruiken en misbruiken.

Laat me weten wat je van deze kleine tip vindt en deel je creatieve manieren om deze in de comments te gebruiken!

Ontdek meer over: HTML, Mozilla Firefox, Screen Capture, WYSIWYG Editors.