Webpagina's zijn slechts documenten die uw webbrowser weergeeft. Maar wat als u rechtstreeks op een webpagina zou kunnen typen om deze te wijzigen? Dat kan en u heeft geen browserextensie nodig: het is een functie die in elke moderne browser is ingebouwd.
Deze functie maakt gebruik van de functie "document.designMode", die u kunt inschakelen via de JavaScript-console van uw webbrowser. Het werd onlangs benadrukt door Tomek Sułkowski op Twitter, maar het is zo gaaf dat we het met onze lezers moeten delen.
Dat gevoel toen je voor het eerst `document.designMode` ontdekte pic.twitter.com/bxA1otzCjN
- Tomek Sułkowski (@sulco) September 27, 2019
U kunt deze functie gebruiken om maak een webpagina schoon voordat u deze afdrukt , test hoe veranderingen aan een webpagina eruit zullen zien, of maak mensen gewoon voor de gek. Het is net als het bewerken van een Word-document: geen gedoe met HTML vereist.
Om deze functie te activeren, gaat u naar een webpagina en opent u vervolgens de ontwikkelaarsconsole. Om de console in Google Chrome te openen, klikt u op menu> Meer tools> Developer Tools of drukt u op Ctrl + Shift + i.
Hoewel we Chrome hier als voorbeeld gebruiken, is deze functie werkt in andere moderne browsers ook. Hier is hoe u de console in andere browsers opent:
- Klik in Mozilla Firefox op menu> Webontwikkelaar> Webconsole of druk op Ctrl + Shift + K.
- Klik in Apple Safari op Safari> Voorkeuren> Geavanceerd en schakel "Ontwikkelingsmenu weergeven in menubalk" in. Klik vervolgens op Ontwikkelen> JavaScript-console weergeven.
- Klik in Microsoft Edge op menu> Meer tools> Developer Tools of druk op F12 en klik vervolgens op het tabblad "Console".
Klik op het tabblad "Console" bovenaan het paneel Developer Tools. Typ het volgende in de console en druk op Enter:
document.designMode = 'aan'
U kunt nu de console sluiten, als u dat wilt, en de huidige webpagina bewerken alsof het een bewerkbaar document is. Klik ergens om uw cursor in te voegen en typ tekst. Gebruik de Backspace- of Delete-toets om tekst, afbeeldingen en andere elementen te verwijderen.
Dit verandert gewoon hoe de webpagina in uw browser wordt weergegeven. Zodra u de pagina vernieuwt, ziet u het origineel opnieuw. Als je naar een andere webpagina of tabblad gaat, staat deze pas in de ontwerpmodus als je de console opent en deze regel nogmaals typt.
U kunt zelfs teruggaan naar de console en de volgende opdracht uitvoeren om de ontwerpmodus uit te schakelen:
document.designMode = 'uit'
De webpagina kan niet meer worden bewerkt, maar uw wijzigingen blijven behouden totdat u de pagina de volgende keer vernieuwt.
