Web Inspector Notes 2019

by Joseph Pecoraro

• Canvas Tab
  • shows a list of contexts visible on the page
  • basic information (e.g. size, DOM node, attributes)
  • each context is able to be recorded
  • able to programmatically record context via console.record
  • all actions are recorded that are performed on the canvas
  • actions that would trigger a visual change are highlighted in green
  • some actions are invisible (2D)
    • path inspector shows moving operations that don't actually draw
  • also works with 3D canvas, but more limited
    • not a "live" replay
    • takes snapshots whenever the content changes
  • each action shows a backtrace for debugging
  • able to capture a single or multiple frames
    • click is multiple
    • shift-click is single frame
• Layers tab
  • shows rendering layers in a 3D view
  • enabled via an experimental setting inside WebInspector
  • previously, some layer information was listed in the DOM tree, but it wasn't visualized
  • able to highlight layers and see where they are on the page
  • shows compositing reasons for each layer
  • able to pan/spin/etc the visualization
  • the size (memory) of each layer is shown
  • toggles for Compositing Borders and Paint Flashing have moved here from the Elements tab
• Network tab refresh
  • used to be a huge table of data
    • ~10 different columns by default
  • reworked for visual clarity
    • smaller set of default columns
  • optimized for resizing and performance
  • visualization more closely matches other developer tools for resource timing information
  • selecting an individual visualization will show a deeper view of what happens
  • currently missing zoom/resizing of the visualization, but it is planned
  • specialized content views for each resource with more detailed and better organized information
    • moved from the old resource sidebar
  • cookies have a dedicated tab for each resource for better visualization
  • sizes tab shows warnings
    • resources that aren't compressed but could be compressed
  • now shows a complete list of headers
  • query string parameters are parsed into a list
  • actual request/response information shown for each resource
    • additional specialized view for JSON that shows an object tree
• Styles sidebar
  • moved to a spreadsheet model
  • conforms more to other developer tools
  • editing keyboard shortcuts more obvious
• Architecture changes
  • current functionality
    • inspecting a WebContentProcess will jump directly to the backing WebCore::Page
    • PSON will cause the inspector process to be destroyed
      • Inspector frontend page tied to the Inspector backend associated with the WebCore::Page
  • instead, connect directly to that page
    • shift to connecting to targets instead of pages
    • "mini" backend would be the target, which would know how to communicate with what it's inspecting (e.g. page)
      • another page would appear as another target
      • closing the first target would just shift the main target to any other top-level (e.g. page) targets
        • allows multiple processes to be inspected (e.g. service worker, subframes)
    • should mitigate any inspector backend crashes, as inspector page's backend is effectively a message handler to the actual target's backend
    • design is similar to other developer tools
      • allows tools that work with debugging multiple browsers to continue supporting WebKit
    • goal is to ensure backward compatibility with backends that use the old system
• ability to directly connect to service workers
  • list is shown in Safari's Develop many under "Service Workers"