VS可视化调试学习总结

.NET开发人员必备的可视化调试工具

（你值的拥有）

http://sanwen8.cn/p/52airn6.html
http://www.cnblogs.com/cyq1162/p/6027051.html




一：如何使用


1：点击下载：.NET可视化调试工具 （更新于2016-11-05 20:55:00）http://files.cnblogs.com/files/cyq1162/Intelisense.rar


2：解压RAR后执行：CYQ.VisualierSetup.exe 成功后关掉提示窗口即可。


PS：一次运行，支持各个VS版本，终身提高调试的效率，而且没任何副作用。


二：开源及后续升级地址：


开源地址：http://code.taobao.org/svn/cyqopen/trunk/CYQ.Visualizer/


后续升级获取地址：https://github.com/cyq1162/cyqdata 在文档目录下。


三：功能介绍


1：支持字符串的Json转表格查看：


2：支持NameValueCollection（Request.Form、Request.QueryString）、HttpCookieCollection（Request.Cookies） 表格查看
Cookies：


3：其它的就不截图，同时还支持以下类型：
1：System.Drawing.Image：（这个转图片查看）


2：MDataTable系列：表、行、列、结构


3：DataTable系列：表、行、列、结构


4：泛型系列：Dictionary<,>、LinkedList<>、List<>、Queue<>、SortedDictionary<,>、SortedList<,>、Stack<>


5：非泛型系列：ArrayList、Hashtable、Queue、SortedList、Stack


6：其它继承自：Enumerable 接口的类型：（类型太多，未来得及一一测试）


BitArray、ReadOnlyCollectionBase、HybridDictionary、ListDictionary、StringCollection、StringDictionary、BaseCollection等


四：研究过程


关于可视化调试这一块内容，网上一搜，相关的信息全部是我自己以前发过的文章，悲催就一个字。。。。


看来没啥人研究这一块，好在苍天不负有心人，还是被我突围了。。。。。


能出来这么简易的工具，经历的过程是：


1：曾经发布简单的教程：


自定义可视化调试工具（Microsoft.VisualStudio.DebuggerVisualizers）


http://www.cnblogs.com/cyq1162/p/4551652.html


2：收集了不同的VS版本的DLL（Microsoft.VisualStudio.DebuggerVisualizers.dll）。


3：写了个工具，批量Copy：开源发布：VS代码段快捷方式及可视化调试快速部署工具http://www.cnblogs.com/cyq1162/p/6019535.html


4：想到了复制多个项目文件来实现多个VS版本编绎（如果想不到这个，估计也不会折腾）：


5：解决了系列化问题（才能大规模的支持各种类型）：
默认情况下，不支持系列化的类是不支持可视化的，因此，想支持DataRow查看都不行，会直接抛异常。


为了解决这一问题，进行了互联网搜索（相关信息，国内基本是我自己的文章，国外好不容易搜到一篇）。


通过研究，终于解决了这一难题：


public class EnumerableVisualizerObjectSource : VisualizerObjectSource


{


        public override void GetData(object target, System.IO.Stream outgoingData)


        {


            if (target is NameObjectCollectionBase)


            {


                target = MDataTable.CreateFrom(target as NameObjectCollectionBase);


            }


            else


            {


                target = MDataTable.CreateFrom(target as IEnumerable);


            }


            base.GetData(target, outgoingData);


        }


}


自定义数据源，在设置数据源时，把对象转换成MDataTable，再由MDataTable去系列过去。


6：MDataTable要支持和大量类型的转换工作（这些年的工作已经完成了不少，只需要再补全即可）。


总结：


上一篇文章发布的时候，有网友还看不懂是用来干什么，一个唉~~~字了了。


这一次，在集满了所有的条件之下，花了一天的研究时间，直接写成了工具分享给你。


而你只要下载，再轻轻双击一下，就得能得良好的调试体验！


在你开发调试的过程中，可以很轻松的查看变量的所有数据！！！
========

自定义可视化调试工具

（Microsoft.VisualStudio.DebuggerVisualizers）

http://www.cnblogs.com/cyq1162/p/4551652.html
前言： 


最近飞机失联的太多，明天要飞北京处理服务器双机热备的问题，航空保险已买，单号是：TF10122913。 


