大多数人用IE都知道IE有个F12 开发者工具可以用来调试网页的各种问题,本文以IE10为例,尽量少谈基础,只说说IE脚本调试中的进阶技巧。如果你的网页脚本在IE上运行出现问题,希望下面的技巧可以帮你省点时间。

目录

看控制台输出(console output)

如果说你发现网页有什么功能不工作,第一步要做什么?我建议先查看控制台输出。很多时候控制台已经告诉脚本执行过程中的问题,会省掉你分析代码、设断点的时间。

其实我也不是故意的,随便打开个网页总遇到些脚本错误。赶紧回头开着console看看自己的网站是不是也一样。- _-!!

查看元素事件

要想查看网页上元素的属性或者注册了哪些事件,按照以下步骤,

1. 点箭头(Select Element by Click)

2. 点你要查看的元素

3. 看属性窗口,元素属性和事件都在里面了(可以动态修改)。

格式化脚本

很多上线网站会会对脚本进行精简,格式全去掉了,简直无法直视。点下面这个按钮来格式化脚本。

格式化之后

启用异常断点

看上面的图,菜单中提供了三种与异常相关的设置,

1. Break on unhandled exceptions

2. Break on all exceptions

3. Continue after exception

如果你觉得问题出在异常上,不妨启用异常断点来调试下。如果你坚信问题不在异常上,那就禁用这个异常断点,免得被异常打断调试。

文档模式(document mode)

很多网页在IE上显示出问题都因为文档模式,比如有些网页中大量使用脚本,在IE上总觉得运行慢,打开F12看看网页在什么文档模式下运行,文档模式决定了IE使用什么渲染引擎和JS引擎,例如IE9+中对Javascript的执行速度有显著提高,但是如果你的网页被固定在了IE8之前的文档模式,那新的JS引擎提速就被忽略了。

关于IE如何根据网页选择不同的Document Mode,可以查看MSDN DOCTYPE Declaration

Visual Studio调试IE网页

接下来压轴的来了,不知道有多少童鞋用过这个功能,其实IE可以外接Visual Studio调试脚本。

先到Internet Option中将调试功能启用

接下来到View – External Script Debugger - Open,选择Visual Studio

Visual Studio就会附加到IE进程,接下来你就可以用VS的强大调试功能在调试脚本了,比如你最常用的F12 (Go to definition)

Fiddler

Fiddler这个工具应该是众所周知的了,写如何用fiddler的文章也有很多,这里提到他是因为他是个不错的重放工具,比如问题发生在你访问不到的环境中,或者好不容易重现了一次,抓包可以通过fiddler自动重放功能反复调试。不用正真去访问网站或者重现问题。

如何导入抓包,重放抓包可以参考下面文档。

Replay Captured Traffic

JSLint

如果调试的是你自己的代码,将代码贴到JSLint中看看工具如何评价你的代码。JSLint可以帮你检查语法错误、提示代码风格问题和结构问题。

具体可以参考JSLint的文档

JSFiddle

如果你的代码还在开发阶段,JSFiddle是个不错的在线编辑器,你可以在线编辑、运行HTML, Javascript, CSS,引用各种流行的的JS library,还有简单的快捷键支持,在线工具做成这样算不错的了。

Quirks Mode

Javascript少不了要处理DOM和CSS,各种DOM方法、属性,样式表在各个版本的浏览器是否支持,直接查查Quirks Mode网站,应该有你想找的内容。

再上个图

内存泄露

内存泄露在新版本的浏览器中已经不是很常见了,可以看看下面的文章了解下会造成IE内存泄露的模式,

Understanding and Solving Internet Explorer Leak Patterns

Memory Leakage in Internet Explorer

不过你真的有幸写出让浏览器也想不清楚的代码,可以尝试下下面的工具。

s-IEve可以追踪网页泄露元素,打开这个工具估计就可以看明白怎么回事了,简单的使用方法如下,
1. 下载打开s-IEve工具,通过s-IEve来打开存在内存使用问题的网页
2. 重复会造成内存泄露的操作
3. 界面右边列表中#leaks列中表示了泄露的DOM节点数量
4. 点击show leaks按钮察看泄露网页节点
5. 选中泄露节点点击Properties按钮,察看网页节点相关的html属性
6. 回到网页源代码查找泄露原因

