What’s new in Web Inspector

Note this link – https://developer.apple.com/wwdc23/10118 There is a Safari tech preview I may have to check out for the day job.

I always make sure to enable web inspector on my Macs 🙂
You can pair with a device to inspect web content – check out rediscover safari developer features

Typography inspection

Debugging typography issues requires a ton of inheritable actions based on the CSS cascade. You can see this in the Font panel at the detail view.
Sections exist for tons of the font characteristics and features
It will show warnings for synthetic styles, like italics. This can show when you have not loaded the separate italics or bold font file, or the font doesn’t support the character or value you wanted.
- You can now use variable font files to provide much more flexibility
- If you have a variable font the inspector shows all the various variable properties, allowing you to interact with it live to see the results.
This whole section sounds like it was designed with Steve Jobs in mind.

User Preference override

You can emulate user preferences to check if your design adapts appropriately for user custom settings. Like reduce motion, screen reader, etc.
- Right now there are a subset of preferences that can be overridden based on mapping to CSS Media preferences
- Like dark mode, reduce motion, and increase contrast

Element badges

This will demonstrate that elements address CSS badges, like Grid or Flex
- This will show guides as overlays on the screen
To identify unwanted Scrolls there is a new element in the node tree. This is worse when you have scroll bars turned off.
There is a new Event Badge – shows if there is javascript event code attached to elements
- Popup will show all the listeners attached to the function
- You can set a breakpoint on the event via this pop-up

Breakpoint enhancements

You can run javascript to configure when a breakpoint occurs
There are additional types of breakpoints (URL triggers when a network request occurs) and new this year is Symbolic Breakpoint that triggers before a function is about to be invoked. This seems really cool for website debugging.

Many more features go to webkit.org for more information