Канал: Patrick Brosset

Discover the Side Panel API for PWAs

Discover the Side Panel API for PWAs

Modify large JSON files using JavaScript in DevTools

Modify large JSON files using JavaScript in DevTools

Microsoft Edge app sync

Microsoft Edge app sync

search ruleview

search ruleview

screenshot

screenshot

mdn tooltips

mdn tooltips

highlight elements that match a selector

highlight elements that match a selector

eye dropper

eye dropper

css transform previewer

css transform previewer

css filters editor

css filters editor

animation panel

animation panel

emulate media

emulate media

Inspect iOS safari via Valence and WebIDE

Inspect iOS safari via Valence and WebIDE

responsive design view

responsive design view

WIP - Displaying keyframes in the animation-inspector

WIP - Displaying keyframes in the animation-inspector

keyframes rule in the rule-view

keyframes rule in the rule-view

cubic bezier timing-function editor

cubic bezier timing-function editor

9 DevTools tips and tricks in Firefox, Edge, and Chrome you should know about!

9 DevTools tips and tricks in Firefox, Edge, and Chrome you should know about!

Run DevTools in VS Code and sync CSS changes to your source code!

Run DevTools in VS Code and sync CSS changes to your source code!

JS Tip: Create an array and fill it with numbers

JS Tip: Create an array and fill it with numbers

Debug your website in 3D

Debug your website in 3D

The DevTools copy function is AWESOME

The DevTools copy function is AWESOME

Handle files from your Progressive Web App

Handle files from your Progressive Web App

How does DevTools work?

How does DevTools work?

Handle URLs natively in your Progressive Web App

Handle URLs natively in your Progressive Web App

Display content in the title bar of your desktop PWA

Display content in the title bar of your desktop PWA

Microsoft Edge DevTools - New features in 93

Microsoft Edge DevTools - New features in 93

Animating CSS Grid Tracks in Firefox Nightly

Animating CSS Grid Tracks in Firefox Nightly

Using FirefoxDevTools to understand CSS #6

Using FirefoxDevTools to understand CSS #6

My quick way to start prototyping HTML/CSS in the browser

My quick way to start prototyping HTML/CSS in the browser

Save screenshots taken from Firefox DevTools to the clipboard

Save screenshots taken from Firefox DevTools to the clipboard

Toggle and add classes easily in Firefox DevTools' inspector tool

Toggle and add classes easily in Firefox DevTools' inspector tool

DevTools tip: Copy CSS selectors

DevTools tip: Copy CSS selectors

DevTools tip: Multi-line console input

DevTools tip: Multi-line console input

DevTools tip: compare performance of cache vs. no-cache page loading

DevTools tip: compare performance of cache vs. no-cache page loading

Highlight elements in the page when making CSS changes

Highlight elements in the page when making CSS changes

Visualize web animations' easing in Firefox

Visualize web animations' easing in Firefox

Web Animations API's endDelay now visible in Firefox DevTools

Web Animations API's endDelay now visible in Firefox DevTools

Animated pseudo-elements in the Firefox animation tool

Animated pseudo-elements in the Firefox animation tool

Using the FirefoxDevTools to understand CSS demos #5

Using the FirefoxDevTools to understand CSS demos #5

New animation inspector features in Firefox 43

New animation inspector features in Firefox 43

CSS Grid Layout experiment 2: more complex responsive grid

CSS Grid Layout experiment 2: more complex responsive grid

CSS Grid Layout experiment: a simple responsive grid

CSS Grid Layout experiment: a simple responsive grid

WIP - Animation timelines

WIP - Animation timelines

Preview fonts used on a web page with the FirefoxDevTools

Preview fonts used on a web page with the FirefoxDevTools

Latest work-in-progress (FF40) animation inspector in FirefoxDevTools

Latest work-in-progress (FF40) animation inspector in FirefoxDevTools

CSS Filter Editor Tooltip in FirefoxDevTools 44

CSS Filter Editor Tooltip in FirefoxDevTools 44

Set animations' playback rate with FirefoxDevTools

Set animations' playback rate with FirefoxDevTools

Firefox Animation Inspector can now modify animations' current time

Firefox Animation Inspector can now modify animations' current time

Using the FirefoxDevTools to understand CSS demos #4

Using the FirefoxDevTools to understand CSS demos #4

WIP - Element geometry highlighter/editor

WIP - Element geometry highlighter/editor

Using the FirefoxDevTools to understand CSS demos #3

Using the FirefoxDevTools to understand CSS demos #3

Using the FirefoxDevTools to understand CSS demos #2

Using the FirefoxDevTools to understand CSS demos #2

Using the FirefoxDevTools to understand CSS demos

Using the FirefoxDevTools to understand CSS demos

Idea for a devtools element transformer

Idea for a devtools element transformer

New animation inspector panel in Firefox 37

New animation inspector panel in Firefox 37

background image highlighter

background image highlighter

Draft for a new Animation Inspector panel in FirefoxDevTools

Draft for a new Animation Inspector panel in FirefoxDevTools

WIP: FirefoxDevTools timeline sidebar

WIP: FirefoxDevTools timeline sidebar

devtools highlighter craziness!

devtools highlighter craziness!

devtools addon idea: page recorder

devtools addon idea: page recorder

Short intro to the firefoxdevtools timeline panel

Short intro to the firefoxdevtools timeline panel

Inspecting safari on iPad iOS8 with FirefoxDevTools

Inspecting safari on iPad iOS8 with FirefoxDevTools

Inspecting Chrome with the FirefoxDevTools

Inspecting Chrome with the FirefoxDevTools

The box-model highlighter now works on FirefoxOS too

The box-model highlighter now works on FirefoxOS too

Highlight nodes that match a selector in the FirefoxDevTools Inspector

Highlight nodes that match a selector in the FirefoxDevTools Inspector

Highlight nodes that match a selector in the FirefoxDevTools Style Editor

Highlight nodes that match a selector in the FirefoxDevTools Style Editor

Edit css animations in the FirefoxDevTools inspector

Edit css animations in the FirefoxDevTools inspector

FirefoxDevTools highlight command

FirefoxDevTools highlight command

Soon to come 'highlight' command in FirefoxDevTools

Soon to come 'highlight' command in FirefoxDevTools

Visualize the effect of CSS transforms in FirefoxDevTools' inspector

Visualize the effect of CSS transforms in FirefoxDevTools' inspector

Highlighter pin mode

Highlighter pin mode

FirefoxDevTools webconsole output for DOM nodes just got better!

FirefoxDevTools webconsole output for DOM nodes just got better!

WIP FirefoxDevTools authored styles and inspector / styleeditor synchronization

WIP FirefoxDevTools authored styles and inspector / styleeditor synchronization

FirefoxDevTools multiple nodes highlighter from the CSS rules panel

FirefoxDevTools multiple nodes highlighter from the CSS rules panel

FirefoxDevTools - Highlight multiple nodes

FirefoxDevTools - Highlight multiple nodes

Hacking on the Firefox UI with the FirefoxDevTools

Hacking on the Firefox UI with the FirefoxDevTools

FirefoxDevTools - Work-in-progress - Highlight and select nodes from the debugger

FirefoxDevTools - Work-in-progress - Highlight and select nodes from the debugger

Inspect/highlight elements of the Firefox UI with FirefoxDevTools

Inspect/highlight elements of the Firefox UI with FirefoxDevTools

Firefox DevTools - New highlighter

Firefox DevTools - New highlighter

DevTools resizable sidebar - new AllTabs menu

DevTools resizable sidebar - new AllTabs menu

My Pummelvision

My Pummelvision