@@ -33,18 +33,6 @@ You can do this online, and it only takes a minute.
33
33
34
34
2 . Review the [ DevTools style guide] ( STYLE.md ) , which uses a combination of Dart and Flutter best practices.
35
35
36
- ## Table of contents
37
- 1 . [ Developing for DevTools] ( #developing-for-devtools )
38
- - [Set up your DevTools environment](#set-up-your-devtools-environment)
39
- - [Workflow for making changes](#workflow-for-making-changes)
40
- - [Keeping your fork in sync](#keeping-your-fork-in-sync)
41
- 2 . [ Running and debugging DevTools] ( #running-and-debugging-devtools )
42
- - [ Frontend only (most common)] ( #frontend-only-most-common )
43
- - [ Frontend + DevTools server] ( #frontend--devtools-server )
44
- - [ DevTools + VS Code integration] ( #devtools--vs-code-integration-ide-embedded-devtools-experience )
45
- 3 . [ Testing for DevTools] ( #testing-for-devtools )
46
- 4 . [ Appendix] ( #appendix )
47
-
48
36
## Developing for DevTools
49
37
50
38
### Set up your DevTools environment
@@ -100,9 +88,9 @@ of launch configurations for running and debugging DevTools:
100
88
101
89
### Workflow for making changes
102
90
103
- 1 . Change your local Flutter SDK to the latest flutter candidate branch :
91
+ 1 . Ensure your local Flutter SDK, DevTools dependencies, and generated code are up-to-date :
104
92
```sh
105
- dt update-flutter-sdk --update-on-path
93
+ dt sync --update-on-path
106
94
```
107
95
> Warning: this will delete any local changes in your Flutter SDK you checked out from git.
108
96
@@ -111,23 +99,18 @@ of launch configurations for running and debugging DevTools:
111
99
git checkout -b myBranch
112
100
```
113
101
114
- 3 . Ensure your branch, dependencies, and generated code are up-to-date:
115
- ```sh
116
- dt sync
117
- ```
118
-
119
- 4 . Implement your changes, and commit to your branch:
102
+ 3 . Implement your changes, and commit to your branch:
120
103
```sh
121
104
git commit -m “description”
122
105
```
123
106
If your improvement is user-facing, [document it](packages/devtools_app/release_notes/README.md) in the same PR.
124
107
125
- 5 . Push to your branch to GitHub:
108
+ 4 . Push to your branch to GitHub:
126
109
```sh
127
110
git push origin myBranch
128
111
```
129
112
130
- 6 . Navigate to the [ Pull Requests] ( https://github.com/flutter/devtools/pulls ) tab in the main
113
+ 5 . Navigate to the [ Pull Requests] ( https://github.com/flutter/devtools/pulls ) tab in the main
131
114
[ DevTools repo] ( https://github.com/flutter/devtools ) . You should see a popup to create a pull
132
115
request from the branch in your cloned repo to the DevTools ` master ` branch. Create a pull request.
133
116
@@ -137,9 +120,18 @@ request from the branch in your cloned repo to the DevTools `master` branch. Cre
137
120
```
138
121
dt sync
139
122
```
140
- This will pull the latest code from the upstream DevTools, upgrade dependencies, and perform code generation.
141
-
142
- - If you want to upgrade dependencies and re-generate code (like mocks), but do not want to merge ` upstream/master ` , instead run
123
+ This command will:
124
+ - pull the latest code from the upstream DevTools master branch
125
+ - update `tool/flutter-sdk` to the Flutter version DevTools is built and tested
126
+ with on the CI
127
+ - upgrade dependencies
128
+ - perform code generation
129
+
130
+ Optionally, pass the `--update-on-path` flag to also update your local Flutter SDK
131
+ git checkout along with the `tool/flutter-sdk`.
132
+
133
+ - If you want to upgrade dependencies and re-generate code (like mocks), but do
134
+ not want to merge ` upstream/master ` or update your Flutter SDK version, instead run
143
135
```
144
136
dt generate-code --upgrade
145
137
```
@@ -160,133 +152,14 @@ request from the branch in your cloned repo to the DevTools `master` branch. Cre
160
152
161
153
## Running and debugging DevTools
162
154
163
- There are a few different environments that you may need to run DevTools in. After running DevTools
164
- in one of the environments below, connect to a test application to debug DevTools runtime tooling
165
- (the majority of DevTools tools). See the
166
- [ Connect DevTools to a test application] ( #connect-devtools-to-a-test-application ) section below.
167
-
168
- ### Frontend only (most common)
169
-
170
- Most of the time, you will not need to run DevTools with the DevTools server to test your changes.
171
- You can run DevTools in debug mode as either a Flutter web or Flutter desktop app.
172
-
173
- > Note: though DevTools is shipped as a Flutter Web app, we recommend developing as a Flutter
174
- Desktop app whenever possible for a more efficient development workflow. Please see the
175
- [ running on Flutter desktop] ( #running-devtools-on-flutter-desktop ) section below for instructions.
176
-
177
- - To run DevTools as a Flutter web app ** from VS Code** , run with the ** devtools** configuration and the "Chrome" device
178
- - To run with experiments enabled, run from VS Code with the **devtools + experiments** configuration
179
- - To run DevTools as a Flutter web app ** from the command line** , run ` flutter run -d chrome `
180
- - To run with experiments enabled, add the flag `--dart-define=enable_experiments=true`
181
-
182
- ### Frontend + DevTools server
183
-
184
- To develop with a workflow that exercises the DevTools server <==> DevTools client connection,
185
- you will need to perform the following set up steps (first time only).
186
-
187
- 1 . Clone the [ Dart SDK] ( https://github.com/dart-lang/sdk ) fron GitHub.
188
- 2 . The ` LOCAL_DART_SDK ` environment variable needs to point to this path: ` export LOCAL_DART_SDK=/path/to/dart/sdk `
189
-
190
- If you are also developing server side code (e.g. the ` devtools_shared ` package), you will need to add a
191
- dependency override to ` sdk/pkg/dds/pubspec.yaml ` .
192
-
193
- ``` yaml
194
- dependency_overrides :
195
- devtools_shared :
196
- path : relative/path/to/devtools/packages/devtools_shared
197
- ` ` `
198
-
199
- Then you can run DevTools with the server by running the following from anywhere under the ` devtools/` directory:
200
- 1. To run the DevTools web app in release mode, served with the DevTools server (this emulates the production environment) :
201
- ` ` `
202
- dt serve
203
- ` ` `
204
- 2. To run the DevTools web app in debug mode, with full debugging support, and with a connection to a live DevTools server :
205
- ` ` ` sh
206
- dt run
207
- ` ` `
208
-
209
- Option 2 is useful for a quicker development cycle. The DevTools build time will be faster, and you will be
210
- able to connect the DevTools web app to an IDE or another DevTools instance for debugging purposes.
211
-
212
- To see the full list of arguments available for either command, please pass the `-h` flag.
213
-
214
- # ## IDE-embedded DevTools experience
215
-
216
- # ### DevTools + VS Code integration
217
-
218
- To test the integration with VS Code, you can set up the Dart VS Code extension to run DevTools
219
- and the server from your local source code. Follow the
220
- [Frontend + DevTools server](#frontend--devtools-server) setup instructions above, and make sure
221
- you have version v3.47 or newer of the Dart extension for VS Code.
222
-
223
- Open your VS Code settings (Run the **Preferences : Open User Settings (JSON)** command from the
224
- command palette (`F1`)) and add the following to your settings :
225
-
226
- ` ` ` js
227
- "dart.customDevTools": {
228
- "path": "/absolute/path/to/devtools",
229
- "env": {
230
- "LOCAL_DART_SDK": "/absolute/path/to/sdk"
231
- // Path to the Flutter SDK that will be used to build DevTools. This may
232
- // be the path to the included Flutter SDK under the tool/ directory or
233
- // the path to your local Flutter SDK git checkout.
234
- "FLUTTER_ROOT": "/absolute/path/to/devtools/tool/flutter-sdk"
235
- },
236
- "args": [
237
- // Arguments that will be passed along to the ` dt serve` command.
238
- ],
239
- },
240
- ```
241
-
242
- This instructs VS Code to run the ` dt serve ` command instead of running ` dart devtools ` .
243
- You must set the ` LOCAL_DART_SDK ` and ` FLUTTER_ROOT ` env variables correctly for the script to work.
244
-
245
- Next, restart VS Code (or run the ** Developer: Reload Window** command from the command palette (` F1 ` ))
246
- and DevTools will be run from your local source code. After making any code changes to DevTools or the
247
- server, you will need to re-run the ** Developer: Reload Window** command to rebuild and restart the server.
248
-
249
- #### DevTools + IntelliJ integration
250
-
251
- Follow instructions in the Flutter-IntelliJ repo's ` CONTRIBUTING ` guide: [ #developing-with-local-devtools] ( https://github.com/flutter/flutter-intellij/blob/master/CONTRIBUTING.md#developing-with-local-devtools )
155
+ Please see [ DEBUGGING.md] ( ) for guidance on running and debugging DevTools.
252
156
253
157
## Testing for DevTools
254
158
255
- Please see [ TESTING.md] ( TESTING.md ) for guidance on running and writing tests.
159
+ Please see [ TESTING.md] ( ) for guidance on running and writing tests.
256
160
257
161
## Appendix
258
162
259
- ### Connect DevTools to a test application
260
-
261
- For working on most DevTools tools, a connection to a running Dart or Flutter app is required. Run any Dart or Flutter app of your choice to
262
- connect it to DevTools. Consider running [ veggieseasons] ( https://github.com/flutter/samples/tree/main/veggieseasons ) or another Flutter sample since those apps have plenty of interesting
263
- code to debug.
264
- 1 . Run your Dart or Flutter app.
265
- > Note: some DevTools features may be unavailable depending on the test app platform (Flutter native, Flutter web, Dart CLI, etc.) or run mode
266
- (debug, profile) you choose.
267
- 2 . Copy the URI printed to the command line (you will use this URI to connect to DevTools).
268
-
269
- ```
270
- "A Dart VM Service on iPhone 14 Pro Max is available at: <copy-this-uri>"
271
- ```
272
- 3 . Paste this URI into the connect dialog in DevTools and click "Connect".
273
-
274
- 
275
-
276
- ### Running DevTools on Flutter Desktop
277
-
278
- For a faster development cycle with hot reload, you can run DevTools on Flutter desktop. Some DevTools
279
- features only work on the web, like the embedded Perfetto trace viewer, DevTools extensions, or WASM support,
280
- but the limitations on the desktop app are few.
281
-
282
- To run DevTools with the desktop embedder, you can run ` flutter run -d macos ` from ` devtools/packages/devtools_app ` ,
283
- or you can run DevTools from your IDE with the ` macOS ` device selected.
284
-
285
- If this fails, you may need to run ` flutter create . ` from ` devtools/packages/devtools_app ` to generate
286
- the updated files for your platform. If you want to run DevTools on Flutter desktop for Windows or Linux,
287
- you will need to generate the files for this platform using the ` flutter create . ` command, and then run using
288
- ` flutter run -d <windows or linux> ` .
289
-
290
163
### Enable and activate DCM (Dart Code Metrics)
291
164
292
165
Enabling and activating DCM is optional. When you open a PR, the CI bots will show you any DCM warnings introduced
0 commit comments