IE Javascript 进阶调试

最新推荐文章于 2024-12-04 15:26:30 发布
最新推荐文章于 2024-12-04 15:26:30 发布
阅读量835 收藏 1
点赞数
本文介绍IE浏览器中的高级调试技巧，包括控制台输出查看、元素事件查看、脚本格式化、异常断点启用等，帮助解决网页脚本在IE上的运行问题。
IE Javascript 进阶调试

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

目录

看控制台输出(console output)

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

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

debug_js_1

查看元素事件

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

1. 点箭头(Select Element by Click)

2. 点你要查看的元素

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

debug_js2

格式化脚本

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

debug_js3

格式化之后

debug_js4

启用异常断点

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

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引擎提速就被忽略了。

debug_js5

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

Visual Studio调试IE网页

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

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

debug_js6

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

debug_js7

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

debug_js8

Fiddler

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

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

Replay Captured Traffic

JSLint

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

具体可以参考JSLint的文档。

JSFiddle

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

js_fiddle

Quirks Mode

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

再上个图

debug_js_1

内存泄露

内存泄露在新版本的浏览器中已经不是很常见了，可以看看下面的文章了解下会造成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. 回到网页源代码查找泄露原因

clip_image001

 
 
 
nic7968
关注
JavaScript进阶
m0_75079074的博客
05-25 318
S初学者经常花很多时间才能习惯变量提升，还经常出现一些意想不到的bug，正因为如此，ES6 引入了块级作用域，用let或者const声明变量，让代码写法更加规范和人性化。比如我们创建了佩奇的对象，继续创建乔治的对象还需要重新写一遍，此时可以通过构造函数来快速创建多个类似的对象。JavaScript 中的作用域是程序被执行时的底层机制，了解这一机制有助于规范代码书写习惯，避免因作用域导致的语法错误。知道函数参数默认值、动态参数、剩余参数的使用细节，提升函数应用的灵活度，知道箭头函数的语法及与普通函数的差异。
黑马程序员前端JavaScript高级——ES6学习笔记
weixin_44566194的博客
10-29 3509
黑马程序员前端教程的PPT和代码学习笔记，里面包含了面向对象的编程思想，以及构造函数，类和对象、原型链、箭头函数、数组和字符串新增方法、函数递归、深拷贝浅拷贝、正则表达式等知识点。本文是对优快云其他博主记录的一个补充，因为黑马也是今年才陆续补充一些知识点的视频的，本文将其收录于此，雷同勿怪。
在 IE 中调试 JavaScript
binyao02123202的专栏
05-28 1156
<br />简介<br /> 虽然越来越多的用户转向使用 FireFox 等非 IE 内核浏览器，但是 Internet Explorer(IE, 6 以及后续版本 ) 仍然有着超过 50% 的市场占有率，大部分产品产品都需要支持 IE。不过 IE 缺少像 FireFox 上那么多调试 JavaScript 代码的插件，使得在 IE 上调试 JavaScript 代码比较困难，很多开发人员喜欢通过加入 alert 语句来进行调试，很大程度上降低了开发效率。 本
在IE中调试Javascript
weixin_33736048的博客
09-01 189
不管我们写代码的时候如何小心，都不可能完全避免程序中出现bug，这个时侯就需要我们在调试的时候找出错误，修改代码。 Javascript是一门灵活的语言，灵活的语法和它解释执行的特性，使得Javascript中的错误更加难以被察觉，当我们在运行是发现错误后，就要在浏览器中对Javascript进行调试了，目前市场上用户数量最大的浏览器IE自然也具备了调试Javascript的功能，让...
IE11之F12 Developer Tools--调试器(Debugger)
06-05 1226
使用调试器工具在代码运行时对其导航、设置监视点和断点，查看调用堆栈，以及提高编译/精简JavaScript的可读性。 调试器可以帮助你了解为何你的代码片段会出现未按照预期方式运行、未在预期时间运行及在不应运行的时候运行的情况。在调试过程中可以暂停执行中的代码，让你可以备份和重复代码块，也可以从不同角度检查代码的情况。 调试器默认布局显示三个窗格，可以调整其宽度和/或高度。 　　...
IE浏览器JavaScript调试工具与技巧
weixin_33597080的博客
12-04 1438
本文还有配套的精品资源，点击获取 简介：JavaScript在网页开发中调试是关键环节，特别是在解决IE浏览器的兼容性问题时，掌握IE的JavaScript调试工具尤为重要。本文介绍了在IE中进行JavaScript调试的基本技巧，包括使用开发者工具进行断点设置、运行时错误捕捉、变量检查、调用堆栈分析、性能分析、网络请求监控、模拟不同版本IE浏览器以及DOM查看与操作等。熟...
JavaScript学习进阶(1)
08-10
创建一个新的HTML文件，如`test.html`，使用文本编辑器（如记事本或写字板）打开，将JavaScript实例代码复制粘贴进去，保存并用浏览器（推荐使用IE，因为其在遇到错误时会给出提示，有利于开发者调试）打开，就可以...
全面回顾与进阶：前端JavaScript调试宝典
新一代的浏览器，如Firefox、Chrome和IE，引入了更强大的调试工具——浏览器内置的JavaScript控制台。控制台允许开发者使用`console.log`等方法在后台输出调试信息，这种方式既不会阻塞页面渲染，又提供了更友好的...
JavaScript教程：从基础到进阶探索
3. **事件模型**：JavaScript支持多种类型的事件，如UIEvent（鼠标和键盘事件）、MouseEvent（鼠标事件）、MutationEvent（DOM结构变化事件）和IE特有的事件模型。在不同浏览器间可能有兼容性问题，需关注跨浏览器的...
如何使用IE浏览器自带开发人员工具调试JS程序？
乔志勇笔记
07-03 2万+
http://support.tongda2000.com/kb11019042/ 在设计工作流表单的时候，编写的JS程序能否正常运行，这时候就需要对JS程序进行调试工作。在此以工作流表单中一个简单的JS求和方法为例进行介绍。表单设计样式如图所示： 本例中是在“求和结果：”标签上绑定了JS的鼠标点击事件，当点击该标签时，便会触发JS点击事件函数。该函数的作用是：将获取到的第一个
IE浏览器中怎么调试JavaScript程序?
低调的嚣张
08-05 3490
现在javascript是大行其道，在前端是无处不在，到处都有其身影，在这里主要是介绍在IE浏览器上的调试。1、在记事本里输入一段程序，这里为了简单，就在浏览器上显不一个文本框和一个按钮，做一个加法运算。代码如图： 2、打开浏览器输入文件地址，出现如下所示的界面。3、按F12键，出现javascript的调试窗口。在需要调试的地方前面有数字行的地方左击命中断点。4、再点击“启动调试”，回到浏览器再
IE浏览器javascript调试
蜗牛学习笔记
02-27 2万+
怎么进入javascript的调试状态呢，各浏览器的实现是不同的，像火狐浏览器有自己的firebug，chrome浏览器本身就自带了调试。 这里讲一下IE浏览器的调试，毕竟当前浏览器市场IE还是占了很大的份额的。 想在IE浏览器中调试代码，可以像java代码一样，给代码打断点。 Javascript中断点的方式为 debugger 关键字，在需要调试的地方添加上debugger，再开启javascript的调试，就可以进入调试模式了。 debugger; var aHref = hrefs[i]; if
We're sorry but ***** doesn't work properly without JavaScript enabled. Please enable it to continue
热门推荐
anranfengge123的博客
04-28 4万+
使用vue-electron-template模块快速生成的项目上线后，ajax突然返回这个鬼错误， 很多人说把router中的mode修改为hash模式就行，亲测没有什么用，后来发现最主要的原因是请求的Request URL错误，只要这个Request URL修改正确就可以了（在vue项目中，看一下axios配置的baseURL是否正确）。 ...
Charles在Mac中抓包使用
weixin_30242907的博客
05-29 138
前人经验总结： 　　1.支持配置抓取定向地址的网络请求 打开charles，打开Proxy->Recording Settings 　　 点击add，可以将需要抓取的地址添加进去，这边抓取淘宝的请求，如下图添加，点击“OK”，然后浏览器访问www.taobao.com： 　　 发现Charles抓取到了*.taobao.com的请求，如下图所示，点开...
初识HTTP协议（二）
huangguangyourena的博客
02-02 261
1.HTTP是无状态协议，HTTP协议自身不对请求和响应之间的通信状态进行保存。 比如说客户端给服务器发送了请求，但得到响应之后这个请求不会被保存，也就是说 你必须再请求一次才能得到对应的响应，但是随着Web的不断发展，因无状态而导致 的业务处理变得棘手的情况增多了。比如用户登录到一家购物网站，当他跳转到该站 的其他网页后也应该继续保持登录状态，所以网站为了能够掌握是谁送出的请求， 需要
BRAPH 2.0 is a comprehensive software package for the analys
09-03
BRAPH 2.0 is a comprehensive software package for the analysis and visualization of brain connectivity data, offering flexible customization, rich visualization capabilities, and a platform for collaboration in neuroscience research..zip
光流法C++源代码
最新发布
09-03
### 光流法C++源代码解析与应用 #### 光流法原理 光流法是一种在计算机视觉领域中用于追踪视频序列中运动物体的方法。它基于亮度不变性假设，即场景中的点在时间上保持相同的灰度值，从而通过分析连续帧之间的像素变化来估计运动方向和速度。在数学上，光流场可以表示为像素位置和时间的一阶导数，即Ex、Ey（空间梯度）和Et（时间梯度），它们共同构成光流方程的基础。 #### C++实现细节 在给定的C++源代码片段中，`calculate`函数负责计算光流场。该函数接收一个图像缓冲区`buf`作为输入，并初始化了几个关键变量：`Ex`、`Ey`和`Et`分别代表沿x轴、y轴和时间轴的像素强度变化；`gray1`和`gray2`用于存储当前帧和前一帧的平均灰度值；`u`则表示计算出的光流矢量大小。 #### 图像处理流程 1. **初始化和预处理**：`memset`函数被用来清零`opticalflow`数组，它将保存计算出的光流数据。同时，`output`数组被填充为白色，这通常用于可视化结果。 2. **灰度计算**：对每一像素点进行处理，计算其灰度值。这里采用的是RGB通道平均值的计算方法，将每个像素的R、G、B值相加后除以3，得到一个近似灰度值。此步骤确保了计算过程的鲁棒性和效率。 3. **光流向量计算**：通过比较当前帧和前一帧的灰度值，计算出每个像素点的Ex、Ey和Et值。这里值得注意的是，光流向量的大小`u`是通过`Et`除以`sqrt(Ex^2 + Ey^2)`得到的，再乘以10进行量化处理，以减少计算复杂度。 4. **结果存储与阈值处理**：计算出的光流值被存储在`opticalflow`数组中。如果`u`的绝对值超过10，则认为该点存在显著运动，因此在`output`数组中将对应位置标记为黑色，形成运动区域的可视化效果。 5. **状态更新**：通过`memcpy`函数将当前帧复制到`prevframe`中，为下一次迭代做准备。 #### 扩展应用：Lukas-Kanade算法 除了上述基础的光流计算外，代码还提到了Lukas-Kanade算法的应用。这是一种更高级的光流计算方法，能够提供更精确的运动估计。在`ImgOpticalFlow`函数中，通过调用`cvCalcOpticalFlowLK`函数实现了这一算法，该函数接受前一帧和当前帧的灰度图，以及窗口大小等参数，返回像素级别的光流场信息。 在实际应用中，光流法常用于目标跟踪、运动检测、视频压缩等领域。通过深入理解和优化光流算法，可以进一步提升视频分析的准确性和实时性能。 光流法及其C++实现是计算机视觉领域的一个重要组成部分，通过对连续帧间像素变化的精细分析，能够有效捕捉和理解动态场景中的运动信息
Rust库，用于构建将C_C代码编译为Rust库的脚本_Rust library for build scripts t
09-03
Rust库，用于构建将C_C代码编译为Rust库的脚本_Rust library for build scripts to compile C_C++ code into a Rust library.zip
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值