Firefox Developer Tools follow the same general Photon principles as Firefox, but in many cases, special guidelines and UI components and are needed for its more compact developer-focused interfaces.

Principles

  • Keeping both beginners and experienced users in mind
  • Optimizing for both design-in-brower and debugging
  • (more later)

Panel Overview:

Under Active Development

  • Inspector
    • Flexbox Inspector: Undergoing major design & dev, not yet launched
    • Fonts Editor: 1.0 launching soon
    • Track Changes: In early development
    • Responsive Design Mode: Recently updated, major features planned
    • Animation Inspector: Actively developed
    • Grid Inspector: 1.0 done, polish and subgrid planned
    • Color Picker: Redesign in development
    • Shape Editor: Recently launched
  • Console
  • Debugger
  • Network
  • about:debugging
  • Top-level toolbar and its tabs and menus
  • Accessibility: 1.0 recently launched by @yzen

Not Currently Under Development

  • Performance (see Perf.html for current performance tooling)
  • Style Editor
  • Memory
  • Scratchpad
  • Storage: Will be merged with new Application panel

DevTools-Specific Components

(In progress)

Additions to Photon Guidelines

(In progress)

Resources