Hướng dẫn how do you read and display a html source from the url? - làm thế nào để bạn đọc và hiển thị một nguồn html từ url?

Cập nhật: 02/01/2021 bởi02/01/2021 by

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

Thông tin giới thiệu

Khi xem mã nguồn của một 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ủ và sau đó 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ác công cụ tìm kiếm, diễn đàn, cuộc thăm dò, 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 hướng dẫn bạn quay lại trang mà bạn đã sao chép thông tin.

Google Chrome

Để xem mã nguồn của một trang web trong Google Chrome, hãy sử dụng bất kỳ phương thức 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 của máy tính.

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.View page source from the pop-up menu that appears.

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 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.Customize and control Google Chrome
   icon in the upper-right corner of the browser window.
3. Từ menu thả xuống xuất hiện, chọn nhiều công cụ hơn, sau đó chọn các công cụ phát triển.More tools, then select Developer tools.
4. Nhấp vào tab các phần tử ở góc trên cùng bên trái của phần mới xuất hiện ở dưới cùng của màn hình.Elements tab in the top-left corner of the new section that appears at the bottom of the screen.

Mẹo

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

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, nhấn phím tắt Ctrl+U trên bàn phím của máy tính.

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.View Page Source from the pop-up menu that appears.

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 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.Menu
   icon in the top-right corner of the screen.
3. Từ menu thả xuống xuất hiện, chọn nhiều công cụ hơn, sau đó chọn các công cụ phát triển.More tools in the drop-down menu, then select Web Developer Tools from the expanded menu.
4. Nhấp vào tab các phần tử ở góc trên cùng bên trái của phần mới xuất hiện ở dưới cùng của màn hình.Inspector tab in the top-left corner of the section that appears at the bottom of the screen.

Mẹo

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

Mozilla Firefox

1. Để 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.
2. Để chỉ xem mã nguồn, nhấn Ctrl+U trên bàn phím của máy tính.View Selection Source.

Mẹo

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

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, nhấn phím tắt Ctrl+U trên bàn phím của máy tính.

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.View page source from the pop-up menu that appears.

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 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.Settings and more
   icon in the upper-right corner of the screen.
3. Từ menu thả xuống xuất hiện, chọn nhiều công cụ hơn, sau đó chọn các công cụ phát triển.More tools in the drop-down menu, and select Developer tools from the expanded menu.
4. Nhấp vào tab các phần tử ở góc trên cùng bên trái của phần mới xuất hiện ở dưới cùng của màn hình.Elements tab at the top of the window that appears on the right side of the screen.

Mẹo

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

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, nhấn phím tắt Ctrl+U trên bàn phím của máy tính.

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.View source from the pop-up menu that appears.

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 bạn muốn xem.
2. Nhấp vào công cụ ở góc trên bên phải.Tools
   in the upper-right corner.
3. Chọn Công cụ phát triển F12 từ menu thả xuống.F12 Developer Tools from the drop-down menu.

1. Nhấp vào tab Dom Explorer ở góc trên cùng bên trái của menu Công cụ Nhà phát triển.DOM Explorer tab at the top-left corner of the developer tools menu.

Mẹo

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

Cuộc đi săn

Trong Safari, việc xem mã nguồn của trang web yêu cầu cho phép các tùy chọn nhà phát triển. Các phần sau đây chỉ cho bạn cách bật tính năng này và sau đó là cách xem mã nguồn của một trang web.

Truy cập các 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.
   from the menu bar at the top-left corner of the screen.
3. Trong menu thả xuống xuất hiện, chọn Tùy chọn.Preferences.

1. Nhấp vào tab nâng cao và chọn hộp bên cạnh chương trình phát triển menu trong thanh menu.Advanced tab, and check the box next to the Show Develop menu in menu bar.

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.Develop selector in the Apple menu bar at the top of the screen.

Xem mã nguồn

Ghi chú

Bạn phải bật các tùy chọn nhà phát triển cho các bước sau để làm việc.

Phương pháp một

1. Mở Safari và điều hướng đến trang web có mã nguồn 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.Develop selector and choose Show Page Source from the drop-down menu.
3. Ở trung tâm của màn hình, nhấp vào tab các phần tử ở đầu phần Công cụ Nhà phát triển.Elements tab at the top of the developer tools section.

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.Show Page Source from the pop-up menu that appears.

Mẹo

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

Cuộc đi săn

Trong Safari, việc xem mã nguồn của trang web yêu cầu cho phép các tùy chọn nhà phát triển. Các phần sau đây chỉ cho bạn cách bật tính năng này và sau đó là cách xem mã nguồn của một trang web.

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

Phương pháp một

Mở Safari và điều hướng đến trang web có mã nguồn bạn muốn xem.

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.

