wiki:WebInspectorNotes2018

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"
Last modified 3 years ago Last modified on Oct 12, 2018 3:52:01 PM