Cho dù bạn là nhà thiết kế web gỡ lỗi mã nguồn của trang web của bạn hay chỉ tò mò về mã của trang web trông như thế nào, bạn có thể xem nguồn HTML ngay trong Google Chrome. Có hai cách để xem nguồn HTML: Xem nguồn và Kiểm tra bằng Công cụ dành cho nhà phát triển.
Xem nguồn bằng Xem nguồn trang
Khởi động Chrome 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 “Xem nguồn trang” hoặc nhấn Ctrl + U, để xem nguồn của trang trong tab mới.
Một tab mới sẽ mở ra cùng với tất cả HTML cho trang web, được mở rộng hoàn toàn và không có định dạng.
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à rườm rà, đặc biệt nếu trang sử dụng nhiều JavaScript và CSS.
Kiểm tra nguồn bằng công cụ dành cho nhà phát triển
Phương pháp này sử dụng ngăn Công cụ dành cho nhà phát triển trong Chrome và là một cách tiếp cận rõ ràng hơn nhiều để xem mã nguồn. Ở đây, HTML dễ đọc hơn nhờ định dạng bổ sung và khả năng thu gọn các phần tử bạn không muốn xem.
Mở Chrome và truy cập trang bạn muốn kiểm tra; sau đó nhấn Ctrl + Shift + i. Một ngăn được gắn vào sẽ mở dọc theo trang web bạn đang xem.
Nhấp vào mũi tên nhỏ màu xám bên cạnh một phần tử để mở rộng nó hơn nữa.
Nếu bạn không muốn xem mã của trang đầy đủ theo mặc định, nhưng thay vào đó kiểm tra một phần tử cụ thể trong HTML, hãy nhấp chuột phải vào khoảng trống đó trên trang, sau đó nhấp vào “Kiểm tra”.
Khi ngăn mở lần này, nó sẽ chuyển trực tiếp đến phần mã chứa phần tử bạn đã nhấp vào.
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, trái, phải hoặc thậm chí tháo nó vào một cửa sổ riêng biệt. Nhấp vào biểu tượng menu (ba chấm), sau đó chọn hủy gắn vào một cửa sổ riêng biệt, gắn vào bên trái, gắn xuống dưới cùng hoặc gắn vào bên phải tương ứng.
Thats tất cả để có nó. Khi bạn hoàn thành việc xem mã, hãy đóng tab Xem nguồn hoặc nhấp vào 'X' trong ngăn Công cụ dành cho nhà phát triển để quay lại trang web của bạn.
