Inspector throwing error when connecting to flutter web app

[kenzieschmoll]

Unrecognized error: evaluate: (-32603) evaluate: Unexpected error from chrome devtools:
text: Uncaught
exception:
  description: SyntaxError: Unexpected token '('
  type: object
  value: null
attempted JS eval: `(function() {
     var sdkUtils = require('dart_sdk').dart;
   var library = sdkUtils.getLibrary('package:flutter/src/widgets/widget_inspector.dart');
   if (!library) throw 'cannot find library for package:flutter/src/widgets/widget_inspector.dart';
  ;
  return library.((){T toEnumEntry<T>(List<T> enumEntries, String name) {for (T entry in enumEntries) {if (entry.toString() == name) {return entry;}}throw 'Enum value $name not found';}Future<Map<String, dynamic>> getLayoutExplorerNode(Map<String, String> parameters) {final id = parameters['id'];final subtreeDepth = int.parse(parameters['subtreeDepth'] as String);final groupName = parameters['groupName'];var result = <String, dynamic>{};final instance = WidgetInspectorService.instance;final root = instance.toObject(id);if (root == null) {return Future.value(<String, dynamic>{'result': result,});}result = instance._nodeToJson(root as DiagnosticsNode,InspectorSerializationDelegate(groupName: groupName,summaryTree: true,subtreeDepth: subtreeDepth,service: instance,addAdditionalPropertiesCallback: (node, delegate) {final Map<String, Object> additionalJson = <String, Object>{};final Object value = node.value as Object;if (value is Element) {final renderObject = value.renderObject;if (renderObject != null) {additionalJson['renderObject'] =renderObject.toDiagnosticsNode().toJsonMap(delegate.copyWith(subtreeDepth: 0,includeProperties: true,),) as Object;try {final constraints = renderObject.constraints;final constraintsProperty = <String, Object>{'type': constraints.runtimeType.toString(),'description': constraints.toString(),};if (constraints is BoxConstraints) {constraintsProperty.addAll(<String, Object>{'minWidth': constraints.minWidth.toString(),'minHeight': constraints.minHeight.toString(),'maxWidth': constraints.maxWidth.toString(),'maxHeight': constraints.maxHeight.toString(),});}additionalJson['constraints'] = constraintsProperty;} catch (e) {}if (renderObject is RenderBox) {additionalJson['size'] = <String, Object>{'width': renderObject.size.width.toString(),'height': renderObject.size.height.toString(),};final ParentData parentData =renderObject.parentData as ParentData;if (parentData is FlexParentData) {additionalJson['flexFactor'] = parentData.flex as int;additionalJson['flexFit'] =describeEnum(parentData.fit ?? FlexFit.tight);}}}}return additionalJson;}),) as Map<String, dynamic>;return Future.value(<String, dynamic>{'result': result,});}Future<Map<String, dynamic>> setFlexFit(Map<String, String> parameters) {final String id = parameters['id'] as String;final parameter = parameters['flexFit'] as String;final FlexFit flexFit = toEnumEntry<FlexFit>(FlexFit.values, parameter);final dynamic object = WidgetInspectorService.instance.toObject(id);bool succeed = false;if (object != null) {final render = object.renderObject;final parentData = render.parentData;if (parentData is FlexParentData) {parentData.fit = flexFit;render.markNeedsLayout();succeed = true;}}return Future.value(<String, Object>{'result': succeed,});}Future<Map<String, dynamic>> setFlexFactor(Map<String, String> parameters) {final String id = parameters['id'] as String;final String flexFactor = parameters['flexFactor'] as String;final factor = flexFactor == 'null' ? null : int.parse(flexFactor);final dynamic object = WidgetInspectorService.instance.toObject(id);bool succeed = false;if (object != null) {final render = object.renderObject;final parentData = render.parentData;if (parentData is FlexParentData) {parentData.flex = factor;render.markNeedsLayout();succeed = true;}}return Future.value({'result': succeed});}Future<Map<String, dynamic>> setFlexProperties(Map<String, String> parameters) {final String id = parameters['id'] as String;final MainAxisAlignment mainAxisAlignment = toEnumEntry<MainAxisAlignment>(MainAxisAlignment.values,parameters['mainAxisAlignment'] as String,);final CrossAxisAlignment crossAxisAlignment =toEnumEntry<CrossAxisAlignment>(CrossAxisAlignment.values,parameters['crossAxisAlignment'] as String,);final dynamic object = WidgetInspectorService.instance.toObject(id);bool succeed = false;if (object != null) {final render = object.renderObject;if (render is RenderFlex) {render.mainAxisAlignment = mainAxisAlignment;render.crossAxisAlignment = crossAxisAlignment;render.markNeedsLayout();render.markNeedsPaint();succeed = true;}}return Future.value(<String, Object>{'result': succeed});}Future<Map<String, dynamic>> getPubRootDirectories(Map<String, String> parameters,) {return Future.value(<String, Object>{'result': WidgetInspectorService.instance._pubRootDirectories ?? [],});}final failures = <String, String>{};void registerHelper(String name, ServiceExtensionCallback callback) {try {WidgetInspectorService.instance.registerServiceExtension(name: name,callback: callback,);} catch (e) {failures[name] = e.toString();}}registerHelper('getLayoutExplorerNode', getLayoutExplorerNode);registerHelper('setFlexFit', setFlexFit);registerHelper('setFlexFactor', setFlexFactor);registerHelper('setFlexProperties', setFlexProperties);registerHelper('getPubRootDirectories', getPubRootDirectories);return WidgetInspectorService.instance._safeJsonEncode(failures);})();
})();
`
additional details:
  {Dart expression: (function() {
     var sdkUtils = require('dart_sdk').dart;
   var library = sdkUtils.getLibrary('package:flutter/src/widgets/widget_inspector.dart');
   if (!library) throw 'cannot find library for package:flutter/src/widgets/widget_inspector.dart';
  ;
  return library.((){T toEnumEntry<T>(List<T> enumEntries, String name) {for (T entry in enumEntries) {if (entry.toString() == name) {return entry;}}throw 'Enum value $name not found';}Future<Map<String, dynamic>> getLayoutExplorerNode(Map<String, String> parameters) {final id = parameters['id'];final subtreeDepth = int.parse(parameters['subtreeDepth'] as String);final groupName = parameters['groupName'];var result = <String, dynamic>{};final instance = WidgetInspectorService.instance;final root = instance.toObject(id);if (root == null) {return Future.value(<String, dynamic>{'result': result,});}result = instance._nodeToJson(root as DiagnosticsNode,InspectorSerializationDelegate(groupName: groupName,summaryTree: true,subtreeDepth: subtreeDepth,service: instance,addAdditionalPropertiesCallback: (node, delegate) {final Map<String, Object> additionalJson = <String, Object>{};final Object value = node.value as Object;if (value is Element) {final renderObject = value.renderObject;if (renderObject != null) {additionalJson['renderObject'] =renderObject.toDiagnosticsNode().toJsonMap(delegate.copyWith(subtreeDepth: 0,includeProperties: true,),) as Object;try {final constraints = renderObject.constraints;final constraintsProperty = <String, Object>{'type': constraints.runtimeType.toString(),'description': constraints.toString(),};if (constraints is BoxConstraints) {constraintsProperty.addAll(<String, Object>{'minWidth': constraints.minWidth.toString(),'minHeight': constraints.minHeight.toString(),'maxWidth': constraints.maxWidth.toString(),'maxHeight': constraints.maxHeight.toString(),});}additionalJson['constraints'] = constraintsProperty;} catch (e) {}if (renderObject is RenderBox) {additionalJson['size'] = <String, Object>{'width': renderObject.size.width.toString(),'height': renderObject.size.height.toString(),};final ParentData parentData =renderObject.parentData as ParentData;if (parentData is FlexParentData) {additionalJson['flexFactor'] = parentData.flex as int;additionalJson['flexFit'] =describeEnum(parentData.fit ?? FlexFit.tight);}}}}return additionalJson;}),) as Map<String, dynamic>;return Future.value(<String, dynamic>{'result': result,});}Future<Map<String, dynamic>> setFlexFit(Map<String, String> parameters) {final String id = parameters['id'] as String;final parameter = parameters['flexFit'] as String;final FlexFit flexFit = toEnumEntry<FlexFit>(FlexFit.values, parameter);final dynamic object = WidgetInspectorService.instance.toObject(id);bool succeed = false;if (object != null) {final render = object.renderObject;final parentData = render.parentData;if (parentData is FlexParentData) {parentData.fit = flexFit;render.markNeedsLayout();succeed = true;}}return Future.value(<String, Object>{'result': succeed,});}Future<Map<String, dynamic>> setFlexFactor(Map<String, String> parameters) {final String id = parameters['id'] as String;final String flexFactor = parameters['flexFactor'] as String;final factor = flexFactor == 'null' ? null : int.parse(flexFactor);final dynamic object = WidgetInspectorService.instance.toObject(id);bool succeed = false;if (object != null) {final render = object.renderObject;final parentData = render.parentData;if (parentData is FlexParentData) {parentData.flex = factor;render.markNeedsLayout();succeed = true;}}return Future.value({'result': succeed});}Future<Map<String, dynamic>> setFlexProperties(Map<String, String> parameters) {final String id = parameters['id'] as String;final MainAxisAlignment mainAxisAlignment = toEnumEntry<MainAxisAlignment>(MainAxisAlignment.values,parameters['mainAxisAlignment'] as String,);final CrossAxisAlignment crossAxisAlignment =toEnumEntry<CrossAxisAlignment>(CrossAxisAlignment.values,parameters['crossAxisAlignment'] as String,);final dynamic object = WidgetInspectorService.instance.toObject(id);bool succeed = false;if (object != null) {final render = object.renderObject;if (render is RenderFlex) {render.mainAxisAlignment = mainAxisAlignment;render.crossAxisAlignment = crossAxisAlignment;render.markNeedsLayout();render.markNeedsPaint();succeed = true;}}return Future.value(<String, Object>{'result': succeed});}Future<Map<String, dynamic>> getPubRootDirectories(Map<String, String> parameters,) {return Future.value(<String, Object>{'result': WidgetInspectorService.instance._pubRootDirectories ?? [],});}final failures = <String, String>{};void registerHelper(String name, ServiceExtensionCallback callback) {try {WidgetInspectorService.instance.registerServiceExtension(name: name,callback: callback,);} catch (e) {failures[name] = e.toString();}}registerHelper('getLayoutExplorerNode', getLayoutExplorerNode);registerHelper('setFlexFit', setFlexFit);registerHelper('setFlexFactor', setFlexFactor);registerHelper('setFlexProperties', setFlexProperties);registerHelper('getPubRootDirectories', getPubRootDirectories);return WidgetInspectorService.instance._safeJsonEncode(failures);})();
})();
}

