Trang web bạn đang đọc được tạo thành, trong số những thứ khác, mã nguồn. Đó là thông tin mà trình duyệt web của bạn tải xuống và dịch thành những gì bạn đang đọc ngay bây giờ. Hầu hết các trình duyệt web cung cấp khả năng xem mã nguồn của trang web mà không cần phần mềm bổ sung, cho dù bạn đang sử dụng loại thiết bị nào. Một số thậm chí còn cung cấp chức năng và cấu trúc nâng cao, giúp dễ dàng sử dụng HTML và các mã lập trình khác trên trang. Tại sao bạn muốn xem mã nguồn?Có một số lý do khiến bạn có thể muốn xem mã nguồn của trang. Nếu bạn là nhà phát triển web, có lẽ bạn muốn xem qua các bản trình bày theo phong cách hoặc cách triển khai cụ thể của một lập trình viên khác. Có thể bạn đang đảm bảo chất lượng và đang cố gắng xác định lý do tại sao một phần nhất định của trang web lại hiển thị hoặc hoạt động theo cách đó. Bạn cũng có thể là người mới bắt đầu cố gắng tìm hiểu cách viết mã các trang của riêng bạn và đang tìm kiếm một số ví dụ thực tế. Tất nhiên, có thể bạn không rơi vào bất kỳ danh mục nào trong số này và chỉ muốn xem nguồn gốc từ sự tò mò tuyệt đối. Dưới đây là các hướng dẫn về cách xem mã nguồn trong trình duyệt bạn chọn. Google ChromeChạy trên: Chrome OS, Linux, macOS, Windows Phiên bản Chrome dành cho máy tính để bàn cung cấp ba phương pháp khác nhau để xem mã nguồn của trang, cách đầu tiên và đơn giản nhất bằng cách sử dụng phím tắt sau: CTRL + U ( COMMAND + OPTION + U trên macOS). Khi được nhấn, lối tắt này sẽ mở một tab trình duyệt mới hiển thị HTML và mã khác cho trang đang hoạt động. Nguồn này được mã hóa bằng màu sắc và được cấu trúc theo cách giúp đơn giản hóa việc phân loại và tìm thấy những gì bạn đang tìm kiếm. Bạn cũng có thể đến đó bằng cách nhập văn bản sau vào thanh địa chỉ của Chrome, được gắn vào bên trái của URL của trang web và nhấn phím Enter : view-source: (tức là, xem nguồn: https: // www .). Phương pháp thứ ba là thông qua các công cụ dành cho nhà phát triển của Chrome, cho phép bạn đi sâu hơn vào mã của trang cũng như chỉnh sửa trực tiếp cho mục đích thử nghiệm và phát triển. Giao diện công cụ nhà phát triển có thể được mở và đóng bằng cách sử dụng phím tắt này: CTRL + SHIFT + I ( COMMAND + OPTION + I trên macOS). Bạn cũng có thể khởi động chúng bằng cách lấy đường dẫn sau.
Android iOS Có sẵn với giá $ 0,99 trong App Store, View Source sẽ nhắc bạn nhập URL của trang (hoặc sao chép / dán nó từ thanh địa chỉ của Chrome, đôi khi là con đường đơn giản nhất để lấy) và đó là nó. Ngoài việc hiển thị HTML và mã nguồn khác, ứng dụng cũng có các tab hiển thị nội dung trang riêng lẻ, Mô hình đối tượng tài liệu (DOM), cũng như kích thước trang, cookie và các chi tiết thú vị khác. Microsoft EdgeChạy trên: Windows Trình duyệt Edge cho phép bạn xem, phân tích và thậm chí thao tác mã nguồn của trang hiện tại thông qua giao diện Công cụ dành cho nhà phát triển của nó. Để truy cập vào bộ công cụ tiện dụng này, bạn có thể sử dụng một trong các phím tắt sau: F12 hoặc CTRL + U. Thay vào đó, nếu bạn thích con chuột, hãy nhấp vào nút menu của Edge (ba chấm nằm ở góc trên bên phải) và chọn tùy chọn Công cụ dành cho nhà phát triển F12 từ danh sách. Sau khi các công cụ dev được chạy lần đầu tiên, Edge thêm hai tùy chọn bổ sung vào menu ngữ cảnh của trình duyệt (có thể truy cập bằng cách nhấp chuột phải vào bất kỳ đâu trong trang web): Kiểm tra phần tử và Xem nguồn , sau đó mở phần Debugger của trình tạo công cụ giao diện dân cư với mã nguồn. Mozilla FirefoxChạy trên: Linux, macOS, Windows Để xem mã nguồn của trang trong phiên bản máy tính để bàn của Firefox, bạn có thể nhấn CTRL + U ( COMMAND + U trên macOS) trên bàn phím của bạn, sẽ mở một tab mới chứa HTML và mã khác cho trang web đang hoạt động. Nhập văn bản sau vào thanh địa chỉ của Firefox, trực tiếp ở bên trái của URL của trang, sẽ làm cho cùng một nguồn hiển thị trong tab hiện tại thay vào đó: view-source: (tức là, view-source: https: // www.) . Một cách khác để truy cập mã nguồn của trang là thông qua các công cụ phát triển của Firefox, có thể truy cập bằng cách thực hiện các bước sau.
Firefox cũng cho phép bạn xem mã nguồn cho một phần cụ thể của một trang, giúp dễ dàng tách biệt các vấn đề. Để làm như vậy, trước tiên hãy đánh dấu khu vực mà bạn quan tâm bằng chuột. Tiếp theo, nhấn chuột phải và chọn View Selection Source từ menu ngữ cảnh của trình duyệt. Android iOS Apple SafariChạy trên iOS và macOS iOS Sau khi cài đặt ứng dụng của bên thứ ba này trở lại trình duyệt Safari và chạm vào nút Chia sẻ, nằm ở cuối màn hình và được biểu thị bằng hình vuông và mũi tên lên. Bảng chia sẻ iOS bây giờ sẽ hiển thị, che phủ nửa dưới của cửa sổ Safari của bạn. Di chuyển sang phải và chọn nút Xem nguồn . Một mã màu, biểu diễn có cấu trúc của mã nguồn của trang hiện đang được hiển thị cùng với các tab khác cho phép bạn xem nội dung trang, tập lệnh và hơn thế nữa. hệ điều hành Mac
OperaChạy trên: Linux, macOS, Windows Để xem mã nguồn từ trang web đang hoạt động trong trình duyệt Opera, hãy sử dụng phím tắt sau: CTRL + U ( COMMAND + OPTION + U trên macOS). Thay vào đó, nếu bạn muốn tải nguồn trong tab hiện tại, hãy nhập văn bản sau vào bên trái của URL của trang trong thanh địa chỉ và nhấn Enter : view-source: (ví dụ: view-source: https: // www. ). Phiên bản máy tính để bàn của Opera cũng cho phép bạn xem mã nguồn HTML, CSS và các yếu tố khác bằng cách sử dụng các công cụ phát triển tích hợp của nó. Để khởi chạy giao diện này, theo mặc định sẽ xuất hiện ở phía bên tay phải của cửa sổ trình duyệt chính, nhấn phím tắt sau: CTRL + SHIFT + I ( COMMAND + OPTION + I trên macOS). Bộ công cụ phát triển của Opera cũng có thể truy cập bằng cách thực hiện các bước sau.
VivaldiCó nhiều cách để xem nguồn trang trong trình duyệt Vivaldi. Cách đơn giản nhất là thông qua phím tắt CTRL + U , hiển thị mã từ trang đang hoạt động trong tab mới. Bạn cũng có thể thêm văn bản sau vào trước URL của trang, hiển thị mã nguồn trong tab hiện tại: view-source:. Ví dụ về điều này sẽ là nguồn xem: http: // www. . Phương pháp khác là thông qua các công cụ phát triển tích hợp của trình duyệt, có thể truy cập bằng cách nhấn tổ hợp CTRL + SHIFT + I hoặc thông qua tùy chọn Công cụ dành cho nhà phát triển trong trình đơn Công cụ của trình duyệt - được tìm thấy bằng cách nhấp vào biểu tượng 'V' ở góc trên bên trái. Sử dụng công cụ dev cho phép phân tích sâu hơn về nguồn của trang. |