new three-panel Web Inspector layout (for example to simultaneously show the DOM tree, style, and the new layout tab)
Grid overlays
new in Web Inspector
click any grid badge on your website DOM tree to show a new grid overlay on top of the existing content
new Web Inspector Layout panel, with options/customization for the Web Inspector grid overlay
available on iOS/iPadOS 15 when inspecting remotely from a mac
Breakpoint enhancements
Five different breakpoints:
Debugger breakpoints - for statements, exceptions, and assertions
JavaScript breakpoints
Event breakpoints - for events like click, timeouts, intervals
DOM breakpoints - triggered when actions related to a DOM node occur
URL breakpoints - triggered when a network request is about to be made for a URL via APIs such as XMLHttpRequest or Fetch
Enhancements:
conditions and actions expressions now support Web Inspector’s Console tab API
action types that support JavaScript expressions can be set to emulate a user gesture
all JavaScript breakpoint options are now available to all other breakpoint kinds
Audit authoring
What is Audit authoring?
each test in the Audit tab is written in JavaScript and is run against the inspected web page
These tests can check for incorrect DOM structure, help enforce design system rules, or help make sure you haven’t missed accessibility attributes
usually tests are written else where and imported/exported in Web Inspector
Enhancements:
new Audit edit mode - ability to create and edit your tests in Web Inspector
the default Demo Audit and Accessibility tests cannot be edited (but can be cloned and then edited)