Ở trung tâm của màn hình, nhấp vào tab các phần tử ở đầu phần Công cụ Nhà phát triển.Page source from the pop-up menu that appears.

Phương pháp 2

1. 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.
2. Khi các tùy chọn nhà phát triển được bật, bạn cũng có thể nhấn Lệnh+Tùy chọn+U để xem mã nguồn.Opera
   icon in the upper-left corner of the browser window.
3. OperaDeveloper in the drop-down menu and select Developer tools from the expanded menu.
4. Để xem mã nguồn của một trang web trong opera, hãy sử dụng bất kỳ phương thức nào sau đây.Elements tab at the top of the window that appears on the right side of the screen.

Mẹo

Chỉ xem mã nguồnDeveloper submenu, select More tools → Show developer menu. Then, click the menu button

Mẹo

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

Phương pháp hai

1. 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.
2. Xem nguồn trang với các yếu tố
3. Mở Opera và điều hướng đến trang web có mã nguồn bạn muốn xem. in the address bar and move the cursor to the front of the URL.
4. 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.view-source: and tap Enter or Go.

Mẹo

Di chuyển chuột qua nhà phát triển trong menu thả xuống và chọn các công cụ nhà phát triển từ menu mở rộng.view-source:https://www.computerhope.com.

Nhấp vào tab các phần tử ở đầu cửa sổ xuất hiện ở phía bên phải của màn hình.

• Nếu bạn không thấy menu con của nhà phát triển, hãy chọn thêm công cụ → hiển thị menu Nhà phát triển. Sau đó, nhấp vào nút Menu một lần nữa. Bây giờ bạn sẽ thấy mục nhập của nhà phát triển được liệt kê.
• Trong Opera, nhấn Ctrl+Shift+Tôi cũng sẽ đưa công cụ nhà phát triển tương tác. Công cụ này cung cấp tương tác với cài đặt mã nguồn và CSS, cho phép người dùng xem các thay đổi trong mã ảnh hưởng đến trang web như thế nào trong thời gian thực.

Mẹo

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

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.

Mở trang web có mã nguồn bạn muốn xem.

Ghi chú

Bạn phải bật các tùy chọn nhà phát triển cho các bước sau để làm việc.View Source app from the iOS App Store.

Phương pháp một

1. Mở Safari và điều hướng đến trang web có mã nguồn 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.www.computerhope.com.
3. Ở trung tâm của màn hình, nhấp vào tab các phần tử ở đầu phần Công cụ Nhà phát triển.More icon at the bottom of the screen.

Mẹo

Phương pháp 2Bookmark icon at the bottom of the screen until a menu appears.

1. 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.Add Bookmark option.

1. Khi các tùy chọn nhà phát triển được bật, bạn cũng có thể nhấn Lệnh+Tùy chọn+U để xem mã nguồn.x on the right side to clear the current name, and enter "View web page source code" as the new name.

1. OperaSave in the top-right corner to save the bookmark.
2. Để xem mã nguồn của một trang web trong opera, hãy sử dụng bất kỳ phương thức nào sau đây.

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. Chỉ xem mã nguồn

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 một menu mở ở dưới cùng của màn hình.
2. Nhấn vào tùy chọn Chỉnh sửa trên menu.Edit option on the menu.

1. Trên màn hình EDIT Bookmark, nhấn vào URL, nhấn X để xóa URL và dán mã JavaScript từ bước 7 vào trường URL.x to clear the URL, and paste the JavaScript code from step 7 into the URL field.

1. Nhấn thực hiện ở dưới cùng bên phải của màn hình để lưu các thay đổi đánh dấu.Done at the bottom-right of the screen to save the bookmark changes.

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

Sau khi bạn đã tạo dấu trang ở trên, bây giờ bạn có thể xem mã nguồn cho một trang web.

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

1. Nhấn vào xem trang web Code Page Page Bookmark bạn đã tạo.View web page source code bookmark you created.

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

Mẹo

Nếu bạn gặp khó khăn trong việc đ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 sử dụng một công cụ trực tuyến.

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

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

• Nếu bạn đã sử dụng phương thức Ctrl+U (ngoại trừ cạnh) hoặc phương thức 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.close the new tab that opened at the top of your browser window.
• Nếu bạn đã sử dụng phương thức nhà phát triển (sử dụng F12 hoặc Ctrl+Shift+I), hãy nhấn lại các phím tương tự hoặc nhấp vào biểu tượng ở góc trên bên phải của cửa sổ Công cụ.
  icon in the upper-right corner of the tools window.

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. Các 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à làm nổi bật mã để dễ đọc hơn. Dưới đây là một danh sách ngắn của một số công cụ.

• Xem nguồn trang
• Mã làm đẹp người xem mã nguồn
• Trình xem HTML