agwebrunner.com

Ang mga web page ay mga dokumento lamang na ipinapakita ng iyong web browser. Ngunit paano kung maaari kang direktang mag-type sa anumang web page upang baguhin ito? Maaari mo, at hindi mo kailangan ng isang extension ng browser — ito ay isang tampok na naka-built sa bawat modernong browser.

Sinasamantala ng tampok na ito ang tampok na "document.designMode", na maaari mong paganahin sa pamamagitan ng JavaScript console ng iyong web browser. Kamakailan-lamang na ito ay nai-highlight ni Tomek Sułkowski sa Twitter, ngunit ito ay napaka cool na kailangan naming ibahagi ito sa aming mga mambabasa.

Maaari mong gamitin ang tampok na ito upang linisin ang isang web page bago i-print ito, subukan kung paano magmumula ang mga pagbabago sa isang web page, o kahit mga kalokohan lang ang mga tao. Ito ay magiging katulad ng pag-edit ng isang dokumento ng Word — walang paggalaw sa kinakailangang HTML.

Upang buhayin ang tampok na ito, bisitahin ang isang web page at pagkatapos buksan ang developer console. Upang buksan ang console sa Google Chrome, mag-click sa menu> Higit pang Mga Tool> Mga Tool ng Developer o pindutin ang Ctrl + Shift + i.

Habang ginagamit namin ang Chrome bilang isang halimbawa dito, gagana rin ang tampok na ito sa iba pang mga modernong browser. Narito kung paano buksan ang console sa iba pang mga browser:

• Sa Mozilla Firefox, mag-click sa menu> Web Developer> Web Console o pindutin ang Ctrl + Shift + K.
• Sa Apple Safari, i-click ang Safari> Mga Kagustuhan> Advanced at paganahin ang "Ipakita ang Bumuo ng menu sa menu bar." Pagkatapos, i-click ang Paunlarin> Ipakita ang JavaScript Console.
• Sa Microsoft Edge, i-click ang menu> Higit pang Mga Tool> Mga Tool ng Developer o pindutin ang F12 at pagkatapos ay i-click ang tab na "Console".

I-click ang tab na "Console" sa tuktok ng panel ng Mga Tool ng Developer. I-type ang sumusunod sa console at pindutin ang Enter:

document.designMode = 'on'

Maaari mo na ngayong isara ang console, kung nais mo, at i-edit ang kasalukuyang web page na para bang isang na-e-edit na dokumento. Mag-click sa kung saan upang ipasok ang iyong cursor at i-type ang teksto. Gamitin ang Backspace o Tanggalin ang mga key upang alisin ang teksto, mga imahe, at iba pang mga elemento.

Binabago lamang nito kung paano lumilitaw ang web page sa iyong browser. Sa sandaling na-refresh mo ang pahina, makikita mo muli ang orihinal. Kung pupunta ka sa isa pang web page o tab, hindi ito magiging disenyo mode hanggang sa buksan mo ang console at mai-type muli ang linyang ito.

Maaari ka ring bumalik sa console at patakbuhin ang sumusunod na utos upang patayin ang disenyo mode:

document.designMode = 'off'

Hindi na mae-e-edit ang web page, ngunit mapapanatili ang iyong mga pagbabago hanggang sa susunod mong i-refresh ang pahina.