Cách View Source, xem mã nguồn trang web bằng điện thoại, máy tính

View Source là tính năng hữu ích có sẵn trên các trình duyệt web phổ biến hiện nay. Tính năng này có thể giúp bạn trong một số trường hợp như kiểm tra và sửa lỗi HTML, tìm hiểu cấu trúc của bất kỳ trang web nào… Hãy cùng tuyengiaothudo.vn trong bài viết dưới đây để tìm hiểu cách xem mã nguồn website trên điện thoại và máy tính.

Tìm hiểu về View Source

Trước khi tìm hiểu cách xem mã nguồn trên điện thoại và máy tính, chúng ta sẽ cùng xem qua khái niệm và lợi ích của tính năng này.

Xem mã nguồn là gì?

Như đã nói ở trên, đây là tính năng tích hợp sẵn trên các trình duyệt web. View Source được hiểu là xem mã nguồn của website, tức là xem và kiểm tra cấu trúc website dưới dạng các ngôn ngữ lập trình web như HTML, PHP, CSS…

Lợi ích của tính năng này

Việc xem mã nguồn có thể hữu ích trong các trường hợp sau:

Học tập: Các nhà phát triển web mới có thể sử dụng trình xem mã nguồn để tìm hiểu cách xây dựng và sắp xếp mã nguồn, cũng như hiểu cách HTML, CSS và JavaScript tương tác với nhau.

Gỡ lỗi: Bằng cách kiểm tra mã nguồn của trang web, bạn có thể dễ dàng xác định các lỗi xảy ra trong quá trình thực thi như lỗi logic, lỗi cú pháp, lỗi tương tác, v.v.

Tham khảo ý tưởng thiết kế, giao diện người dùng: Bạn có thể sử dụng tính năng xem mã nguồn để tìm hiểu cách các thành phần trên trang được thiết kế, dựa trên đó bạn có thể phát triển ý tưởng của riêng mình.

Kiểm tra tối ưu hóa: Bạn có thể kiểm tra các thành phần trên trang web của mình và đảm bảo chúng được tối ưu hóa để luôn hoạt động trơn tru và ổn định.

Phân tích bảo mật: Với tính năng xem mã nguồn, các chuyên gia bảo mật có thể kiểm tra và phát hiện các vấn đề bảo mật có thể xuất hiện trong mã nguồn của trang web.

Hỗ trợ tương tác, hiểu cấu trúc HTML: View Source giúp người dùng nắm bắt được cấu trúc của website cũng như cách mã JavaScript tương tác với DOM và người dùng.

Kiểm tra kỹ thuật và mô phỏng: Nhờ tính năng xem mã nguồn, các chuyên gia SEO có thể kiểm tra cách các thẻ HTML và các thành phần liên quan ảnh hưởng đến quá trình tìm kiếm và hiển thị trang web trên các công cụ tìm kiếm.

Hướng dẫn cách xem View Source trên máy tính

Để xem mã nguồn của một trang web, bạn có thể làm theo hướng dẫn bên dưới. Việc xem mã nguồn trên Windows và MacOS sẽ hơi khác nhau:

Xem trên Windows

Trên hệ điều hành Windows, bạn có thể xem View Source bằng các trình duyệt phổ biến như Firefox, Chrome, Edge, Opera như:

Bước 1: Đầu tiên, bạn truy cập vào trang web có mã nguồn mà bạn muốn kiểm tra.

Bước 2: Tiếp theo, nhấp chuột phải vào vùng trống trên trang, sau đó nhấp vào View Page Source (trong Opera là Page Source). Ngoài ra, bạn cũng có thể sử dụng phím tắt Ctrl + U để mở và kiểm tra mã nguồn trang trong một tab mới trên trình duyệt.

Xem trên MacOS

Trên MacOS, bạn có thể xem View Source bằng trình duyệt Safari. Tuy nhiên, trước tiên bạn cần bật menu Developer. Sau khi bật, bạn sẽ thấy menu này trên thanh công cụ:

Bước 1: Đầu tiên, hãy mở trang web bạn muốn xem mã nguồn trang trong Safari, sau đó nhấp chuột phải vào vùng trống trên trang đó.

