A tour with Firefox DevTools

Nicolas Chevobbe

  • French
  • Working on the console for ~2 years
  • ~1 year as a mozilla employee.

DevTools

Team of ~15 people in Europe & North America

What we've been up to in 2017 ?

  • Animation easing curve
  • AST Breakpoint
  • Class toggle
  • Collapsible group
  • CSS Grid Inspector
  • Framework Stacktraces
  • Inline inspection
  • JSON Viewer
  • Netmonitor stacktrace
  • New Console
  • New Debugger
  • New Netmonitor
  • Outline View
  • Pause network monitoring
  • Photon Colors
  • Shape Editor
  • Sourcemap support
  • Stylable group
  • WASM Debugging
  • Whitespace only nodes

A lot

bugs.firefox-dev.tools

Let's debug it using the Firefox DevTools

INSPECTOR

Photon Colors

Whitespace only text node

See Patrick Brosset's post on whitespace only nodes

Animations

Easing curve

Toggle classes

Easier to trigger the animation

Toggle classes

Multiple classes

Animations

Multiple properties and easing

Landing page

CSS custom properties


:root {
  --blue-50: #0a84ff;
  --blue-60: #0060df;
  --blue-70: #003eaa;
  --blue-80: #002275;
  --grey-30: #d7d7db;
  --grey-90: #0c0c0d;
  --white: #ffffff;
}

CSS custom properties

Preview value

Font

Applied fonts are underlined

Font panel - system

Font panel - remote

CSS Grid

Grid Inspector

Set up a grid

Split rules panel

3 panels inspector

In about:config flip
devtools.inspector.split-sidebar-toggle &
devtools.inspector.split-rule-enabled

Grid Inspector

Declare a grid template

Grid Inspector

Title at the top

Grid Inspector

Logo

Grid Inspector

Links

Flexbox inspector

Coming soon

Named areas

Shape path tool

Shape path tool

DEBUGGER

Photon colors

Rewritten using React & Redux

Bug

List not loading

Help Modal

Existing shortcuts

File search

Cmd/Ctrl + P

Project search

Cmd/Ctrl + Shift + F

Event bubble

Show delegated event at the "correct" node

Sources

An actual source tree, showing sourcemapped files

Outline view

Functions and ES6 classes' methods

Source-map

JSX, typescript, coffeescript, C, … highlighting

Source-map

Link to generated location

Collapsed frames

Grouped frames by library

Vars mapping

Evaluate original names, even on uglified files.

Continue to here

AST breakpoints

Let the debugger handle your breakpoints

WASM

See and step through original code (C, Rust, …)

Contributors

bugzilla only

CONSOLE

Photon colors

Cleaner design

Filtering

Number of hidden messages

Error

Sourcemap - MDN Link

Styled group

Used by Redux logger

console
.group


console.group("A");
console.log("My log");
console.groupCollapsed("B");
console.log("Another log");
console.groupEnd();
console.groupEnd()

Styled
message


console.log(
  "%cHello %cWorld",
  "color: red",
  "color: blue"
)

Inline object inspection

Yes, like Chrome, but…

Sidebar

Like the good old days. Flip
devtools.webconsole.sidebarToggle

console.table

Inspect large datasets in a nicer way

Copy
object

  • copy() helper
  • Context menu

console API


             console.error();
             console.warn();
             console.log();
             console.info();
             console.debug();

             console.dir(object);

             console.group(groupName);
             console.groupEnd();

             console.time(timerName);
             console.timeEnd(timerName);

             console.count(name);

             console.assert(x === y, message);

             console.clear();

Logging tricks

  • inspect() console helper === console.dir()
  • Concatenate: console.log("a", a, "b", b)
  • Using ES6 shorthand: console.log({a, b})
  • Conditional Breakpoint: console.log returns undefined and won't trigger the breakpoint

Network logs

Status code MDN link. Shared components with the Netmonitor

NETWORK

Photon colors

Rewritten in React & Redux. Disable cache + Persist log

Headers

Links to MDN for status code and Headers

Stacktrace

Sourcemapped, open the debugger when clicked

Pause

Pause / Resume network recording

Filters

Autocomplete

Filters

Negative

Filters

Combine

Parameters

Response

Inspect JSON

Edit and resend

Open in new tab

Photon Colors

Theme you defined in your DevTools settings

Links

Navigate across endpoints

That's it !

Almost

WebExtensions support

React, Redux, Angular, …

Firefox Screenshot

Multi-Account Containers

Please give us feedback or ideas

Thanks

@nicolaschevobbe