前言

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的補充。