Ship DevTools with dart2wasm #7856

kenzieschmoll · 2024-05-30T16:51:44Z

The DevTools codebase is prepared for building DevTools with dart2wasm thanks to the unblocking work here.

There are still a few requirements that we need to meet before moving this effort forward:

Compare the dart2wasm DevTools build to dart2js and file any issues that come up.

Blocking:

[dart2wasm] iFrame locks position on transition into view flutter#149909
[dart2wasm] PointerInterceptor widget does not behave as intended flutter#151793
Devtools benchmarks fail with dart2wasm on highest optimization level dart-lang/sdk#56664

The text was updated successfully, but these errors were encountered:

kevmoo · 2024-05-30T16:53:39Z

@kenzieschmoll – keep in mind, we can use query param magic to force loading certain versions. So if there are contexts where wasm won't work, we can just disable them. Or we can make loading the wasm version opt-in for testing, etc.

kevmoo · 2024-05-30T16:53:58Z

Ha! just read your last bullet. 🤦

DanTup · 2024-05-31T10:17:21Z

Ensure that the VS Code embedded web views support WasmGC (see background information on Chromium and V8)

The current version of VS Code uses Chromium v120 which sounds like it should support this. However, I don't know if there are things in Electron/VS Code themselves that might impact the user of this. @kenzieschmoll what's the easiest way for me to build DevTools using WASM (can I do it through devtools_tool serve? hacking scripts locally to make this work would be fine for testing).

And when it is running, how do I confirm it is using the wasm version and didn't fall back to js?

kenzieschmoll · 2024-05-31T16:00:40Z

what's the easiest way for me to build DevTools using WASM (can I do it through devtools_tool serve? hacking scripts locally to make this work would be fine for testing).

And when it is running, how do I confirm it is using the wasm version and didn't fall back to js?

Patch the changes from #7867 and https://dart-review.googlesource.com/c/sdk/+/369100. Then run devtools_tool serve --wasm.

If the wasm changes are picked up, you should see main.dart.wasm, main.dart.mjs, and canvaskit/skwasm.js, canvaskit/skwasm.wasm in the loaded sources. Here is what I see locally.

helin24 · 2024-05-31T16:16:24Z

IntelliJ uses JxBrowser version 7.38.2 currently, which includes Chromium 124.0.6367.92 and should support WasmGC.

It's hard for me to tell what version of JCEF IntelliJ uses when that option is chosen by user setting, but JCEF is a few versions behind the CEF library, which currently is using Chromium 125 (https://cef-builds.spotifycdn.com/index.html).

In summary I think either implementation of embedded browser will be fine for wasm.

xster · 2024-05-31T22:31:16Z

@yjbanov the sequencing will likely be that we'll work on shipping devtools in wasm in google after we decide to ship flutter web in wasm in google3

DanTup · 2024-06-04T12:12:58Z

@kenzieschmoll

Patch the changes from #7867 and https://dart-review.googlesource.com/c/sdk/+/369100. Then run devtools_tool serve --wasm.

The first has already landed but I patched in the second. I added "--wasm" to my dart.customDevTools setting. Inside VS Code, it seems to have loaded the JS version:

However if I open in an external browser it loads the wasm version, however it throws and the app doesn't load:

I presume the first issue is that whatever is being used to detect whether wasm is available is failing. @kevmoo is there an easy way for me to review (or step through) these conditions? Looking through flutter_bootstrap.js I found a function that looked like it was doing that which runs:

let o = [0, 97, 115, 109, 1, 0, 0, 0, 1, 5, 1, 95, 1, 120, 0];
return WebAssembly.validate(new Uint8Array(o))

However if I run that myself in the console, it appears to return true, so I think there may be other conditions.

DanTup · 2024-06-04T12:20:15Z

Seems like the issue is that window.crossOriginIsolated is false

The docs here confirm the headers in the CL above are required, but I see those are also set:

It's not clear to me why this value is false. There's a similar issue at microsoft/vscode#183765 from last year about this being the case on Github.dev and a link to a private repo with a fix, which I suspect is just setting the same headers.

