Cách xem nguồn HTML trong Google Chrome

Cho dù bạn là một nhà thiết kế web chịu trách nhiệm gỡ lỗi mã nguồn trang web hay chỉ tò mò về việc code của một trang web trông như thế nào, bạn có thể xem nguồn HTML ngay trong Google Chrome. Cùng Quantrimang.com tìm hiểu cách làm qua bài viết sau đây nhé!

Xem nguồn bằng cách sử dụng View Page Source

Bật Chrome lên và chuyển đến trang web bạn muốn xem mã nguồn HTML. Nhấp chuột phải vào trang và nhấp vào View Page Source hoặc nhấn Ctrl+U, để xem nguồn của trang trong một tab mới.

Chọn View Page Source

Một tab mới mở ra cùng với tất cả HTML cho trang web, hoàn toàn mở rộng và không được định dạng.

HTML trang web

Nếu bạn đang tìm kiếm một phần tử hoặc một phần cụ thể trong nguồn HTML, thì việc sử dụng View Source rất tẻ nhạt và cồng kềnh, đặc biệt nếu trang sử dụng nhiều JavaScriptCSS.

Kiểm tra nguồn bằng cách sử dụng Developer Tools

Phương pháp này sử dụng Developer Tools trong Chrome và là cách tiếp cận gọn gàng hơn nhiều để xem mã nguồn. HTML dễ đọc hơn ở đây nhờ định dạng bổ sung và khả năng thu gọn các yếu tố mà bạn không muốn thấy.

Mở Chrome và đi đến trang bạn muốn kiểm tra; sau đó nhấn Ctrl+Shift+I. Một khung được gắn sẽ mở cùng với trang web mà bạn đang xem.

Nhấn Ctrl + Shift + I

Nhấp vào mũi tên nhỏ màu xám bên cạnh một yếu tố để mở rộng hơn nữa.

Nhấp vào mũi tên

Nếu bạn không muốn xem code đầy đủ của trang theo mặc định, nhưng thay vào đó hãy kiểm tra một yếu tố cụ thể trong HTML, nhấp chuột phải vào khoảng trống đó trên trang, sau đó nhấp vào Inspect.

Chọn Inspect

Khi khung mở ra lần này, nó sẽ đi trực tiếp vào phần code có chứa phần tử mà bạn đã nhấp.

Trực tiếp vào phần code

Nếu bạn muốn thay đổi vị trí dock, bạn có thể di chuyển nó xuống dưới cùng, bên trái, bên phải hoặc thậm chí đưa nó vào một cửa sổ riêng biệt. Nhấp vào biểu tượng menu (ba dấu chấm), sau đó chọn mở dock trong một cửa sổ riêng, neo bên trái, phía dưới hoặc bên phải tương ứng.

Chọn vị trí dock

Đó là tất cả những gì cần làm. Khi bạn xem xong code, hãy đóng tab View Source hoặc nhấp vào nút X, trong ngăn Developer Tools để quay lại trang web của bạn.

Chúc bạn thực hiện thành công!

Thứ Hai, 03/06/2019 17:55
4,84 👨 697