>

美洲杯在线投注_2019美洲杯外围投注[投注官网]

热门关键词: 美洲杯在线投注,2019美洲杯外围投注[投注官网]

IE开发者工具教程

- 编辑:美洲杯在线投注 -

IE开发者工具教程

IE开发者工具教程

2015/01/13 · JavaScript · IE

原文出处: YouYaInsist的博客   

美洲杯在线投注 1提前祝各位程序员节日快乐

写在前面

一直非常谷歌的控制台,因为我是做前端的,谷歌浏览器在我看来是解析JS最快的浏览器,所谓的熟能生巧,用熟悉了谷歌浏览器之后就特别喜欢用谷歌的控制台调试脚本、改变样式、查看HTML、查看资源加载等信息。

在这儿推荐两篇关于谷歌控制台怎么使用的三篇博文(在我看来这三篇博文是我看过介绍谷歌控制台最佳最全的使用手册啦)

Chrome 控制台不完全指南

Chrome 控制台console的用法

Chrome控制台如何调试JavaScript

再过几天就是1024程序员节日了,这里提前祝各位程序员同胞们节日快乐哈_

进入正题

我这篇文章可不是想介绍Chrome控制台,做前端最重要的就是要保持各个浏览器兼容,即使Chrome控制台很强大,但你能保证你的所有用户都能像你一样是Chrome的忠实粉丝吗?况且IE浏览器在中国市场上的占据份额那也是相当大的一部分的。

在此介绍一下IE开发人员工具(在没熟悉使用IE开发人员工具之前,我是打心底里特别讨厌IE的,熟悉使用之后才发现原来IE开发人员工具也是蛮可爱的)

其实从这件事情之后得到一个结论,不要议论任何人或者任何事不好,要怪只能怪你不懂。对万事万物还是怀着一颗宽容博大的心能让自己活得洒脱幸福些。(这是费话,大家跳过不看)

回归正题,本文主要是介绍一下Chrome developer tool的使用,以方便我们的日常开发与调试。其实在没用Chrome开发之前就时不时的听到类似这样的话:“别用IE,IE太low了,用Chrome吧”。如今,我用过Chrome后才切身体会到,Chrome浏览器无疑是最受前端青睐的工具,原因除了界面简洁、大量的应用插件,良好的代码规范支持、强大的V8解释器,javascript执行速度和内存占有率表现非常优秀之外,还因为Chrome开发者工具提供了大量的便捷功能,方便我们前端调试代码,我们在日常开发中是越来越离不开Chrome,是否熟练掌握Chrome调试技巧恐怕也会成为考量前端技术水平的标杆。

简单介绍

像Chrome控制台一样,要打开IE开发人员工具也是按快捷键F12即可。

可以看到,在主工作区中有六个选项卡—-HTML、CSS、控制台、Javascript(脚本)、Profiler(探查器)、网络。这就是开发工作的主要环境。

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

2、CSS选项卡主要是列出页面的样式,如果当前页面有多个外部样式表的话,则可以从下拉选择框中进行选择来查看相应的样式文件。

3、控制台选项卡主要是方便开发人员进行日志记录或者脚本调试等(现在IE9也支持console.log 不信你在下方的文本框里面输入试试),当然你也可以在里面输入多行脚本然后点击右侧的小绿色按钮(绿色按钮叫运行脚本)

美洲杯在线投注 2

4、脚本选项卡就不多说了,主要是方便开发人员进行脚本调试。(在下文中将会介绍如何进行脚本调试)

5、探查器选项卡主要用来进行脚本调优和脚本统计等功能,它列出Javascript脚本中每一个函数、每一个命令运行的次数和所花费的时间,很有助于找出网页代码的性能瓶颈。

6、网络选项卡一般用来查看资源的加载信息

对于前端技术的学习或者开发调试,浏览器developer tool的使用是必不可少的,下面,介绍Chrome开发者工具。

其它话

大家可能都知道,外部样式会被页面上写的同种样式复写而导致外部样式不生效,在FireBug里面,样式选项卡里面是不会显示出不生效的样式,这一点我认为IE是做的比较好的,它会将所有样式都显示出来但是对于失效的样式会使用删除线的形式,列出被其他CSS命令取代的样式设置,可以很方便地看出样式之间的继承关系。

