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

前言

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自带代码调试

热重置功能测试

热重置的意思是编译运行之后修改源代码，能通过重载而不用重新编译就能看到新修改的效果。

实时可视化树

WPF Debug窗口是部分工具展示，这里就不展开说明了。

查找窗口元素

显示属性

这里面会显示所有对应的属性

也可以看DataContext

Snoop调试使用

WPF Snoop Github地址

Snoop下载地址

下载好了直接安装

双击运行之后出现这个界面

Snoop简单使用

关于Snoop的用法

打开Snoop我们可以看到这几个按钮

调试控制台

我们在使用【5】/【6】的时候，会生成如下的调试窗口

元素追踪

使用Ctrl+Shift选中元素，由于我GIF录屏会有窗口遮挡，所以有点不连贯。

有时候选择多了会出现这个Bug，我们点击清空即可

结构树

我们先选中一个元素

鼠标停留在对应的树节点上面，会显示对应的可视化元素值

Visual/可视化结构树

可视化结构树就是里面所有的基础控件元素，和我们F12跳出来的Html控制台的结果差不多

Logical/本地代码可视化树

AutoMation/自动识别结构树

自动识别处于两种之间，自动识别我们自己本地的代码

WPF元素控制台

这里用法太多了，我们就不展开说明了

我们也可以实时修改对应的元素，但是感觉用处不是很大，因为WPF已经支持热重载了。

结论

Snoop算是Visual Studio的补充，Visual Studio本身的代码调试就已经是非常的惊艳了。其它的玩法我也在摸索当中。Snoop算是浏览器的F12，你是用来查看元素的，不是直接改Html结果的。这个是一个很好的代码调试的作用和对元素Visual Studio的补充。