added additional content for using the cpu usage tool, how its helpful (#9800)

* added additional content for using the cpu usage tool, how its helpful

* added the shortcut info

* added new screenshots, removed outdated text

* edited md file to reflect pr comments

* changed underscores to hyphens in png images

* updated image names in md file, updated image with steps in lines 79-82, fixed line 96, fixed line 115

Co-authored-by: Misty Hays <[email protected]>

Author: mistymadonna

docs/profiling/cpu-usage.md

@@ -14,7 +14,11 @@ ms.workload:
 ---
 # Analyze CPU usage without debugging in the Performance Profiler (C#, Visual Basic, C++, F#)
 
-A good way to start investigating performance issues in your app is to understand its CPU usage. The **CPU Usage** performance tool shows the CPU time and percentage spent executing code in C++, C#/Visual Basic, and JavaScript apps.
+A good way to start investigating performance issues in your app is to understand its CPU usage. The **CPU Usage** performance tool shows the CPU time and percentage spent executing code in C++, C#/Visual Basic, and JavaScript apps. If you need to diagnose a slow-down or a process hang in your team’s codebase, the CPU Usage tool can help you diagnose the issue with your team’s production code. The tool provides automatic insights and various views of your data so that you can analyze and diagnose performance issues.
+
+The tool is also helpful for DevOps scenarios, such as when a customer reports that some requests or orders are not getting through to the retail website during peak season. Often, the issues are in production, and it is challenging to debug at that moment, but this tool can help you capture enough information and evidence of the issue. After collecting a trace file, the analysis can quickly help you understand potential causes and give suggestions within the context of your code so that you can take the next steps to fix the issue.
+
+The **CPU Usage** tool is helpful for both local trace sessions and production. It can also be initiated by using the keyboard shortcut, **Alt+F2**, and then **CPU Usage** or by opening an already collected trace using a tool like dotnet-trace or dotnet-monitor.
 
 The CPU Usage tool can run on an open Visual Studio project, on an installed Microsoft Store app, or attached to a running app or process. You can run the CPU Usage tool with or without debugging. For more information, see [Run profiling tools with or without the debugger](../profiling/running-profiling-tools-with-or-without-the-debugger.md).
 
@@ -29,21 +33,21 @@ Usually, the local machine best replicates installed app execution. To collect d
 
 1. In the Visual Studio project, set the solution configuration to **Release** and select **Local Windows Debugger** (or **Local Machine**) as the deployment target.
 
-    ![Select Release and Local Machine](../profiling/media/cpuuse_selectreleaselocalmachine.png "Select Release and Local Machine")
+    ![Select Release and Local Machine](../profiling/media/vs-2022/cpu-use-select-release.png "Select Release")
 
 1. Select **Debug** > **Performance Profiler**.
 
 1. Under **Available tools**, select **CPU Usage**, and then select **Start**.
 
-    ![Select CPU Usage](../profiling/media/cpuuse_lib_choosecpuusage.png "Select CPU Usage")
+    ![Select CPU Usage](../profiling/media/vs-2022/cpu-use-lib-choose-cpu-usage.png "Select CPU Usage")
 
 4. After the app starts, the diagnostic session begins and displays CPU usage data. When you're finished collecting data, select **Stop Collection**.
 
-   ![Stop CPU Usage data collection](../profiling/media/cpu_use_wt_stopcollection.png "Stop CPU Usage data collection")
+   ![Stop CPU Usage data collection](../profiling/media/vs-2022/cpu-use-wt-stop-collection.png "Stop CPU Usage data collection")
 
    The CPU Usage tool analyzes the data and displays the report.
 
-   ![CPU Usage report](../profiling/media/cpu_use_wt_report.png "CPU Usage report")
+   ![CPU Usage report](../profiling/media/vs-2022/cpu-use-wt-report.png "CPU Usage report")
 
 ## Analyze the CPU Usage report
 
@@ -68,10 +72,10 @@ To view the call tree, select the parent node in the report. The **CPU Usage** p
 #### <a name="BKMK_Call_tree_structure"></a> Call tree structure
 
 ::: moniker range=">=vs-2019"
-![Call tree structure](../profiling/media/vs-2019/cpu-use-wt-getmaxnumbercalltree-annotated.png "Call tree structure")
+![Call tree structure](../profiling/media/vs-2022/cpu-use-wt-call-tree-annotated.png "Call tree structure")
 ::: moniker-end
 ::: moniker range="vs-2017"
-![Call tree structure](../profiling/media/cpu_use_wt_getmaxnumbercalltree_annotated.png "Call tree structure")
+![Call tree structure](../profiling/media/vs-2022/cpu-use-wt-call-tree-annotated.png "Call tree structure")
 ::: moniker-end
 
 |Image|Description|
@@ -85,34 +89,30 @@ To view the call tree, select the parent node in the report. The **CPU Usage** p
 
 System and framework functions that are executed by your code are called *external code*. External code functions start and stop the app, draw the UI, control threading, and provide other low-level services to the app. In most cases, you aren't interested in external code, so the CPU Usage call tree gathers the external functions of a user method into one **[External Code]** node.
 
-To view the call paths of external code, on the main diagnostic report page (right pane), select **Show External Code** from the **Filter** dropdown, and then select **Apply**. The **Call Tree** view of the **CPU Usage** page then expands the external code calls. (The **Filter** dropdown is available on the main diagnostic page, not the detailed views.)
+To view the call paths of external code, switch the current view to the **Call Tree** view or right-click and select **View in Call Tree**.
 
-![Show External Code](../profiling/media/cpu_use_wt_filterview.png "Show External Code")
+![Show Call Tree](../profiling/media/vs-2022/cpu-use-wt-call-tree-view.png "Show Call Tree")
 
-Many external code call chains are deeply nested, so the width of the chain can exceed the display width of the **Function Name** column. The function names then appear as **...**.
+Many external code call chains are deeply nested, so the width of the chain can exceed the display width of the **Function Name** column. The function names then appear as shown in the following image.
 
-![Nested external code in the call tree](../profiling/media/cpu_use_wt_showexternalcodetoowide.png "Nested external code in the call tree")
+![Nested external code in the call tree](../profiling/media/vs-2022/cpu-use-wt-show-external-code.png "Nested external code in the call tree")
 
 To find a function name you're looking for, use the search box. Hover over the selected line or use the horizontal scroll bar to view the data.
 
 ::: moniker range=">=vs-2019"
-![Search for nested external code](../profiling/media/vs-2019/cpu-use-wt-showexternalcodetoowide-found.png "Search for nested external code")
+![Search for nested external code](../profiling/media/vs-2022/cpu-use-wt-search.png "Search for nested external code")
 ::: moniker-end
 ::: moniker range="vs-2017"
-![Search for nested external code](../profiling/media/cpu_use_wt_showexternalcodetoowide_found.png "Search for nested external code")
+![Search for nested external code](../profiling/media/vs-2022/cpu-use-wt-search.png "Search for nested external code")
 ::: moniker-end
 
 ### <a name="BKMK_Asynchronous_functions_in_the_CPU_Usage_call_tree"></a> Asynchronous functions in the CPU usage call tree
 
  When the compiler encounters an asynchronous method, it creates a hidden class to control the method's execution. Conceptually, the class is a state machine. The class has compiler-generated functions that asynchronously call the original methods, and the callbacks, scheduler, and iterators needed to run them. When a parent method calls the original method, the compiler removes the method from the execution context of the parent, and runs the hidden class methods in the context of the system and framework code that controls app execution. The asynchronous methods are often, but not always, executed on one or more different threads. This code appears in the **CPU Usage** call tree as children of the **[External Code]** node immediately below the top node of the tree.
 
-In the following example, the first two nodes under **[External Code]** are the compiler-generated methods of the state machine class. The third node is the call to the original method.
-
-![Asynchronous node](media/cpu_use_wt_getmaxnumberasync_selected.png "Asynchronous node")
-
 Expand the generated methods to show what's going on:
 
-![Expanded asynchronous node](media/cpu_use_wt_getmaxnumberasync_expandedcalltree.png "Expanded asynchronous node")
+![Expanded asynchronous node](media/vs-2022/cpu-use-wt-expanded-call-tree.png "Expanded asynchronous node")
 
 - `MainPage::GetMaxNumberAsyncButton_Click` just manages a list of the task values, computes the maximum of the results, and displays the output.