Bước 2: Bây giờ, bạn sẽ thấy một menu và nhấp vào Show Page Source để xem mã nguồn. Ngoài ra, bạn cũng có thể truy cập nhanh vào menu đó thông qua tổ hợp phím Option + Command + U.

Phím tắt để xem nguồn

Ghi chú

Trong trường hợp bạn cần tìm kiếm các thành phần đa phương tiện (video, hình ảnh…), bạn chỉ cần nhìn vào các tùy chọn nằm ở phía bên trái màn hình. Bây giờ, hãy chọn Images hoặc bất kỳ thư mục nào bạn muốn xem nhanh.

Ngoài ra, bạn cũng có thể xem thông tin hình ảnh chi tiết mà bạn đã chọn ở trên bằng cách nhấp vào nút nằm ở góc trên bên phải của bảng điều khiển và bên dưới biểu tượng cài đặt hình bánh răng. Hoặc, chúng ta cũng có tổ hợp phím cho cùng chức năng: Option + Command + 0. Nếu bạn muốn xem nội dung chi tiết hơn, hãy tiếp tục nhấp vào Resource.

Ngoài ra còn có rất nhiều tính năng thú vị khác mà bạn có thể sử dụng, như thay đổi vị trí bảng điều khiển, mở bảng điều khiển trong một tab riêng hoặc kiểm tra mã nguồn để tìm phần tử cụ thể mà bạn muốn bằng Inspect Element.

Hướng dẫn cách xem View Source trên điện thoại của bạn

Để xem Nguồn của bất kỳ trang web nào trên điện thoại Android hoặc iOS, bạn có thể tham khảo hướng dẫn sau:

Xem trên Android

Bước 1: Đầu tiên, hãy truy cập trình duyệt bạn đang sử dụng trên điện thoại, sau đó mở trang web bạn muốn kiểm tra View Source.

Bước 2: Để xem source code của website đó, bạn chỉ cần thêm cụm từ sau “view-source” trước địa chỉ website. Ví dụ, với trang https://hoanghamobile.com/tin-tuc/, bạn chỉ cần nhập lệnh sau để xem source code: view-source: https://hoanghamobile.com/tin-tuc/

Lưu ý: Với phương pháp này, bạn có thể sử dụng trên trình duyệt nếu truy cập từ máy tính xách tay hoặc PC.

Xem trên iOS

Để xem Source trên iOS, bạn cần sự trợ giúp của một ứng dụng khác. Các bước cần thực hiện là:

Bước 1: Đầu tiên, hãy vào App Store, sau đó nhập View Source vào hộp tìm kiếm và tải ứng dụng về thiết bị của bạn.

Bước 2: Sau khi tải và cài đặt ứng dụng thành công, bạn mở trình duyệt Safari trên iPhone, sau đó tại biểu tượng Chia sẻ, hãy nhấp vào đó.

Bước 3: Lúc này bảng chia sẻ sẽ xuất hiện trên màn hình, bạn chỉ cần vuốt lên và chọn mục Thêm có biểu tượng 3 chấm, chọn và bật tính năng Xem nguồn.

Bước 4: Bây giờ, View Source sẽ xuất hiện như một tùy chọn mới trên thanh công cụ, chỉ cần nhấp vào biểu tượng đó và giữ một lúc để đưa nó vào Safari.

Bước 5: Mở trang web bạn muốn kiểm tra mã nguồn, tiếp tục chọn Share rồi mở mục View Source bạn đã thêm ở trên. Ngay sau đó, bạn sẽ thấy toàn bộ thông tin của mã nguồn.

Cách kiểm tra các thành phần của trang web bằng Công cụ dành cho nhà phát triển

Mặc dù View Source là một tính năng khá hữu ích, nhưng nếu bạn muốn kiểm tra một hoặc một vài phần tử riêng lẻ trong HTML của mình, tốt nhất nên sử dụng Developer Tools – đặc biệt là đối với các trang web CSS và JavaScript.

Thông qua Developer Tools, bạn có thể xem mã nguồn dễ dàng hơn thông qua các định dạng bổ sung. Ngoài ra, công cụ này còn giảm thiểu và ẩn các thành phần không cần thiết mà người dùng không sử dụng.

