Skip to content

[dev_compiler] Support widget inspector via expression compilation #44813

@annagrin

Description

@annagrin

Issue

Widget inspector for web platform does not show layout

Repro

  • Create a flutter project with following code:
// @dart=2.9

import 'package:flutter/widgets.dart';

void main() {
  return runApp(
    Column(children: [
    const Center(
      child:
        Text('Hello, world!',
          key: Key('title'),
          textDirection: TextDirection.ltr
        )
      )
    ]
    ));
}
  • Start debugging in VSCode (for web plaftorm)
  • Open devtools widget inspector page
  • Observe empty layout

image

Expected result (from iPhone simulator):

image

How to see the evaluated expression and result in chrome

  • Start VSCode on the app code above
  • Set the verbose mode in launch.json flutter configuration:
{
  "name": "Flutter",
  "request": "launch",
   "type": "dart",
    "args": ["-v"],
}
  • Set a breakpoint inside initServiceExtensions in
    flutter/flutter/packages/flutter/lib/src/widgets/widget_inspector.dart
  • Set flutter to run in chrome (web-javascript)
  • Start debugging
  • On breakpoint, copy and paste the dart expression (starting after return library. and ending before next line) from the information in the following bug:

flutter/devtools#2627

  • Copy and paste the JS expression from the VCCode debug console window to the chrome console window
  • Observe result:
    VM973:50 Uncaught SyntaxError: Identifier 'e' has already been declared

Metadata

Metadata

Assignees

Labels

P2A bug or feature request we're likely to work onarea-web-jsIssues related to JavaScript support for Dart Web, including DDC, dart2js, and JS interop.web-evalevaluation support on the web

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions