= 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"