Cách sử dụng f12 chrome

Cho dù bạn là một đơn vị xây dựng web chịu đựng trách nát nhiệm gỡ lỗi mã mối cung cấp trang web giỏi chỉ tò mò và hiếu kỳ về Việc code của một trang web trông thế nào, chúng ta có thể coi nguồn HTML tức thì trong những trình săn sóc thông dụng nhỏng Google Chrome. Cùng Quantricó.com khám phá bí quyết coi mã mối cung cấp (view source, xem trang source) của một trang web trên điện thoại cảm ứng thông minh cùng trên máy vi tính qua nội dung bài viết dưới đây nhé!

View source website bên trên đồ vật tính

Chrome, Edge, Firefox, Opera trên Windows

Cách view source này chúng ta có thể có tác dụng trên Chrome, Edge, Firefox, Opera bên trên Windows. Về cơ bản cách có tác dụng vẫn nlỗi sau, mình ví dụ trên Chrome:

Cách 1: Mngơi nghỉ trang web ước ao xem mã nguồn.

You watching: Cách sử dụng f12 chrome

Cách 2: Nhấp con chuột nên vào lúc trống trên website, lựa chọn View Page Source/Xem mối cung cấp trang (Page Source trên Opera) hoặc dìm Ctrl+U giúp xem mã mối cung cấp của website vào một tab mới.


Cách 3: Mã nguồn website sẽ tiến hành msống vào một tab bắt đầu, chúng ta có thể coi, tra cứu phần đông biết tin bản thân đề nghị tại phía trên.


Safari bên trên macOS

Để xem mã nguồn một trang web ngẫu nhiên vào Safari bên trên macOS, trước tiên bạn phải kích hoạt thực đơn công ty trở nên tân tiến (Develop menu).

Khi menu đơn vị cải tiến và phát triển vẫn mở ra trên tkhô cứng nguyên tắc, bao gồm một số phương pháp khác nhau nhằm bạn coi mối cung cấp trang vào Safari.

Mnghỉ ngơi bất kỳ website như thế nào trong Safari và bấm chuột cần vào thời gian trống trên trang. Một thực đơn ngữ chình họa vẫn hiện ra, bạn chỉ việc bnóng chọn “Show Page Source”. Trong khi, chúng ta có thể truy vấn thực đơn ngữ chình họa này bằng phương pháp áp dụng tổng hợp phím tắt Option + Commvà + u.

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


Sau Lúc sẽ lựa chọn một hình hình ảnh, bạn cũng có thể xem bảng liệt kê thông báo cụ thể của hình hình ảnh kia một phương pháp thuận lợi bằng cách nhấp chuột nút ít nằm tại vị trí bên trên cùng mặt nên của bảng điều khiển, ngay lập tức bên dưới biểu tượng bánh răng như hình minc họa sau đây. Hoặc chúng ta cũng có thể thực hiện tổng hợp phím tắt Option + Comm& + 0.

Quý khách hàng cũng có thể chuyển đổi vị trí của bảng tinh chỉnh và điều khiển mối cung cấp trang một cách tiện lợi. Có nhì nút ít sống bên trên thuộc phía trái của bảng tinh chỉnh và điều khiển này, ngay lập tức sát bên nút X. Nhấp vào biểu tượng hình chữ nhật để dịch rời bảng tinh chỉnh và điều khiển thanh lịch ở một bên không giống trong cửa sổ trình coi xét.


Nếu bạn có nhu cầu mở bảng điều khiển và tinh chỉnh mối cung cấp trang trong một hành lang cửa số đơn nhất, rất có thể nhấp vào hình tượng nhì hình chữ nhật. Thao tác này vẫn tách bóc bảng tinh chỉnh và điều khiển với msống nó vào một cửa sổ đơn lẻ bên trên Safari.

Để soát sổ mã mang đến bất kỳ phần tử cụ thể nào bên trên trang, chúng ta cũng có thể nhấn vào bắt buộc vào phần tử kia với chọn “Inspect Element”. Thao tác này sẽ đưa các bạn trực kế tiếp đoạn code tương xứng của nó.

See more: Những Loài Vật Khổng Lồ Nhất Thế Giới, Động Vật Lớn

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

Hiện tại bản thân mới chỉ tìm kiếm được cách coi mã nguồn website bên trên điện thoại thông minh Android, iOS thì khá phức tạp.

view-source:https://quantrisở hữu.comCách này cũng hoàn toàn có thể áp dụng được cùng với những trình chăm nom bên trên laptop chạy Windows.


Kiểm tra những yếu tố trên website với Developer Tools

Nếu nhiều người đang search tìm một trong những phần tử hoặc 1 phần ví dụ vào nguồn HTML, thì vấn đề thực hiện View Source vô cùng tẻ nphân tử với kềnh càng, quan trọng trường hợp trang thực hiện nhiều JavaScript với CSS.

Phương pháp này sử dụng Developer Tools vào Chrome và là cách tiếp cận Gọn gàng hơn những giúp xem mã mối cung cấp. HTML đọc dễ dàng hơn ở đây nhờ vào format bổ sung cập nhật và kĩ năng thu gọn các yếu tố mà chúng ta không muốn thấy.

Msinh sống Chrome và đi mang lại trang bạn có nhu cầu kiểm tra; kế tiếp dấn Ctrl+Shift+I. Một khung được gắn thêm đã msống cùng rất website nhưng bạn đang coi.

Nhấp vào mũi thương hiệu nhỏ dại màu sắc xám ở bên cạnh một nguyên tố để mở rộng hơn thế nữa.

Nếu các bạn không thích xem code tương đối đầy đủ của trang theo mặc định, tuy thế thế vào đó hãy soát sổ một nguyên tố ví dụ trong HTML, nhấp chuột bắt buộc vào tầm khoảng trống đó bên trên trang, sau đó nhấp vào Inspect.

lúc khung xuất hiện thêm lần này, nó đã đi trực tiếp vào phần code gồm đựng bộ phận nhưng bạn vẫn nhấp.


Nếu bạn có nhu cầu biến đổi địa điểm doông chồng, bạn có thể dịch chuyển nó xuống dưới cùng, phía trái, bên yêu cầu hoặc thậm chí còn chuyển nó vào một trong những hành lang cửa số đơn nhất. Nhấp vào hình tượng thực đơn (cha dấu chấm), kế tiếp lựa chọn mngơi nghỉ dock vào một cửa sổ riêng, neo phía bên trái, bên dưới hoặc mặt bắt buộc tương xứng.

See more: Watch Liverpool Vs Chelsea Stream Online, Link Sopcast Mu Vs Crystal Palace

Đó là toàn bộ các gì buộc phải có tác dụng. lúc chúng ta xem dứt code, hãy đóng tab View Source hoặc nhấp vào nút ít X, vào ngnạp năng lượng Developer Tools nhằm quay trở lại trang web của công ty.

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


4,8 ★ 8