2023-08 ¶
2023-08-01 Firefox DevTools Custom Object Formatters ¶
Firefox 116 introduces an exciting new feature called custom formatters, designed to enhance the debugging experience for web developers.
With custom formatters, websites can now define how to display specific JavaScript objects and functions within different parts of the DevTools.
Custom Formatters have been part of Chrome DevTools for a while and we’re happy to add support for them in Firefox.
This is especially useful for JavaScript frameworks that define individual objects or create wrappers for native variables, as well as web applications that deal with complex object structures.
That also covers frameworks that compile to JavaScript like ClojureScript.
Custom formatting enhances the debugging process by providing developers with a more intuitive and informative representation of their objects.
When working with complex object structures, the default display of objects in the DevTools can often be overwhelming or cryptic. With custom formatters, developers can tailor the presentation of objects to match their specific needs.
They can highlight important properties by applying formatting styles, filter out irrelevant information, or even display nested structures in a more readable manner.
This enables developers to quickly identify and understand the state of their objects, reducing the time and effort required for debugging and