Mozilla Firefox version 11.x+ has support for 3D view. It is a WebGL based website visualization tool that highlights page structure. You can see relationship between your code and the page output by stacking elements as they are nested in the DOM and lets you see elements that are hidden or off the page. You can zoom in and out, rotate and pan the view to see the page from any angle that is helpful to you. In this blog post I will explain how to enable 3D view on X11. Please note that the 3D view is not for your daily browsing needs. It is useful for finding out bugs such as nesting issues or even XSS vulnerabilities. Personally, I use 3D view as a tool to understand divs, spans, and other elements on the page.
How do I enable 3D view under X11?
You need to turn on inspector.
Right-click page > Select inspect element (Q)
You will see bar at the bottom with a "3D View" button as follows:
How do I rotate and view pages in 3D?
- You can use mouse wheel to zoom in/out.
- Mouse button to select element.
- Hold mouse button move left / right / up / down.
- Zoom in/out : + / -
- Rotate left/right : a / d
- Rotate up/down : w / s
- Pan left/right : ← / →
- Pan up/down : ↑ / ↓
- Reset zoom level : 0
- Focus on selected node : f
- Reset view : r
- Hide current node : x
- 30 Handy Bash Shell Aliases For Linux / Unix / Mac OS X
- Top 30 Nmap Command Examples For Sys/Network Admins
- 25 PHP Security Best Practices For Sys Admins
- 20 Linux System Monitoring Tools Every SysAdmin Should Know
- 20 Linux Server Hardening Security Tips
- Linux: 20 Iptables Examples For New SysAdmins
- Top 20 OpenSSH Server Best Security Practices
- Top 20 Nginx WebServer Best Security Practices
- 20 Examples: Make Sure Unix / Linux Configuration Files Are Free From Syntax Errors
- 15 Greatest Open Source Terminal Applications Of 2012
- My 10 UNIX Command Line Mistakes
- Top 10 Open Source Web-Based Project Management Software
- Top 5 Email Client For Linux, Mac OS X, and Windows Users
- The Novice Guide To Buying A Linux Laptop