When you've loaded traces, click View traces to visualize the uploaded traces. Tabs for each trace appear on the top panel of the window. If the uploaded file contains the relevant traces, Winscope overlays a floating view of the screen recording trace or screenshot on the screen:
Figure 1. View traces on Winscope.
The following sections describe the user interface (UI) elements on the View traces screen.
Rectangles
The LAYERS panel for Winscope views, such as WindowManager, SurfaceFlinger, and ViewCapture, displays rectangular elements from the trace, visually representing their position and z-axis order.
Use the navigation controls on the LAYERS panel to modify the drawing mode for rectangular layers, along with their spacing and rotation:
Figure 2. Rectangle controls.
Gradient format
To inspect all elements in the hierarchy more effectively, click on the rect format button to switch the rectangle drawing format to Gradient. In the gradient format, the rect format button turns light gray.
In this mode, Winscope reduces the opacity of each rectangle based on its z-ordering; rectangles with higher z-orders are more translucent. This lets you see all the elements in the hierarchy without having to worry about rectangles obscuring each other:
Figure 3. Rectangle gradient.
Opacity format
To change the rectangle drawing format to opacity, click the rect format button. In the opacity format, the rect format button turns dark gray.
In this mode, Winscope draws each rectangle based on its opacity, such as surface or view opacity:
Figure 4. Rectangle opacity.
Wireframe format
To change the rectangle representation to wireframe, click the rect format button. This representation simplifies examining and analyzing individual elements within the hierarchy. In the wireframe format, the rect format button turns into an outline with no shading:
Figure 5. Rectangle wireframe.
Rotation
Use the rotation slider to change the perspective of the rectangles between 0 and 45 degrees, letting you spot scenarios where elements go off screen:
Figure 6. Rectangle rotation.
Spacing
Use the spacing slider to control the spacing between layers, creating a flattened or more spread view for better inspecting elements z-ordering:
Figure 7. Rectangle spacing.
Display and window selection
In the SurfaceFlinger view, when you record data on devices with multiple displays, a menu shows the available displays, letting you select only the displays of interest.
In ViewCapture, when recording multiple system windows, such as notification shade, task bar, and launcher, the menu lists available windows.
Pan and zoom
You can adjust the position of the rectangles either horizontally or vertically by clicking their area and dragging the mouse. For zooming in, zooming out, or resetting the zoom level, use either the scroll wheel or the zoom buttons on the control bar.
Hierarchy
Winscope viewers often include a hierarchy viewer. The viewer in Figure 1 depicts various hierarchies based on the trace you are analyzing. For example, the viewer can display the window hierarchy within WindowManager or the view hierarchy within a System UI window.
For information on specific hierarchy types, see sections on respective traces.
This section describes the general hierarchy usage, such as the Show diff, Show only visible, Flat, and Search features.
Figure 8. Hierarchy controls.
Show diff
When you enable the Show diff feature, Winscope automatically monitors and displays changes between the current and previous states. The Show diff feature highlights removed elements in red, modified elements in blue, and new elements in green. This visual representation lets you quickly identify and understand differences between the two states, making it easier to track changes and identify potential issues.
Figure 9. Show diff hierarchy.
Search and filter
The hierarchy viewer provides a Search feature that uses regular expressions (regex). This filter targets both the element's name and its value (for properties). When the filter matches a child element in the hierarchy, the entire chain of parents up to the tree's root becomes visible, as shown in the following figure:
Figure 10. Search hierarchy.
Show only visible
Use the Show only visible feature to filter out all concealed elements within a hierarchy. By default, Winscope shows both visible and invisible elements. Winscope draws visible elements in black, while invisible ones appear in gray.
Flat
The Flat button reorganizes the hierarchical structure by eliminating the parent-child relationships among elements. This action renders all elements on the same level. When combined with the Show only visible option, the resulting hierarchy displays only the visible elements, excluding their parent elements, as shown in the following figure:
Figure 11. Flat hierarchy.
Properties
Within Winscope, many viewers integrate a properties viewer. This viewer presents various lists of properties associated with an element selected from the hierarchy view. For example, the viewer can show the properties of an activity within WindowManager or those of a view in System UI.
For information on specific properties, see sections on SurfaceFlinger, WindowManager, and View Capture traces.
This section describes the general hierarchy in the Show diff, Search, and Show defaults features.
Show diff
Usage of the Show diff feature is the same as Show diff in the hierarchy view.
Search and filter
Usage of the Search feature is the same as Search in the hierarchy view.
Show defaults
By default, Winscope displays only modified property values, which are
nondefault values for their respective data types. For example, Winscope omits
false for booleans, 0 for integers, null for objects, and [] for arrays.
This streamlining simplifies the list of properties visible to the user.
However, it's beneficial in certain situations to have a comprehensive view of
all element-related information. In such cases, the Show defaults option
reveals all available properties in Winscope, including those with empty or
null values.
Figure 12. Properties defaults.
General shortcuts
Winscope supports the following shortcuts:
Figure 13. General shortcuts.