至于我的银行卡密码，在我枕头下面的字条里，要是我之后没再更新文章，请通知我家人，哈哈哈哈。


好了，Joke 被 Play 后，下面 Enter 正文。 


背景：


话说：使用CYQ.Data时，会经常断点MDataTable的对象，为了查看表格的数据内容，在监视里会常ToDataTable()，然后借可DataTable的可视化方式查看表格。
近日：心中莫名就来了一句话，不转行不行？狠想直接看MDataTable的对象，Like This：


 于是经过一翻小研究，就有了下面的内容。


1：什么是：可视化调试工具（Microsoft.VisualStudio.DebuggerVisualizers）


用文字描述显的太无力，我直接上图，很直观：


A：对字符串的可视化调试展示： 


 B：对DataSet、DataTable系列的可视化展示：


如上图，简单一句话总结一下就是：对指定某种类型的可视化插件展示。 


2：怎么实现：可视化调试工具（Microsoft.VisualStudio.DebuggerVisualizers） 


不说你以为很复杂，一说其实简单的要命，这里对图片System.Draw.Image进行示例，最终效果如下图：




下面跟着我一起来：
步骤一：新建个项目=》类库=》添加一个类。
步骤二：引用：Microsoft.VisualStudio.DebuggerVisualizers 
步骤三：输入以下代码：


复制代码
using Microsoft.VisualStudio.DebuggerVisualizers;
using System;
using System.Drawing;
using System.Windows.Forms;


[assembly: System.Diagnostics.DebuggerVisualizer(
typeof(CYQ.Visualizer.ImageVisualizer),
typeof(VisualizerObjectSource),
Target = typeof(System.Drawing.Image),
Description = "Image Visualizer")]
namespace CYQ.Visualizer
{
    public class ImageVisualizer : DialogDebuggerVisualizer
    {
        override protected void Show(IDialogVisualizerService windowService, IVisualizerObjectProvider objectProvider)
        {
            Image image = (Image)objectProvider.GetObject();


            Form form = new Form();
            form.Text = string.Format("Width: {0}, Height: {1}", image.Width, image.Height);
            form.ClientSize = new Size(image.Width, image.Height);
            form.FormBorderStyle = FormBorderStyle.FixedToolWindow;


            PictureBox pictureBox = new PictureBox();
            pictureBox.Image = image;
            pictureBox.Parent = form;
            pictureBox.Dock = DockStyle.Fill;


            windowService.ShowDialog(form);
        }
     }
  }
复制代码
然后编绎成功后变成一个Xxx.dll,就OK了。


简单的说明一下代码流程：
1：新建一个类，叫XXXX，需要继承自：DialogDebuggerVisualizer
2：重写方法Show（有两个参数）
3：代码里，第一行：objectProvider.GetObject() 返回你要处理的类的实体的拷贝，你进行一下类型转换就可以了。
这里说明一下，要处理的必须是序列化的。
4：最后一行： windowService.ShowDialog(控件);就是展示呈现一个控件了，通常我们用Form来显示。
5：中间那一块，就是我们自定要的呈现了，自己要写的东西也就是这些了，学点Winform知识你就会了。
6：最后一步，指定要被插件反射用的程序集信息： 上面有三个typeof
第一个typeof（就是那个XXXX类） 第二个typeof（按示例不用管，除非你需要自定义自己的序列化） 第三个typeof（你要可视化呈现的类） 


3：如何部署：可视化调试工具（Microsoft.VisualStudio.DebuggerVisualizers）


 一句话，把那个Xxx.dll放到以下目录：VS安装目录\Microsoft Visual Studio XXX\Common7\Packages\Debugger\Visualizers


 然后就自动生效了，当你调试时，会被加载，进而呈现你的那个效果。


4：源码下载及说明


 对于不同的VS（2005、2008、2012、2015），你需要编绎不同的版本，主要是引用的：Microsoft.VisualStudio.DebuggerVisualizers 这个版本不一样。


 下载地址：CYQ.Visualizer.rar 下载
========

调试可视化工具扩展包