DanTup · 2024-06-04T12:42:02Z

I tracked this back to microsoft/vscode#186614. It seems cross-origin-isolatation is currently disabled by VS Code. When it was enabled the were performance issues that resulted in it being reverted.

I tried running code --enable-coi to force this enabled for testing, however the iframe with DevTools in it won't load at all:

Which seems to be because another header is not present:

I don't know the implications of adding that header.

eyebrowsoffire · 2024-06-04T15:51:24Z

Yes, if you're loading the app in an iframe, you will need to set a CORP header for the child document if you want cross origin isolation (which is needed for the multi-threaded rendering that the skwasm renderer does). I don't know exactly how the embedding of this works with VS Code. I think Cross-Origin-Resource-Policy: cross-origin should be fine for this use case, as long as all the assets that devtools uses are also served with Cross-Origin-Resource-Policy: cross-origin.

DanTup · 2024-06-05T10:28:59Z

Thanks! Adding that header on its own didn't work, but then I found I needed allow="cross-origin-isolated" on the iframe. With that, the flags are all true and the wasm version is used - and fails with:

This is the same error I posted above when running outside of VS Code. It's not clear to me if that's a DevTools or wasm bug?

See flutter/devtools#7856 (comment).

Bug: flutter/devtools#7856 Change-Id: I854fbaad9c1e477c3218bd159cd1a6db1aae8e74 Reviewed-on: https://dart-review.googlesource.com/c/sdk/+/369100 Reviewed-by: Kevin Moore <[email protected]> Commit-Queue: Kenzie Davisson <[email protected]> Reviewed-by: Ben Konyi <[email protected]>

kenzieschmoll · 2024-06-05T17:30:53Z

This is the same error I posted above when running outside of VS Code. It's not clear to me if that's a DevTools or wasm bug?

I can't reproduce on Mac, so I am wondering if this is a Windows issue with wasm. CC @eyebrowsoffire

eyebrowsoffire · 2024-06-05T19:03:05Z

@DanTup Could you try building again with --name-section enabled so we get a more useful stack trace? flutter build web --wasm --name-section

DanTup · 2024-06-05T19:20:07Z

@eyebrowsoffire that flag didn't seem to work:

C:\Dev\Google\devtools\packages\devtools_app > C:\Dev\Google\devtools\tool\flutter-sdk\bin\flutter.bat build web --wasm --name-section --pwa-strategy=offline-first --no-tree-shake-icons
Could not find an option named "name-section".

I tried --no-strip-wasm (which I saw in dart-lang/sdk@a98ce03) which initially gave the same error, but Ctrl+refresh resulted in:

Uncaught RuntimeError: illegal cast
    at _isFlutterGAEnabled inner (main.dart.wasm:0x38f4da)
    at _awaitHelperWithTypeCheck closure at org-dartlang-sdk:///dart-sdk/lib/_internal/wasm/lib/async_patch.dart:97:16 (main.dart.wasm:0x1fdf8e)
    at closure wrapper at org-dartlang-sdk:///dart-sdk/lib/_internal/wasm/lib/async_patch.dart:97:16 trampoline (main.dart.wasm:0x1fe083)
    at _rootRunUnary (main.dart.wasm:0x1febae)
    at _CustomZone.runUnary (main.dart.wasm:0x50f355)
    at _Future._propagateToListeners (main.dart.wasm:0x1fe77a)
    at _Future._completeWithValue (main.dart.wasm:0x1fedfc)
    at _Future._asyncCompleteWithValue closure at org-dartlang-sdk:///dart-sdk/lib/async/future_impl.dart:735:29 (main.dart.wasm:0x20fbd6)
    at closure wrapper at org-dartlang-sdk:///dart-sdk/lib/async/future_impl.dart:735:29 trampoline (main.dart.wasm:0x20fbec)
    at _rootRun (main.dart.wasm:0x1fd210)

The code for that method is here:

devtools/packages/devtools_app/lib/src/shared/server/_analytics_api.dart

Line 66 in 56dcf74

