`
guoyiqi
  • 浏览: 1010092 次
社区版块
存档分类
最新评论

用vs2008调试Javacscript(转自:http://www.css88.com/archives/982)

 
阅读更多

面对一大段的JavaScript脚本,以前总是会很头疼,找不到调试这些代码的方法。如果出现什么错误或异常,总是要从头分析,然后插入很多Alert(),调试起来很麻烦。

Visual Studio 2008中JavaScript所具有的另外一个特性,是它提供了更加强大的JavaScript调试功能,这使得JavaScript的使用及构建AJAX应用都变得容易很多。同样,这项功能在免费的Visual Web Developer Express版本中和Visual Studio中都具有。
(1) 在ASP.NET页面中设置JavaScript断点

在Visual Studio 2005中调试JavaScript有个很让人头痛的问题,那就是要先运行ASP.NET页面才能在调试器中设置JavaScript断点。而这个问题在Visual Studio 2008有了很好的解决。在服务器的.asp文件和.master文件中就可以直接为客户端的JavaScript设计断点,从而进行调试。
intellisense4
如果开发人员在.aspx文件中设置了如上所示的断点,当在浏览器中运行此页面并运行此页面时,Visual Studio 2008将会自动的将断点位置匹配到所生成的客户端HTML页面中去。
intellisense5
如果开发人员在HTML文档中对断点的位置进行了变化,如增加、删除断点或是移动断点的位置,此时,Visual Studio 2008会很聪明的进行反匹配,即根据客户端HTML文档中断点位置的变化来改变服务器端原始的.aspx文件或.master文件中断点的位置。这就为开发人员提供了一个非常智能的调试器,可以进行一整套的编辑—调试—再编辑—再调试的可叠加的调试工作流程。

更加让人激动的是,开发人员不仅可以在客户端的JavaScript中设置断点,还可以同时在VB或C#等服务器端文件中设置断点,甚至是在同一页面中。然后使用单一调试模型进行服务器端与客户端代码的调试(当然这必须属于同一个会话)。这样的单一调试模式在AJAX大型应用中非常有用的。

请注意,开发人员所设置的任何断点,在关闭整个项目或是解决方案后,Visual Studio 2008都会默认的进行保存。当下次再次打开此工程或是项目是,以前设置的断点都将会存在代码中。
(2) 解决方案管理器(Solution Explorer)中的Script Document导航

就一般而言,JavaScript在服务器端动态的生成,然后被浏览器进行解释运行(例如,用脚本写成的服务器端控件,如ASP.NET AJAX UpdatePanels)。而在调试时,可以很容易的查看到页面所正在加载的JavaScript的URLs,以及调试器下步所要进入的URL。

在Visual Studio 2008中,由于将Script Document功能整合到了Visual Studio 2008的解决方案管理器视图中来了(在Visual Studio 2005中是作为一个单独的tool-pane窗口存在的),所以在调试Web应用程序时,这显得非常的有帮助。

当使用Visual Studio 2008来调试JavaScript时,在Solution explorer pane中可以查看到调试页面所加载的script URLs清单,如下图所示:
intellisense6
开发人员可以双击Script Documents节点下面的任何script URLs来查看此页面所加载的JavaScript内容,从而开发人员可以在此打开的JavaScript文档设置断点进行调试,如下图所示:
intellisense7
(3) 丰富的查看/定位及可视化支持

当然,JavaScript的易于打开及导航当然是优良调试器的特征之一。而真正使Visual Studio 2008变成独特的JavaScript调试的特点是,它支持对象的执行及监视功能。当开发人员在Visual Studio 2008中对某一变量进行调试监视时,可以查看到此变量对象非常详细有用的信息,如下图所示:

intellisense8

开发人员可以查看运行时状态对象的所在方法、所有事件。可以获得更多的关于此对象的详细属性及属性类型。当然,开发人员可以在此面的网格中查看对象的相关信息,还可以在即时窗口中运行代码来查看相关信息。

除此之外,Visual Studio 2008还支持可插入可视化调试。它可以提供一般调试器之外的额外信息,从而使调试器对被调试对象提供更加丰富的可视化视图。例如,可以使用Visual Studio 2008内建的”Text”、”XML”或是”HTML”等可视化工具来加载新窗口,从而为被监视的变量提供更加详细的信息。

声明:本文采用BY-NC-SA协议进行授权 |WEB前端开发
转载请注明转自《用vs2008调试Javacscript

分享到:
评论

相关推荐

    ext4.js 打包 最新文件

    注意:Extjs4.XX的只能用,Sencha Cmd 4.0.5 (Windows) 来打包,不然运行的时候会报错 需要JDK1.6 或 JDK1.7,测试用1.8也能正常运行,注意这点即可。 1.2Sencha安装 路径:D:\Sencha,安装后目录如下图: 1.3Ruby...

    mysql-connector-java.zip 两个版本:5.1.47、8.0.28

    java连接mysql数据库的驱动,里边包含两个版本:5.1.47、8.0.28 也可从以下两个地址免费下载: ...3. https://cdn.mysql.com//archives/mysql-connector-java-5.1/mysql-connector-java-5.1.47.zip

    ubuntu dkpg及依赖安装文件

    dkpg默认保存路径:/var/cache/apt/archives 安装包下载路径: http://cn.archive.ubuntu.com/ubuntu/pool/universe/libc/libcddb/ http://cn.archive.ubuntu.com/ubuntu/pool/universe/libd/libdc1394/ ...

    国内ARM开发网站列表.docx

    10. MiniGUI博客:http://blog.21ic.com/user1/5108/archives/2008/50747.html 和 http://forum.eepw.com.cn/forum/main?url=http%3A%2F%2Fbbs.edw.com.cn%2F 关于MiniGUI图形界面系统的详细讲解和开发经验分享。...

    MyEclipse插件介绍与下载

    - [http://brosinski.com/stephan/archives/000028.php](http://brosinski.com/stephan/archives/000028.php) 12. **JasperAssistant**: - [http://www.jasperassistant.com/](http://www.jasperassistant.com/)...

    amqp-core-complete-v1.0、amqp.0-10.zip

    A080219O.pdf来源:https://www.immagic.com/eLibrary/ARCHIVES/TECH/AMQP_US/A080219O.pdf amqp.pdf来源:https://www.amqp.org/sites/amqp.org/files/amqp.pdf amqp-core-complete-v1.0.pdf来源:...

    Pyinstaller反编译脚本pyinstxtractor

    反编译工具。具体使用教程可以参见:http://www.lizenghai.com/archives/898.html

    erlang 25.1 放入/root/.kerl/archives,直接./kerl build 25.1

    5. **安装Erlang**:构建完成后,使用`./kerl install 25.1 <安装路径>`命令来安装Erlang。`<安装路径>`可以是你希望Erlang二进制文件存放的位置,例如`/usr/local`。 6. **激活Erlang版本**:使用`./kerl activate...

    外卖小程序源码带后台和数据库

    关于Bmob的入门使用,请参见:[http://blog.it577.net/archives/32/](http://blog.it577.net/archives/32/) 2、修改小程序源码文件/utils/init.js中的Bmob Appid信息 3、Bmob后台修改小程序Appid与支付信息,具体...

    嵌入式Linux网络资源列表.doc

    The Linux Kernel Archives** - **网址**: http://www.kernel.org/ - **描述**: Linux Kernel的官方网站,是获取最新内核版本和其他核心组件的重要资源。 **7. IBM developerWorks** - **网址**: ...

    Eclipse插件\快捷键

    **下载地址**:[http://brosinski.com/stephan/archives/000028.php](http://brosinski.com/stephan/archives/000028.php) #### 11. JasperAssistant (Commercial) - **JasperAssistant**:一款用于设计和管理 ...

    DebugLog Log调试工具

    在Android开发过程中,日志(Log)调试是一个不可或缺的环节,它可以帮助开发者追踪代码执行流程,定位和解决程序中的问题。"DebugLog"是专为Android开发者设计的一个强大的日志调试工具,它提供了比默认的Android ...

    eclipse插件大全介绍.

    **下载地址**:[http://brosinski.com/stephan/archives/000028.php](http://brosinski.com/stephan/archives/000028.php) --- ##### 11. Jasper Assistant - **功能**:Jasper Assistant 是一款用于 ...

    mysql5.6.46.zip

    下载界面:https://downloads.mysql.com/archives/community/ 下面的教程基于mysql-5.6.46-linux-glibc2.12-x86_64.tar.gz进行讲解。 教程链接:https://blog.csdn.net/qq_43017750/article/details/106486280 快捷...

    Eclipse插件下载地址

    - **下载地址**:[http://brosinski.com/stephan/archives/000028.php](http://brosinski.com/stephan/archives/000028.php) - **功能简介**:RegEx Test插件提供了一个方便的正则表达式测试环境,帮助开发者验证...

    weinre1.6.1

    网上所描述weinre的错误下载地址:https://github.com/callback/callback-weinre/archives/master及https://github.com/phonegap/weinre/archives/master.本资源为真正可以下载的,可以使用的weinre-jar-1.6.1.zip...

    hadoop学习资料地址

    8. **BJZhanghao的博客**:`http://www.cnblogs.com/bjzhanghao/archive/2008/11/12/1325113.html` - 分享了关于Hadoop架构设计的文章,有助于理解其背后的原理。 9. **Coderplay的博客**:`...

    学习搜索的最好网站

    - **《SearchDay》**: [http://searchenginewatch.com/searchday/archives.html](http://searchenginewatch.com/searchday/archives.html) SearchEngineWatch 是关于搜索引擎最大的综合性网站之一,它不仅提供了...

Global site tag (gtag.js) - Google Analytics