Flutter开发：如何快速定位模拟器运行页面对应的代码文件？

• 用Flutter Inspector的组件选择功能
  打开VS Code的Flutter Inspector面板（右侧面板可找到，或者按Ctrl+Shift+P输入Flutter: Open Inspector调出），点击面板里的「Select Widget Mode」（鼠标样式的按钮），然后在模拟器上点击当前页面的任意组件，Inspector会自动跳转到对应代码行，同时Widget Tree也会选中该组件。要是之前Widget Tree不更新，先确认项目是debug模式运行的——release模式下Inspector无法正常工作。

• 从路由配置直接跳转
  找到项目里的路由配置（要么是单独的routes.dart文件，要么是MaterialApp的routes参数），定位到登录页对应的路由条目，右键点击路由绑定的页面类名，选择「Go to Definition」直接跳转到代码文件。如果是用Navigator.push跳转的动态路由，直接搜索LoginPage()这类页面实例，也能快速定位到对应文件。

• 搜索页面独有的文本内容
  要是登录页有独特的文字（比如「登录」「请输入手机号」），按Ctrl+Shift+F全局搜索这段文字，基本能直接找到对应的Widget代码，进而定位到所属文件。

• 解决Widget Tree不更新的问题
  要是Widget Tree一直无法更新，先排查这几点：

  • 确认项目处于debug模式运行，release模式下Inspector功能受限
  • 重启VS Code的Flutter扩展，或者直接重启整个VS Code
  • 重新运行模拟器，检查VS Code底部状态栏的Flutter调试连接是否正常

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