Cách chỉnh sửa bất kỳ trang web nào trong Chrome (hoặc bất kỳ trình duyệt nào)

Các trang web chỉ là tài liệu mà trình duyệt web của bạn hiển thị. Nhưng điều gì sẽ xảy ra nếu bạn có thể gõ trực tiếp vào bất kỳ trang web nào để sửa đổi nó? Bạn có thể và không cần tiện ích mở rộng trình duyệt — đó là một tính năng được tích hợp trong mọi trình duyệt hiện đại.

Tính năng này tận dụng lợi thế của tính năng “document.designMode”, bạn có thể bật tính năng này thông qua bảng điều khiển JavaScript của trình duyệt web của mình. Gần đây nó đã được Tomek Sułkowski đánh dấu trên Twitter, nhưng nó thú vị đến mức chúng tôi phải chia sẻ nó với độc giả của mình.

Bạn có thể sử dụng tính năng này để dọn dẹp một trang web trước khi in nó, kiểm tra các thay đổi đối với một trang web sẽ trông như thế nào hoặc thậm chí chỉ để chơi khăm mọi người. Nó sẽ giống như chỉnh sửa tài liệu Word — không cần phải làm rối với HTML.

Để kích hoạt tính năng này, hãy truy cập trang web, sau đó mở bảng điều khiển dành cho nhà phát triển. Để mở bảng điều khiển trong Google Chrome, hãy nhấp vào menu> Công cụ khác> Công cụ dành cho nhà phát triển hoặc nhấn Ctrl + Shift + i.

Mặc dù chúng tôi đang sử dụng Chrome làm ví dụ ở đây, nhưng tính năng này cũng hoạt động trên các trình duyệt hiện đại khác. Dưới đây là cách mở bảng điều khiển trong các trình duyệt khác:

  • Trong Mozilla Firefox, nhấp vào menu> Nhà phát triển web> Bảng điều khiển web hoặc nhấn Ctrl + Shift + K.
  • Trong Apple Safari, nhấp vào Safari> Tùy chọn> Nâng cao và bật “Hiển thị menu Phát triển trong thanh menu”. Sau đó, nhấp vào Phát triển> Hiển thị Bảng điều khiển JavaScript.
  • Trong Microsoft Edge, nhấp vào menu> Công cụ khác> Công cụ dành cho nhà phát triển hoặc nhấn F12 rồi nhấp vào tab “Bảng điều khiển”.

Nhấp vào tab “Bảng điều khiển” ở đầu bảng Công cụ dành cho nhà phát triển. Nhập thông tin sau vào bảng điều khiển và nhấn Enter:

document.designMode = 'on'

Bây giờ bạn có thể đóng bảng điều khiển, nếu muốn và chỉnh sửa trang web hiện tại như thể nó là một tài liệu có thể chỉnh sửa. Nhấp vào một nơi nào đó để chèn con trỏ của bạn và nhập văn bản. Sử dụng phím Backspace hoặc Delete để xóa văn bản, hình ảnh và các phần tử khác.

Điều này chỉ thay đổi cách trang web xuất hiện trong trình duyệt của bạn. Ngay sau khi bạn làm mới trang, bạn sẽ thấy lại bản gốc. Nếu bạn truy cập một trang web hoặc tab khác, nó sẽ không ở chế độ thiết kế cho đến khi bạn mở bảng điều khiển và nhập lại dòng này.

Bạn thậm chí có thể quay lại bảng điều khiển và chạy lệnh sau để tắt chế độ thiết kế:

document.designMode = 'tắt'

Trang web sẽ không thể chỉnh sửa được nữa, nhưng các thay đổi của bạn sẽ được giữ nguyên cho đến khi bạn làm mới trang lần sau.


$config[zx-auto] not found$config[zx-overlay] not found