IE调试网页之六:使用 F12 开发人员工具调试 HTML 和 CSS (Windows)

简介:

 F12 开发人员工具可帮助你查找和修复 HTML 和级联样式表 (CSS) 代码中的错误。如果不使用这些工具,则可能很难在源代码中发现这些错误。 通过在 Windows Internet Explorer 解释源时在文档对象模型 (DOM) 树中显示你的 HTML 和 CSS 代码,可以更容易地调试动态生成的更改之类的代码。

  本主题包含下列部分:

  使用“HTML”选项卡

  “HTML”选项卡视图在由内存中的 Windows Internet Explorer 9 呈现的树视图中显示你的网页的动态标记。它反映打开 F12 时的 DOM,如果有任何更改,则需要刷新。 你可以使用鼠标或键盘直接在树视图中导航,以及查看特性和更改值。

  若要跳转到网页上的特定元素,请按 Ctrl+B,或单击“单击选择元素” 单击选择元素按钮的图片
按钮。在网页上,当你将鼠标悬停在元素上方时将突出显示相应的元素。单击某个元素时,将在 HTML 视图中突出显示 DOM 树中对应的节点。

在网页上选中的元素

通过单击网页上某个元素而选择的代码

  在“HTML”选项卡中选择一个元素时,可使用“视图”>“源”菜单在你的视图中筛选出按照元素关联的 CSS 样式或仅按照元素本身选择的元素。

  “带有样式的元素源”按钮F12 工具的带有样式的元素源按钮的图片仅在新窗口中显示选定元素的 HTML 源及其内容,以及适用于它的 CSS。这有助于只关注选定元素的源文件。必须首先使用“HTML”选项卡视图选择 DOM 树的主体内的某个 HTML 元素,然后才可以运行此命令。若要选择某个元素,可单击“单击选择元素”按钮,或在 DOM 树中单击某个元素。 当你使用“单击选择元素”时,首先刷新视图是个不错的主意。

  若要展开或折叠某个元素的属性,请单击用加号 (+ ) 或减号 (-) 标记的框。HTML 和 CSS 视图中的所有元素都是可编辑的,并且编辑操作会立即生效。通过单击元素名称旁边的复选框,可以打开或关闭样式规则和特性。

  查看动态 HTML 代码

  大多数网站使用动态代码。客户端脚本通常用于生成用户可以看到的呈现的 HTML。静态 HTML 代码的数量通常很少,仅用于在页面上启动操作。由于 F12 工具将显示呈现在浏览器中的 HTML 和 CSS 代码,而不是显示严格的 HTML 源,因此查找错误更容易一些。

  “HTML”选项卡显示 DOM 的当前状态,而不会自动跟踪更改。如果你更改了某个值或特性,但它没有立即显示,请在“HTML”选项卡中按 F5 刷新视图。

  更改值和添加特性

  F12 工具允许你更改几乎任何特性或属性的值。从“HTML”选项卡内,从 DOM 树中选择一个元素或使用“单击选择元素”按钮选择一个元素。在属性视图(右窗格)中,单击一个值以突出显示并更改它。

  例如,在 Internet Explorer 9 中打开如何使用 CSS3 添加圆角中的 CSS 示例页面并且按 F12 可打开该工具。单击“单击选择元素”按钮 单击选择元素按钮的图片,然后单击栗色的 Now in stock at Fourth Coffee 标题。 在属性窗格中,单击 "h2" 选择器下的颜色特性。 键入一个新的颜色名称或值,如 blue,然后按 Enter。标题的颜色将立即更改。

  要添加特性,请右键单击“HTML”或“CSS”选项卡的左窗格中的元素,然后单击上下文菜单中的“添加属性”。你需要知道该特性的格式(如 "background-color:")和正确值。

  若要删除某个特性(你添加的特性或现有特性),请在右窗格视图中单击该特性,然后按 Delete 键。对于原始页中的特性,可通过刷新网页恢复它们。添加的特性需要重新应用。

  如果你只希望在某个会话期间临时关闭某个特性,则在“HTML”或“CSS”选项卡的右窗格中清除该特性旁边的复选框。

  “HTML”选项卡视图和工具

  在左窗格树视图中选择一个元素时,你可以在右侧查看和更改所选元素及其子元素的样式、框模型布局和特性。 你所做的更改不是永久的,当你刷新或打开另一个页面时这些更改会丢失。但是,你可以通过单击“保存”按钮来保存你的 HTML 代码。

  当你查看应用于“样式”和“跟踪样式”选项卡中所选元素的多个 CSS 规则时,将根据 CSS 规范,基于这些规则的专一性来显示它们。列表顶部的规则将第一个应用到所选元素,而底部的规则是当前定义所选元素的样式属性的规则。这些规则的值是可编辑的,方法为:单击某个值,键入新值,然后按 "Enter"。更改会立即在网页上显示。这两个属性类型中的信息是相同的。但在“跟踪样式”属性类型中,相同的信息按照属性(在其下面显示规则)分组。这些属性按字母顺序列出,并基于专一性再次对规则排序。

F12 开发人员工具的HTML选项卡的屏幕快照

  • 样式 显示你在树视图中选择的元素的规则和样式。它按规则进行组织,并包含继承的特性和重写的特性。

    HTML选项卡中样式选项卡的屏幕快照

  • 跟踪样式 显示与样式相同的信息,但是按属性而不是规则分组。

    HTML选项卡中跟踪样式选项卡的屏幕快照

  • 布局 显示所选元素的框模型。通过单击图表中的相应值,可更改“布局”视图中的任意值。“布局”选项卡对可缩放矢量图形 (SVG) 元素禁用。

    所选元素的 CSS 框模型视图

  • 特性 显示选定元素的特性,如 ID。可以添加或删除特性

    显示所选元素及其特性的特性选项卡的屏幕快照

  右键单击“HTML”选项卡上的菜单

  如前面所述,可在“HTML”选项卡的左窗格中右键单击一个元素。下面是你可以在“HTML”选项卡中使用的选项。

