Verkkosivut ovat vain asiakirjoja, joita selaimesi näyttää. Mutta entä jos voisit kirjoittaa suoraan mille tahansa verkkosivulle sen muokkaamiseksi? Voit ja et tarvitse selainlaajennusta - se on ominaisuus, joka on sisäänrakennettu jokaisessa modernissa selaimessa.
Tämä ominaisuus hyödyntää “document.designMode” -ominaisuutta, jonka voit ottaa käyttöön selaimesi JavaScript-konsolilla. Tomek Sułkowski korosti sitä äskettäin Twitterissä, mutta se on niin siistiä, että meidän on jaettava se lukijamme kanssa.
Tunne, kun löysit ensimmäisen kerran `document.designMode` pic.twitter.com/bxA1otzCjN
- Tomek Sułkowski (@sulco) 27. syyskuuta 2019
Voit käyttää tätä ominaisuutta siivoa verkkosivu ennen sen tulostamista , testaa, miltä verkkosivun muutokset näyttävät, tai edes vain kepponen ihmisiä. Se on kuin muokkaat Word-asiakirjaa - ei tarvita sekoittamista HTML: n kanssa.
Aktivoi tämä ominaisuus käymällä verkkosivulla ja avaamalla sitten kehittäjäkonsoli. Voit avata konsolin Google Chromessa valitsemalla valikko> Lisää työkaluja> Kehittäjän työkalut tai painamalla Ctrl + Vaihto + i.
Vaikka käytämme Chromea esimerkkinä, tämä ominaisuus toimii muissa moderneissa selaimissa myös. Näin avaat konsolin muissa selaimissa:
- Valitse Mozilla Firefoxissa valikko> Verkkokehittäjä> Verkkokonsoli tai paina Ctrl + Vaihto + K.
- Napsauta Apple Safarissa Safari> Asetukset> Lisäasetukset ja ota käyttöön Näytä kehitystyövalikko valikkopalkissa. Napsauta sitten Kehitä> Näytä JavaScript-konsoli.
- Valitse Microsoft Edgen valikko> Lisää työkaluja> Kehittäjän työkalut tai paina F12 ja napsauta sitten "Konsoli" -välilehteä.
Napsauta Kehittäjän työkalut-paneelin yläosassa olevaa Konsoli-välilehteä. Kirjoita seuraava konsoliin ja paina Enter:
document.designMode = 'on'
Voit nyt sulkea konsolin, jos haluat, ja muokata nykyistä verkkosivua ikään kuin se olisi muokattava asiakirja. Lisää kohdistin ja kirjoita teksti napsauttamalla kohtaa. Poista teksti, kuvat ja muut elementit askelpalautin- tai poistonäppäimillä.
Tämä vain muuttaa verkkosivun näyttämistä selaimessasi. Heti kun päivität sivun, näet alkuperäisen jälleen. Jos siirryt toiselle verkkosivulle tai välilehdelle, se ei ole suunnittelutilassa, ennen kuin avaat konsolin ja kirjoitat tämän rivin uudelleen.
Voit jopa palata konsoliin ja suorittaa seuraavan komennon sammuttaaksesi suunnittelutilan:
document.designMode = 'pois'
Verkkosivua ei voi enää muokata, mutta muutokset säilytetään, kunnes seuraavan kerran päivität sivun.
