Cách xem code của 1 trang web

Cho mặc dù bạn là 1 trong bên thiết kế website Chịu đựng trách nát nhiệm gỡ lỗi mã mối cung cấp website xuất xắc chỉ tò mò và hiếu kỳ về bài toán code của một trang web trông thế nào, bạn có thể coi mối cung cấp HTML ngay lập tức trong những trình ưng chuẩn phổ biến như Google Chrome. Cùng Quantrivới.com khám phá giải pháp xem mã mối cung cấp (view source, view page source) của một trang web bên trên điện thoại thông minh và trên laptop qua bài viết tiếp sau đây nhé!

View source website bên trên vật dụng tính

Chrome, Edge, Firefox, Opera trên Windows

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

Cách 1: Msinh hoạt website mong mỏi coi mã nguồn.

Bạn đang xem: Cách xem code của 1 trang web

Bước 2: Nhấp loài chuột đề xuất vào tầm trống trên website, chọn View Page Source/Xem nguồn trang (Page Source bên trên Opera) hoặc thừa nhận Ctrl+U giúp xem mã nguồn của website vào một tab bắt đầu.


Cách 3: Mã mối cung cấp website sẽ tiến hành msống vào một tab bắt đầu, bạn cũng có thể coi, kiếm tìm phần nhiều thông báo bản thân đề nghị trên đây.


Safari bên trên macOS

Để coi mã mối cung cấp một trang web ngẫu nhiên vào Safari trên macOS, trước tiên bạn phải kích hoạt menu nhà phát triển (Develop menu).

Lúc menu bên cải cách và phát triển sẽ lộ diện trên thanh hao nguyên lý, có một số cách khác nhau để chúng ta coi mối cung cấp trang vào Safari.

Mngơi nghỉ ngẫu nhiên website như thế nào trong Safari cùng bấm chuột yêu cầu vào mức trống bên trên trang. Một thực đơn ngữ chình họa sẽ hiển thị, các bạn chỉ cần bấm chọn “Show Page Source”. Trong khi, bạn có thể truy vấn thực đơn ngữ cảnh này bằng cách áp dụng tổng hợp phím tắt Option + Commvà + u.

Nếu ai đang tra cứu kiếm hình hình ảnh hoặc các thành phần nhiều phương tiện trong ngẫu nhiên website nào, hãy chú ý sang trọng ngnạp năng lượng tùy lựa chọn bên trái màn hình hiển thị. quý khách hàng vẫn thấy các tlỗi mục khác nhau nlỗi Images (Hình ảnh), Fonts (Phông chữ), v.v. Nhấp vào tlỗi mục “Images” nhằm hoàn toàn có thể tìm kiếm thấy tấm hình bạn cần một cách lập cập.


Sau Khi đang lựa chọn 1 hình hình ảnh, bạn cũng có thể xem bảng liệt kê báo cáo cụ thể của hình hình họa đó một bí quyết dễ ợt bằng phương pháp click chuột nút ít nằm ở bên trên thuộc mặt buộc phải của bảng tinh chỉnh, tức thì bên dưới biểu tượng bánh răng như hình minc họa dưới đây. Hoặc bạn có thể thực hiện tổng hợp phím tắt Option + Command + 0.

Quý Khách cũng hoàn toàn có thể thay đổi vị trí của bảng điều khiển và tinh chỉnh mối cung cấp trang một cách tiện lợi. Có nhị nút ít nghỉ ngơi trên thuộc bên trái của bảng tinh chỉnh này, ngay sát bên nút X. Nhấp vào hình tượng hình chữ nhật nhằm dịch rời bảng tinh chỉnh và điều khiển quý phái một phía khác vào cửa sổ trình chăm sóc.


Nếu bạn có nhu cầu mngơi nghỉ bảng tinh chỉnh mối cung cấp trang vào một hành lang cửa số riêng biệt, hoàn toàn có thể nhấp vào hình tượng nhị hình chữ nhật. Thao tác này đang bóc tách bảng tinh chỉnh cùng mlàm việc nó vào một cửa sổ hiếm hoi bên trên Safari.

Để khám nghiệm mã cho bất kỳ phần tử cụ thể nào trên trang, bạn cũng có thể bấm vào phải vào bộ phận đó và chọn “Inspect Element”. Thao tác này đã đưa các bạn trực kế tiếp đoạn code khớp ứng của chính nó.

Xem thêm: Download Foxit Reader Full Key, Tải Foxit Reader 9

Xem mã mối cung cấp trang web bằng năng lượng điện thoại

Lúc Này mình new chỉ tìm kiếm được biện pháp coi mã mối cung cấp trang web bên trên điện thoại cảm ứng Android, iOS thì tương đối phức tạp.

view-source:https://quantrivới.comCách này cũng hoàn toàn có thể áp dụng được cùng với các trình lưu ý trên laptop chạy Windows.


Kiểm tra các nguyên tố trên web với Developer Tools

Nếu ai đang tra cứu tìm một trong những phần tử hoặc 1 phần cụ thể trong mối cung cấp HTML, thì câu hỏi thực hiện View Source siêu tẻ nhạt với cồng kềnh, quan trọng đặc biệt trường hợp trang sử dụng nhiều JavaScript cùng CSS.

Phương pháp này thực hiện Developer Tools vào Chrome và là giải pháp tiếp cận nhỏ gọn rộng các giúp thấy mã nguồn. HTML dễ đọc hơn tại chỗ này nhờ vào định hình bổ sung cập nhật cùng tài năng thu gọn những yếu tố nhưng mà các bạn không muốn thấy.

Mnghỉ ngơi Chrome và đi cho trang bạn có nhu cầu kiểm tra; kế tiếp dìm Ctrl+Shift+I. Một size được gắn vẫn mnghỉ ngơi cùng rất trang web nhưng mà bạn đang coi.

Nhấp vào mũi thương hiệu nhỏ dại color xám cạnh bên một nhân tố nhằm không ngừng mở rộng hơn thế nữa.

Nếu các bạn không muốn coi code vừa đủ của trang theo mang định, tuy nhiên cầm cố vào kia hãy soát sổ một nguyên tố cụ thể trong HTML, nhấn vào yêu cầu vào thời gian trống đó trên trang, tiếp nối nhấp vào Inspect.

Lúc khung xuất hiện lần này, nó đang đi thẳng vào phần code gồm đựng thành phần cơ mà bạn vẫn nhấp.


Nếu bạn muốn thay đổi địa chỉ dock, chúng ta có thể dịch chuyển nó xuống bên dưới cùng, bên trái, bên yêu cầu hoặc thậm chí còn đưa nó vào trong 1 hành lang cửa số đơn lẻ. Nhấp vào hình tượng menu (cha lốt chấm), tiếp nối lựa chọn msinh sống doông xã vào một hành lang cửa số riêng rẽ, neo phía trái, phía dưới hoặc mặt đề nghị tương ứng.

Đó là toàn bộ hầu như gì phải có tác dụng. Khi các bạn coi kết thúc code, hãy đóng góp tab View Source hoặc nhấp vào nút ít X, vào ngăn Developer Tools để quay lại trang web của doanh nghiệp.

Chúc các bạn triển khai thành công!


4,8 ★ 8

Leave a Reply

Your email address will not be published. Required fields are marked *