菜单项 作用
添加特性 向标记或元素中添加新的特性。
复制 将标记和特性复制到剪贴板中。
复制 InnerHTML 将元素的 InnerHTML 内容(子文本、元素和特性)复制到剪贴板。
复制 OuterHTML 将元素的 OuterHTML 内容(子文本、元素和特性)复制到剪贴板。

  如果在“HTML”选项卡中单击某个元素的子节点,如 "h2" 标记的文本元素,则可能无法获得所有选项。如果你未看到所需的选项,则转到父元素并重试。

  检查 CSS 规则

  “CSS”选项卡显示你的样式表之间的相互影响。此选项卡对于使用多个样式表的网站很有用。若要在样式表之间切换,可使用样式表选择器。当你选择某个样式表时,左窗格中将显示规则及其相关样式属性。默认情况下,此按钮显示在网页中引用的第一个样式表。如果有多个样式表正在网页上使用,则单击下拉列表以选择其他样式表。

样式表选择器中的样式表下拉菜单的屏幕快照

  “CSS”选项卡上的快捷菜单选项

  当你右键单击“CSS”选项卡时,快捷菜单将会提供比“HTML”选项卡更多的选项。启用的选项是上下文相关的,并取决于你在“CSS”选项卡中单击的位置。

菜单项 作用 右键单击的位置
添加特性 向标记或元素中添加新的特性。 在规则或特性(任何元素)上。
添加规则 添加选择器、声明或样式。 在白色区域中,而不是在现有元素上。
后加规则 在当前规则之后添加选择器或规则。 在任何元素上。
前加规则 在当前规则之前添加选择器或规则。 在任何元素上。
删除特性。 删除选定的特性。 在任何特性上。
删除规则 删除选定的规则和所有相关的特性。 在任何规则或选择器上。

  在“CSS”选项卡中更改数字 CSS 值

  CSS 属性的值可以像 F12 工具中的几乎任何其他属性一样进行更改。通过单击属性值并键入新值,可以更改 CSS 属性。在“CSS”选项卡中,还可使用向上键和向下键增加或减小数值。

  搜索和保存更改

  像 F12 工具中的其余选项卡一样,你可以使用“搜索”框在“HTML”和“CSS”选项卡中搜索特定标记、属性、特性或值。单击“搜索”按钮时,将突出显示搜索关键字的所有实例,并且窗格会滚动到显示第一个匹配项。

F12 工具搜索框的图片

  如果存在多个匹配项,则可使用“下一个”“上一个”按钮向前和向后滚动。

F12 工具搜索的下一个按钮和上一个按钮的图片

  你所做的更改(例如,调整框模型或添加特性)不是永久的。当你在浏览器中重新加载页面或导航到其他网页时,你所做的任何更改都会丢失。若要保存对 HTML/CSS 文件的本地副本的更改,请单击左窗格上的“保存”按钮。



本文转自Artwl博客园博客,原文链接:http://www.cnblogs.com/artwl/,如需转载请自行联系原作者

相关文章
|
26天前
|
Web App开发 编解码 前端开发
告别固定字体大小:CSS使用相对单位提升网页可访问性和兼容性
在 Web 开发领域中,有很多误解流传,即使它们被反驳了很多次也仍然存在。"外部链接应该总是在新标签页中打开" 就是一个很好的例子。CSS Tricks 在将近十年前就对此进行了详细的解释(简而言之:大多数情况下是错误的),但它似乎仍然在某些角落中存在。
|
2天前
|
Web App开发 前端开发
CSS Hack是什么?ie6,7,8的hack分别是什么
CSS Hack是什么?ie6,7,8的hack分别是什么
8 0
|
25天前
|
前端开发 JavaScript 算法
成为CSS选择器大师,让你的网页瞬间提升品味!
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
1月前
|
前端开发
【web组件库系列】纯CSS实现典型网页数据分页器
【web组件库系列】纯CSS实现典型网页数据分页器
35 0
|
1月前
|
前端开发 JavaScript API
Tailwind CSS:快速打造美观网页的秘密武器
Tailwind CSS:快速打造美观网页的秘密武器
|
1月前
|
前端开发 JavaScript
分享几个精美的网页按钮样式,纯CSS实现,无JS(拿来即用)
分享几个精美的网页按钮样式,纯CSS实现,无JS(拿来即用)
24 0
|
2月前
HTML+CSS+JS实现网页随机点名
HTML+CSS+JS实现网页随机点名
|
2月前
|
前端开发 Windows
HTML+CSS制作Windows启动加载动画
HTML+CSS制作Windows启动加载动画
|
3月前
|
JSON 监控 前端开发
基于HTML和CSS的网页阻断器:限制电脑上网软件的简单方法
在当今数字时代,网络使用已经成为我们生活中不可或缺的一部分。然而,有时我们希望限制电脑上特定软件的访问,以提高生产力或确保网络安全。本文将介绍一种简单而有效的方法,使用HTML和CSS编写一个网页阻断器,以限制电脑上网软件的访问。
199 0
|
3月前
|
前端开发 JavaScript 数据安全/隐私保护
HTML&CSS实训(网页练题系统)
这是一个基于HTML和css的一些技术创建的一个简单网页实训练题系统本章用到的资源我已经打包上传到https://download.csdn.ne直接点击下载即可或者在评论留言,我看到后将会第一时间把资源私信给你解压压缩包后直接双击网页入口,打开方式 任意浏览器​​​​​​​ 用户密码验证...
24 0

相关产品

  • 云迁移中心