Skip to content

Commit ac67b9a

Browse files
committed
Add print statements info
1 parent 04e4f07 commit ac67b9a

File tree

3 files changed

+57
-1
lines changed

3 files changed

+57
-1
lines changed

docs/workspace/content-panel.md

Lines changed: 57 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ The Code editor is built on **Monaco Editor** (the same editor that powers VS Co
8282

8383
The Debug Console is a dedicated output panel in Dreamflow that displays real-time logs and debug information from your Flutter application. This includes:
8484

85-
- Print statements from your Dart code
85+
- [Print statements from your Dart code](#print-statements-from-your-dart-code)
8686
- Flutter framework messages
8787
- Hot reload notifications
8888
- Build process output
@@ -115,6 +115,62 @@ The Debug Console is a dedicated output panel in Dreamflow that displays real-ti
115115
</div>
116116
<p></p>
117117

118+
### Print Statements From Your Dart Code
119+
120+
You can use `print()` or `debugPrint()` in your code to send messages to the Debug Console. These print statements are helpful for tracking user actions, data updates, or debugging logic while your app runs in preview mode.
121+
122+
#### Quick Example
123+
124+
You can add a log message directly in code when a user taps the **Add Habit** button like this:
125+
126+
```dart
127+
ElevatedButton(
128+
onPressed: () {
129+
// your existing logic here
130+
print('Habit Added');
131+
},
132+
child: Text('Add Habit'),
133+
);
134+
```
135+
136+
![add-print-statement.avif](imgs/add-print-statement.avif)
137+
138+
#### Other Examples
139+
140+
```dart
141+
// Simple
142+
print('HomePage built');
143+
144+
// Safer for long text (JSON, lists, etc.)
145+
debugPrint('Fetched ${items.length} items: ${items.toString()}');
146+
147+
// With context
148+
debugPrint('[Auth] Sign-in tapped for email=$email');
149+
150+
// Multi-line (debugPrint handles long lines gracefully)
151+
debugPrint(jsonEncode(responseData));
152+
```
153+
154+
#### Example Agent Prompt
155+
156+
You can use the Dreamflow Agent to automatically add print statements wherever required. Here’s a sample prompt:
157+
158+
```
159+
Add a print statement to log habit status in debug console whenever its value changes.
160+
```
161+
162+
![add-print-statement-via-agent.avif](imgs/add-print-statement-via-agent.avif)
163+
164+
:::tip
165+
166+
- Prefer `debugPrint` for long or multi-line content.
167+
- **Never** log secrets such as access tokens and passwords.
168+
- Add short **tags** (`[API]`, `[DB]`, `[Auth]`) so you can filter quickly.
169+
- For more advanced logging with log levels, timestamps, and formatting, consider using the following Dart packages:
170+
- [**logging**](https://pub.dev/packages/logging): a lightweight logging framework from the Dart team.
171+
- [**logger**](https://pub.dev/packages/logger): a popular and feature-rich logger with colorful, structured output.
172+
:::
173+
118174
## FAQs
119175

120176
<details>
166 KB
Binary file not shown.
84.2 KB
Binary file not shown.

0 commit comments

Comments
 (0)