2010年12月22日,星期三

SP2010 AJAX 第6部分:调试jQuery / JavaScript

  1. 将jQuery精简为基本要素 ( 技术 )
  2. 使用JavaScript Client OM处理列表 ( 技术 )
  3. 结合使用jQuery AJAX 和HTTP处理程序 ( 技术 )
  4. 从HTTP处理程序返回JSON ( 技术 )
  5. 为客户端OM和jQuery启用Intellisense ( 小费 )
  6. 调试jQuery / JavaScript( 小费 ) - 这个 article
  7. 构建AJAX应用程序时的有用工具 ( 小费 )
  8. 将现有应用程序迁移到jQuery / AJAX

In 这个 ‘quick 小费 ’我想快速介绍如何调试AJAX类型的应用程序,然后为您提供更详细的信息‘debugging JavaScript’ article which I 真实ly like. Although every developer is (should be) comfortable with debugging their server-side .Net code, the advent of JavaScript-heavy applications means that new debugging 技术 s must be learned. Debugging 脚本 is typically done outside 视觉工作室 and as I see it you have two main options:

  • 使用IE开发人员工具( 单独安装 IE7所需)并使用IE进行调试
  • 使用Firefox并安装非常流行的 萤火虫 加入

在许多方面,JavaScript调试经验都非常相似–您首先选择应该调试链接到页面的.js文件中的哪个,然后在代码中找到添加断点的位置。代码运行时,调试器将停止运行,并允许您单步执行(F10)/进入(F11),还可以查看/修改局部变量并查看调用堆栈等。

在IE中: (单击图像以查看更清晰的版本)

 使用IE工具进行调试

在Firefox中:

 使用Firebug进行调试

我认为它’一种流行的观点认为Firebug提供了比IE工具更好的调试体验–如图所示,Firefox使我可以将鼠标悬停在变量上并查看它’的价值,也使我可以轻松访问‘this’ variable in jQuery –IE工具都没有。它’可以执行许多高级调试方案,例如条件断点,设置监视变量,甚至在出现JavaScript错误时自动中断。的‘Console’选项卡对于分析来自HTTP模块或SharePoint Client OM的线路响应也很有用–您需要经常做的事情。此外,正如我在文章4中所展示的,如果响应是JSON,则Firebug可以通过将响应格式化为可扩展/可折叠的视图来提供帮助:

 JsonInFirebug

I’作为Firebug的忠实拥护者,我强烈建议您深入研究其他功能领域,例如‘Net’标签来分析页面加载时间(我在我的讨论中 优化SharePoint网站的清单 一会儿文章)。

为了更深入地研究JavaScript调试,Elijah Manor’s 如何调试您的JavaScript代码 文章应视为必读。

下次: 构建AJAX应用程序时的有用工具 ( 小费 )

2010年12月8日,星期三

SP2010 AJAX 第5部分-为客户端OM和jQuery启用Intellisense

  1. 将jQuery精简为基本要素 ( 技术 )
  2. 使用JavaScript Client OM处理列表 ( 技术 )
  3. 结合使用jQuery AJAX 和HTTP处理程序 ( 技术 )
  4. 从HTTP处理程序返回JSON ( 技术 )
  5. 为客户端OM和jQuery启用Intellisense( 小费 ) - 这个 article
  6. 调试jQuery / JavaScript ( 小费 )
  7. 构建AJAX应用程序时的有用工具 ( 小费 )
  8. 将现有应用程序迁移到jQuery / AJAX

This article marks a change in 这个 series –前四篇文章是有关关键技术的详细指南,而下几篇是简短而甜蜜的技巧,它们可能会对您的旅程有所帮助。今天,我们谈论Intellisense,专门针对SharePoint开发人员可能使用的JavaScript库(例如jQuery或SharePoint 2010)’的客户端对象模型。

尽管许多开发人员提出了 没有 具有此类代码的Intellisense’在默认情况下未启用),’s no 真实 reason not to enable it if you’re writing more than a couple of lines. Without it, you only get the less-than-useful default JavaScript Intellisense which looks like 这个:

 默认JSIntellisense

这里以客户OM为例’适当的Intellisense看起来像什么’s enabled – that’一个很长的下拉列表,请相信我,您想要它:

