调试 Brick Next

为了方便 Brick Next 框架下的界面开发和调试，我们提供了一个 Chrome 开发者工具的扩展程序：Brick Next Developer Tools。

该扩展程序可以为基于 Brick Next 框架下的页面对应的开发者工具中添加一个 “Bricks” 面板，其功能如下：

• 左上角选择 Bricks 时：
  • 查看页面当前渲染的构件树；
  • 构件内部使用的 useBrick 将被收集在 #internal 的标签中；
  • 已废弃或未定义等异常的构件将会在旁边显示对应的提示信息；
  • 当页面路由切换时，构件树会自动刷新，点击 🔄 可强制刷新构件树（用于路由未切换的构件更新等场景）；
  • 鼠标悬浮在一个构件上时，可以在页面上显示该构件的轮廓；
  • 点击选中一个构件时，右侧显示该构件当前的属性、绑定的事件等；
  • 选中构件后，可以点击右上角工具栏的 👁 唤起 Elements 面板并审查该构件对应的元素，或点击 </> 唤起 Sources 面板查看构件对应的源码；
• 左上角选择 Evaluations 时：
  • 监视当前页面发生的 Evaluate Placeholders 求值占位符的运算记录；
  • 可以输入 Expression 的关键字进行过滤；
  • 可以勾选 “String Wrap” 对字符串类型的值自动折行；
• 左上角选择 Transformations 时：
  • 监视当前页面发生的 Transform 数据转换的运算记录；
  • 可以勾选 “String Wrap” 对字符串类型的值自动折行；