Summary of "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.