Công cụ dành cho nhà phát triển Phần tử Kiểm tra trong Firefox cho phép bạn xác định chính xác mã HTML cho bất kỳ thứ gì bạn thấy trên trang web của mình. HTML và biểu định kiểu CSS đi kèm hoàn toàn có thể chỉnh sửa khi các công cụ này mở. Thử nghiệm với bất kỳ thay đổi nào bạn thích, sau đó làm mới trang để trở về giao diện dự kiến của trang web.
Các bước
Phần 1/2: Kiểm tra các yếu tố
Bước 1. 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 hình ảnh, văn bản, hình nền hoặc bất kỳ phần tử nào khác. Nếu bạn không có chuột hai nút, hãy nhấp chuột trái trong khi giữ Control.
Bước 2. 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ổ của bạn. Một ngăn cũng sẽ xuất hiện bên dưới thanh công cụ, hiển thị mã HTML của trang.
Bước 3. Xác định các thanh công cụ và ngăn
Khi bạn nhấp vào Kiểm tra phần tử, một số ngăn sẽ mở ra ở cuối cửa sổ của bạn. Dưới đây là bảng phân tích công dụng và tên của chúng:
- Hàng trên cùng là Thanh công cụ của Hộp công cụ. Điều này có một số công cụ dành cho nhà phát triển, nhưng chúng tôi quan tâm đến Thanh tra ở bên trái. Giữ phần này được chọn (được đánh dấu bằng màu xanh lam) cho toàn bộ hướng dẫn này.
- Bên dưới thanh công cụ, có một hàng Breadcrumbs gồm các phần tử HTML, hiển thị đường dẫn đầy đủ liên quan đến phần tử đã chọn.
- Ngăn bên dưới hàng này hiển thị cây HTML hoặc "Dạng xem đánh dấu" của trang. HTML cho phần tử bạn đã chọn đượ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 cho trang này.
Bước 4. Chọn một phần tử khác
Khi thanh công cụ đã mở, việc chọn một phần tử khác rất dễ dàng. Dưới đây là ba cách để làm điều đó:
- Di chuột qua một dòng HTML để đánh dấu phần tử tương ứng (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ử ở phía ngoài cùng bên trái của thanh công cụ: biểu tượng là một con trỏ trên một hình vuông. Di chuyển con trỏ của bạn trên trang để đánh dấu các phần tử, sau đó nhấp để chọn một phần tử.
Bước 5. Điều hướng qua mã
Nhấp vào bất kỳ đâu trong ngăn HTML. Sử dụng các mũi tên trái và phải trên bàn phím của bạn để di chuyển qua mã (yêu cầu Firefox 39+). Điều này rất hữu ích cho các phần tử quá nhỏ để chọn bằng tay.
- HTML xám liên quan đến các phần tử không được hiển thị trên trang. Điều này bao gồm các nhận xét, một số nút nhất định, chẳng hạn như và các phần tử đã bị ẩn với thuộc tính hiển thị CSS.
- Nhấp vào mũi tên ở bên trái của các vùng chứa để mở rộng hoặc ẩn nội dung của nó. Để mở rộng tất cả nội dung, hãy giữ alt="Hình ảnh" hoặc tùy chọn trong khi nhấp vào.
Bước 6. Tìm kiếm một phần tử
Tìm thanh tìm kiếm (biểu tượng kính lúp) ở ngoài cùng bên phải của hàng Breadcrumbs. Nhấp vào đây để mở rộng, sau đó nhập mã HTML mà bạn đang tìm kiếm. Khi bạn nhập, một cửa sổ bật lên sẽ xuất hiện danh sách các phần tử phù hợp. Nhấp vào một để chọn phần tử đó và cuộn ngăn HTML đến mã của nó.
Phần 2/2: Chỉnh sửa HTML
Bước 1. Làm mới trang để bắt đầu lại bất kỳ lúc nào
Nếu bạn chưa quen với các công cụ dành cho nhà phát triển web, hãy hiểu rằng chúng không thực hiện bất kỳ thay đổi vĩnh viễn nào. Các chỉnh sửa của bạn sẽ chỉ hiển thị trên màn hình và chỉ cho đến khi bạn đóng trang hoặc làm mới nó. Đừng ngần ngại thử nghiệm ngay cả khi bạn không chắc chắn điều gì sẽ xảy ra.
Bước 2. Nhấp đúp vào HTML để chỉnh sửa văn bản
Nhấp đúp vào một dòng HTML. Nhập văn bản mới và nhấn enter để lưu các thay đổi của bạn.
Bước 3. Nhấp và giữ một breadcrumb để có thêm tùy chọn
Hãy nhớ rằng, thanh công cụ Breadcrumb được kẹp giữa cây HTML đầy đủ và thanh công cụ phía trên. Nhấp và giữ vào bất kỳ phần tử nào trong hàng này để mở một menu mở rộng. Dưới đây là hướng dẫn chưa đầy đủ cho các tùy chọn này:
- "Chỉnh sửa dưới dạng HTML" làm cho nút và tất cả nội dung của nó có thể chỉnh sửa trong cây HTML, thay vì phải chỉnh sửa từng dòng riêng lẻ.
- "Sao chép HTML bên trong" sao chép tất cả nội dung của nút, trong khi "Sao chép HTML bên ngoài" cũng sao chép nút (chẳng hạn như hoặc
- "Dán →" dẫn đến một số tùy chọn về vị trí dán, chẳng hạn như trước nút này 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 với phần tử đó. Hiệu ứng chính xác được xác định bởi biểu định kiểu CSS (có thể chỉnh sửa từ ngă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 đứt nét. Di chuyển nó lên hoặc xuống cây và thả ra khi đường đứt nét ở vị trí mong muốn.
Điều 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 tất cả các cửa sổ ưa thích này, chỉ cần nhấn X ở góc xa bên phải của thanh công cụ, phía trên ngăn CSS.
Lời khuyên
- Bạn cũng có thể mở thanh công cụ với các tùy chọn menu hàng đầu sau:
- 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 đã giới thiệu tùy chọn ẩn ngăn CSS để cung cấp cho bạn nhiều không gian hơn trong khi chỉnh sửa HTML. Tìm biểu tượng mũi tên ở ngoài cùng bên phải của hàng Breadcrumbs, bên phải của thanh tìm kiếm. Nhấp vào biểu tượng này để ẩn ngăn CSS và nhấp lại vào biểu tượng đó để mở rộng lại.
- Khung CSS cũng có thể chỉnh sửa được, nhưng điều đó nằm ngoài phạm vi của hướng dẫn này. Bài viết này dạy những điều cơ bản về CSS.
