Vsi spletni razvijalci vedo, da lahko s pomočjo brskalnika in inšpektorja spreminjamo vsebine ali kodo na objavljenih straneh začasno. Vendar pa za spreminjanje vsebine obstaja tudi druga, boljša pot “document.designMode”.

Tipka F12 v brskalniku je pri spletnih razvijalcih v pogosti uporabi. Ali jo uporabljamo pri raziskovanju ali pa pri ustvarjanju oz. popravljanju določenih zadev na strani. Čar tega je, da so vse spremembe začasne, saj se že ob osvežitvi – tipka F5 izbrišejo.

Slabost te metode je le ta, da moraš poznati DevTools oz. kako se ta orodja brskalnika uporablja. Težava je, če nisi spletni razvijalec, ampak npr. tekstopisec, marketingar, … V tem primeru je document.designMode idealen partner, saj omogoči, da lahko s klikom miške aktiviramo določen del besedila in natipkamo novega, brez da odpremo inšpektor okno in poiščemo besedilo v kodi.

Kako vklopimo document.designMode?

• Desni klik na strani in Inspect (inšpektor)
• Kliknemo console (konzola)
• Vtipkamo “document.designMode = “on”” in pritisnemo tipko Enter

Ta metoda je za nerazvijalce težavna, zato je veliko bolje narediti bljižnico:

• Ustvarimo novo bljižnico v brskalniku (bookmark)
• Ustvarimo svoje poimenovanje, npr. EDITIRANJE BESEDILA
• V okno za povezavo vstavimo spodnjo kodo:

javascript:(function(){document.designMode = document.designMode === 'on' ? 'off' : 'on';})();

Zakaj bi to uporabili?

Imamo več zanimivih, kreativnih in uporabnih možnosti. Nekatere bi bile:

• piljenje besedila na strani,
• A/B testiranje besedila,
• ali je dolžina opisa ustrezna,
• opisi strani na Google zadetkih,
• spreminjanje za namene hecanja/zavajanja (npr. v novico damo ime prijatelja)
• …

Poskusite, če ne drugega vam bo ta trik polepšal dan, meni ga je.

Vir: Previewing Content Changes In Your Work With document.designMode