#0      handleErrorIfPresent (package:dwds/src/utilities/shared.dart:54:5)
#1      AppInspector.jsEvaluate (package:dwds/src/debugging/inspector.dart:281:5)
<asynchronous suspension>
#2      ChromeProxyService.evaluate (package:dwds/src/services/chrome_proxy_service.dart:341:18)
<asynchronous suspension>
#3      VmServerConnection._delegateRequest (package:vm_service/src/vm_service.dart:1249:22)
<asynchronous suspension>
 - ((){T toEnumEntry<T>(List<T> enumEntries, String name) {for (T entry in enumEntries) {if (entry.toString() == name) {return entry;}}throw 'Enum value $name not found';}Future<Map<String, dynamic>> getLayoutExplorerNode(Map<String, String> parameters) {final id = parameters['id'];final subtreeDepth = int.parse(parameters['subtreeDepth'] as String);final groupName = parameters['groupName'];var result = <String, dynamic>{};final instance = WidgetInspectorService.instance;final root = instance.toObject(id);if (root == null) {return Future.value(<String, dynamic>{'result': result,});}result = instance._nodeToJson(root as DiagnosticsNode,InspectorSerializationDelegate(groupName: groupName,summaryTree: true,subtreeDepth: subtreeDepth,service: instance,addAdditionalPropertiesCallback: (node, delegate) {final Map<String, Object> additionalJson = <String, Object>{};final Object value = node.value as Object;if (value is Element) {final renderObject = value.renderObject;if (renderObject != null) {additionalJson['renderObject'] =renderObject.toDiagnosticsNode().toJsonMap(delegate.copyWith(subtreeDepth: 0,includeProperties: true,),) as Object;try {final constraints = renderObject.constraints;final constraintsProperty = <String, Object>{'type': constraints.runtimeType.toString(),'description': constraints.toString(),};if (constraints is BoxConstraints) {constraintsProperty.addAll(<String, Object>{'minWidth': constraints.minWidth.toString(),'minHeight': constraints.minHeight.toString(),'maxWidth': constraints.maxWidth.toString(),'maxHeight': constraints.maxHeight.toString(),});}additionalJson['constraints'] = constraintsProperty;} catch (e) {}if (renderObject is RenderBox) {additionalJson['size'] = <String, Object>{'width': renderObject.size.width.toString(),'height': renderObject.size.height.toString(),};final ParentData parentData =renderObject.parentData as ParentData;if (parentData is FlexParentData) {additionalJson['flexFactor'] = parentData.flex as int;additionalJson['flexFit'] =describeEnum(parentData.fit ?? FlexFit.tight);}}}}return additionalJson;}),) as Map<String, dynamic>;return Future.value(<String, dynamic>{'result': result,});}Future<Map<String, dynamic>> setFlexFit(Map<String, String> parameters) {final String id = parameters['id'] as String;final parameter = parameters['flexFit'] as String;final FlexFit flexFit = toEnumEntry<FlexFit>(FlexFit.values, parameter);final dynamic object = WidgetInspectorService.instance.toObject(id);bool succeed = false;if (object != null) {final render = object.renderObject;final parentData = render.parentData;if (parentData is FlexParentData) {parentData.fit = flexFit;render.markNeedsLayout();succeed = true;}}return Future.value(<String, Object>{'result': succeed,});}Future<Map<String, dynamic>> setFlexFactor(Map<String, String> parameters) {final String id = parameters['id'] as String;final String flexFactor = parameters['flexFactor'] as String;final factor = flexFactor == 'null' ? null : int.parse(flexFactor);final dynamic object = WidgetInspectorService.instance.toObject(id);bool succeed = false;if (object != null) {final render = object.renderObject;final parentData = render.parentData;if (parentData is FlexParentData) {parentData.flex = factor;render.markNeedsLayout();succeed = true;}}return Future.value({'result': succeed});}Future<Map<String, dynamic>> setFlexProperties(Map<String, String> parameters) {final String id = parameters['id'] as String;final MainAxisAlignment mainAxisAlignment = toEnumEntry<MainAxisAlignment>(MainAxisAlignment.values,parameters['mainAxisAlignment'] as String,);final CrossAxisAlignment crossAxisAlignment =toEnumEntry<CrossAxisAlignment>(CrossAxisAlignment.values,parameters['crossAxisAlignment'] as String,);final dynamic object = WidgetInspectorService.instance.toObject(id);bool succeed = false;if (object != null) {final render = object.renderObject;if (render is RenderFlex) {render.mainAxisAlignment = mainAxisAlignment;render.crossAxisAlignment = crossAxisAlignment;render.markNeedsLayout();render.markNeedsPaint();succeed = true;}}return Future.value(<String, Object>{'result': succeed});}Future<Map<String, dynamic>> getPubRootDirectories(Map<String, String> parameters,) {return Future.value(<String, Object>{'result': WidgetInspectorService.instance._pubRootDirectories ?? [],});}final failures = <String, String>{};void registerHelper(String name, ServiceExtensionCallback callback) {try {WidgetInspectorService.instance.registerServiceExtension(name: name,callback: callback,);} catch (e) {failures[name] = e.toString();}}registerHelper('getLayoutExplorerNode', getLayoutExplorerNode);registerHelper('setFlexFit', setFlexFit);registerHelper('setFlexFactor', setFlexFactor);registerHelper('setFlexProperties', setFlexProperties);registerHelper('getPubRootDirectories', getPubRootDirectories);return WidgetInspectorService.instance._safeJsonEncode(failures);})()

