WPF 开发调试比较：Visual Studio 原生和Snoop调试控制台

文章目录

前言
运行环境
简单的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	关闭