Để xem mã nguồn bằng Công cụ dành cho nhà phát triển, chỉ cần làm theo các hướng dẫn sau:

Bước 1: Đầu tiên, bạn mở trình duyệt Chrome và truy cập vào trang web bạn muốn xem mã nguồn, sau đó giữ tổ hợp phím tắt Ctrl + Shift + I.

Bước 2: Sau khi thực hiện xong thao tác trên, bạn sẽ thấy một khung nhỏ hiển thị trên màn hình. Để mở rộng bất kỳ thành phần nào, bạn chỉ cần nhấp vào mũi tên màu nhỏ nằm bên cạnh thành phần đó.

Bước 3: Nhấp chuột phải vào vùng trống của trang và chọn Inspect để kiểm tra một phần tử hoặc thành phần cụ thể trong HTML của trang. Bây giờ, bạn sẽ thấy mã của phần tử bạn vừa chọn.

Lưu ý: Bạn có thể thay đổi vị trí của thanh dock đó, bạn chỉ cần nhấp vào biểu tượng mở rộng ba chấm, sau đó tại dòng đầu tiên, chọn vị trí tương ứng mà bạn muốn gắn vào dock, bao gồm trái, phải hoặc mở trong tab riêng.

Cách tải mã nguồn trên trang web

Ngoài việc xem mã nguồn trên trang web, bạn cũng có thể tải xuống toàn bộ bằng cách truy cập vào trang web bạn muốn, sau đó nhấp chuột phải vào vùng trống trên tab mã nguồn và chọn Lưu dưới dạng (hoặc nhấn phím tắt Ctrl + S).

Tiếp theo, tùy thuộc vào nhu cầu của bạn, bạn có thể cân nhắc một trong các lựa chọn sau:

• Website, Entire: Tùy chọn này cho phép bạn tải xuống toàn bộ Source của website, bao gồm các tập lệnh JS, tệp CSS và hình ảnh. Sau khi tải xuống, mọi thứ sẽ được lưu trữ trong một thư mục. Chọn tùy chọn này khi bạn muốn tải xuống cả mã HTML và hình ảnh trên trang.
• Trang web, Tệp đơn: Tùy chọn này cho phép người dùng tải trang ở dạng MHTML, bao gồm mã trang web và tất cả tài nguyên.
• Trang web, Chỉ HTML: Tùy chọn này cho phép người dùng tải xuống mã HTML của trang web cùng với một số thành phần liên quan có trên trang.

Thông qua quy trình trên, bạn có thể dễ dàng lưu trữ và nghiên cứu nội dung trang web mà không cần phải duy trì kết nối internet.

Tại sao biết cách xem Nguồn lại hữu ích cho SEO?

Trong quá trình SEO web, đôi khi bạn sẽ cần kiểm tra mã nguồn của trang web, đặc biệt là khi:

• Kiểm tra sự hiện diện của thẻ Heading 1 (H1): Mỗi trang chỉ nên có một thẻ Heading 1. Bằng cách kiểm tra mã nguồn, bạn có thể đảm bảo rằng chỉ có một thẻ H1 tồn tại trên trang đó.
• Kiểm tra xem liên kết có phải là nofollow không: Nếu các liên kết được đánh dấu là nofollow, điều này có thể ảnh hưởng đến thứ hạng trang web của bạn. Vì vậy, bạn có thể kiểm tra xem từ nofollow có tồn tại trong .
• Tối ưu tốc độ website: Bạn có thể kiểm tra HTML và tìm ra những thành phần dư thừa hoặc không cần thiết để loại bỏ. Điều này giúp website trở nên gọn nhẹ, tránh tình trạng giật lag ảnh hưởng đến trải nghiệm người dùng.

Trên đây là cách kiểm tra View Source và một số thông tin liên quan mà bạn có thể tham khảo. Nhìn chung, đây là một tính năng rất hữu ích, đặc biệt là đối với các nhà phát triển và thiết kế web. Thông qua tính năng này, bạn có thể kiểm tra các vấn đề hiện có và tối ưu hóa trang web để mang lại hiệu suất tốt nhất trong quá trình hoạt động.

Xem thêm: