Hacks post 57 outline

hack-devtools-57-outline.md

INTRO

GENERAL

• new colors, photon update

INSPECTOR

• Layout panel, grid inspector improvements
• Layout panel, box model information
• toggle class elements
• CSS autocompletion finds more values
• Copy Xpath

CONSOLE

• new console frontend shipping, UI built with React
• inspect objects in context (Image)
• persist logs checkbox (Image)

DEBUGGER

• new debugger frontend shipping to release users with 56
• project search
• ouline view & function search
• framework support (icons & frames grouping)
• blackboxing
• async stepping
• link to debugger weekly updates

NETMONITOR

• new columns added, can customize columns
• Links to MDN
• Status bar, including timings for DOMContentLoaded and load
• disable cache + persist logs checkboxes in the panel UI
• open in debugger/style-editor

STORAGE

• Can add localstorage entries and cookies
• Storage inspector is now enabled by default

BUG FIXES

For the console:

• Collapsible groups and thus console.groupCollapsed support (need screenshot/screencast)
• Stylable group headers (e.g. used by redix-logger) (need screenshot/screencast)
• Sourcemap support
• Number of hidden messages due to filtering (need screenshot)
• WebExtension support for server-side logging (need ccampbell/chromelogger#73 to be merged in the webextension)
• Built with React/Redux, will make working on the console much easier and more efficient than it used to be
• Reps, a node_module to render both native and RDP objects (used by many panels, more consistency across the tools).

I'll provide the screenshots for features that need it when the Photon colors land :)