另外小技巧就是颜色取色器,做前端可能大家都会时不时的想要变换样式,想要改变颜色,在IE开发人员工具里面,点击   工具–>显示颜色取色器   这样就打开了一个颜色取色工具,如下图所示,点击那个取色图标的按钮就可以进行取色了(不过你可不要想着到处取色哦,你能取色的范围只能是在当前IE浏览器里面哦   你可别想着在桌面或者其它浏览器里面进行取色哦  它还没有强大到跳出当前运行环境去……)

美洲杯在线投注 3

<h5>1、先打开谷歌浏览器,然后打开调试界面,打开方式有三种 :第一:按F12,第二:shift ctrl i,第三:鼠标右键点审查元素</h5> <h5>2、请看下边的标记</h5>

修改网页中的文字

我们如果想要修改网页中的文字之前必须得选择您要修改的文字,可以使用两种方式进行选择

1、开发人员工具HTML选项卡第一个图标 也就是那个鼠标箭头按钮,当然你也可以使用它的快捷键ctrl b

2、直接在开发人员工具HTML选项卡右侧的搜索框中输入您要选择的文字,单击探索按钮或者按回车键即可

选择好之后,这时它所在的区域会显示蓝色边框,同时在开发人员工具里面选中的部分会以高亮显示,点击之后将会变成可编辑状态,修改成您想要修改的文字,按下回车后,网页就会自动更新。

美洲杯在线投注 4Chrome开发者工具分为 8 个大模块

修改元素的属性

运用上面的选中您要修改的元素,右击–>添加属性  然后输入您想增加的属性 比如说您想让其布局居中,输入align=center(注意这里面输入的是align=center而不是align=”center”这点跟Chrome控制台还是有差异的)

当然上述方法只能在你选择的元素上面生效。比如说你刚刚修改的元素是td,而你想让当前表格的所有td都运用居中布局的话,应该怎么做呢,选择好td元素后,切换到右面的属性选项卡,添加一个属性,名称为”align”,值为”center”。点击添加按钮。

美洲杯在线投注 5

添加完成后,会有一个”将属性应用于”的提示,选择好点击确定即可。

美洲杯在线投注 6

 

Element 标签页: 用于查看和编辑当前页面中的 HTML 和 CSS 元素。Console 标签页:用于显示脚本中所输出的调试信息,或运行测试脚本等。Source 标签页:用于查看和调试当前页面所加载的脚本的源文件,可以打断点进行调试。Network 标签页:用于查看 HTTP 请求的详细信息,如请求头、响应头及返回内容等。TimeLine 标签页: 用于查看脚本的执行时间、页面元素渲染时间等信息。Profiles 标签页:用于查看 CPU 执行时间与内存占用等信息。Resource 标签页:用于查看当前页面所请求的资源文件,如 HTML,CSS 样式文件,图片等。Audits 标签页:用于优化前端页面,加速网页加载速度等。

样式相关操作

如果您要修改元素相关的样式的话,可以选中元素后,在其右侧的样式面板中进行操作。(这个操作跟Chrome控制台一样的)

如果要为网页添加一个新的样式呢,

1、在CSS选项卡中,随便选择一个规则,打开右键菜单,在”之前添加规则”和”之后添加规则”中任选一个点击

2、键入样式名,比如说.price(注意这里仅仅只是输入.price  不需要再输入后面的{}),然后打开右键菜单,选择”添加属性”。

3、添加规则,比如说border:1px solid red;如果要重复添加规则的话,还是同样 右键菜单,选择”添加属性”……

美洲杯在线投注,<h5>3、使用 Chrome 开发者工具调试</h5><h6><1>设置断点</h6>与 Java 调试类似,Chrome 开发者工具提供了断点设置、删除与断点存储等基本功能。同时,开发者工具也提供了设置条件断点的功能,使开发者可以控制该断点只有在满足某一条件时才会被触发。当然,也可以直接单纯地设置非条件断点。</br>在Source标签元素面板中对应的JS文件中的行号处点击右键,选择添加条件断点后,会弹出一个对话框用于输入具体的条件或者没有条件断点。合理运用好条件断点能够提高调试的效率与准确性,使开发人员能更专注于在期望的场景下进行调试。</br>还有一点就是可以在Source标签元素面板中查看元素属性,比如通过ajax返回的数据对象封装到data中,我们设置断点后直接将鼠标放到数据data中可以看到其中返回的是什么样的数据,比如data中是实体对象的每个属性字段值。</br>如图 Source标签元素面板中添加条件断点或断点

本文由计算机教程发布,转载请注明来源:IE开发者工具教程