"Kiểm tra phần tử" là một công cụ dành cho nhà phát triển trong trình duyệt Firefox mà bạn có thể sử dụng để theo dõi mã HTML trên bất kỳ trang web nào. Các bảng định kiểu HTML và CSS của một trang web có thể được chỉnh sửa bằng "Kiểm tra phần tử". Bạn có thể cố gắng chỉnh sửa một trang theo bất kỳ cách nào bạn thích và đưa nó trở lại như cũ bằng cách chỉ cần tải lại trang web đã chỉnh sửa.
Bươc chân
Phần 1/2: Kiểm tra các yếu tố
Bước 1. Cập nhật Firefox (tùy chọn)
Có thể bạn sẽ không thể truy cập các tính năng được thảo luận trong bài viết này nếu bạn đang sử dụng phiên bản Firefox cũ hơn. Bản cập nhật sẽ tự động được cài đặt khi bạn kiểm tra phiên bản Firefox mình đang sử dụng.
Firefox 9 và các phiên bản trước đó hoàn toàn không có công cụ "Kiểm tra phần tử"
Bước 2. Nhấp chuột phải vào bất kỳ phần tử trang web nào
Bạn có thể nhấp chuột phải vào bất kỳ hình ảnh, văn bản, nền hoặc phần tử nào. Nếu chuột của bạn chỉ có một nút, sự kết hợp giữa nhấp chuột trái và phím Control sẽ dẫn đến nhấp chuột phải.
Bước 3. Nhấp vào "Kiểm tra phần tử" từ trình đơn thả xuống
Một thanh công cụ sẽ xuất hiện ở cuối cửa sổ. Một bảng điều khiển bên dưới thanh công cụ cũng sẽ xuất hiện và hiển thị mã HTML trên trang đang hoạt động.
Bước 4. Tìm hiểu các thanh công cụ và bảng điều khiển hiện có
Khi bạn sử dụng "Kiểm tra phần tử", một số bảng sẽ mở ra bên dưới cửa sổ trình duyệt. Phần sau mô tả tên và chức năng của các thanh công cụ và bảng trong "Kiểm tra phần tử":
- Trên hàng trên cùng là Thanh công cụ Hộp công cụ. Có một số công cụ được tìm thấy ở đây, nhưng chúng tôi sẽ tập trung vào nút Thanh tra ở bên trái. Đảm bảo nút này đang hoạt động (được biểu thị bằng màu của nút chuyển sang màu xanh lam khi hoạt động) trong suốt hướng dẫn này.
- Bên dưới đó, có một dòng đường dẫn của các phần tử HTML cho biết vị trí của phần tử hiện được chọn.
- Ngăn bên dưới lời nhắc điều hướng hiển thị cây HTML hoặc "Dạng xem đánh dấu" của trang web. HTML của phần tử đã chọn sẽ được đánh dấu và căn giữa trong ngăn này.
- Ngăn bên phải hiển thị biểu định kiểu CSS của trang web hiện tại.
Bước 5. Chọn một phần tử khác
Khi thanh công cụ mở, bạn có thể dễ dàng chọn các phần tử khác. Có ba cách để làm điều này:
- Di chuột qua một dòng HTML để đánh dấu phần tử đã chọn (tính năng này yêu cầu Firefox 34+). Nhấp vào HTML để chọn phần tử đó.
- Nhấp vào công cụ "Chọn phần tử" ở góc trái của thanh công cụ: nó có biểu tượng hình con trỏ phía trên một hộp. Di chuyển con trỏ trên trang web để đánh dấu một phần tử và nhấp để chọn phần tử đó.
Bước 6. Theo dõi mã HTML
Nhấp vào bất kỳ đâu trong ngăn HTML. Sử dụng các phím hướng trái và phải trên bàn phím để chuyển từ mã này sang mã khác (tính năng này yêu cầu Firefox 39+). Phương pháp này hữu ích để chọn các phần tử quá nhỏ để được chọn bằng con trỏ.
- HTML được tô xám cho biết các phần tử không được hiển thị trên trang. Các phần tử được bao gồm trong phần này là các nhận xét, như các nút và các phần tử khác bị ẩn bởi thuộc tính hiển thị CSS.
- Bấm vào mũi tên bên trái của hộp để hiển thị hoặc ẩn nội dung. Để hiển thị toàn bộ nội dung, nhấn giữ alt="Hình ảnh" hoặc tùy chọn trong khi nhấp vào mũi tên.
Bước 7. Định vị phần tử
Tìm trường tìm kiếm (biểu tượng hình vòng lặp) ở góc xa bên phải của hàng breadcrumbs. Nhấp để mở rộng trường tìm kiếm và nhập mã HTML bạn muốn tìm kiếm. Khi bạn nhập, một cửa sổ bật lên sẽ hiển thị hiển thị các kết quả tìm kiếm phù hợp. Nhấp vào một phần tử từ kết quả tìm kiếm và cuộn ngăn HTML đến mã bạn đang tìm kiếm.
Phần 2/2: Chỉnh sửa HTML
Bước 1. Tải lại trang để bắt đầu lại
Nếu bạn chưa quen với các công cụ phát triển trang web, hãy lưu ý rằng bạn không thực hiện các thay đổi vĩnh viễn đối với các trang bạn chỉnh sửa. Các chỉnh sửa của bạn chỉ xuất hiện trên màn hình cho đến khi bạn tải lại hoặc đóng trang. Hãy thoải mái thử nghiệm ngay cả khi bạn không biết điều gì sẽ xảy ra.
Bước 2. Nhấp đúp vào HTML để chỉnh sửa
Nhấp đúp vào HTML nội tuyến. Nhập văn bản mới và nhấn enter để lưu các thay đổi.
Bước 3. Nhấp và giữ công cụ trong breadcrumb để hiển thị thêm tùy chọn
Lưu ý rằng thanh công cụ breadcrumb nằm giữa cây HTML và thanh công cụ phía trên nó. Nhấp và giữ một công cụ trong hàng này để mở thêm menu. Dưới đây là gợi ý về các tùy chọn có sẵn (không đầy đủ):
- "Chỉnh sửa dưới dạng HTML" cho phép bạn chỉnh sửa trực tiếp tất cả nội dung HTML từ cây HTML thay vì chỉnh sửa từng dòng.
- "Sao chép HTML bên trong" sao chép toàn bộ nội dung bên trong nút, trong khi "Sao chép HTML bên ngoài" sao chép nội dung và các nút (chẳng hạn như hoặc
- "Dán →" đưa ra một số tùy chọn về vị trí dán bản sao, chẳng hạn như trước nút hoặc sau nút con đầu tiên của nút.
- : hover,: active và: focus thay đổi giao diện của phần tử khi người dùng tương tác. Các hiệu ứng đã thay đổi được xác định từ biểu định kiểu CSS (Có thể chỉnh sửa từ bảng điều khiển bên phải).
Bước 4. Kéo và thả
Để sắp xếp lại các phần tử trong mã, hãy nhấp và giữ HTML cho đến khi xuất hiện một đường chấm. Di chuyển đường lên và xuống cây và thả nút chuột khi đường ở vị trí bạn muốn.
Tính năng này yêu cầu Firefox 39 trở lên
Bước 5. Đóng thanh công cụ dành cho nhà phát triển
Để đóng toàn bộ cửa sổ Kiểm tra phần tử, hãy nhấp vào nút X ở góc trên bên phải của thanh công cụ nằm phía trên bảng điều khiển CSS.
Lời khuyên
- Bạn cũng có thể mở thanh công cụ từ các tùy chọn menu ở đầu cửa sổ:
- Windows: Firefox → Nhà phát triển web → Công cụ chuyển đổi
- Mac hoặc Linux: Công cụ → Nhà phát triển web → Công cụ chuyển đổi
- Firefox 40 có tùy chọn ẩn bảng CSS để bạn có nhiều chỗ hơn để chỉnh sửa HTML. Tìm biểu tượng mũi tên ở góc xa bên phải của hàng breadcrumbs và ở bên phải của trường tìm kiếm. Nhấp vào biểu tượng này để ẩn bảng CSS và nhấp lại để hiển thị nó.
- Bạn cũng có thể chỉnh sửa bảng điều khiển CSS, nhưng chúng không được liệt kê trong bài viết này. Bạn có thể tìm thấy hướng dẫn chỉnh sửa mã CSS trên internet.
