IE8“开发人员工具”(下)

浏览器模式


说白了,就是让用户选择当前页面用何种IE版本去渲染。

 

文本模式


说起“文本模式”这个名词,这又要回到渲染页面的3种模式了:诡异模式(Quirks mode,也有翻译为兼容模式、怪异模式的),标准模式(Standards mode),和几乎标准模式(Almost standards mode)。这是一个非常重要、但是很多人却比较模糊的概念。一两句话不太能说清楚,这样说吧——“页面的不同渲染模式,将直接影响页面的最终呈现效果”,也就是说,一个页面如果在这种模式下显示完美,但是在另外一种模式下可能就显示的一塌糊涂。而决定页面模式的是页面的!DOCTYPE属性。

乖乖,这玩意太绕人了,还是直接上例子吧。最经典的就是对盒装模型的解释差异了。下面两个图,是相同页面,采用不同页面渲染模式的最终显示效果。

 

利用IE8开发人员工具调试JavaScript脚本


重头戏来了。很多朋友梦寐以求的功能呀——JavaScript脚本调试。一直摆脱不掉FireFox,就是因为Firebug实在太好用。虽然利用VS这样航母级的软件也能进行JavaScript脚本的调试。但是,很多前台开发人员并不会为了一个JavaScript调试功能而去安装那种大家伙。所以对JavaScript的调试,IE的用户一直耿耿于怀。但是,现在终于可以平息了。因为IE8开发人员工具终于也有了小巧,却功能强大的JavaScript调试功能。

图上的说明已经很清楚了,下面就详细讲一下“控制台”、“断点”、“局部变量”、“监视”、“调用堆栈”这些视图吧。

控制台

在控制台会显示脚本调试中的一些信息,例如错误信息、警告信息一类的。

恩,其实也可以当成是一个微型JavaScript运行环境。你可以在这里直接键入脚本并运行。如果一行不够的话,可以切换到多行模式。输入完毕后,点击“运行脚本”,就可以看到运行结果了。

断点

是一个显示你设定的所有断点的列表。方便你统一管理:统一删除、统一使用或者统一禁用。

局部变量

可以详细的显示各个变量的所有方法、事件和属性。我最喜欢干的事情,就是一个个的看下去,看到不知道的就去查资料,绝对是个学习JavaScript的好方法。

监视

可以显示任意你需要的变量的方法、事件和属性。可以添加多个。整体来说和局部变量视图差不多,只是可以更灵活的显示你需要的而已。

调用堆栈

可以直观地显示函数调用堆栈情况,以及现在执行到哪个函数的情况。对于理顺脚本的运行顺序和嵌套很有帮助。

 

IE8开发人员工具的探查器


用过微软SQL数据库中的Profiler的朋友都知道,那个一个帮助SQL分析效率的工具。它会记录所有的执行以及他们的执行时间,从而提供一份报表。这样,就可以知道到底是什么在效率上拖l了后腿。

IE8 的探查器(Profiler),也引入了这个概念,只是它探测的是JavaScript脚本而已。

先点击【开始配置文件】按钮,然后运行脚本或者刷新页面。等脚本执行完了,或者页面刷新完毕后点击【停止配置文件】按钮,就会生成探查报告了。

它提供两种视图,一种是“函数”,另一种是“调用树”。无论何种视图,都可以清晰且忠实的展现出各个函数的执行所用时间。从而,方便你分析出“为啥我的页面那么慢呢?”

函数视图

函数视图可以方便的按照各个参数进行排序,从而方便的找出类似“谁用的时间最长”这样的答案。

调用树

调用树视图可以方便的看出各个函数之间的调用关系。

 

转载于:https://www.cnblogs.com/PBDragon/p/3784213.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575405.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

javascript历史、作用、三大组成、javascript代码书写位置、注意事项、变量

