| | 1 | = Web Inspector Notes 2019 = |
| | 2 | ''by Joseph Pecoraro'' |
| | 3 | |
| | 4 | * Canvas Tab |
| | 5 | * shows a list of contexts visible on the page |
| | 6 | * basic information (e.g. size, DOM node, attributes) |
| | 7 | * each context is able to be recorded |
| | 8 | * able to programmatically record context via `console.record` |
| | 9 | * all actions are recorded that are performed on the canvas |
| | 10 | * actions that would trigger a visual change are highlighted in green |
| | 11 | * some actions are invisible (2D) |
| | 12 | * path inspector shows moving operations that don't actually draw |
| | 13 | * also works with 3D canvas, but more limited |
| | 14 | * not a "live" replay |
| | 15 | * takes snapshots whenever the content changes |
| | 16 | * each action shows a backtrace for debugging |
| | 17 | * able to capture a single or multiple frames |
| | 18 | * click is multiple |
| | 19 | * shift-click is single frame |
| | 20 | * Layers tab |
| | 21 | * shows rendering layers in a 3D view |
| | 22 | * enabled via an experimental setting inside WebInspector |
| | 23 | * previously, some layer information was listed in the DOM tree, but it wasn't visualized |
| | 24 | * able to highlight layers and see where they are on the page |
| | 25 | * shows compositing reasons for each layer |
| | 26 | * able to pan/spin/etc the visualization |
| | 27 | * the size (memory) of each layer is shown |
| | 28 | * toggles for Compositing Borders and Paint Flashing have moved here from the Elements tab |
| | 29 | * Network tab refresh |
| | 30 | * used to be a huge table of data |
| | 31 | * ~10 different columns by default |
| | 32 | * reworked for visual clarity |
| | 33 | * smaller set of default columns |
| | 34 | * optimized for resizing and performance |
| | 35 | * visualization more closely matches other developer tools for resource timing information |
| | 36 | * selecting an individual visualization will show a deeper view of what happens |
| | 37 | * currently missing zoom/resizing of the visualization, but it is planned |
| | 38 | * specialized content views for each resource with more detailed and better organized information |
| | 39 | * moved from the old resource sidebar |
| | 40 | * cookies have a dedicated tab for each resource for better visualization |
| | 41 | * sizes tab shows warnings |
| | 42 | * resources that aren't compressed but could be compressed |
| | 43 | * now shows a complete list of headers |
| | 44 | * query string parameters are parsed into a list |
| | 45 | * actual request/response information shown for each resource |
| | 46 | * additional specialized view for JSON that shows an object tree |
| | 47 | * Styles sidebar |
| | 48 | * moved to a spreadsheet model |
| | 49 | * conforms more to other developer tools |
| | 50 | * editing keyboard shortcuts more obvious |
| | 51 | * Architecture changes |
| | 52 | * current functionality |
| | 53 | * inspecting a WebContentProcess will jump directly to the backing WebCore::Page |
| | 54 | * PSON will cause the inspector process to be destroyed |
| | 55 | * Inspector frontend page tied to the Inspector backend associated with the WebCore::Page |
| | 56 | * instead, connect directly to that page |
| | 57 | * shift to connecting to targets instead of pages |
| | 58 | * "mini" backend would be the target, which would know how to communicate with what it's inspecting (e.g. page) |
| | 59 | * another page would appear as another target |
| | 60 | * closing the first target would just shift the main target to any other top-level (e.g. page) targets |
| | 61 | * allows multiple processes to be inspected (e.g. service worker, subframes) |
| | 62 | * should mitigate any inspector backend crashes, as inspector page's backend is effectively a message handler to the actual target's backend |
| | 63 | * design is similar to other developer tools |
| | 64 | * allows tools that work with debugging multiple browsers to continue supporting WebKit |
| | 65 | * goal is to ensure backward compatibility with backends that use the old system |
| | 66 | * ability to directly connect to service workers |
| | 67 | * list is shown in Safari's Develop many under "Service Workers" |