http://www.greenxf.com/soft/76609.html
调试可视化工具扩展包(自定义可视化调试工具)就是指针对某些特定类型的时候，在调试中可以用一种比较直观准确的视图进行展示内容的工具，相比VS内置的属性列表的方式更加准确。调试可视化工具扩展包中包含了上一个博客所附带的表达式树可视化工具，因此建


议在安装前先删除之前放置的文件。


功能说明：


所谓的调试可视化，就是指针对某些特定类型的时候，在调试中可以用一种比较直观准确的视图进行展示内容的工具，相比VS内置的属性列表的方式更加准确。
如下图所示，当出现放大镜图标时，点击图标可以用可视化工具进行查看。当有多个可视化工具可供选择时，放大镜旁边会出现下拉箭头。
这个包相比而言功能强了很多……包含了以下类型的可视化支持：
byte[]，字节数组，在协议分析和流处理中大量用到
HtmlDocument/HtmlNode/HtmlNodeCollection，属于 HtmlAgilityPack 中的玩意儿，网页抓取中经常用到，因此为它们实现了可视化调试器，并可以测试XPATH。
XmlDocument/XmlNode/XmlNodeList，提供对XML的可视化，支持XPATH查询
JObject，是 JSON.NET 中的对象，提供对它的直观树状结构显示
Image，支持将内存中图像直接显示出来并查看
Expression，支持将表达式树的具体树状结构显示出来
Linq 2 SQL，查询可视化
NameValueCollection，支持以列表形式显示内容（含子类）
========

VS工具：实时可视化树

http://blog.csdn.net/zmq570235977/article/details/48162401


VisuaStudio号称全宇宙最强大的IDE。在VS2015版本中，微软又给广大开发者带来了一个强大的工具：实时可视化树(Live Visual Tree，以下简称可视树)。其实树可视化工具并不是新鲜的东西，在WPF的时候就有了，只是这次微软集成到是VS2015里，而且功能更强大。


使用此工具可以帮助开发者在调试应用时实时查看UI元素的布局情况，不过目前还只支持WPF 和 Windows Store 的应用。不仅如此，还可以偷看别人家的应用是怎么布局的呢？甚至改变别人的UI，比如这样：


注意一下，上面的"微软大法好"在商店中显示的是“源自Microsoft”，然后我实时可视化树把它改了，所以我之前微博才说“我发誓没用任何修图工具”，因为我用的是它。怎么样？是不是感觉有点黑科技的样子？想知道怎么玩，听我慢慢道来。


先说说如何打开实时可视化树


在任意工程项目下，F5运行项目。然后通过菜单中的“调试”->“窗口”->“实时可视化树”，然后你就能看到传说中的实时可视化树了。


我的XAML是这样的：


[html] view plain copy
<Grid>  
        <StackPanel x:Name="stackPanel">  
            <Rectangle Fill="Blue" Width="250" Height="250"/>  
            <Rectangle Fill="Yellow" Width="250" Height="250"/>  
        </StackPanel>  
  </Grid>  


是不是发现可视化树多了很多不知道什么鬼的东西，其实第一次接触可视化树我也不知道是什么。
其实可视化树上的才是真正的UI界面，我们看到的只是它的表层。在这里就不做太多的理论知识讲解了


在正式讲解可视树面板的使用前，我先吐槽下VS。虽然可视树面板可以跟正在调试中的应用做交互，但是点击了可视树面板后，我的应用就最小化了，就不能帮我把应用置于顶层吗？我只能把VS窗口设置小点跟应用并排显示


好了，正文开始


1、如果你的控件有Name会一并显示出来，如上面图中的stackPanel


2、每个元素的右边括号里的数字表示该元素内所有子元素数量


3、可视树面板上有6个操作按钮和一个输入框


4、输入框用于搜索你要的UI元素，并高亮显示，这个在你UI布局时分复杂时候很有用


5、按钮1：启用选择


启用选择后，当鼠标在目标应用的界面上移动时，光标所指向的元素会被红色虚线框标记出来。同时鼠标的事件(比如PointerEntered)也不会触发。此时点击界面上的元素，在可视化面板就会定位到对应的元素


6、按钮2：显示布局修饰工具


开启该功能后，在可视化面板上点击的元素，VS会在应用的界面元素上用一个半透明层的东西覆盖，然后在元素四周绘制辅助线指示出布局


7、按钮3：预览选择


