`
aiyou110
  • 浏览: 30873 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

IE8的开发者工具用法笔记(一)

阅读更多

        最近做项目发现个兼容性的bug,是因为这个问题只在ie下会有。之前一直用firebug或者chrome的工具台调试,就很ok了,大部分js的问题都能搞的定。这回只能用ie8自带的开发者工具了。

        不过,在使用了一个星期之后,我要说IE8真是出人意料,它的表现堪称优秀。我不想比较它与其他浏览器谁优谁劣,我只想说IE6一向被诟病的几个最大的缺陷,IE8都做出了很大的改善,比如对标准的支持、对内存的管理、经常崩溃的问题等等。

      1、怎样打开开发人员工具?

       在ie中要启动开发人员工具:只需要按下F12,或者在点击“工具”菜单中的“开发人员工具“。打开之后的界面,如下图所示:

     在主工作区(Primary Content Pane)中有四个选项卡——HTML、CSS、Javascript(脚本)、Profiler(探查器)。这就是开发工作的主要环境。
    

     HTML是默认的选项卡,每当新打开一个网页,网页的源代码就以DOM树的形式在其中展示。点击最左边的+号,可以展开/收缩该DOM元素。

       2、与firebug的比较:

       我感觉是,对于一些最常见的任务,IE8的“开发人员工具”和Firebug都可以完成,比如网页元素的样式分析和Javascript代码的除错。除此之外,两者各有特点。

      第一、ie下的颜色选择器和图像信息处理。

       点击开发工具的界面的——工具——显示颜色选取器,或者用快捷键ctrl+k。

       这个工具可以帮助在页面获取你所需要的颜色的值。

       还有就是关于图像信息处理,在工具栏上有图像选项,有关于图像信息的处理,使用起来也很方便。

 

         第二、性能调试的“探查器”(Profiler)功能

这个功能会列出Javascript脚本中每一个函数、每一个命令运行的次数和所花费的时间,很有助于找出网页代码的性能瓶颈。(下一篇会有详细的介绍)。

      第三、此外除了以上一些优点,还发现了与firebug最大的不同,“开发人员工具”无法显示关于HTTP请求的信息,所以它几乎无法用来调试Ajax网页程序。这就使得firebug的优点比较明显了。

 

 

  • 大小: 86.6 KB
分享到:
评论

相关推荐

    传智播客 fckeditor 笔记

    在本笔记中,我们将深入探讨FCKeditor的使用、配置及常见问题的解决方法。 ### 一、FCKeditor的基本使用 1. **安装与引入**:首先,你需要从官方网站下载FCKeditor的源码包,解压后将文件上传至服务器。在HTML页面...

    如何简单有效的解决IE7、8浏览器不支持document.getElementsByClassName的问题.zip

    总的来说,这个压缩包提供了一种在IE7和IE8中兼容`getElementsByClassName`的方法,这对于需要维护旧项目的开发者来说非常有用。通过理解这些知识点,开发者可以更好地应对老旧浏览器的兼容性问题,同时也能掌握如何...

    自己碰上的IE8兼容笔记

    IE8的开发者工具中,`console`对象可能不存在,需要在脚本中检测`console`是否存在,以免在生产环境中抛出错误。 以上只是IE8兼容性问题的一小部分,开发过程中可能还会遇到更多问题。为了确保在IE8下的正常运行,...

    IE恶搞器(可以改英语大厅的数据)

    文本文件通常是用来记录程序的使用方法、开发者笔记或者帮助文档,对于理解软件的运作方式有一定帮助。 总的来说,这个“IE恶搞器”是一个潜在的危险工具,它可以用来非法篡改特定在线环境的数据,尤其是教育相关的...

    Fckeditor学习研究整理笔记

    这个"**Fckeditor学习研究整理笔记**"可能是某位开发者或博主对其深入研究后整理的一份详细资料,旨在帮助其他人更好地理解和使用FCKeditor。虽然具体的笔记内容无法直接查看,但从标题和标签我们可以推测其主要涵盖...

    div+css学习笔记(IE与fox好多不兼容的问题)

    在网页设计领域,浏览器兼容性问题一直是开发者面临的一大挑战,尤其是在使用HTML、CSS以及JavaScript时。本文主要讨论了IE(Internet Explorer)与Firefox之间在处理`div+css`布局时的一些常见不兼容问题。 1. **...

    easyUI笔记

    - **jQuery**:熟练掌握 jQuery 的使用方法,包括选择器、事件处理、AJAX 调用等。 #### 三、jQuery EasyUI 的特点 1. **基于 jQuery 的用户界面插件集合**:提供了丰富的 UI 组件,如按钮、菜单、对话框等。 2. *...

    超详细的web前端基础学习笔记

    本学习笔记涵盖了 web 前端开发的基础知识,包括 HTML 的基本结构、文档类型声明、常见的文本和列表标签、分区标签以及图片标签的使用方法。对于初学者而言,这些内容是构建网页的基础,而掌握这些基础知识是进一步...

    bootstrap学习笔记-html5

    从简单的案例开始实践,逐步掌握这两个工具的使用方法,将对提升网页开发技能大有裨益。在学习过程中,注意理解和应用HTML5的语义化、媒体处理、离线存储等特性,同时熟悉Bootstrap的组件、网格系统和插件,这样就能...

    HTML5高级程序设计学习笔记

    - **`querySelector()`**:这个方法返回符合指定CSS选择器的第一个元素。例如,`document.querySelector('.highClass')`会返回类名为`highClass`的第一个元素。 - **`querySelectorAll()`**:此方法返回符合指定CSS...

    .Net 单元测试笔记

    尽管文档相对较少,但通过实例学习,开发者可以快速掌握其使用方法。例如,以下是最简单的WatiN示例: ```csharp [Test] public void SearchForWatiNOnGoogle() { using (IE ie = new IE("http://www.google.com")...

    jquery读书笔记

    这篇读书笔记将基于jQuery的API文档,结合实际应用,探讨其核心功能和使用技巧,旨在帮助读者更好地掌握这一强大的工具。 一、jQuery简介 jQuery是由John Resig在2006年创建的一个JavaScript库,它的主要目标是简化...

    前端开发学习笔记必看版

    5. **浏览器兼容性**:前端开发者需要关注不同浏览器对标准的实现差异,如IE与其他现代浏览器的兼容问题,以及如何使用polyfill或条件注释来解决这些问题。 6. **框架与库**:React、Vue、Angular等是当前流行的...

    bootstrap学习笔记

    ### Bootstrap 学习笔记知识点详解 #### 一、Bootstrap简介 Bootstrap是一款非常流行的前端开发框架,它基于HTML、CSS及JavaScript构建,旨在帮助开发者快速搭建响应式的网站和应用。通过预定义的样式和布局,...

    Selenium笔记(1)

    本笔记将详细探讨Selenium的使用方法。 首先,我们来看一下调试工具的使用。在Firefox浏览器中,我们可以借助Firebug插件来辅助调试。Firebug提供了多种调试功能,如查看和编辑HTML、CSS,以及生成XPath和CSS选择器...

    ajax学习笔记

    使用 `open()` 方法初始化一个请求。 3. 使用 `send()` 方法发送请求。 - **示例**: ```javascript var xmlHttp = new XMLHttpRequest(); xmlHttp.open("GET", "/tr/s.txt?name=aa", true); // GET 请求,第三...

    css十年来笔记

    ### CSS十年笔记精要 #### 一、概述 ...随着技术的发展,CSS也在不断地进化和完善,掌握其高级用法对于前端开发者来说尤为重要。希望这篇十年笔记的总结能对读者有所帮助,让大家在CSS的学习道路上越走越远。

    如何让IE 6支持png图片效果.zip

    总的来说,这个压缩包提供了一种方法,使得开发者能够在仍然需要支持IE6的项目中使用PNG图片,并保持其透明效果。通过阅读"调用方法.txt",开发者可以了解如何将这个解决方案整合到自己的网站中,而"js"文件则包含了...

    AngularJS学习笔记

    总的来说,这份AngularJS学习笔记不仅为初学者提供了入门示例,也深入到高级主题,例如自定义指令和模块化,帮助开发者全面掌握AngularJS的使用方法和最佳实践。通过这份文档,开发者可以学习到如何在项目中有效地...

Global site tag (gtag.js) - Google Analytics