วิธีแก้ไขหน้าเว็บใน Chrome (หรือเบราว์เซอร์ใดก็ได้)

หน้าเว็บเป็นเพียงเอกสารที่เว็บเบราว์เซอร์ของคุณแสดง แต่ถ้าคุณสามารถพิมพ์ลงบนหน้าเว็บโดยตรงเพื่อแก้ไขได้ล่ะ? คุณทำได้และไม่จำเป็นต้องมีส่วนขยายเบราว์เซอร์ซึ่งเป็นคุณลักษณะที่มีอยู่ในเบราว์เซอร์สมัยใหม่ทุกตัว

คุณลักษณะนี้ใช้ประโยชน์จากคุณลักษณะ“ document.designMode” ซึ่งคุณสามารถเปิดใช้งานผ่านคอนโซล JavaScript ของเว็บเบราว์เซอร์ เมื่อเร็ว ๆ นี้ Tomek Sułkowskiได้ให้ความสำคัญกับ Twitter แต่มันเจ๋งมากที่เราต้องแบ่งปันกับผู้อ่าน

คุณสามารถใช้คุณสมบัตินี้เพื่อล้างหน้าเว็บก่อนที่จะพิมพ์ทดสอบว่าการเปลี่ยนแปลงของหน้าเว็บจะมีลักษณะอย่างไรหรือแม้แต่แค่แกล้งคน มันจะเหมือนกับการแก้ไขเอกสาร Word - ไม่ต้องยุ่งกับ HTML

ในการเปิดใช้งานคุณสมบัตินี้ไปที่หน้าเว็บจากนั้นเปิดคอนโซลนักพัฒนา หากต้องการเปิดคอนโซลใน Google Chrome ให้คลิกเมนู> เครื่องมือเพิ่มเติม> เครื่องมือสำหรับนักพัฒนาหรือกด Ctrl + Shift + i

ในขณะที่เราใช้ Chrome เป็นตัวอย่างที่นี่คุณลักษณะนี้ก็ใช้ได้ในเบราว์เซอร์สมัยใหม่อื่น ๆ เช่นกัน วิธีเปิดคอนโซลในเบราว์เซอร์อื่น ๆ มีดังนี้

• ใน Mozilla Firefox คลิกเมนู> Web Developer> Web Console หรือกด Ctrl + Shift + K
• ใน Apple Safari ให้คลิก Safari> การตั้งค่า> ขั้นสูงและเปิดใช้งาน“ แสดงเมนูการพัฒนาในแถบเมนู” จากนั้นคลิกพัฒนา> แสดงคอนโซล JavaScript
• ใน Microsoft Edge คลิกเมนู> เครื่องมือเพิ่มเติม> เครื่องมือสำหรับนักพัฒนาหรือกด F12 จากนั้นคลิกแท็บ "คอนโซล"

คลิกแท็บ "คอนโซล" ที่ด้านบนสุดของแผงเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ พิมพ์สิ่งต่อไปนี้ลงในคอนโซลแล้วกด Enter:

document.designMode = 'เปิด'

ตอนนี้คุณสามารถปิดคอนโซลได้หากต้องการและแก้ไขหน้าเว็บปัจจุบันราวกับว่าเป็นเอกสารที่แก้ไขได้ คลิกที่ใดที่หนึ่งเพื่อแทรกเคอร์เซอร์และพิมพ์ข้อความ ใช้แป้น Backspace หรือ Delete เพื่อลบข้อความรูปภาพและองค์ประกอบอื่น ๆ

นี่เป็นเพียงการเปลี่ยนแปลงวิธีที่หน้าเว็บปรากฏในเบราว์เซอร์ของคุณ ทันทีที่คุณรีเฟรชหน้าคุณจะเห็นต้นฉบับอีกครั้ง หากคุณไปที่หน้าเว็บหรือแท็บอื่นหน้านั้นจะไม่อยู่ในโหมดออกแบบจนกว่าคุณจะเปิดคอนโซลและพิมพ์บรรทัดนี้อีกครั้ง

คุณสามารถกลับไปที่คอนโซลและเรียกใช้คำสั่งต่อไปนี้เพื่อปิดโหมดการออกแบบ:

document.designMode = 'ปิด'

หน้าเว็บจะไม่สามารถแก้ไขได้อีกต่อไป แต่การเปลี่ยนแปลงของคุณจะถูกเก็บไว้จนกว่าคุณจะรีเฟรชหน้าครั้งถัดไป