很抱歉，我还不知道它是干啥的....希望有人给我指出


8、按钮4：全部展开


点击后，可视化面板就是像开始的那张图那样，将所有元素的节点展开，层次分明


9、按钮5：全部折叠


与全部展开相对应，将所有元素的节点全部折叠


10、按钮6：显示属性


这里的属性不是运行前的属性，而是运行时属性。点击后开启的是“实时属性资源管理器”面板，这个面板也可以通过菜单中的“调试”->“窗口”->“实时属性资源管理器”打开


11、元素的右键菜单


在可视树面板元素上单击右键，出现右键菜单




●显示属性：功能同按钮6


●查看源：定位到对应的XAML代码


●展开子项：展开当前元素的子项


12、使用实时属性资源管理器修改“运行时”属性


在调试应用时，有时候我们希望某些元素的属性发生改变然后看看效果，传统的做法是停止调试，然后修改代码，再调试。通过实时属性资源管理器面板，可以在调试应用时动态的修改元素属性，可以立即反应的应用UI界面上。如果效果满意，就可以停止调试，然后修


改代码了。怎么样，是不是很方便。


多数的元素属性都是可以动态修改的，包括Width、Height、Text、Visibility等


“计算的值”可以帮助查看元素的实际渲染结果


到此为此，我所知道的关于实时可视化树的知识讲完了。


咦，说好的“黑科技”呢？你说的是这个吗？


别急，看了我上面的讲解，自己有没有思路了呢？不拐弯抹角了，不然要被你打....


实例：统一全平台 闷声发大财


一、打开你要调戏的应用，比如应用商店


二、以管理员身份打开VS2015


三、菜单中选择“调试”->“附加到进程”


四、在弹出的窗口中选择对应的进程。注意有的应用进程有多个，同时标题也不一定给出，比如应用商店的进程我这里显示的是两个（不知道读者的怎样）。如果没找到就刷新试试。选择后点击“附加”


五、查看实时可视化树面板。然后要怎么调戏你随意~~


什么？就这么简单，毛线的黑科技。呵呵，本来就没有黑科技，我是好人，好人的讲解到此完毕。
========

VS调试时的DataSet、DataTable可视化工具出错(函数计算超时)的解决方法

http://blog.csdn.net/yufeng200092/article/details/23298575


最近遇到VS2010的可视化工具报错的问题，现给出最后的解决过程。
    问题描述：VS2010在调试过程中，DataSet、DataTable、DataView这些类型将在鼠标停留的快速提示中显示一个放大镜图标，点击后会出现相应的可视化工具以显示其中的数据，相当方便实用。可是，最近在使用过程中在点击放大镜图标后VS卡住几秒后，提示“计


算函数超时”，之后所有下拉提示都显示 “由于以前的函数求值超时,函数求值被禁用” 。


    解决过程：一直无法直接查看数据使调试效率大大降低，也不想重新安装，忍无可忍后再网上找了一些解决方案，要不是增加函数求值最大时间，就是关闭某些函数求值开关，都不好使，最后自己研究了一下，解决步骤如下：


    （1）关闭VS。


    （2）定位到VS安装目录下 %VS2010%\Common7\Packages\Debugger\Visualizers ，例如：E:\VS2010\Common7\Packages\Debugger\Visualizers，将文件Microsoft.VisualStudio.Debugger.DataSetVisualizer.dll  剪切（CTRL+X），一定要剪切掉，该文件就是导致


奔溃的DLL文件。
 
    （3）定位到你的文档下 %我的文档%\Visual Studio 2010\Visualizers， 例如：C:\Users\yf\Documents\Visual Studio 2010\Visualizers，将其中的5个文件全部扔进回收站，然后将之前剪切的DLL文件粘贴进去。


    （4）好了，启动VS并调试，看看可视化工具有没有出来！！


解决或未解决，可以的话都回复一下噢。谢谢支持羡慕


========

msdn-使用可视化工具

https://msdn.microsoft.com/zh-cn/library/xdakzs26(v=vs.100).aspx
如何：使用可视化工具
如何：使用 WPF 树可视化工具
如何：编写可视化工具
如何：安装可视化工具
如何：测试和调试可视化工具
可视化工具 API 参考