Web Developer: xem cấu trúc website dạng 3D trong Firefox

Firefox 11 vừa thêm 2 công cụ phát triển web. Tính năng ảo hóa Tilt sẽ ảo hóa cấu trúc website 3D, trong khi Style Editor dùng để chỉnh CSS

Tính năng 3D được gọi là Tilt, là một cách để ảo hóa DOM của một website. Nó được tích hợp với Document Inspector và dùng WebGL để hiển thị.

Tilt - 3D 

Bạn có thể truy cập Tilt trong trang Firefox Page Inspector. Để bắt đầu, mở Page Inspector bằng cách chọn "Inspect" từ menu Web Developer. Bạn cũng có thể click phải vào trang hiện tài và chọn "Inspect Element" để bắt đầu.

Click nút 3D trên thanh inspector

Bạn sẽ thấy cấu trúc trang sau khi chuyển sang chế độ 3D, nhưng nó sẽ trong như thường đến khi bạ thử xoay.

Xoay mô hình bằng cách click chuột trái, di chuyển hình ảnh bằng cách xoay chuột phải, và zoom bằng con lăn của chuột.

Hướng nhìn này được tích hợp với các công cụ khác trong inspector. Nếu bạn mở bảng điều khiển HTML hoặc Style, bạn có thể click vào trang html để xem.

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

Tính năng ảo hóa 3D dựa trên Tilt, nhưng nó không có tất cả tính năng của Tilt. Nếu bạn muốn chỉnh màu sắc hoặc đưa ra mô hình 3D, bạn sẽ cần phải cài đặt Tilt 3D add-on. Khi hoàn thành, bạn sẽ có thể lựa chọn "Tilt" từ menu Web Developer.

Click nút Cancel để dùng phiên bản Tilt cũ khi nó được mở.

Bạn sẽ thấy điều khiển để chỉnh.

CSS Style Editor

Để xem và chỉnh một trang CSS, mở Style Editor từ Web Developer.

Style Editor sẽ đưa ra một danh sách các trang đang mở. Chọn trang bằng cách click vào biểu tượng con mắt. Chỉnh stylesheet bằng cách chọn và chỉnh code.

Các thay đổi sẽ ngay lập tức hiển thị. Nếu bạn muốn tắt, trang sẽ mất tất cả thông tin. Nếu bạn chỉnh stylesheet, bạn sẽ thấy nó xuất hiện trên trang.

Bạn có thể lưu một bản copy của stylesheet, import stylesheet có sẵn hoặc thêm mới...

 

Nguồn: howtogeek.com


Comment

#776
09/04/2012 - 10:51:21
like

Đăng nhập đế gửi comment