Xem HTML và CSS của bất kỳ trang web nào
Trang web được xây dựng với các dòng mã , nhưng kết quả là các trang cụ thể với hình ảnh, video, phông chữ và hơn thế nữa. Để thay đổi một trong những thành phần đó hoặc xem nó bao gồm những gì, bạn phải tìm dòng mã cụ thể để điều khiển nó. Bạn có thể làm điều đó với một công cụ kiểm tra phần tử.
Hầu hết các trình duyệt web không làm cho bạn tải xuống công cụ kiểm tra hoặc cài đặt tiện ích bổ sung. Thay vào đó, chúng cho phép bạn nhấp chuột phải vào phần tử trang và chọn Kiểm tra hoặc Kiểm tra phần tử . Tuy nhiên, quá trình này có thể hơi khác trong trình duyệt của bạn.
Kiểm tra các yếu tố trong Chrome
Các phiên bản mới nhất của Google Chrome cho phép bạn kiểm tra trang theo một số cách, tất cả đều sử dụng Chrome DevTools tích hợp sẵn của nó:
- Nhấp chuột phải vào một cái gì đó trên trang (hoặc một vùng trống) và chọn Kiểm tra
- Nhập phím tắt Ctrl + Shift + I
- Sử dụng menu Chrome để truy cập tùy chọn Công cụ khác> Công cụ dành cho nhà phát triển
Chrome DevTools cho phép bạn thực hiện những việc như dễ dàng sao chép hoặc chỉnh sửa các dòng HTML hoặc ẩn hoàn toàn hoặc xóa các phần tử (cho đến khi trang tải lại).
Khi DevTools mở ở bên cạnh trang, bạn có thể thay đổi vị trí của trang, mở nó ra khỏi trang, tìm kiếm tất cả các tệp của trang, chọn phần tử từ trang để kiểm tra cụ thể, sao chép tệp và URL và thậm chí tùy chỉnh nhóm của các cài đặt.
Kiểm tra các phần tử trong Firefox
Giống như Chrome, Firefox có một vài cách khác nhau để mở công cụ của nó được gọi là Thanh tra:
- Nhấp chuột phải vào một vùng trống trên trang hoặc chọn một phần tử và chọn Kiểm tra phần tử
- Nhập Ctrl + Shift + T hoặc Ctrl + Shift + I bằng bàn phím
- Từ trình đơn Firefox, nhấp vào Nhà phát triển > Trình kiểm tra
- Từ trình đơn Công cụ , nhấp vào Nhà phát triển web> Trình kiểm tra
Khi bạn di chuyển chuột qua các phần tử khác nhau trong Firefox, công cụ Thanh tra tự động tìm thông tin mã nguồn của phần tử. Nhấp vào một phần tử và "tìm kiếm trực tuyến" sẽ dừng và bạn có thể kiểm tra phần tử từ cửa sổ Trình kiểm tra.
Nhấp chuột phải vào một phần tử để tìm tất cả các điều khiển được hỗ trợ. Bạn có thể làm những việc như chỉnh sửa trang dưới dạng HTML, sao chép hoặc dán mã HTML bên trong hoặc bên ngoài, hiển thị thuộc tính DOM, ảnh chụp màn hình hoặc xóa nút, dễ dàng áp dụng thuộc tính mới, xem tất cả CSS của trang và hơn thế nữa.
Kiểm tra các yếu tố trong Opera
Opera cũng có thể kiểm tra các yếu tố, với công cụ DOM Inspector giống với công cụ của Chrome. Dưới đây là cách thực hiện:
- Sử dụng phím tắt Ctrl + Shift + I
- Điều hướng đến Menu> Công cụ khác> Hiển thị menu Nhà phát triển và sau đó mở menu thông qua Trình đơn> Nhà phát triển> Công cụ nhà phát triển
- Từ trình đơn nhấp chuột phải vào bất kỳ phần tử nào trên trang, chọn phần tử Kiểm tra
Kiểm tra các phần tử trong Internet Explorer
Công cụ phần tử kiểm tra tương tự, được gọi là Công cụ dành cho nhà phát triển, có sẵn trong Internet Explorer:
- Nhấn F12 trên bàn phím
- Sử dụng tùy chọn Công cụ> F12 Nhà phát triển (nhấn Alt + X nếu bạn không thấy trình đơn Công cụ )
- Nhấp chuột phải vào trang và nhấp vào Kiểm tra phần tử
IE có một công cụ Chọn phần tử trong trình đơn mới này cho phép bạn nhấp vào bất kỳ phần tử trang nào để xem chi tiết HTML và CSS của nó. Bạn cũng có thể dễ dàng vô hiệu hóa / bật đánh dấu phần tử trong khi duyệt qua tab Trình khám phá DOM .
Giống như các công cụ kiểm tra phần tử khác trong các trình duyệt trên, Internet Explorer cho phép bạn cắt, sao chép và dán các phần tử cũng như chỉnh sửa HTML, thêm thuộc tính, sao chép các phần tử có kiểu đính kèm và hơn thế nữa.