FullClientOMJSIntellisense

在启用它方面,根据您在哪里需要Intellisense以及我们是否需要’在谈论jQuery或客户端OM。让’s run through them.

在.js文件中启用客户端OM Intellisense

All you need for 这个 is a couple of reference paths 在 the top of your .js file:

/// <reference path="C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\MicrosoftAjax.js" />
/// <reference path="C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\SP.debug.js" />

旁注:如果要在其他JS文件上使用Intellisense,则可以’需要添加相应的引用。例如,深入研究在SP.Core.js中找到一个不错的SP.XmlWriter类,用于在JavaScript中构建XML– you’ll get no Intellisense for 这个 with the snippet above, but the appropriate reference to SP.Core.debug.js will fix that. I list which bits of the Client OM are in which JS file 在 the end of 这个 article.

在标记(.aspx / .ascx)中启用客户端OM Intellisense

对于前端代码文件(人们是否仍将其称为?),我们需要添加<script>标签,就像我们在页面/控件中添加普通的.js文件一样。但是请考虑一下,SharePoint已经在确保在运行时在页面上引用正确的JavaScript文件,并且通过添加重复的引用会造成问题。所有的’所需的是一个内联ASP.Net条件语句,该条件语句在运行时将为false(因此,内容’(已处理),但是在设计时Visual Studio认为就很好(在此为颜色编码表示歉意,ASP.Net括号在Visual Studio中为亮黄色):

<% if (false) { %>
<脚本 type="text/javascript" src="C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\MicrosoftAjax.js" ></script>
<脚本 type="text/javascript" src="C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\SP.debug.js" ></script>
<% } %>


在.js文件中启用jQuery Intellisense

Here, the process is slightly different - 视觉工作室 needs a special ‘vsdoc’提供jQuery文档的文件。可以从 官方jQuery网站 ,寻找‘Visual Studio’实际jQuery发布文件旁边的链接– 在 the time of writing, the latest jQuery version with documentation is 1.4.1. In a JavaScript file we again need to use the reference tag, 这个 time pointing to the vsdoc file (note by the way, that the path can be relative or absolute):

/// <reference path="jquery-1.4.1-vsdoc.js" />

在标记(.aspx / .ascx)中启用jQuery Intellisense

您’大概现在就知道了,但实际上’在这种情况下需要额外考虑。在标记中引用JavaScript文件时,Visual Studio会自动在同一目录中查找关联的vsdoc文件–如果找到一个,你’会有Intellisense。以便’太好了,我们所需要的只是对我们的参考‘real’JS文件(无论如何我们都需要运行时)– however, we’不太可能为此使用绝对路径,这意味着VS可能无法解析位置。例如,在SharePoint-land中,您’将最有可能想要使用‘LAYOUTS’相对路径,例如‘/_layouts/jquery-1.4.1.min.js’,但由于IIS相对于IIS而言,IIS网站是未知的’否Intellisense。为了获得两全其美的效果,我将两个引用合并在一起,如下所示:

<% if (false) { %>
<;script type="text/javascript" src="../jquery-1.4.1.min.js"></script>
<% } %>
<script type="text/javascript" src="/_layouts/jquery-1.4.1.min.js"></script>

附录-JavaScript客户端OM文件

取自 http://msdn.microsoft.com/en-us/library/ee538253.aspx:


命名空间

ECMAScript文件

CUI命名空间

CUI.js ,SP.UI.Rte.js

CUI.Controls命名空间

CUI.js

CUI.Page命名空间

CUI.js ,SP.UI.Rte.js

SP命名空间

SP.Core.js ,SP.js,SP.Ribbon.js,SP.Runtime.js

SP.ListOperation命名空间

SP.Core.js

SP.Ribbon命名空间

SP.Ribbon.js

SP.Ribbon.PageState命名空间

SP.Ribbon.js

SP.UI命名空间

SP.Core.js ,SP.js,SP.UI.Dialog.js

SP.Utilities命名空间

SP.Core.js ,SP.js,SP.Exp.js

SP.WebParts命名空间

SP.js

SP.Workflow命名空间

SP.js


下次: 调试jQuery / JavaScript ( 小费 )