IE开发者工具调试(一)CSS篇
文章目录
IE开发者工具控制台有两个地方可以查看和编辑CSS
第一个 HTML面板右侧
第二个 CSS面板
一、HTML面板右侧功能介绍
样式
说明: 显示CSS规则、属性和值是如何应用到所选元素上的。可以对规则最左一列的复选框进行勾选或清除来查看CSS规则如何影响页面元素的显示。
面板截屏:
自上而下为 继承CSS、内联样式和外联样式、行内样式排列。具体的属性值按照书写先后顺序排序。可以修改CSS属性名和属性值。
修改属性名
鼠标在属性名上单击,即可编辑属性名,回车和鼠标单击其他地方就编辑成功。
删除属性名
属性名编辑为空字符串,回车或者单击其他地方就会删除该属性
修改属性值
鼠标在属性名上单击,即可编辑属性值,回车和鼠标单击其他地方就编辑成功。如果把属性值修改为空字符串,就不能编辑该属性值了
跟踪样式
说明: 跟踪样式视图显示的信息与样式视图相同,但是它是以属性而不是元素进行分组。
面板截屏:
自上而下按照在该元素上生效的CSS属性值字母A-Z顺序排序,(含继承自父元素的CSS属性)。展开属性值后,可以查看该属性值的来源,按照优先级自低到高排列。如果css选择器和查看的标签名匹配不上,则表示该属性为继承自父元素。
修改属性值
鼠标在属性名上单击,即可编辑属性值,回车和鼠标单击其他地方就编辑成功。如果把属性值修改为空字符串,就不能编辑该属性值了
布局
说明: 布局视图显示了元素框模型属性。该视图显示了元素与周围元素的一个关系。
面板截屏:
类似于谷歌浏览器的Computed面板,但是只计算了margin border padding content-box offet z-index等属性,其他属性未计算。
修改属性值
在对应的数字上单击,即可编辑属性值,回车和鼠标单击其他地方就编辑成功,为行内样式。如果改的值不符合格式,则为默认值0。更改content-box的width和height,offset值不会生效,坐标值不能更改。
属性
说明: 属性视图显示所有当前所选元素的属性和值。
面板截屏:
删除属性
鼠标选中要删除的属性,然后点击删除属性按钮即可
修改属性名
鼠标移至 “属性名” 上单击,属性名变为可编辑状态。鼠标单击至 其他地方 或者 回车,即可保存修改结果。(比较简单,不在截图了)
修改属性值
鼠标移至 “属性值” 上单击,属性值变为可编辑状态,鼠标单击至 其他地方 或者 回车,即可保存修改结果。(比较简单,不在截图了)
增加属性
方法一:单击+号
方法二:单击第一个空白行
注:
属性名点击右侧箭头,会下拉显示系统支持的属性名,可以在下拉菜单中选择属性名,也可以手动输入不在列表中的属性名
如果最后修改或者增加的属性名,不为css样式的属性名,与HTML面板右键==>增加属性是一样的功能
如果最后修改或者增加的属性名,为css样式的属性名(属性名后面会有 (css) 文字),为增加行内样式
二、CSS面板功能介绍
1、查看css样式文件
2、修改增删改css属性(见css篇)
选择要查看的css文件,即可在面板中查看文件对应的css样式。取消规则或者属性前的复选框,可以让该样式不生效,也可以编辑规则和属性
增加规则、删除规则、增加属性、删除属性
操作方法: 在CSS面板中,在规则名上鼠标右键,可以出现如下图所示的菜单。选择对应的功能,编辑属性或者规则即可。如果在属性上鼠标右键,有关规则的菜单不会显示。编辑方法与其他的一样,在此不再赘述。
IE8开发者工具调试(一)JAVASCRIPT篇 正在编写中。。。。。。
IE8按下F12打开不了控制台的问题https://www.cnblogs.com/westward/p/5740859.html
IE开发者工具使用方法