Cách xem nguồn HTML trong Google Chrome

Những gì để biết

• Nhấp chuột phải vào trang web và chọn Xem nguồn trang .
• Phím tắt: Nhấn Điều khiển + TRONG (PC Windows) hoặc Yêu cầu + Lựa chọn + TRONG (Mạc).
• Để sử dụng công cụ dành cho nhà phát triển của Chrome, hãy chọn Thực đơn (Ba chấm) > Thêm công cụ > Những công cụ phát triển .

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ư cách 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 cách nào để 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 không có Đã cài đặt Google Chrome , Đây là một tải về 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ừ trình đơn đó, 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 phím tắt của Điều khiển + TRONG trên PC để mở cửa sổ hiển thị mã nguồn của trang web. Trên máy Mac, phím tắt này là Yêu cầu + Lựa chọn + TRONG .

Hilary Allison / Lifewire

truyền máy tính để bàn sang amazon fire tv

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

Ngoài cách đơn giảnXem nguồn trangkhả năng mà Google Chrome cung cấp, bạn cũng có thể tận dụng lợi thế tuyệt vời của chúng Những công cụ phát triển để tìm hiểu sâu hơn nữa 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 thành phần 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 khung 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ể bạn đã chọn trong HTML với CSS tương ứng được hiển thị ở bên phải. Nó cực kỳ 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.

   kiểm tra xem điện thoại của bạn đã được mở khóa chưa

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

Trong những năm qua, chúng tôi đã gặp nhiều nhà thiết kế web mới đặt câu hỏi liệu việc xem mã nguồn của trang web và sử dụng nó cho mục đích giáo dục và cuối cùng là cho công việc họ làm có được chấp nhận 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 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à bao nhiêu tiến bộ đã được thực hiện trong ngành này.

Như chúng tôi đã đề cập ở đầu bài viết này, ngày nay bạn sẽ khó tìm được một chuyên gia web đang làm việc 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ã đó làm tài nguyên để xây dựng thứ gì đó tương tự cũng an toàn. Việc lấy mã nguyên trạng và chuyển nó đi khi công việc của bạn là lúc bạn bắt đầu gặp phải vấn đề.

Cuối cùng, các chuyên gia web học hỏi lẫn nhau và thường cải tiến công việc mà họ thấy và lấy cảm hứng từ đó, vì vậy đừng ngần ngại xem mã nguồn của trang web và sử dụng nó làm 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 có thể 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ết đị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 tập lệnh đi kèm với HTML.

Có thể có nhiều tệp tập lệnh được bao gồm; trên thực tế, mỗi cái 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á phức tạp, đặc biệt nếu bạn là người mới làm quen với việc này. Đừng nản lòng nếu bạn không thể hiểu được chuyện gì đang xảy ra với trang web đó ngay lập tức. Xem 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 về cách tất cả những phần này khớp với nhau để tạo ra trang web mà bạn nhì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 được nhiều hơn từ nó và nó sẽ không còn làm bạn nản lòng nữa.

làm thế nào để tìm một số id người gọi không có

• Làm cách nào để chỉnh sửa mã HTML trong Chrome?

  Mở Công cụ dành cho nhà phát triển trong Chrome bằng cách nhấn Điều khiển (hoặc Yêu cầu trên máy Mac) + Shift + Tôi . Từ đó nhấn Điều khiển ( Yêu cầu trên Mac) + Ô và chọn tệp nguồn đã lưu mà bạn muốn chỉnh sửa để mở nó.

• Làm cách nào để xem mã nguồn trang trong Chrome nếu Xem nguồn bị tắt?

  Nếu một trang web đã tắt tùy chọn Xem nguồn, bạn vẫn có thể xem xét kỹ hơn. Từ đầu cửa sổ trình duyệt, chọn Xem > Nhà phát triển > Xem nguồn , thao tác này sẽ hiển thị mã nguồn của trang web.

• Làm cách nào để xem mã nguồn của trang web trong Chrome bằng thiết bị Android của tôi?

  Điều hướng đến trang web bạn muốn xem bằng ứng dụng Chrome trên thiết bị của bạn, sau đó chọn thanh địa chỉ của trình duyệt. Di chuyển con trỏ văn bản sang bên trái—phía trước URL—và nhập xem nguồn , sau đó nhấn Đi vào hoặc chọn Đi .