Opera: How to use outlining for better layout debugging

I prefer using Opera's "User mode" to toggle an outlining of HTML elements quickly. This helps greatly when you want to see the actual dimensions of elements, e.g. for floating elements inside containers, instead of opening up the Dragonfly inspector every time.

Navigate to View → Style → "Manage Modes..." and tick the checkboxes like in the attached image. Then, switch to the User Mode by pressing the shortcut (Shift+G for the 9.2-compatible layout or for the default layout with enabled "single-key shortcuts") and select "Outline" from the View → Style menu (needs to be done only the first time).

Once done you can quickly enable and disable outlining by pressing the shortcut.

Arne Hartherz about 11 years ago
This website uses short-lived cookies to improve usability.
Accept or learn more