|
| 1 | +--- |
| 2 | +title: Use the developer dashboard |
| 3 | +description: Use the developer dashboard to get more information about the SharePoint Framework components on the page |
| 4 | +ms.date: 08/29/2018 |
| 5 | +ms.prod: sharepoint |
| 6 | +--- |
| 7 | + |
| 8 | +# Use the developer dashboard |
| 9 | + |
| 10 | +When debugging your SharePoint Framework components, you can get additional information about how they work and interact with other components on the page using the developer dashboard. |
| 11 | + |
| 12 | + |
| 13 | + |
| 14 | +Developer dashboard is available on modern SharePoint pages as well as on the hosted and local SharePoint Workbench. |
| 15 | + |
| 16 | +## Open developer dashboard |
| 17 | + |
| 18 | +To open the dashboard, on the keyboard press **CTRL+F12**. When the dashboard is open, to close it, press **CTRL+F12** again. |
| 19 | + |
| 20 | +> The **CTRL+F12** hotkey is the same on all operating systems. |
| 21 | +
|
| 22 | +## Information available in the developer dashboard |
| 23 | + |
| 24 | +The developer dashboard provides you with additional information about all SharePoint Framework components present on the page. This information helps you solve performance- and other problems in your SharePoint Framework solutions. |
| 25 | + |
| 26 | +### Trace |
| 27 | + |
| 28 | +When building SharePoint Framework components, you can use the built-in logger to log information in your code. Logged messages will appear on the **Trace** tab in the developer dashboard. |
| 29 | + |
| 30 | + |
| 31 | + |
| 32 | +Following, is how you would log a verbose message to the SharePoint Framework developer dashboard: |
| 33 | + |
| 34 | +```ts |
| 35 | +// [...] shortened for brevity |
| 36 | +import { Log } from '@microsoft/sp-core-library'; |
| 37 | + |
| 38 | +const LOG_SOURCE: string = 'HelloWorldWebPart'; |
| 39 | + |
| 40 | +export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> { |
| 41 | + public render(): void { |
| 42 | + Log.verbose(LOG_SOURCE, 'Rendering...', this.context.serviceScope); |
| 43 | + // [...] shortened for brevity |
| 44 | + } |
| 45 | +} |
| 46 | +``` |
| 47 | + |
| 48 | +The logged message will appear in the developer dashboard. |
| 49 | + |
| 50 | + |
| 51 | + |
| 52 | +Using the built-in logger, you can log verbose (`Log.verbose()`), information (`Log.info()`), warning (`Log.warn()`) and error (`Log.error()`) messages. |
| 53 | + |
| 54 | +> [!IMPORTANT] |
| 55 | +> Messages logged using the built-in SharePoint Framework logger are visible only in the developer dashboard and are lost after the page is refreshed. If you need a logging solution for use in production, consider using other solutions such as Application Insights. |
| 56 | +
|
| 57 | +### Performance |
| 58 | + |
| 59 | +The **Performance** tab in the developer dashboard displays timing information for all SharePoint Framework components on the current page. |
| 60 | + |
| 61 | + |
| 62 | + |
| 63 | +For each component, the developer dashboard shows how much time was spent on waiting on the response from the server, loading the module, intializing the component, retrieving the data and rendering the component. If the page loads slower after adding your component to the page, you can use this information to verify if any particular stage in the lifecycle of your component is slowing down the page. |
| 64 | + |
| 65 | +### Manifests |
| 66 | + |
| 67 | +The **Manifests** page in the developer dashboard shows information about the manifests of all SharePoint Framework components present on the current page. |
| 68 | + |
| 69 | + |
| 70 | + |
| 71 | +Using the information from the manifests you can verify what components are present on the page, which version of each component is being loaded and from which URL. This information is helpful if you need to ensure that your component was correctly updated and is loading from the right ___location with the right properties. |
0 commit comments