Paginile web, în esență, sunt simple documente afișate de browserul tău. Însă, te-ai gândit vreodată cum ar fi să poți interveni direct asupra unei pagini, modificând-o în timp real? Ei bine, este posibil, și nici măcar nu ai nevoie de extensii suplimentare. Această capacitate este integrată în majoritatea browserelor moderne.
Această funcționalitate se bazează pe comanda „document.designMode”, pe care o poți activa folosind consola JavaScript a browserului tău. Recent, această metodă a fost popularizată de Tomek Sułkowski pe Twitter, iar noi considerăm că este o opțiune atât de interesantă, încât merită împărtășită cu cititorii noștri.
— Tomek Sułkowski (@sulco) 27 septembrie 2019
Această funcție îți oferă oportunitatea de a face diverse lucruri, de la curățarea unei pagini web înainte de printare, la a testa vizual cum ar arăta anumite modificări sau chiar pentru a face farse amuzante. Este o experiență similară cu editarea unui document Word, fără a fi necesar să te complici cu cod HTML.
Pentru a activa această opțiune, navighează la pagina dorită și deschide consola pentru dezvoltatori. În Google Chrome, poți face asta mergând la meniul principal > Mai multe instrumente > Instrumente pentru dezvoltatori, sau folosind combinația de taste Ctrl+Shift+i.
Deși exemplificăm aici cu Chrome, această caracteristică este disponibilă și în alte browsere moderne. Iată cum poți accesa consola în alte browsere populare:
În Mozilla Firefox, accesează meniul principal > Web Developer > Consola Web sau apasă Ctrl+Shift+K.
În Apple Safari, mergi la Safari > Preferințe > Avansat și bifează opțiunea „Afișează meniul Dezvoltare în bara de meniu”. Apoi, alege Dezvoltare > Afișează Consola JavaScript.
În Microsoft Edge, navighează la meniul principal > Mai multe instrumente > Instrumente pentru dezvoltatori sau apasă F12 și apoi selectează tab-ul „Consolă”.
În partea superioară a panoului Instrumente pentru dezvoltatori, selectează tab-ul „Consola”. Acolo, introdu următoarea comandă și apasă Enter:
document.designMode="on"
Acum, poți închide consola (dacă dorești) și începe să modifici pagina web activă ca și cum ar fi un document editabil. Dă clic pe pagina unde vrei să inserezi text sau folosește tastele Backspace sau Delete pentru a elimina elemente precum text și imagini.
Este important de reținut că aceste modificări sunt temporare și afectează doar modul în care pagina web apare în browserul tău. Imediat ce reîncarci pagina, vei vedea versiunea originală. De asemenea, dacă navighezi la o altă pagină sau filă, nu vei mai avea modul de editare activ, până când nu vei repeta pașii de activare.
Pentru a dezactiva modul design, poți reveni la consolă și introduce comanda:
document.designMode="off"
Pagina web nu va mai fi editabilă, dar modificările tale vor fi vizibile până când vei reîmprospăta pagina.
