Hiển thị mã html trên trình duyệt

HTML Viewer trực tuyến là công cụ dễ sử dụng để xem và định dạng dữ liệu HTML. Sao chép, Dán và Xem HTML. Trình xem HTML là một ứng dụng dựa trên trình duyệt hiển thị mã HTML của trang web để tạo điều kiện gỡ lỗi hoặc chỉnh sửa. Nó cũng có thể được sử dụng để kiểm tra bố cục của các trang HTML trước khi chúng được xuất bản trên internet

Trình xem HTML giúp Định dạng chuỗi/tệp HTML với đầu ra tốt nhất có thể

Bạn có thể làm gì với Trình xem HTML?

• Trình xem HTML trực tuyến này giúp kiểm tra và xem trước HTML của bạn
• Người dùng cũng có thể làm đẹp File HTML bằng cách upload file
• Nó giúp lưu và chia sẻ nội dung HTML
• Trình phân tích cú pháp HTML trực tuyến này giúp hiển thị đầu ra HTML và mã html thụt lề
• HTML Viewer Online hoạt động tốt trên Windows, MAC, Linux, Chrome, Firefox, Edge và Safari
• Hãy thử công cụ HTML Pretty Print của chúng tôi

Làm cách nào để xem Mã HTML trực tuyến?

1. Mở công cụ Trình xem HTML và Sao chép và Dán mã HTML trong Trình soạn thảo văn bản đầu vào làm nổi bật các vấn đề và cú pháp HTML
2. Nếu bạn có tệp html, bạn có thể tải tệp lên bằng nút Tải tệp lên. Bạn cũng có thể tải mã HTML lên bằng URL công khai. Nhấp vào nút URL và Dán URL
3. Nhấp vào nút Chạy / Xem khi dữ liệu html có sẵn trong Trình chỉnh sửa, thông qua Dán, Tệp hoặc URL
4. Người dùng sẽ thấy bản xem trước HTML trong Trình chỉnh sửa đầu ra

Trình xem HTML hoạt động như thế nào?

Trình xem HTML trực tuyến sử dụng mã JavaScript để phân tích cú pháp HTML và xem trước trên dữ liệu HTML

Chỉ cần Dán mã HTML của bạn và nhấp vào Chạy/Xem. Công cụ này không gửi mã đến máy chủ để xem trước

Trong trường hợp tải lên tệp, Trình duyệt sẽ đọc tệp và để tải lên URL, nó sẽ gửi url đến máy chủ và trả về dữ liệu html, sau đó xem trong phần Đầu ra

Mọi trình duyệt Internet chính đều cho phép người dùng xem mã nguồn HTML của bất kỳ trang web nào. Các phần sau chứa thông tin về nhiều cách để xem mã nguồn trong mỗi trình duyệt chính. Để tiếp tục, hãy chọn một mục từ danh sách bên dưới và làm theo hướng dẫn

• thông tin giới thiệu
• Google Chrome
• Mozilla Firefox
• Microsoft Cạnh
• Internet Explorer của Microsoft
• Cuộc đi săn
• Ô-pê-ra
• Điện thoại hoặc máy tính bảng Android sử dụng Chrome
• iPhone hoặc iPad sử dụng Safari
• Cách đóng trang mã nguồn hoặc công cụ
• Sử dụng một công cụ trực tuyến để xem mã nguồn

thông tin giới thiệu

Khi xem mã nguồn của trang web, thông tin và mã do máy chủ xử lý sẽ không xuất hiện. Ví dụ: công cụ tìm kiếm xử lý thông tin trên máy chủ rồi hiển thị kết quả trên trang web. Nói cách khác, bạn có thể xem mã tạo nên trang kết quả, nhưng bạn không thể xem mã nguồn của công cụ tìm kiếm

Quy tắc này áp dụng cho tất cả các tập lệnh phía máy chủ, SSI và mã lập trình. Do đó, bạn không thể xem mã nguồn của tập lệnh được sử dụng trong công cụ tìm kiếm, diễn đàn, thăm dò ý kiến, trò chuyện, v.v. Ngoài ra, sao chép thông tin từ mã nguồn có thể gây ra lỗi hoặc đưa bạn trở lại trang mà bạn đã sao chép thông tin

Google Chrome

Để xem mã nguồn của trang web trong Google Chrome, hãy sử dụng bất kỳ phương pháp nào sau đây

Chỉ xem mã nguồn

phương pháp một

Để chỉ xem mã nguồn, nhấn phím tắt Ctrl+U trên bàn phím máy tính của bạn

phương pháp hai

Nhấp chuột phải vào một phần trống của trang web và chọn Xem nguồn trang từ menu bật lên xuất hiện

Xem nguồn trang với các yếu tố

1. Mở Chrome và điều hướng trang web có mã nguồn mà bạn muốn xem
2. Nhấp vào biểu tượng Tùy chỉnh và kiểm soát Google Chrome
   
   ở góc trên bên phải của cửa sổ trình duyệt.
3. Từ menu thả xuống xuất hiện, chọn Công cụ khác, sau đó chọn Công cụ dành cho nhà phát triển
4. Nhấp vào tab Thành phần ở góc trên cùng bên trái của phần mới xuất hiện ở cuối màn hình

Mẹo

Trong Chrome, nhấn F12 hoặc Ctrl+Shift+I cũng sẽ hiển thị công cụ tương tác dành cho nhà phát triển. Công cụ này cung cấp nhiều tương tác hơn với mã nguồn và cài đặt CSS, cho phép người dùng xem các thay đổi trong mã ảnh hưởng đến trang web ngay lập tức như thế nào

Mozilla Firefox

Để xem mã nguồn của một trang web trong Mozilla Firefox, hãy sử dụng bất kỳ phương pháp nào sau đây

Chỉ xem mã nguồn

phương pháp một

Để chỉ xem mã nguồn, hãy nhấn Ctrl+U trên bàn phím máy tính của bạn

phương pháp hai

Nhấp chuột phải vào một phần trống của trang web và chọn Xem nguồn trang từ menu bật lên xuất hiện

Xem nguồn trang với các yếu tố

1. Mở Firefox và điều hướng đến trang web có mã nguồn mà bạn muốn xem
2. Nhấp vào biểu tượng Trình đơn
   
   ở góc trên bên phải màn hình.
3. Chọn Công cụ khác trong menu thả xuống, sau đó chọn Công cụ dành cho nhà phát triển web từ menu mở rộng
4. Nhấp vào tab Trình kiểm tra ở góc trên cùng bên trái của phần xuất hiện ở cuối màn hình

Mẹo

Trong Firefox, nhấn F12 hoặc Ctrl+Shift+I cũng sẽ hiển thị công cụ tương tác dành cho nhà phát triển. Công cụ này cung cấp khả năng tương tác với mã nguồn và cài đặt CSS, cho phép người dùng xem những thay đổi trong mã ảnh hưởng đến trang web như thế nào trong thời gian thực

Xem một phần mã nguồn của trang

1. Đánh dấu phần của trang web mà bạn muốn xem mã nguồn
2. Nhấp chuột phải vào phần được tô sáng đó và chọn Xem nguồn lựa chọn

Mẹo

Bạn có thể sử dụng tiện ích bổ sung Firebug để xem và chỉnh sửa mã nguồn của trang cũng như xem các thay đổi trực tiếp thông qua trình duyệt

Microsoft Cạnh

Để xem mã nguồn của trang web trong Microsoft Edge, hãy sử dụng bất kỳ phương pháp nào sau đây

Chỉ xem mã nguồn

phương pháp một

Để chỉ xem mã nguồn, hãy nhấn Ctrl+U trên bàn phím máy tính của bạn

phương pháp hai

Nhấp chuột phải vào một phần trống của trang web và chọn Xem nguồn trang từ menu bật lên xuất hiện

Xem nguồn trang với các yếu tố

1. Mở Microsoft Edge và điều hướng đến trang web có mã nguồn mà bạn muốn xem
2. Nhấp vào biểu tượng Cài đặt và hơn thế nữa
   
   ở góc trên bên phải của màn hình.
3. Di chuột qua Công cụ khác trong menu thả xuống và chọn Công cụ dành cho nhà phát triển từ menu mở rộng
4. Nhấp vào tab Thành phần ở đầu cửa sổ xuất hiện ở bên phải màn hình

Mẹo

Trong Microsoft Edge, nhấn F12 hoặc Ctrl+Shift+I cũng hiển thị công cụ tương tác dành cho nhà phát triển. Công cụ này cung cấp khả năng tương tác với mã nguồn và cài đặt CSS, cho phép người dùng xem những thay đổi trong mã ảnh hưởng đến trang web như thế nào trong thời gian thực

Internet Explorer của Microsoft

Để xem mã nguồn của một trang web trong Microsoft Internet Explorer, hãy sử dụng bất kỳ phương pháp nào sau đây

Chỉ xem mã nguồn

phương pháp một

Để chỉ xem mã nguồn, hãy nhấn Ctrl+U trên bàn phím máy tính của bạn

phương pháp hai

Nhấp chuột phải vào một phần trống của trang web và chọn Xem nguồn từ menu bật lên xuất hiện

Xem nguồn trang với các yếu tố

