文章目录
- 前言
- 运行环境
- 简单的WPF代码
- 实现一个简单的ListBox
- Visual Studio自带代码调试
- 热重置功能测试
- 实时可视化树
- 查找窗口元素
- 显示属性
- Snoop调试使用
- Snoop简单使用
- 调试控制台
- 元素追踪
- 结构树
- Visual/可视化结构树
- Logical/本地代码可视化树
- AutoMation/自动识别结构树
- WPF元素控制台
- 结论
前言
WPF虽然自己本身自带调试工具,但是那个调试工具相对来说功能有点少,我这里会对Visual Studio 原生的调试工具和第三方调试工具Snoop进行比较
运行环境
- window10
- visual studio 2022
- .net core 8.0
简单的WPF代码
我这里用了CommunityToolkit.MVVM
实现一个简单的ListBox
ViewModel
public class TestViewModel{public record Person(int Id,string Name,string Descirption);public List<Person> People => new List<Person>(){new Person(1,"小王","王哥"),new Person(2,"小帅","大帅比"),new Person(3,"小美","美美的")};public TestViewModel() { }}
<UserControl x:Class="WpfSnoopDemo.Views.TestView"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:WpfSnoopDemo.Views"mc:Ignorable="d" xmlns:viewModels="clr-namespace:WpfSnoopDemo.ViewModels"d:DesignHeight="450" d:DesignWidth="800"><UserControl.DataContext><viewModels:TestViewModel /></UserControl.DataContext><Grid><ListBox ItemsSource="{Binding People}"><ListBox.ItemTemplate><DataTemplate><StackPanel Orientation="Vertical"><!--这个是一种仿CSS的写法--><StackPanel.Resources><Style TargetType="StackPanel"><Setter Property="Orientation"Value="Horizontal" /></Style></StackPanel.Resources><StackPanel><TextBlock Text="Id:" /><TextBlock Text="{Binding Id}" /></StackPanel><StackPanel><TextBlock Text="Name:" /><TextBlock Text="{Binding Name}" /></StackPanel><StackPanel><TextBlock Text="Descirption:" /><TextBlock Text="{Binding Descirption}" /></StackPanel></StackPanel></DataTemplate></ListBox.ItemTemplate></ListBox></Grid>
</UserControl>
Visual Studio自带代码调试
热重置功能测试
热重置的意思是编译运行之后修改源代码,能通过重载而不用重新编译就能看到新修改的效果。
实时可视化树
序号 | 用途 |
---|---|
1 | 显示WPF Debug运行调试工具 |
2 | 选择元素 |
3 | 显示装饰器,就是个十字坐标定位,显示盒子模型 |
4 | 跟踪具有焦点的元素,暂时不知道有啥用 |
5 | 显示绑定问题 |
6 | 辅助扫描,没啥用 |
7 | 预览选定项,不知道有啥用 |
8 | 活动文档查找元素。就是你鼠标选择了哪个,点这个可以跳转到鼠标选中的对应结构 |
9 | 显示对应元素属性 |
10 | 展开树结构 |
11 | 压缩树结构 |
12 | 只显示自己的代码 |
WPF Debug窗口是部分工具展示,这里就不展开说明了。
查找窗口元素
显示属性
这里面会显示所有对应的属性
也可以看DataContext
Snoop调试使用
WPF Snoop Github地址
Snoop下载地址
下载好了直接安装
双击运行之后出现这个界面
Snoop简单使用
关于Snoop的用法
打开Snoop我们可以看到这几个按钮
序号 | 含义 | 使用情况 |
---|---|---|
1 | 选择正在运行的WPF窗口 | 一般不用 |
2 | 刷新找到的WPF窗口 | 一般不用 |
3 | 在【1】选择好对象后,创建一个Snoop克隆 | 一般不用 |
4 | 拖动准星,选择WPF窗口,实现【3】效果 | 一般不用 |
5 | 创建一个Snoop可克隆对象并添加【调试控制台】 | 常用 |
6 | 在【4】的基础上面创建【调试控制台】 | 常用 |
7 | 设置 | 一般默认即可 |
8 | 缩小 | |
9 | 关闭 |
调试控制台
我们在使用【5】/【6】的时候,会生成如下的调试窗口
序号 | 功能 |
---|---|
1 | 结构树 |
2 | 配置文件 |
3 | 设置 |
4 | 窗口元素追踪,快捷键:Ctrl+Shift+鼠标移动 |
5 | 断点调试 |
6 | 版本 |
7 | 主题,有黑色和白色 |
元素追踪
使用Ctrl+Shift选中元素,由于我GIF录屏会有窗口遮挡,所以有点不连贯。
有时候选择多了会出现这个Bug,我们点击清空即可
结构树
我们先选中一个元素
鼠标停留在对应的树节点上面,会显示对应的可视化元素值
Visual/可视化结构树
可视化结构树就是里面所有的基础控件元素,和我们F12跳出来的Html控制台的结果差不多
Logical/本地代码可视化树
AutoMation/自动识别结构树
自动识别处于两种之间,自动识别我们自己本地的代码
WPF元素控制台
序号 | 用处 |
---|---|
1 | 元素属性 |
2 | 元素上下文 |
3 | 元素Event事件,一般是鼠标事件 |
4 | 元素触发器 |
5 | 元素行为 |
6 | 元素方法 |
7 | Debug监听器 |
这里用法太多了,我们就不展开说明了
我们也可以实时修改对应的元素,但是感觉用处不是很大,因为WPF已经支持热重载了。
结论
Snoop算是Visual Studio的补充,Visual Studio本身的代码调试就已经是非常的惊艳了。其它的玩法我也在摸索当中。Snoop算是浏览器的F12,你是用来查看元素的,不是直接改Html结果的。这个是一个很好的代码调试的作用和对元素Visual Studio的补充。