Tóm tắt nhanh
- Chuột phải vào trang web → chọn Xem nguồn trang (View Page Source).
- Phím tắt: Ctrl+U (Windows) hoặc Command+Option+U (Mac).
- Dùng Công cụ phát triển (Developer Tools): Menu ba chấm → Công cụ khác → Công cụ phát triển.
Bài viết này hướng dẫn truy cập mã nguồn HTML của trang web trong Google Chrome, cũng như sử dụng Công cụ phát triển (DevTools) của Chrome. Xem mã nguồn là cách tuyệt vời để người mới học HTML.
Xem mã nguồn (View Page Source) trong Chrome
Cách xem mã nguồn của một trang web như sau:
- Mở Google Chrome (tải miễn phí nếu chưa có).
- Truy cập trang web cần xem mã.
- Chuột phải vào bất kỳ khoảng trống nào trên trang → chọn Xem nguồn trang (View page source).
- Mã nguồn sẽ mở trong một tab mới.
- Hoặc dùng phím tắt: Ctrl+U (Windows) / Command+Option+U (Mac).
Sử dụng Công cụ phát triển (Developer Tools) của Chrome
Ngoài xem mã nguồn đơn giản, Chrome cung cấp Công cụ phát triển mạnh mẽ cho phép xem không chỉ HTML mà cả CSS áp dụng cho các phần tử, JavaScript, mạng, hiệu suất, v.v.
Cách mở Công cụ phát triển:
- Mở Google Chrome.
- Truy cập trang web cần kiểm tra.
- Nhấn menu ba chấm (góc trên bên phải).
- Di chuột qua Công cụ khác (More tools) → chọn Công cụ phát triển (Developer tools).
- Cửa sổ DevTools mở ra: bên trái là HTML (tab Elements), bên phải là CSS (tab Styles).
- Mẹo pro: Chuột phải vào bất kỳ phần tử nào trên trang → chọn Kiểm tra (Inspect). DevTools sẽ mở và highlight chính xác phần tử đó trong HTML kèm CSS liên quan – cực kỳ hữu ích khi muốn học cấu trúc một thành phần cụ thể.
Việc xem mã nguồn có hợp pháp không?
Nhiều người mới hỏi xem việc xem mã nguồn và học từ nó có vi phạm bản quyền không. Câu trả lời: Xem mã nguồn hoàn toàn hợp pháp. Việc sao chép toàn bộ code và đưa ra như của mình là không chấp nhận được, nhưng sử dụng code làm tài liệu tham khảo, học hỏi, cải tiến là cách ngành web phát triển. Hầu như mọi chuyên gia web ngày nay đều từng học hỏi từ việc xem mã nguồn. Hãy tự tin dùng nó như công cụ học tập.
Mã nguồn không chỉ có HTML
Lưu ý: File nguồn có thể rất phức tạp. Ngoài cấu trúc HTML, còn có CSS (cascading style sheets) quyết định giao diện, và nhiều file JavaScript điều khiển hành động động của trang. Một trang web hiện đại có thể kéo theo hàng chục file script. Đừng nản lòng nếu chưa hiểu hết ngay – xem HTML chỉ là bước đầu. Khi có kinh nghiệm, bạn sẽ thấy cách các mảnh ghép kết hợp thành trang web hoàn chỉnh.