Cách sử dụng Công cụ nhà phát triển web của Firefox để xem cấu trúc trang web bằng 3D

Mục lục:

Cách sử dụng Công cụ nhà phát triển web của Firefox để xem cấu trúc trang web bằng 3D
Cách sử dụng Công cụ nhà phát triển web của Firefox để xem cấu trúc trang web bằng 3D

Video: Cách sử dụng Công cụ nhà phát triển web của Firefox để xem cấu trúc trang web bằng 3D

Video: Cách sử dụng Công cụ nhà phát triển web của Firefox để xem cấu trúc trang web bằng 3D
Video: Hướng dẫn bật lại Internet Explorer trên Windows 11 - YouTube 2024, Có thể
Anonim
Firefox 11 đã thêm hai công cụ phát triển web mới vào kho vũ khí đã được ấn tượng của Firefox. Tính năng Tilt trực quan hóa cấu trúc trang web trong 3D, trong khi Trình chỉnh sửa kiểu có thể chỉnh sửa tệp định kiểu CSS khi đang di chuyển.
Firefox 11 đã thêm hai công cụ phát triển web mới vào kho vũ khí đã được ấn tượng của Firefox. Tính năng Tilt trực quan hóa cấu trúc trang web trong 3D, trong khi Trình chỉnh sửa kiểu có thể chỉnh sửa tệp định kiểu CSS khi đang di chuyển.

Tính năng 3D, được gọi là Nghiêng, là cách hiển thị 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 - Hình ảnh trang web 3D

Bạn có thể truy cập Tilt từ 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 "Kiểm tra" từ trình đơn 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 "Kiểm tra phần tử" để bắt đầu thanh tra tại một phần tử cụ thể.

Nhấp vào nút "3D" trên thanh công cụ thanh tra.
Nhấp vào nút "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ó.
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 con lăn chuột.
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 con lăn chuột.
Quan điểm này được tích hợp với các công cụ khác trong thanh tra viên. Nếu bạn mở bảng HTML hoặc Kiểu, bạn có thể nhấp vào phần tử trên trang hte để xem thuộc tính CSS hoặc mã HTML của phần tử đó.
Quan điểm này được tích hợp với các công cụ khác trong thanh tra viên. Nếu bạn mở bảng HTML hoặc Kiểu, bạn có thể nhấp vào phần tử trên trang hte để xem thuộc tính CSS hoặc mã HTML của phần tử đó.
Image
Image

Các tính năng 3D khác

Tính năng trực quan hóa 3D dựa trên phần mở rộng Tilt, nhưng nó không có tất cả các tính năng của tiện ích Tilt. nếu bạn muốn tùy chỉnh màu 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 phải cài đặt tiện ích bổ sung 3D nghiêng. Khi đã có, bạn sẽ nhận được tùy chọn “Tilt” mới trong trình đơn Nhà phát triển web.

Nhấp vào nút Hủy để sử dụng phiên bản Tilt cũ khi được nhắc.
Nhấp vào nút Hủy để sử dụng phiên bản Tilt cũ khi được nhắc.
Bạn sẽ tìm thấy các điều khiển để tùy chỉnh hình ảnh ở phía bên trái của cửa sổ và các tùy chọn khác, bao gồm cả tính năng xuất, ở đầu trang.
Bạn sẽ tìm thấy các điều khiển để tùy chỉnh hình ảnh ở phía bên trái của cửa sổ và các tùy chọn khác, bao gồm cả tính năng xuất, ở đầu trang.
Image
Image

Trình chỉnh sửa kiểu CSS

Để xem và chỉnh sửa các trang mẫu CSS của trang, hãy mở Trình chỉnh sửa kiểu từ trình đơn 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ã.
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ã.
Các thay đổi được phản ánh trên trang ngay lập tức. Nếu bạn tắt bảng định kiểu, trang sẽ mất thông tin kiểu của nó. 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 khi bạn nhập.
Các thay đổi được phản ánh trên trang ngay lập tức. Nếu bạn tắt bảng định kiểu, trang sẽ mất thông tin kiểu của nó. 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 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 bạn, 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 mới, trống với các liên kết Lưu, Nhập hoặc Mới trong cửa sổ Trình chỉnh sửa Kiểu.
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 bạn, 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 mới, trống với các 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 trực quan hóa 3D sẽ theo dõi các thay đổi trên trang hiện tại và các 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 của bên thứ ba sửa đổi các trang web, chẳng hạn như Firebug.

Đề xuất: