Cách view source, xem mã nguồn trang web bằng điện thoại, máy tính

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ũng có thể có thể xem nguồn HTML ngay trong những trình duyệt thông dụng như Google Chrome. Cùng Quantrimang.com tìm hiểu cách xem mã nguồn (view source, view page source) của một trang web trên điện thoại và trên máy tính qua bài viết sau đây nhé!

View source trang web trên máy tính

Chrome, Edge, Firefox, Opera trên Windows

Cách view source này bạn cũng đều có thể làm trên Chrome, Edge, Firefox, Opera trên Windows. Về cơ bản cách làm sẽ như sau, mình ví dụ trên Chrome:

Bước 1: Mở trang web muốn xem mã nguồn.

Bước 2: Nhấp chuột phải vào khoảng trống trên trang web, chọn View Page Source/Xem nguồn trang  (Page Source trên Opera) hoặc nhấn Ctrl+U để xem mã nguồn của trang web trong một tab mới.

Bước 3: Mã nguồn trang web sẽ có mở trong một tab mới, bạn cũng có thể có thể xem, tìm những tin tức mình cần tại đây.

Safari trên macOS

Để xem mã nguồn một trang web bất kỳ trong Safari trên macOS, trước tiên bạn phải kích hoạt menu nhà phát triển (Develop menu).

Khi menu nhà phát triển đã xuất hiển thị trên thanh công cụ, có 1 số cách không giống nhau để bạn xem nguồn trang trong Safari.

Mở bất kỳ trang web nào trong Safari và click chuột phải vào khoảng trống trên trang. Một menu ngữ cảnh sẽ hiện ra, bạn chỉ cần bấm chọn “ Show Page Source ”. Ngoài ra, bạn cũng cũng đều có thể truy cập menu ngữ cảnh này bằng phương pháp dùng tổ hợp phím tắt Option + Command + u .

Nếu bạn đang kiếm tìm hình ảnh hoặc các phần tử đa phương tiện trong bất kỳ trang web nào, hãy nhìn sang ngăn tùy chọn bên trái màn hình. Bạn sẽ thấy nhiều thư mục khác nhau như Images (Hình ảnh), Fonts (Phông chữ), v.v. Nhấp vào thư mục “ Images ” để cũng có thể tìm thấy tấm hình bạn phải một cách nhanh chóng.

Sau khi đã chọn một hình ảnh, bạn cũng có thể xem bảng liệt kê tin tức chi tiết của hình ảnh đó 1 cách dễ dàng bằng phương pháp bấm vào nút nằm ở trên cùng bên phải của bảng điều khiển, ngay bên dưới biểu tượng bánh răng như hình minh họa dưới đây. Hoặc bạn cũng cũng có thể có thể sử dụng tổ hợp phím tắt Option + Command + 0 .

Nhấp vào “ Resource ” ở đầu bản kê để xem thêm tin tức chi tiết hơn, chẳng hạn như kích cỡ của hình ảnh và URL đầy đủ của nó.

Bạn cũng đều có thể thay đổi địa thế của bảng điều khiển nguồn trang một cách dễ dàng. Có hai nút phía trên cùng bên trái của bảng điều khiển này, ngay bên cạnh nút X. Nhấp vào tượng trưng hình chữ nhật để di chuyển bảng điều khiển sang một phía khác trong cửa sổ trình duyệt.

Nếu bạn muốn mở bảng điều khiển nguồn trang trong một cửa sổ riêng biệt, có thể nhấp vào tượng trưng hai hình chữ nhật. Thao tác này sẽ tách bảng điều khiển và mở nó trong một cửa sổ biệt lập trên Safari.

Để kiểm tra mã cho bất kỳ phần tử cụ thể nào trên trang, bạn có thể click chuột phải vào phần tử đó và chọn “ Inspect Element ”. Thao tác này sẽ đưa bạn trực diện đến đoạn code tương ứng của nó.

Xem mã nguồn trang web bằng điện thoại

Hiện tại mình chỉ mới tìm được cách xem mã nguồn trang web trên điện thoại Android, iOS thì khá phức tạp.

Để view page source trên Android, bạn mở trình duyệt Chrome hoặc Firefox, mở trang web muốn xem mã nguồn, sau đó chèn thêm cụm ” view-source: ” trước https://. Ví dụ bạn muốn xem mã nguồn của Chúng tôithì khi đó bạn nhập như sau vào thanh địa chỉ:

   view-source:https://quantrimang.com   

Cách này cũng cũng đều có thể áp dụng được với những trình duyệt trên máy tính chạy Windows.

Kiểm tra các phần tử trên web với Developer Tools

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

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

Mở Chrome và đi tới 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ấp vào mũi tên nhỏ màu xám kế bên một nhân tố để mở rộng hơn nữa.

Nếu bạn không muốn xem code đầy đặn của trang theo mặc định, nhưng thay vào đây 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.

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

Nếu bạn muốn thay đổi địa thế 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 tượng trưng menu (ba dấu chấm), sau đó chọn mở dock trong 1 cửa sổ riêng, neo bên trái, phía dưới hoặc bên phải tương ứng.

Đó là tất cả các 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 về trang web của bạn.

Chúc bạn thi hành thành công!

nguồn HTML,Google Chrome,cách xem nguồn HTML trong Google Chrome

Nội dung Cách view source, xem mã nguồn trang web bằng điện thoại, máy tính được tổng hợp sưu tầm biên tập bởi: Tin Học Trường Tín. Mọi ý kiến vui lòng gửi Liên Hệ cho truongtin.top để điều chỉnh. truongtin.top tks.