Cách xem nguồn HTML trong Google Chrome

Bài viết này giải thích cách truy cập mã nguồn HTML của trang web trong trình duyệt web Google Chrome, cũng như truy cập và sử dụng các công cụ dành cho nhà phát triển của Chrome. Xem mã nguồn của trang web là một cách tuyệt vời cho người mới bắt đầu học HTML.

Xem mã nguồn trong Chrome

Vậy làm thế nào để bạn xem mã nguồn của một trang web? Dưới đây là hướng dẫn từng bước để thực hiện việc này bằng trình duyệt Google Chrome.

1. Mở Trình duyệt web Google Chrome (nếu bạn chưa cài đặt Google Chrome, đây là bản tải xuống miễn phí).

   
   

2. Điều hướng đến trang web bạn muốn kiểm tra.

   
   

3. Click chuột phải trang và nhìn vào menu xuất hiện. Từ menu đó, hãy nhấp vào Xem nguồn trang.

4. Mã nguồn của trang đó bây giờ sẽ xuất hiện dưới dạng một tab mới trong trình duyệt.

   
   

5. Ngoài ra, bạn cũng có thể sử dụng các phím tắt của Điều khiển+U trên PC để mở cửa sổ có mã nguồn của trang web được hiển thị. Trên máy Mac, phím tắt này là Yêu cầu+Lựa chọn+U.

   
   

Sử dụng Công cụ dành cho nhà phát triển của Chrome

Ngoài sự đơn giản Xem nguồn trang khả năng mà Google Chrome cung cấp, bạn cũng có thể tận dụng các Công cụ dành cho nhà phát triển tuyệt vời của họ để tìm hiểu sâu hơn về một trang web. Những công cụ này sẽ cho phép bạn không chỉ xem HTML mà còn cả CSS áp dụng để xem các phần tử trong tài liệu HTML đó.

Để sử dụng các công cụ dành cho nhà phát triển của Chrome:

1. Mở Google Chrome.

   
   

2. Hướng đến trang web bạn muốn kiểm tra.

   
   

3. Chọn menu ba chấm ở góc trên bên phải của cửa sổ trình duyệt.

   
   

4. Từ menu, di chuột qua Thêm công cụ và sau đó chọn Những công cụ phát triển trong menu xuất hiện.

5. Một cửa sổ sẽ mở ra hiển thị mã nguồn HTML ở bên trái của ngăn và CSS liên quan ở bên phải.

   
   

6. Ngoài ra, nếu bạn nhấp chuột phải một phần tử trong một trang web và chọn Quan sát từ menu xuất hiện, các công cụ dành cho nhà phát triển của Chrome sẽ bật lên và đánh dấu phần cụ thể mà bạn đã chọn trong HTML với CSS tương ứng được hiển thị ở bên phải. Sẽ rất hữu ích nếu bạn muốn tìm hiểu thêm về một phần cụ thể của trang web.

   
   

Xem mã nguồn có hợp pháp không?

Trong những năm qua, chúng tôi đã có nhiều nhà thiết kế web mới đặt câu hỏi rằng liệu có thể chấp nhận được việc xem mã nguồn của một trang web và sử dụng nó cho giáo dục của họ và cuối cùng là cho công việc họ làm hay không. Mặc dù việc sao chép bán buôn mã của một trang web và chuyển nó thành mã của riêng bạn trên một trang web chắc chắn là không thể chấp nhận được, nhưng việc sử dụng mã đó làm bàn đạp để học hỏi thực sự là có bao nhiêu tiến bộ được tạo ra trong ngành này.

Như chúng tôi đã đề cập ở phần đầu của bài viết này, bạn sẽ khó tìm thấy một chuyên gia web đang làm việc ngày nay mà chưa học được điều gì đó bằng cách xem nguồn của trang web! Có, việc xem mã nguồn của trang web là hợp pháp. Sử dụng mã đó như một tài nguyên để xây dựng một cái gì đó tương tự cũng rất an toàn. Lấy mã nguyên gốc và chuyển nó đi vì công việc của bạn là nơi bạn bắt đầu gặp vấn đề.

Cuối cùng, các chuyên gia web học hỏi lẫn nhau và thường cải thiện công việc mà họ thấy và được truyền cảm hứng, vì vậy đừng ngần ngại xem mã nguồn của trang web và sử dụng nó như một công cụ học tập.

Không chỉ là HTML

Một điều cần nhớ là các tệp nguồn có thể rất phức tạp (và trang web bạn đang xem càng phức tạp thì mã của trang web đó càng phức tạp). Ngoài cấu trúc HTML tạo nên trang, cũng sẽ có CSS ​​(các biểu định kiểu xếp tầng) quy định giao diện trực quan của trang web đó. Ngoài ra, nhiều trang web ngày nay sẽ bao gồm các tệp script được bao gồm cùng với HTML.

Có thể có nhiều tệp kịch bản được bao gồm; trên thực tế, mỗi thứ cung cấp năng lượng cho các khía cạnh khác nhau của trang web. Thành thật mà nói, mã nguồn của một trang web có vẻ quá tải, đặc biệt nếu bạn là người mới làm việc này. Đừng thất vọng nếu bạn không thể tìm ra điều gì đang xảy ra với trang web đó ngay lập tức. Xem mã nguồn HTML chỉ là bước đầu tiên trong quá trình này. Với một chút kinh nghiệm, bạn sẽ bắt đầu hiểu rõ hơn cách tất cả các phần này khớp với nhau để tạo ra trang web mà bạn thấy trong trình duyệt của mình. Khi bạn quen thuộc hơn với mã, bạn sẽ có thể học hỏi nhiều hơn từ nó, và nó dường như không quá khó khăn đối với bạn.