Using the Frame Debugger

The Frame Debugger is available from the Windows->Frame Debugger menu item or the Frame Debugger toolbar icon.

The Frame Debugger allows you to inspect each draw call that is made within a frame of your application and access the states and resources being used.

Frame Debugger Layout

FrameDebugger.png

There are four important regions within the Frame Debugger.

1) PerfMarker and Draw Call Tree

Along the left side of the window is a tree view that displays a hierarchical list of PerfMarkers and Draw Calls that make up the current frame. The PerfMarker tree view initially contains two columns of data, the first column displays either the PerfMarker name or the draw call API name. The second column displays the draw call index for draw calls or the range of contained draw call indices for PerfMarkers. If the "Get GPU Time" button is pressed, a third column appears displaying the GPU time (in milliseconds) for each PerfMarker and draw call.

The tree view will show all API calls which are considered draw calls. In some situations, it may be useful to exclude all non-draw and non-dispatch calls from this list (such as Clear, Copy* and so on). There is a check box labeled "Filter all non-draw/dispatch draw calls" in the General Settings dialog. If this is checked, only draw* and dispatch* calls will be considered draw calls.

You can set the selected draw call in the frame debugger by selecting an item in the PerfMarker tree view. If you select a row that represents a draw call, that draw call will become the selected draw call. If you select a row that represents a PerfMarker, the first draw call contained in that PerfMarker will become the selected draw call. In addition, the draw call slider will highlight the entire range of draw calls contained by the PerfMarker by painting a blue highlight mark under the bars corresponding to those draw calls.

By default, the PerfMarkers and draw calls are displayed sequentially, though you can click on the GPU Time column header to sort the entries by GPU Time. This allows you to easily see the most expensive draw calls or PerfMarkers in the frame. If the frame uses D3D PerfMarkers, the items will be sorted hierarchically so that only items that exist at the same depth in the tree view will be sorted against each other.

Using the context menu in the PerfMarker tree view, you can:

PerfMarkerView_ContextMenu.png

2) Stage View Control

To the right of the PerfMarker and Draw Call Tree is a control that opens a layout for each stage of the graphics pipeline. Each layout gives the user access to the resources used in the currently selected draw call. Clicking a stage will open the associated layout in the Content Pane. The image above shows a DX11 application with a custom layout. There are differences between the DX11, and OpenGL stage views as they each have different stages in the graphics pipeline.

3) Draw Call Slider

Located along the bottom of the window is a bar graph / slider that allows you to select which draw call you are investigating and immediately identify how costly it is compared to other draw calls. The height of the bar represents the relative time that the draw call took to execute relative to the most expensive draw call in the current frame. The vertical orange bar represents the currently selected draw call and the blue region around it shows a magnified view of the draw calls on either side of the selected call. The heights of the bars do not change, but they do become wider. Clicking anywhere on the bar graph area will change the selected draw call. Clicking in the blue zoomed area allows easy selection of the next or previous draw call. You can also click and drag the orange bar to continually change the selected draw call and get a quick understanding of how the application is rendering. If a PerfMarker is selected in the PerfMarker tree view, then a blue highlight will be painted under each bar which represents a draw call that is contained by the selected PerfMarker.

The small blue area to the top right of the bar graph can also be used to smoothly scroll through the frame. Move the orange bar a little to increase / decrease the selected draw call by one; the further the orange bar is moved from the center, the faster the slider moves through the frame.

Above the slider is text describing the selected call. It includes the current draw call index and the total number in the current frame. Following that is the amount of GPUTime the draw call took to execute, along with the name of the draw call and the associated parameters. Applications which use PerfMarkers will have the PerfMarker prepended to the draw call name. Similarly, DirectX11 applications which use DeferredContexts will have the ExecuteCommandList call prepended to the actual name of the selected API call.

Using the context menu in the draw call slider, you can:

DrawCallSlider_ContextMenu.png

Draw Call Slider key accelerators:

4) Layout Content Pane

To the right of the Stage View Control is the Layout Content Pane. When the user clicks on one of the stages in the stage view control the corresponding layout is opened in this area. In the first screenshot at the top of this page, the user has defined their own custom layout in "User Layout 1" and we can see it displayed in the content pane. When the selected draw call changes, the data shown in the Layout Content Pane will get updated to show data for the selected draw call.

Below is a screenshot of the default Pixel Shader stage layout.

FrameDebugger2.png