@jacob314

[kenzieschmoll]

I have some work on a flutter branch to enable the deep links in overflow errors for web apps, but I would be hesitant to land that until this is resolved.

[jacob314]

Fyi @grouma this is Chrome devtools evaluating complex expressions and exposing an issue with web expression evaluation.

[grouma]

Do we know what the VM service call looks like? Are there reproduction steps?

cc @annagrin

[kenzieschmoll]

You can reproduce this by connecting DevTools to any flutter web app. I am connecting devtools to devtools.

[jacob314]

We should work around this by marking the layout explorer as unavailable on Flutter Web until this is fixed.

[annagrin]

I don't have much experience with evaluate VM Service API (note that it is evaluating JS expressions directly, which is different from expression evaluation in evaluateInFrame call that evaluates dart expressions and involves a compiler). From the first glance it looks like all the parentheses are balanced in the implementation of evaluate - can it be that the expression passed to it is unbalanced? The expression in this case is what appears after return library. and before next line.

Update: just noticed, it seems that the expression is a dart one? I need to understand the context here, maybe the intention was to call evaluateInFrame? Do we know what calls the VM Service evaluate?

[jacob314]

The expression is a Dart expression that evaluates correctly when running on the DartVM.
The intention is to call evaluate not evaluteInFrame.

[annagrin]

This should be fixed now - @kenzieschmoll should we close this issue?

[kenzieschmoll]

Yes - thanks.

[muhammadkamel]

This issue occurs on Android also as the below:

[kenzieschmoll]

@muhammadkamel can you paste the output of flutter doctor?

[muhammadkamel]

@kenzieschmoll

Please, check the below flutter doctor logs.

Doctor summary (to see all
details, run flutter
doctor -v):
[✓] Flutter (Channel stable,
3.16.2, on macOS 14.1.2 23B92
darwin-x64, locale en-US)
[✓] Android toolchain - develop for
Android devices (Android SDK
version 34.0.0)
[✓] Xcode - develop for iOS and
macOS (Xcode 15.0.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.1)
[✓] VS Code (version 1.84.2)
[✓] Connected device (3 available)
[✓] Network resources