1. Mở Internet Explorer và điều hướng đến trang web có mã nguồn mà bạn muốn xem
2. Nhấp vào Công cụ
   
   ở góc trên bên phải.
3. Chọn Công cụ dành cho nhà phát triển F12 từ menu thả xuống

1. Nhấp vào tab DOM Explorer ở góc trên cùng bên trái của menu công cụ dành cho nhà phát triển

Mẹo

Trong Internet Explorer, nhấn F12 sẽ hiển thị công cụ DOM. Công cụ này cung cấp khả năng tương tác với mã nguồn và cài đặt CSS, cho phép người dùng xem các thay đổi trong mã ảnh hưởng đến trang web ngay lập tức như thế nào

Cuộc đi săn

Trong Safari, xem mã nguồn của trang web yêu cầu bật tùy chọn nhà phát triển. Các phần sau đây hướng dẫn bạn cách bật tính năng này và cách xem mã nguồn của trang web

Truy cập tùy chọn nhà phát triển trong Safari

1. Mở trình duyệt Safari
2. Chọn
   
   từ thanh menu ở góc trên cùng bên trái của màn hình.
3. Trong menu thả xuống xuất hiện, chọn Tùy chọn

1. Nhấp vào tab Nâng cao và chọn hộp bên cạnh menu Hiển thị Phát triển trong thanh menu

1. Bây giờ bạn sẽ thấy bộ chọn Phát triển trong thanh menu Apple ở đầu màn hình

Xem mã nguồn

Ghi chú

Bạn phải bật tùy chọn nhà phát triển để các bước sau hoạt động

phương pháp một

1. Mở Safari và điều hướng đến trang web có mã nguồn mà bạn muốn xem
2. Trong thanh menu Apple ở đầu màn hình, nhấp vào bộ chọn Phát triển và chọn Hiển thị Nguồn Trang từ menu thả xuống
3. Ở giữa màn hình, nhấp vào tab Thành phần ở đầu phần công cụ dành cho nhà phát triển

Phương pháp 2

Nhấp chuột phải vào một phần trống của trang web và chọn Hiển thị nguồn trang từ menu bật lên xuất hiện

Mẹo

Khi tùy chọn nhà phát triển được bật, bạn cũng có thể nhấn Command+option+U để xem mã nguồn

Ô-pê-ra

Để xem mã nguồn của một trang web trong Opera, hãy sử dụng bất kỳ phương pháp nào sau đây

Chỉ xem mã nguồn

phương pháp một

Để chỉ xem mã nguồn, hãy nhấn Ctrl+U trên bàn phím máy tính của bạn

phương pháp hai

Nhấp chuột phải vào một phần trống của trang web và chọn Nguồn trang từ menu bật lên xuất hiện

Xem nguồn trang với các yếu tố

1. Mở Opera và điều hướng đến trang web có mã nguồn mà bạn muốn xem
2. Nhấp vào biểu tượng Opera
   
   ở góc trên bên trái của cửa sổ trình duyệt.
3. Di chuột qua Nhà phát triển trong menu thả xuống và chọn Công cụ dành cho nhà phát triển từ menu mở rộng
4. Nhấp vào tab Thành phần ở đầu cửa sổ xuất hiện ở bên phải màn hình

Mẹo

Nếu bạn không thấy menu con Nhà phát triển, hãy chọn Công cụ khác → Hiển thị menu nhà phát triển. Sau đó, nhấp lại vào nút menu

. Bây giờ bạn sẽ thấy mục Nhà phát triển được liệt kê.

Mẹo

Trong Opera, nhấn Ctrl+Shift+I cũng sẽ hiển thị công cụ tương tác dành cho nhà phát triển. Công cụ này cung cấp khả năng tương tác với mã nguồn và cài đặt CSS, cho phép người dùng xem những thay đổi trong mã ảnh hưởng đến trang web như thế nào trong thời gian thực

Điện thoại hoặc máy tính bảng Android sử dụng Chrome

1. Mở trình duyệt Google Chrome trên điện thoại hoặc máy tính bảng Android của bạn
2. Mở trang web có mã nguồn bạn muốn xem
3. Nhấn một lần vào thanh địa chỉ và di chuyển con trỏ đến phía trước URL
4. Nhập chế độ xem-nguồn. và nhấn Enter hoặc Go

Mẹo

Ví dụ: để xem mã cho trang chủ của chúng tôi, bạn sẽ nhập view-source. https. //www. hy vọng máy tính. com

Nếu các bước trên không hoạt động trên điện thoại Android của bạn, hãy sử dụng phương pháp trên iPhone hoặc iPad bằng phần Safari. Mã tương tự hoạt động trên điện thoại Android. Sự khác biệt duy nhất là sử dụng Chrome thay vì Safari và cách tạo dấu trang

• Cách tạo một mục ưa thích hoặc đánh dấu trên Internet
• Cách xóa và sắp xếp các mục ưa thích và dấu trang trên Internet

Mẹo

Nếu bạn thấy khó điều hướng mã nguồn trên thiết bị di động của mình bằng phương pháp trên, bạn cũng có thể xem xét một công cụ trực tuyến

iPhone hoặc iPad sử dụng Safari

Việc xem mã nguồn của một trang web trên iPhone hoặc iPad mất nhiều công sức hơn một chút, nhưng có thể. Quá trình này yêu cầu bạn tạo dấu trang, gán mã JavaScript cho dấu trang đó và sử dụng dấu trang trên trang web để xem mã nguồn của trang đó

Ghi chú

Nếu muốn sử dụng một ứng dụng để xem mã nguồn của trang web, bạn có thể tải xuống ứng dụng View Source miễn phí từ iOS App Store

Tạo bookmark để xem mã nguồn

1. Mở trình duyệt Safari trên iPhone hoặc iPad của bạn
2. Truy cập bất kỳ trang web nào, chẳng hạn như www. hy vọng máy tính. com
3. Nhấn vào biểu tượng Khác ở cuối màn hình

Mẹo

Bạn cũng có thể nhấn và giữ ngón tay của mình trên biểu tượng Dấu trang ở cuối màn hình cho đến khi menu xuất hiện

1. Trong menu mở ra, hãy nhấn vào tùy chọn Thêm dấu trang

1. Nhấn vào trường tên dấu trang, nhấn vào x ở bên phải để xóa tên hiện tại và nhập "Xem mã nguồn trang web" làm tên mới

1. Nhấn vào Lưu ở góc trên cùng bên phải để lưu dấu trang
2. Sao chép toàn bộ đoạn mã JavaScript bên dưới

javascript:(function(){var a=window.open('about:blank').document;a.write('Source code of '+location.href);a.close();var b=a.body.appendChild(a.createElement('pre'));b.style.overflow='auto';b.style.whiteSpace='pre-wrap';b.appendChild(a.createTextNode(document.documentElement.innerHTML))})();

1. Trong Safari, truy cập dấu trang bằng cách nhấn vào biểu tượng dấu trang ở cuối màn hình

1. Tìm dấu trang bạn đã tạo ở trên, sau đó nhấn và giữ ngón tay của bạn trên dấu trang cho đến khi menu mở ra ở cuối màn hình
2. Nhấn vào tùy chọn Chỉnh sửa trên menu

1. Trên màn hình Chỉnh sửa dấu trang, chạm vào URL, chạm vào x để xóa URL và dán mã JavaScript từ bước 7 vào trường URL

1. Nhấn vào Xong ở dưới cùng bên phải màn hình để lưu các thay đổi về dấu trang

Sử dụng dấu trang để xem mã nguồn

Sau khi đã tạo bookmark ở trên, bây giờ bạn có thể xem mã nguồn của một trang web

1. Trong Safari, truy cập trang web mà bạn muốn xem mã nguồn
2. Nhấn vào biểu tượng dấu trang ở cuối màn hình

1. Nhấn vào dấu trang Xem mã nguồn trang web bạn đã tạo

Một tab duyệt Safari mới mở ra, hiển thị mã nguồn của trang web

Mẹo

Nếu bạn gặp khó khăn khi điều hướng mã nguồn trên thiết bị di động của mình bằng phương pháp trên, bạn cũng có thể cân nhắc sử dụng một công cụ trực tuyến

Cách đóng trang mã nguồn hoặc công cụ

Khi bạn đã xem xong mã nguồn trên một trang web, bạn có thể muốn thoát hoặc đóng nó. Việc đóng mã nguồn phụ thuộc vào phương pháp được sử dụng để mở nó

• Nếu bạn đã sử dụng phương pháp Ctrl+U (ngoại trừ Edge) hoặc phương pháp nhấp chuột phải, hãy đóng tab mới đã mở ở đầu cửa sổ trình duyệt của bạn
• Nếu bạn đã sử dụng phương pháp dành cho nhà phát triển (sử dụng F12 hoặc Ctrl+Shift+I), hãy nhấn lại các phím đó hoặc nhấp vào biểu tượng
  
  ở góc trên bên phải của .

Sử dụng một công cụ trực tuyến để xem mã nguồn

Ngoài việc sử dụng trình duyệt, một số công cụ trực tuyến cho phép bạn xem mã nguồn của bất kỳ trang web nào. Những công cụ này có thể hữu ích vì hầu hết có thể định dạng, cách điệu và đánh dấu mã để dễ đọc hơn. Dưới đây là danh sách ngắn một số công cụ