Introduction to SharePoint Framework (SPFx) debug toolbar

Introduction

This document summarizes the SharePoint Framework (SPFx) debug toolbar — a visual tool that appears during SPFx developer debugging sessions to help debug components directly on real pages.

What it is

• A green visual debug toolbar for SPFx developer sessions that appears when a page is loaded in debug mode via the debug query parameter in the URL.
• Designed to replace many workbench use-cases by enabling debugging on real pages with real page context and other components present.
• Works across all SPFx solution types: web parts, application customizers, Adaptive Card Extensions (ACEs), etc.

How to start and general workflow

• Launch a local debug session (dev server).
• Open the debug URL on a page where your component is placed. The toolbar appears for that debugging session and is visible only to developers.
• You can hide the bar for visual tests or screenshots; reloading the page (for example, Ctrl+R) restores it because the debug state comes from the URL query parameter.
• Use the Stop button to end debugging and reset cache/session. The toolbar’s Stop triggers a clean session/reset so the page stops loading from the dev server.

Toolbar controls and features

Buttons and what they do:

• Show info Displays that you’re in debug mode and shows the debug manifest loaded for the session.

• Hide bar Temporarily hides the green debug bar (useful for screenshots or visual verification).

• Developer dashboard Toggles an in-page developer dashboard with trace/log views, performance measurements, and a manifests tab listing all loaded manifests for components on the page. More accessible than the older hidden hotkey (Ctrl+F12).

• Links Quick links to the SPFx documentation and the SPFx issue list (for filing bugs/questions or searching existing issues).

• Stop debugging Stops the dev server/debugging and performs a cache reset so you can get a clean reload.

Developer dashboard details

The developer dashboard exposes:

• Trace/log entries for page and component loads
• Performance tab — timing and where time is spent during loading
• Manifest tab — full list of loaded manifests (useful to inspect what’s being loaded and in what order)

These tools are useful to diagnose performance issues, component load order, and runtime errors.

Edit-mode / Web part context features

When the page is in edit mode you can select a web part and use a web part menu to view:

• Web part data (the serialized properties/context)
• Web part manifest

This is helpful for scenarios that require web part context, for example when creating or automating pages via Page APIs.

Feedback and telemetry

• The toolbar may occasionally prompt developers for feedback using Microsoft’s feedback system (a short survey).
• The primary NPS-like question (“How satisfied are you…”) is the most important; if you’re short on time they ask that you at least answer that question.
• The SPFx team reads feedback and uses it to prioritize improvements.

Support & next steps

• File issues on the SPFx issue list (links are available from the toolbar).
• Use Microsoft Premier support if available.
• Documentation is linked from the toolbar; the team plans additional features and future videos/demos.

Speakers / sources

• Siwan — Principal Product Manager, SharePoint Framework / open-source community
• Bert Jansen — Principal Product Manager, SPFx