Future<bool> _isFlutterGAEnabled() async {

The response from the server appears to be an empty string:

Which I guess is coming from here:

devtools/packages/devtools_shared/lib/src/server/server_api.dart

Lines 70 to 72 in 56dcf74

    
           case apiGetFlutterGAEnabled: 
        
             // Is Analytics collection enabled? 
        
             return _encodeResponse('', api: api);

So possibly this code here is triggering the exception?

      // A return value of 'null' implies Flutter tool has never been run so
      // return false for Flutter GA enabled.
      final responseValue = json.decode(resp!.body);
      enabled = responseValue ?? false;

eyebrowsoffire · 2024-06-05T20:07:33Z

Yes, sorry, I meant --no-strip-wasm, I got the dart compile wasm commands confused with the flutter tool's.

There are no casts in that function from the user code that I can see. I wonder if something is being inlined? You can also pass -O0 and see if that disables some inlining and that might clarify what's going on here a bit.

DanTup · 2024-06-06T16:32:49Z

There are no casts in that function from the user code that I can see

It's assigning responseValue (if not null) to enabled. enabled is a bool, responseValue is a string (and my IDE says responseValue is dynamic. It's not clear to me why this would behave different for wasm though.

Using -O0 I get this (which does seem to line up):

main.dart.mjs:56 Type 'String' is not a subtype of type 'bool' in type cast
main.dart.mjs:56     at _isFlutterGAEnabled inner (http://127.0.0.1:9101/main.dart.wasm:wasm-function[34885]:0x5b2405)
    at _awaitHelper closure at org-dartlang-sdk:///dart-sdk/lib/_internal/wasm/lib/async_patch.dart:83:16 (http://127.0.0.1:9101/main.dart.wasm:wasm-function[62766]:0x8183af)
    at closure wrapper at org-dartlang-sdk:///dart-sdk/lib/_internal/wasm/lib/async_patch.dart:83:16 trampoline (http://127.0.0.1:9101/main.dart.wasm:wasm-function[62772]:0x8184b5)
    at _rootRunUnary (http://127.0.0.1:9101/main.dart.wasm:wasm-function[2992]:0x3057e0)
    at _rootRunUnary tear-off trampoline (http://127.0.0.1:9101/main.dart.wasm:wasm-function[62738]:0x817ef3)
    at _CustomZone.runUnary (http://127.0.0.1:9101/main.dart.wasm:wasm-function[62613]:0x816525)
    at _FutureListener.handleValue (http://127.0.0.1:9101/main.dart.wasm:wasm-function[2985]:0x30556f)
    at _Future._propagateToListeners closure handleValueCallback at org-dartlang-sdk:///dart-sdk/lib/async/future_impl.dart:859:33 (http://127.0.0.1:9101/main.dart.wasm:wasm-function[2963]:0x304f15)

DanTup · 2024-06-06T16:41:00Z

Since that code looks bogus to me, I retried in non-wasm mode and I see errors in the console - however unlike the wasm version, it doesn't stop DevTools loading (which is why I didn't notice it before). In wasm mode, I just get a white page with nothing rendered, but with JS DevTools loads and appears to function.

(@kenzieschmoll this seems like a bug though - that API seems to be hard-coded to return an empty string and the code doesn't seem to handle empty strings, it assumes null or a boolean?)

kenzieschmoll · 2024-06-07T16:10:29Z

this seems like a bug though - that API seems to be hard-coded to return an empty string and the code doesn't seem to handle empty strings, it assumes null or a boolean?).

Yes this regressed recently. Fix is here: #7896

kenzieschmoll · 2024-07-10T16:22:52Z

@DanTup now that the regression with accessing the Flutter store file has been fixed, are you able to verify whether the wasm build works properly when embedded in VS Code now?

DanTup · 2024-07-10T18:26:42Z

cross-origin-isolate is still gated with a flag in VS Code (so normal users can't get a wasm version), but if I:

Run code --enable-coi to enable cross-origin-isolate
Patch in ..add('Cross-Origin-Resource-Policy', 'cross-origin') into the DevTools server
Set customDevTools in VS Code to run with --wasm

Then it loads:

However, I can't interact with the inspector.. clicking on items in the tree just doesn't do anything (no visible selection or anything). I do now have this error in the console, though it appears as the page loads (not when I click) so I'm not sure it's related:

However, if I open externally in the browser, then all is good (clicking in the inspector works), so it does seem like there's more broken in VS Code (I don't know if this might be why COI is still behind a flag or unrelated). I'll need to do some more debugging to try and figure out what's wrong here.

kevmoo · 2024-07-10T18:31:13Z

@DanTup – the cast is likely here:

devtools/packages/devtools_app/lib/src/shared/server/_release_notes_api.dart

Line 32 in 86ef045

if (resp == null || !resp.statusOk || !(json.decode(resp.body) as bool)) {

How hard is it to create a _decodeBoyAsBool function with some debug printing (instead of (json.decode(respo.body) as bool) – so we can see what's happening there?

DanTup · 2024-07-10T19:04:25Z

Ah, thanks for the pointer. I can just use the dev tools to see the network response - and it's a string:

Looks like this was actually fixed recently via #7997 but I didn't have a dependency_override in DDS to get that fix in the server.

I wasn't expecting it, but re-running with that fix included I can use the inspector tree fine :)

Maybe the release notes overlay was partially there absorbing the clicks or something? 🤷‍♂️

So, in summary:

if the new version of devtools_shared gets rolled into the SDK
and we add ..add('Cross-Origin-Resource-Policy', 'cross-origin') to the DevTools server (I don't if there are security implications to consider before doing this)
and we run VS Code with COI enabled (currently code --enable-coi)

Then it does appear to work (at least in my limited testing of clicking around the inspector). I don't know if/when VS Code will enable COI by default though (there's an issue at microsoft/vscode#186614 that I think is related).

kenzieschmoll · 2024-07-10T20:00:22Z

Then it does appear to work (at least in my limited testing of clicking around the inspector). I don't know if/when VS Code will enable COI by default though (there's an issue at microsoft/vscode#186614 that I think is related).

Is there a way we can detect whether this is enabled, and fallback to using the dart2js version of DevTools if it is not?

kevmoo · 2024-07-10T20:04:06Z

@kenzieschmoll – we'll have to ask @eyebrowsoffire – or just try it out. I'm pretty sure we do automatically fallback in most failure cases, just not sure of this one.

DanTup · 2024-07-10T20:05:08Z

Is there a way we can detect whether this is enabled, and fallback to using the dart2js version of DevTools if it is not?

This already happens, because window.crossOriginIsolated is false in that case and the WASM version is only selected when it's true (plus some other conditions noted further up).

DanTup · 2024-07-10T20:06:46Z

But, I think we do need to add that extra header in to the DevTools server, otherwise I think we could load the WASM version but then fail with the error shown above at #7856 (comment).

…ASM when embedded See flutter/devtools#7856 (comment) Change-Id: If9d19eef8f8475e3dddb70db55e6b72e0ceb6f08 Reviewed-on: https://dart-review.googlesource.com/c/sdk/+/374945 Reviewed-by: Kenzie Davisson <[email protected]> Reviewed-by: Ben Konyi <[email protected]> Commit-Queue: Ben Konyi <[email protected]>

eyebrowsoffire · 2024-07-11T23:58:50Z

Note: We do fall back to CanvasKit + JS if window.crossOriginIsolated is false

kenzieschmoll · 2024-10-03T16:26:11Z

This work is complete. DevTools + Wasm will be shipped as an opt-in feature behind a DevTools setting for the Q4 Dart / Flutter stable release. We will aim to turn this on by default for the Q1 2025 stable release, tracked here: #8395

kenzieschmoll added P1 high priority issues at the top of the work list, actively being worked on. dart2wasm labels May 30, 2024

kenzieschmoll mentioned this issue May 30, 2024

Reland migration to use new flutter bootstrapping methods #7865

Merged

kenzieschmoll mentioned this issue May 31, 2024

Add a flag to serve and build commands to use wasm #7867

Merged

DanTup added a commit to Dart-Code/Dart-Code that referenced this issue Jun 5, 2024

Allow COI in DevTools iframe

9fe8a6c

See flutter/devtools#7856 (comment).

kenzieschmoll mentioned this issue Jun 7, 2024

Fix a regression with accessing the Flutter store file. #7896

Merged

kenzieschmoll mentioned this issue Aug 13, 2024

Create a script to generate a benchmark comparison of dart2wasm and dart2js #8195

Merged

kenzieschmoll mentioned this issue Aug 28, 2024

Add wasm opt-in setting #8270

Merged

This was referenced Sep 9, 2024

Added a couple parameters to Event.devtoolsEvent and Event.exception dart-lang/tools#584

Merged

Upgrade to unified_analytics 6.1.3 #8317

Merged

kenzieschmoll self-assigned this Sep 11, 2024

This was referenced Sep 26, 2024

Update LUCI build script to build with wasm #8351

Merged

Unskip the wasm benchmark #8320

Merged

kenzieschmoll closed this as completed Oct 3, 2024

DanTup mentioned this issue Dec 12, 2024

Experimental: Support embedding DevTools in Sidebar views instead of Editor views Dart-Code/Dart-Code#5367

Draft

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ship DevTools with dart2wasm #7856

Ship DevTools with dart2wasm #7856

kenzieschmoll commented May 30, 2024 •

edited

Loading

kevmoo commented May 30, 2024

kevmoo commented May 30, 2024

DanTup commented May 31, 2024

kenzieschmoll commented May 31, 2024

helin24 commented May 31, 2024

xster commented May 31, 2024

DanTup commented Jun 4, 2024

DanTup commented Jun 4, 2024

DanTup commented Jun 4, 2024

eyebrowsoffire commented Jun 4, 2024

DanTup commented Jun 5, 2024

kenzieschmoll commented Jun 5, 2024

eyebrowsoffire commented Jun 5, 2024

DanTup commented Jun 5, 2024 •

edited

Loading

eyebrowsoffire commented Jun 5, 2024

DanTup commented Jun 6, 2024 •

edited

Loading

DanTup commented Jun 6, 2024

kenzieschmoll commented Jun 7, 2024

kenzieschmoll commented Jul 10, 2024

DanTup commented Jul 10, 2024

kevmoo commented Jul 10, 2024

DanTup commented Jul 10, 2024

kenzieschmoll commented Jul 10, 2024

kevmoo commented Jul 10, 2024

DanTup commented Jul 10, 2024

DanTup commented Jul 10, 2024

eyebrowsoffire commented Jul 11, 2024

kenzieschmoll commented Oct 3, 2024

Ship DevTools with dart2wasm #7856

Ship DevTools with dart2wasm #7856

Comments

kenzieschmoll commented May 30, 2024 • edited Loading

kevmoo commented May 30, 2024

kevmoo commented May 30, 2024

DanTup commented May 31, 2024

kenzieschmoll commented May 31, 2024

helin24 commented May 31, 2024

xster commented May 31, 2024

DanTup commented Jun 4, 2024

DanTup commented Jun 4, 2024

DanTup commented Jun 4, 2024

eyebrowsoffire commented Jun 4, 2024

DanTup commented Jun 5, 2024

kenzieschmoll commented Jun 5, 2024

eyebrowsoffire commented Jun 5, 2024

DanTup commented Jun 5, 2024 • edited Loading

eyebrowsoffire commented Jun 5, 2024

DanTup commented Jun 6, 2024 • edited Loading

DanTup commented Jun 6, 2024

kenzieschmoll commented Jun 7, 2024

kenzieschmoll commented Jul 10, 2024

DanTup commented Jul 10, 2024

kevmoo commented Jul 10, 2024

DanTup commented Jul 10, 2024

kenzieschmoll commented Jul 10, 2024

kevmoo commented Jul 10, 2024

DanTup commented Jul 10, 2024

DanTup commented Jul 10, 2024

eyebrowsoffire commented Jul 11, 2024

kenzieschmoll commented Oct 3, 2024

kenzieschmoll commented May 30, 2024 •

edited

Loading

DanTup commented Jun 5, 2024 •

edited

Loading

DanTup commented Jun 6, 2024 •

edited

Loading