如何在Chrome中查看Flutter Web的dart-define变量及验证Azure配置？

核心结论 #

在Release模式下构建的Flutter Web应用，--dart-define传入的变量会被Dart编译器优化处理，不会以明文形式直接出现在编译后的main.dart.js文件中，所以你在Chrome开发者工具里找不到明文的flavor变量是正常现象。

验证Azure是否正确设置变量的方法 #

1. 在代码中显式暴露变量 #

在Flutter代码里添加一段逻辑，将flavor变量输出到控制台或页面DOM中，这样就能在Chrome DevTools里直接查看：

import 'dart:html' as html;
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  // 读取dart-define传入的flavor变量
  const currentFlavor = String.fromEnvironment('flavor');
  
  // 输出到浏览器控制台
  if (kIsWeb) {
    html.window.console.log('当前环境: $currentFlavor');
    // 插入隐藏DOM元素存储变量值
    final marker = html.DivElement()
      ..id = 'flavor-checker'
      ..style.display = 'none'
      ..text = currentFlavor;
    html.document.body?.append(marker);
  }

  runApp(const MyApp());
}

构建运行后：

• 打开Chrome DevTools的Console面板，能看到打印的环境值
• 切换到Elements面板，搜索flavor-checker元素，查看其文本内容即可确认变量值

2. 检查Azure构建日志 #

进入Azure管道的构建任务详情，查看FlutterBuild@0任务的输出日志：

• 搜索dartDefine或--dart-define关键词，确认实际执行的构建命令中是否包含--dart-define=flavor="staging"
• 同时检查日志中是否正确读取到$(flavour)变量的值（注意配置里的变量名是英式拼写flavour，要确认Azure管道中该变量已正确设置为staging）

3. 本地模拟构建验证 #

在本地执行和Azure完全一致的构建命令：

flutter build web --release --dart-define=flavor="staging"

运行构建后的Web应用，用上面的代码验证方法确认变量是否正确传入，以此排除本地构建和Azure构建的差异。

可能的问题点 #

注意你Azure任务配置中的变量拼写：dartDefine: 'flavor="$(flavour)"'，这里的$(flavour)是英式拼写，要确保Azure管道中确实存在名为flavour的变量，且其值设置为staging。如果代码中读取的是flavor（美式拼写），变量名本身没问题，但如果Azure里的变量名写错（比如写成flavor），则需要调整配置保持一致。

内容的提问来源于stack exchange，提问作者Pandruz