JavaScript简介 JavaScript历史: JavaScript是一门解释型、动态类型、基于对象的脚本语言(不需要编译,直接执行,与之相对的是编译型语言),由美国网景公司的布兰登艾奇发明,起初称LiveScript,其简称js。 …

数据字典视图

数据字典视图 数据自动视图分为三大类,分别用对应的前缀表示为user_*,all_*,dba_*分别表示的意思如下: user_*:有关用户所拥有的对象的信息,即用户自己创建的对象的信息 all_*:有关用户可以访问的对象的信息,即用户自己创建的对象…

javascript中数据类型及转换、String()和toString()的区别

数据类型: JavaScript中的数据类型: 在计算机中,不同的数据类型所占的储存空间是不同的。1、原始数据类型:number (数字)、string(字符串)、boolean(布尔值)、null(空对…

Algorithm(1) - Karatsuba multiplication

这个系列主要是记一下目前效率较高或者比较出名的一些算法. Karatsuba multiplication: x5678 then: a56 b67 y1234 c12 d34 setps: 1: a*c 672 ① 2: b*d2652 ② 3: (ab)(cd)6164 ③ 4: ③-②-①2840 5: 6720000 2652284000 7006652 Recursive …

javascript中基本包装、算数运算符、递增递减运算符、赋值运算符、比较运算符、逻辑运算符、运算符优先级

基本包装类型&#xff1a; 指基本类型的数据变量通过调用属性或者方法包装成了复杂类型&#xff0c;这个变量也称为基本包装类型对象 <script>var str hello;str str.replace(ll, ee);console.log(str); //heeeo//通过基本包装&#xff0c;无论Boolean对象中传入true还…

grootjs 简明教程

grootJs简明教程 mvvm框架也是解决的一类问题&#xff0c;在某些时候会提高生产效率&#xff1b; 经过接近一个月的努力&#xff0c;grootJs测试版终于发布了 grootJs是一个mvvm的框架&#xff0c;名字取 grass 和root 两个单词的组合&#xff0c;既“草根”之意。在创作的中…

流程控制介绍,顺序结构、分支结构、循环结构、Promise对象、throw语句、break和continue关键字

流程控制 流程控制&#xff1a;指代码的执行顺序&#xff0c;有三种方式&#xff1a;顺序结构、分支结构、循环结构 顺序结构&#xff1a; 代码从上到下&#xff0c;从左到右的执行顺序。 分支语句&#xff1a; if语句、if-else语句、if-else if-else语句、switch-case语…

javascript中数组、冒泡排序、函数及函数实参形参、arguments伪数组、异步函数等介绍

数组&#xff1a; 指一组有顺序的数据&#xff0c;其作用就是用来一次性存储多个数据。&#xff08;数组元素&#xff1a;数组中的每一个数据&#xff1b;数组长度&#xff1a;数据中元素的个数&#xff1b;数组索引&#xff1a;用来存储或访问数组中的数据&#xff0c;也叫下…

中文字串截取无乱码的问题

UTF-8中文截取函数在PHP中&#xff0c;substr()函数截取带有中文字符串的话&#xff0c;可能会出现乱码&#xff0c;这是因为中西文一个字节所占有的字节数不一样&#xff0c;而substr的长度参数是按照字节去算的&#xff0c;在GB2312编码时&#xff0c;一个中文占2个字节&…

javascript中作用域、全局作用域、局部作用域、隐式全局变量、块级作用域、作用域链、预解析

作用域 作用域指的是代码的作用范围&#xff0c;按照作用域划分变量可分为全局变量和局部变量&#xff1b;作用域可分为&#xff1a; 全局作用域&#xff1a; 指全局变量作用的范围&#xff1b;全局变量指的是通过var在函数外面声明的变量&#xff0c;在js中任何位置都可以使…

楼宇对讲门铃的芯片选型分析

目前很多的高层住宅都使用了对讲门铃了&#xff0c;在频繁使用中&#xff0c;门铃会出现的越来越多种类&#xff0c;下面我就简单的介绍会有用到的几款芯片. 语音通话芯片&#xff1a;D34018,D34118,D5020,D31101; D34018 单片电话机通话电路&#xff0c;合并了必 需的放大器…

easyui 布局自适应

最近在把以前写的一个项目改成用easyui做前端。过程中遇到了不少问题。其中一个就是datagrid不能很好的布局。想了好多办法都有局限。最后想到会不会是布局&#xff08;easyui-layout&#xff09;的问题&#xff0c;经过实验&#xff0c;最后问题解。 1&#xff1a;比如在项目中…

javascript中对象、JSON格式数据、创建对象的方式、数据类型分类及特点

对象 对象指&#xff1a;具体的一个实物&#xff0c;javascript中对象是指一组没有顺序的属性和方法的集合&#xff0c;所有的事物都是对象&#xff0c;例如&#xff1a;函数&#xff0c;数组&#xff0c;字符串等。属性指事物的特征&#xff0c;一般为名词表示&#xff1b;方…

在存储过程中编写正确的事务处理代码

在 SQL Server 中数据库事务处理是个重要的概念&#xff0c;也稍微有些不容易理解&#xff0c;很多 SQL 初学者编写的事务处理代码存往往存在漏洞&#xff0c; 本文介绍了三种不同的方法&#xff0c;举例说明了如何在存储过程事务处理中编写正确的代码。 在编写 SQL Server 事务…

javascript中内置对象简介、Array

内置对象&#xff1a; javascript的三种对象&#xff1a;1.内置对象—JavaScript自带的对象&#xff1b;2.自定义对象—自己定义构造函数创建对象&#xff1b;3.浏览器对象— BOM时候介绍&#xff0c;几个常用内置对象&#xff1a;Math Date String Array Object Array对象&a…

javascript中Date对象及方法

Date对象&#xff1a; 该对象呈现时间中的某个时刻。其本质是自1970年1月1日&#xff08;UTC&#xff09;起经过的毫秒数&#xff0c;相关属性的方法如下&#xff1a;&#xff08;如果Date对象中传入指定的时间&#xff0c;则以传入的指定时间返回相关数据&#xff0c;就不会以…

如何调优JVM

堆设置 -Xmx3550m&#xff1a;设置JVM最大堆内存 为3550M。-Xms3550m&#xff1a;设置JVM初始堆内存 为3550M。此值可以设置与-Xmx相同&#xff0c;以避免每次垃圾回收完成后JVM重新分配内存。-Xss128k&#xff1a;设置每个线程的栈 大小。JDK5.0以后每个线程栈大小为1M&#x…

javascript中encodeURL对象、Boolean对象、Function对象、globalThis对象、Infinity对象、isFinite对象、isNaN对象、JSON对象

encodeURI()对象&#xff1a; 用于对特殊字符进行编码&#xff0c;decodeURI()对象&#xff1a;将特殊字符进行解码&#xff0c;常用于URL地址编码中 <script>var url https://mozilla.org/?xшеллыvar urlEncode encodeURI(url);console.log(urlEncode); //http…

JAVA Web学习篇--Servlet

Servlet由来 做过BS项目的人都知道&#xff0c;浏览器可以依据HTML静态标记语言来显示各式各样的网页。可是假设我们须要在网页上完毕一些业务逻辑&#xff1a;比方登陆验证。或者说网页显示的内容在server的数据库中。假设是这样&#xff0c;除了负责显示的HTML标记之外&#…

javascript中Math对象及方法

Math对象&#xff1a; 其所有属性与方法都是静态的&#xff0c;其相关属性和方法如下&#xff1a; 继&#xff1a; 继&#xff1a; 提示&#xff1a;本文图片等素材来源于网络&#xff0c;若有侵权&#xff0c;请发邮件至邮箱&#xff1a;810665436qq.com联系笔者 删除。 笔者…