Cách sử dụng các công cụ dành cho nhà phát triển web của Firefox để xem cấu trúc trang web ở chế độ 3D
Firefox 11 đã thêm hai công cụ phát triển web mới vào kho vũ khí vốn đã rất ấn tượng của Firefox. Tính năng Nghiêng hiển thị cấu trúc trang web ở chế độ 3D, trong khi Trình chỉnh sửa kiểu có thể chỉnh sửa biểu định kiểu CSS một cách nhanh chóng.
Tính năng 3D, được gọi là Tilt, là một cách trực quan hóa DOM của trang web. Nó tích hợp với Trình kiểm tra tài liệu hiện có và sử dụng WebGL để hiển thị đồ họa 3D phong phú trong trình duyệt của bạn.
Nghiêng - Trực quan trang web 3D
Bạn có thể truy cập Tilt từ bên trong Trình kiểm tra trang của Firefox. Để bắt đầu, hãy mở Trình kiểm tra trang bằng cách chọn Thanh tra trực tiếp từ menu Nhà phát triển web. Bạn cũng có thể nhấp chuột phải vào trang hiện tại và chọn Phần tử Inspect Element để bắt đầu trình kiểm tra tại một phần tử cụ thể.
Nhấp vào nút 3D 3D trên thanh công cụ thanh tra.
Bạn sẽ thấy cấu trúc của trang sau khi kích hoạt chế độ 3D, nhưng nó sẽ trông phẳng cho đến khi bạn xoay nó.
Xoay mô hình bằng cách nhấp chuột trái, di chuyển hình ảnh xung quanh bằng cách nhấp chuột phải và phóng to và thu nhỏ bằng cách sử dụng bánh xe chuột.
Quan điểm này được tích hợp với các công cụ khác trong thanh tra. Nếu bạn mở bảng HTML hoặc Kiểu, bạn có thể nhấp vào một phần tử trên trang hte để xem thuộc tính HTML hoặc mã HTML của phần tử đó.
Các tính năng 3D khác
Tính năng hiển thị 3D được dựa trên tiện ích mở rộng Nghiêng, nhưng nó không có tất cả các tính năng của tiện ích mở rộng Nghiêng. nếu bạn muốn tùy chỉnh màu sắc hoặc thậm chí xuất trực quan dưới dạng tệp mô hình 3D để sử dụng với chương trình chỉnh sửa 3D, bạn sẽ cần cài đặt tiện ích Tilt 3D. Khi bạn đã có, bạn sẽ nhận được tùy chọn mới Tiltiên trong menu Nhà phát triển web.
Nhấp vào nút Hủy để sử dụng phiên bản Nghiêng cũ khi được nhắc.
Bạn sẽ tìm thấy các điều khiển để tùy chỉnh trực quan hóa ở phía bên trái của cửa sổ và các tùy chọn khác, bao gồm tính năng xuất, ở đầu trang.
Trình chỉnh sửa kiểu CSS
Để xem và chỉnh sửa biểu định kiểu CSS của trang, hãy mở Trình chỉnh sửa kiểu từ menu Nhà phát triển web.
Trình chỉnh sửa Kiểu liệt kê các bảng định kiểu trên trang hiện tại. Bật hoặc tắt biểu định kiểu bằng cách nhấp vào biểu tượng con mắt ở bên trái tên của biểu định kiểu. Chỉnh sửa biểu định kiểu bằng cách chọn nó và sửa đổi mã.
Thay đổi được phản ánh trên trang ngay lập tức. Nếu bạn tắt biểu định kiểu, trang sẽ mất thông tin kiểu. Nếu bạn chỉnh sửa biểu định kiểu, bạn sẽ thấy các chỉnh sửa xuất hiện trên trang trong khi bạn nhập.
Bạn có thể lưu một bản sao của một trong các bảng định kiểu vào máy tính của mình, nhập biểu định kiểu hiện có từ máy tính của bạn hoặc thêm biểu định kiểu trống mới với liên kết Lưu, Nhập hoặc Mới trong cửa sổ Trình chỉnh sửa Kiểu.
Tính năng hiển thị 3D theo dõi các thay đổi trên trang hiện tại và thông báo khi có thay đổi. Khi bạn sử dụng Trình chỉnh sửa kiểu với trình kiểm tra 3D mở, các thay đổi của bạn sẽ được phản ánh ngay lập tức trong chế độ xem 3D. Điều này cũng hoạt động với các tiện ích mở rộng của bên thứ ba sửa đổi các trang web, chẳng hạn như Fireorms.