IE Javascript 进阶调试的更多相关文章

  1. javascript进阶笔记(2)

    js是一门函数式语言,因为js的强大威力依赖于是否将其作为函数式语言进行使用.在js中,我们通常要大量使用函数式编程风格.函数式编程专注于:少而精.通常无副作用.将函数作为程序代码的基础构件块. 在函 ...

  2. JavaScript进阶知识点——函数和对象详解

    JavaScript进阶知识点--函数和对象详解 我们在上期内容中学习了JavaScript的基本知识点,今天让我们更加深入地了解JavaScript JavaScript函数 JavaScript函 ...

  3. javascript代码 调试方法

    你的代码可能包含语法错误,逻辑错误,如果没有调试工具,这些错误比较难于发现. 通常,如果 JavaScript 出现错误,是不会有提示信息,这样你就无法找到代码错误的位置. 在程序代码中寻找错误叫做代 ...

  4. #笔记#JavaScript进阶篇一

    #JavaScript进阶篇 http://www.imooc.com/learn/10 #认识DOM #window对象 浏览器窗口可视区域监测—— 在不同浏览器(PC)都实用的 JavaScrip ...

  5. Javascript的调试利器:Firebug使用详解

    转载自:http://blog.csdn.net/tianxiaode/archive/2007/09/02/1769152.aspx   一直在用firebug,可是没有这么精通,今天看到本文章觉得 ...

  6. 4、JavaScript进阶篇①——基础语法

    一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面 ...

  7. javascript的调试

    1. 关于javascript的调试,最好将浏览器的脚本通知打开. 2. 最好设置为每次访问页面时检查.

  8. JavaScript 进阶(一)JS的"多线程"

    这个系列的文章名为“JavaScript 进阶”,内容涉及JS中容易忽略但是很有用的,偏JS底层的,以及复杂项目中的JS的实践.主要来源于我几年的开发过程中遇到的问题.小弟第一次写博客,写的不好的地方 ...

  9. JavaScript进阶(一)

     OK接下来,我们再次梳理一遍js并且提高一个等级. 众所周知,web前端开发者需要了解html和css,会只用html和css创建一个漂亮的页 面,但是这肯定是不够的,因为它只是一个静态的页面,我们 ...

随机推荐

  1. 性能优化九之UI卡顿分析

    在前一篇博客中提到内存抖动和耗时复杂的计算会导致UI卡顿. 那为什么内存抖动会导致UI卡顿呢? 其实在 性能优化一之内存与垃圾回收器 这篇文章中已经有所提及. 这里来详细说明一下: 渲染功能是应用程序 ...

  2. jvm 原理和优化

    在csdn 上看到的,觉得很好,收藏了: 原博文地址: 濤子 http://blog.csdn.net/ning109314/article/details/10411495/ JVM工作原理和特点主 ...

  3. CentOS 6.5 x86_64系统手动释放内存

    1.查询当前内存使用情况和释放缓存的参数 redismaster 10:29:24 [~] [root] free -m total used free shared buffers cachedMe ...

  4. (转)__cdecl __fastcall与 __stdcall

    原帖 http://blog.sina.com.cn/s/blog_6b7c56870100l8rf.html __cdecl   __fastcall与   __stdcall 调用约定:  __c ...

  5. node学习笔记(三)

    //事件驱动events //events是node最重要的模块没有之一,因为node.js本身的架构就是事件式的,而他提供了唯一的接口,所以堪称node.js事件编程的基石; //events几乎被 ...

  6. python入门简介

    Python前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC ...

  7. 关于UltraEdit的两个小问题

    问题一:如何让Java在编写过程中的关键字着色? 首先,需要把编辑的文件名字后缀更改为.java; 然后,找到UltraEdit的安装目录下的wordfile文件夹(以前是一个wordfile.txt ...

  8. 将 project.json 项目转换为 Visual Studio 2015 解决方案

    var appInsights=window.appInsights||function(config){ function r(config){t[config]=function(){var i= ...

  9. 一致性Hash算法

    from wikipedia 一致哈希 历史 1997年由MIT的Karger等在一篇学术论文中提出如何将“一致性Hash”应用于用户易变的分布式Web服务中.也可用于实现健壮缓存来减少大型Web应用 ...

  10. wince中测试驱动应用程序的实现

    这里建的工程是MFC的smart device,选择ARMV4I的指令集,不同的设备可能会有轻微的不同,不过大体实现是一样滴.还有,这里选的应用类型是dialog base. 1.应用监测内核动向 内 ...