Snoop经过很长一段时间,最近更新到支持NET 3.5了,它是一个WPF运行时对Visual
UI调试的一个工具,最近我用过它调试修改过一个bug,在此介绍给大家。Snoop可以在Installer下载安装,它的代码也是公布的,可以在Download
Source下载,感兴趣的也可以看看,我现在还没有看:)
运行Snoop
下载安装后,运行Snoop.exe后出现一个类似工具条的界面:
下拉框中显示的运行的WPF应用程序,如果还么有打开需要调试的程序,可以打开后再点击【刷新】按钮获取应用程序列表,选中应用程序后,点击Snoop图标()可以打开Snoop。
左边是可视化树列表,选中可视化元素后,右边中间显示该元素的属性,右边下面是元素的UI预览界面。
当选中元素后,目标应用程序的响应元素会高亮显示在一个红色边框内。
选中元素可以直接在列表中选择,也可以按住Ctrl-Shift后移动鼠标到目标应用程序的选择元素上。
界面面板介绍
可视元素列表(Visual Tree View)
- 当出现性能问题时可以查看一下子元素的数量,尽量使得子元素数量达到最小。
- 通过过滤文本框右边下拉控件可以查找错误的绑定。(在调试OpenExpressApp过程中,snoop会出现一些bug,而使得OEA程序关闭,原因不明)
属性面板(Property Grid)
我更新过属性值,但是好像没有反映到目标应用程序中去。
事件视图(RoutedEvents View)
预览窗口(Preview Area )
选择元素的预览界面,这个由于性能原因默认是关闭的,不过我每次都是打开它,因为可以立刻看到效果:)
放大视图(Zoom View)/3D Zoom View
调试实例
在开发OpenExpressApp时,发现了一个比较UI上的bug,我就是借助Snoop进行调试解决的,以下是我遇到的问题。
问题:
在模块中,点击Grid中间区域会出现一列长条
解决:
- 因为看上去有点像splitter控件,所以以为splitter位置出现问题,我把ListDetailForm.xaml列表和明细之间使用ResizingPanel代替Grid,也不是splitter了
Code
<AvalonDock:DocumentContent Title="内容">
<DockPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="7*"/>
</Grid.ColumnDefinitions>
<GridSplitter Width="5" ></GridSplitter>
<DockPanel Name="listRegion">
</DockPanel>
<DockPanel Name="detailRegion" Grid.Column="1">
</DockPanel>
</Grid>
</DockPanel>
</AvalonDock:DocumentContent>Code
<AvalonDock:ResizingPanel>
<DockPanel Name="listRegion" AvalonDock:ResizingPanel.ResizeWidth="3*">
</DockPanel>
<DockPanel Name="detailRegion" AvalonDock:ResizingPanel.ResizeWidth="7*">
</DockPanel>
</AvalonDock:ResizingPanel> - 发现问题依旧,这时就不知道是什么原因了,从样子看出来还会是什么东东。这时正好snoop发布了,就用了一把。打开snoop看到这个竖条原来是CSLA中的BusyAnimation。我在Grid中间放置了一个显示busy状态的控件,终于找到罪魁祸首了,原来是这个东东在捣乱。
找到原因后就很好解决了,把BusyAnimation的VisibilityProperty绑定一下就可以解决了
Code
//绑定IsVisible
Binding bdIsVisible = new Binding("IsBusy");
bdIsVisible.Source = DataProvider;
bdIsVisible.Converter = new BooleanToVisibilityConverter();
bdIsVisible.BindsDirectlyToSource = true;
busy.SetBinding(BusyAnimation.VisibilityProperty, bdIsVisible);
欢迎转载,转载请注明:转载自周金根 [ http://zhoujg.cnblogs.com/
]