Repository navigation
Conversation
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Automations to automatically generate PRs for you. |
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
| @@ -0,0 +1,23 @@ | |||
| --- | |||
| title: "PowerSync DevTools for Dart and Flutter" | |||
| description: "Launch PowerSync DevTools in the Dart and Flutter DevTools view you already know!" | |||
There was a problem hiding this comment.
This description reads as promotional copy ("you already know!") rather than a plain summary, and other DevTools pages in this set (e.g. the Node.js page) use a plain, factual description. Rewrite it plainly, e.g. "Open PowerSync DevTools inside Dart and Flutter DevTools during development."
|
|
||
| The PowerSync SDK contributes a DevTools extension to [Dart & Flutter DevTools](https://docs.flutter.dev/tools/devtools/overview). No additional dependencies or setup is required to launch PowerSync DevTools. The extension is included in the `powersync` package from v2.6.0 and activates automatically when a `PowerSyncDatabase` is opened. It is disabled in release builds. | ||
|
|
||
| ## Opening the Extension |
There was a problem hiding this comment.
This heading is a gerund ("Opening"), but it introduces a procedure (the steps below). Rename it to the imperative "Open the Extension" to match headings like "Set Up DevTools" used for procedures elsewhere in this section.
| - In **Android Studio / Intellij**, click the **Flutter DevTools** button in the run toolbar. | ||
| - For apps launched from the command line, see [these instructions](https://docs.flutter.dev/tools/devtools/cli). | ||
|
|
||
| In DevTools, A **powersync** tab appears in the DevTools tab bar alongside the standard panels. If you have multiple databases open, use the dropdown in the top-right corner to switch between them. |
There was a problem hiding this comment.
Typo: "In DevTools, A powersync tab appears" should be lowercase "a".
|  | ||
| </Frame> | ||
|
|
||
| For a complete overview of what PowerSync DevTools has to offer, see [Using DevTools](/tools/devtools/using-devtools). |
There was a problem hiding this comment.
This points to "Using DevTools" for "a complete overview of what PowerSync DevTools has to offer," but that page's opening line scopes itself to "the same tabs in Vite, Nuxt, and Node.js" and doesn't mention Dart/Flutter. A reader arriving from this new page has no confirmation the tabs described there (Sync Status, Data Inspector, Buckets, Streams, Config, Logs) match what they see in the Dart/Flutter extension. Update that page's intro to include Dart/Flutter so the cross-reference holds.
|
|
||
| <Info> | ||
| PowerSync DevTools is currently available for [Vite](/tools/devtools/vite), [Nuxt](/tools/devtools/nuxt), and [Node.js](/tools/devtools/node) apps. | ||
| PowerSync DevTools is currently available for [Vite](/tools/devtools/vite), [Nuxt](/tools/devtools/nuxt), [Node.js](/tools/devtools/node) and [Dart/Flutter](/tools/devtools/dart) apps. |
There was a problem hiding this comment.
The serial comma was dropped when Dart/Flutter was added ("Node.js and Dart/Flutter" vs. the prior "Nuxt, and Node.js"). Restore it for consistency: "..., Node.js, and Dart/Flutter apps."
| ```mermaid | ||
| flowchart LR | ||
| App["Your app<br/>(browser tab or Node process)"] -- "live database" --> Host["Dev server<br/>(Vite, Nuxt, or your Node app)"] | ||
| App["Your app<br/>(browser tab or running process)"] -- "live database" --> Host["Dev server<br/>"] |
There was a problem hiding this comment.
The "Host" node now reads Dev server<br/> with nothing after the line break, since the parenthetical "(Vite, Nuxt, or your Node app)" was removed but the <br/> tag was left in place, so the diagram renders an empty second line. This also doesn't represent the Dart/Flutter flow, which has no separate dev server. Drop the dangling <br/>, and consider whether this diagram needs a distinct path for Dart/Flutter.
| Node.js apps that use `@powersync/node`. | ||
| </Card> | ||
|
|
||
| <Card title="Dart/Flutter" icon="flutter" href="/tools/devtools/dart"> |
There was a problem hiding this comment.
This card calls it "Dart/Flutter", but the same feature is "Dart & Flutter" in its sidebarTitle and "Dart and Flutter" in its page title (tools/devtools/dart.mdx). Pick one form and use it consistently across the title, sidebarTitle, and this card.
| | Vite | `http://localhost:5173/__devtools/__mcp` (use your dev server port) | | ||
| | Nuxt DevTools 4 | `http://localhost:3000/__devtools/__mcp` (use your dev server port) | | ||
| | Node.js | `<url>/__mcp`, where `url` is the value that `enablePowerSyncDiagnostics()` returns | | ||
| | Dart and Flutter | Use the MCP server [built in to the Dart SDK](https://docs.flutter.dev/ai/tools#dart-and-flutter-mcp-server) instead. | |
There was a problem hiding this comment.
The linked Flutter docs page describes the Dart and Flutter MCP server as a separate package (source at github.com/dart-lang/ai, pkgs/dart_mcp_server) that you set up through an editor plugin, not something that ships inside the Dart SDK itself, and the page gives no install/launch instructions that would confirm "built in". Verify this before publishing, or soften the claim to something like "the official Dart and Flutter MCP server" without asserting it's built into the SDK.
|
tools/devtools-overview.mdx line 31 ("Your Vite or Nuxt dev server serves DevTools. In a Node.js app, your app process serves it instead.") wasn't updated for the new Dart/Flutter entry added just above it on this page. The Dart/Flutter extension has no dev server or app process serving it at all, so this sentence is now incomplete for one of the four platforms the page lists. |
This branch was successfully deployed
1 participant
Blocked on the 2.6.0 release of
package:powersync.This replaces the standalone Dart DevTools extension page with one next to those for the JS SDK showing how to open the extension.
Closes #713.