快速调试F12开发者工具的详细流程及注意事项！

在IE中开发网站一直是一个问题，因为IE一直缺少像firebug这样的开发人员测试工具。尽管有类似IEtester的工具可以检查各种版本IE中的网页显示，但它并不像Firebug。有效地执行该操作以查看代码如何在firefox中呈现，但是现在我们有了IEF12开发人员工具。分析HTML代码时，通过F12工具看到的视图是Internet Explorer 10文档对象模型（DOM）解释页面的实际方式，而不是原始源代码。使用脚本开发网站时，经过IE解释后，我们可以看到实际的代码。

F12开发人员工具的功能

在IE下进行开发时必不可少的工具，它可以快速调试JavaScript，HTML和CSS，还可以跟踪并找出网页或网络的性能问题。

如何打开F12开发人员工具

如果要使用F12开发人员工具，必须首先知道如何打开它。 F12工具可以在Internet Explorer 10的任何页面上使用。步骤如下：按F12或单击右上角的工具按钮

然后选择“ F12开发人员工具”选项。默认情况下，F12工具会在单独的窗口中打开

，但是您可以单击图钉按钮

或按Ctrl + P将其固定到使用的页面。请注意，在“脚本”选项卡上进行调试（单击“开始调试”）时，无法固定此窗口。

固定后的外观。 。 。风格仍然太丑陋。 。

如果不需要完整的工具界面，则可以在修复工具后单击“最小化”按钮或按Ctrl + M。这些工具将在窗口底部显示为一行，以提供对“命令菜单”栏的访问。请注意，修复工具后，如果此时F12工具位于单独的窗口中，则Ctrl + M无效。再次按Ctrl +，M工具将还原到完整的工具页面。

如何使用F12工具

如果您想知道如何使用F12开发人员工具，我们必须逐步介绍面板上的每个菜单栏。

“文件”菜单

（1）全部撤消：当您对网页进行大量更改，但发现页面越来越差时，此时，您可以尝试全部撤消，它将重置Windows Internet All。更改资源管理器当前实例的属性（例如属性值）并刷新网页。嗯，我实际上想说的是，我一直认为这与F5没什么不同。

（[2）自定义Internet Explorer以查看源文件：坦率地说...是定义打开网页源文件的方式...共有三种类型。第一种是使用IE中内置的默认查看器，第二个是使用“记事本”打开的，第三个是您可以浏览和指定计算机上安装的其他编辑器或查看器应用程序以查看源文件。

（[3）帮助：将跳至F12开发人员工具文档页面

（[4） Exit：按F12退出...

“查找”菜单

此菜单中唯一的项目是单击以选择一个元素。快捷键是Ctrl + B，它始终存在于视图工具栏中，即

，当鼠标悬停在页面顶部时，突出显示网页上的元素。当您单击突出显示的元素时，HTML选项卡将打开并滚动到代码窗格中的选定元素，并且该元素将被突出显示。将根据当前的详细信息类型（样式，跟踪样式，布局或属性）显示详细信息窗格（右侧窗格，最初是要称为属性窗格，但是IE已经将其中一个称为属性...）。 ），然后选择所选元素的详细信息。

“禁用”菜单

当用户禁用浏览器中的某些功能时，此菜单可以帮助测试您在网站上的用户体验。通过使用此菜单，您可以打开或关闭这些功能。

（1）脚本：禁用网页上的所有脚本。选择此菜单后，页面将刷新并禁用网页上的所有脚本。如果将“ Internet安全”的“启用保护模式”设置为选定状态，如下所示，

然后该命令不可用。如果要使用此命令，则需要打开上图中的“安全性”选项卡，并取消选中“启用保护模式”

（[2） CSS：禁用网页上的所有级联样式表（CSS）。选择此菜单后，页面将刷新以关闭CSS。如果我们此时刷新网页，或开始调试脚本，刷新网页后，将重新启用CSS。

“查看”菜单

通过此菜单，您可以在页面上查看元素的相关信息。但我认为此功能不是很好，因为某些页面的元素过于密集。 。 。

例如，我相信没有人愿意在下一页上找到一些东西，

菜单项如下：

（1）类型和ID信息：快捷键为（Ctrl + I），用于显示网页上所有HTML元素的ID值。该信息将覆盖在网页上的相应元素上页面。双击以突出显示该信息。

（2）链接路径：显示网页上所有链接的链接路径。此信息将以文本叠加形式显示在网页元素上。双击以突出显示该信息。按Ctrl + C可以选择复制。

（3）链接报告：生成页面上所有链接的列表，并在新窗口中显示此列表。这样，您可以轻松便捷地检查所有链接，而无需浏览整个HTML源文件。

（[4）标签索引：显示在页面上的标签索引中定义的元素的标签索引。

（[5）访问键：对于网页上已定义访问键属性的元素，请显示其访问键。

（6）来源：子菜单如下。

源子菜单项的描述

具有样式的元素源

仅在新窗口中显示所选元素的HTML源和内容，以及适用于该元素的CSS。这有助于仅专注于所选元素的源文件。必须先选择一个HTML元素，然后才能执行此命令。

DOM（元素）

只有HTML元素及其所选元素的内容才会显示在新窗口中。请先使用“ HTML”标签视图选择HTML元素，然后才能执行此命令。

DOM（页面）

在新窗口中显示所有HTML源，从而显示嵌套元素。此源文件显示页面的文档对象模型（DOM）结构，包括使用脚本动态写入DOM的源文件。

原始

在新窗口中显示原始HTML源代码，将不会显示编写的脚本，这与右键单击源文件相同。

“图像”菜单

此菜单提供的命令可以帮助您识别元素的大小和位置，从而帮助您了解和调试页面布局。它还可以根据元素类型通过颜色编码来帮助您直观地识别特定类型的所有元素。

（[1）禁用图像：刷新页面但不显示图像，同时禁用“显示图像文件大小”命令，并在刷新后显示图像。

（[2）显示图像分辨率：对于网页上的所有图像，请在图片上显示图像分辨率。

（3）显示图像文件大小：对于网页上的所有图像，该图像文件大小均以文本叠加显示。文件大小以字节为单位报告。如果使用“禁用图像”命令，请禁用该命令。

（[4）显示图像路径：显示图像上所有图像的绝对路径。

（[5）查看替代文本：具有替代文本的图像将显示其替代文本（自然不会显示）

（[6）查看图像报告：

我不了解此菜单。 。 。因为我会在这里报告错误

如下所示。 。 。我不知道为什么会发生此错误。 。 。如果您知道，希望您告诉我。 。

“缓存”菜单

（1）始终从服务器刷新：强制IE始终从服务器获取Web内容而不是使用缓存的内容，这意味着当您使用此命令时，响应代码将是200而不是200和304共存，当您修改CSS文件时，我认为它会更有效。修改文件中的CSS代码后，由于浏览器的缓存问题，人们认为修改后的代码无用，还请注意，此命令将继续有效直到您清除它或关闭Internet Explorer实例。

（[2）清除浏览器缓存...（Ctrl + R）：删除浏览器缓存和所有临时文件。

（[3）清除该域的浏览器缓存...（Ctrl + B）：仅删除浏览器缓存和属于当前域的所有临时文件

（[4）禁用Cookies：禁止使用此Internet Explorer实例中的所有cookie。此命令将继续有效，直到您将其清除或关闭Internet Explorer实例。

（[5）清除会话cookie：删除在此浏览器会话期间获得的所有cookie。

（[6）清除域cookie：删除当前域中的所有cookie。

（[7）查看cookie信息：生成IE中存储的所有cookie的列表，并在新窗口中显示。

“工具”菜单

此菜单提供了多种工具，可以帮助您完成常见任务，例如测试具有不同分辨率的网站，更改User-Agent标头信息，测量页面区域以及捕获页面上特定点的特定颜色。

（1）调整大小：提供一个子菜单（提供一些预定义的屏幕大小）和一个用于自定义屏幕大小的选项。选择预定义的屏幕大小后，Internet Explorer窗口将被重新调整为所选的大小选择自定义设置后，将打开一个对话框，您可以在其中输入要测试的屏幕尺寸，自定义设置在关闭浏览器后仍然存在，以后可以继续使用。前端人员的好帮手。您无需走遍全球即可找到其他计算机来观看该页面，并且该页面不会运行...

（2）更改User-Agent标头信息：通常，为了使用户体验基本一致，当用户访问网站时，网站将使用User-Agent标头信息来确定用户的身份。使用浏览器。在这里您可以更改请求网页时发送到网站的User-Agent标头信息。有一组预设的User-Agent标头信息和自定义选项自定义选项将显示一个对话框，您可以在其中输入您自己的字符串。保存自定义项后，它们将显示在“更改用户代理标题信息”子菜单中。刷新网页以进行更改显示。

例如：

当我将User-Agent标头设置为Opera时

这时，即使我的是IE1 0.，您也可以看到User-Agent标头已更改为Opera。

那么，该浏览器应如何支持修改User-Agent标头信息，以确保其体验与其他用户一致？我们不能再使用浏览器检测方法。 MSDN提供了一种通过功能检测来验证对基于标准功能的支持的方法。

地址在这里：

（3）在导航时清除项目：在调试会话中导航到新的网页时，允许您清除或保留“控制台”消息和“网络”选项卡日志。默认情况下，当您离开时在特定页面上，Internet Explorer将清除所有控制台消息和“网络”选项卡捕获日志。

（4）显示标尺（Ctrl + L）：允许您测量屏幕上的任何对象。“标尺”对话框打开时，将显示有关选项和工具的提示。支持多种颜色和标尺为了精确起见，还提供了一个放大镜，按CTRL + M可以打开或关闭放大镜，标尺相对于屏幕上该点的位置会显示每个坐标（“ x，y”）标尺的末端，长度以像素为单位显示在标尺上将光标移到标尺上时，测量值也将显示在“标尺”对话框的底部。要删除标尺，请选择它，然后按Delete键。如果关闭“标尺”对话框，则所有标尺都将被隐藏。打开“标尺”对话框以显示它们。 ...当您最小化IE时，标尺仍然存在...

（5）显示颜色选择器（Ctrl + K）：显示颜色选择器工具以从页面上的任何对象收集颜色样本。“颜色选择器”对话框显示选择器所在的颜色样本。我最佩服的是这可以同时给我颜色的RGB和HEX值...如下所示

（6）大纲元素：通过使用标识元素的大小和位置，它可以帮助您理解和调试页面布局。您可以设置颜色来标识特定元素类型的所有元素。可以使用CSS网页中的选择器语法在上面指定元素，例如，要突出显示所有链接，请在选择器字段中使用a并设置颜色。

“验证”菜单

此菜单允许您使用Web上的验证服务来验证计算机上的当前网页或文件。将会弹出一个对话框，以确认您是否要执行此操作。如果选择“否”，则验证将被取消。

（[1） HTML：在新窗口中验证当前网页的HTML。

（[2） CSS：在新窗口中验证当前网页的CSS。

（[3）来源：在新窗口中验证网页的集成（RSS）源。

（[4）链接：在新窗口中验证当前网页中的所有链接。

（[5） Local HTML ...：打开w3c的新窗口（URL是）。此窗口的“通过文件验证”可用于验证html文件（当然，您也可以直接进行验证）通过直接输入）写Html）。

（[6） Local CSS ...：与验证HTML相似，但URL变为

（[7）可访问性：有两项：

第一项是WCAG列表，即W3C的Web内容可访问性指南（WCAG）。 Web内容可访问性指南（WCAG）涵盖了广泛的建议，包括可以使网站内容更易于访问的建议。遵循这些原则，大多数残疾人更容易接受Web内容。

第二个项目是项目508列表。这是美国政府用于创建可访问网页的可访问性指南。

（[8）多个验证：您可以在一个请求中运行一个或多个验证。选择所需的验证，然后单击“确定”以发起请求。每个选择都会打开一个新标签，其中包含生成的验证结果

“浏览器模式”菜单

此命令使您可以测试面对运行其他版本Internet Explorer的用户时网页的行为。换句话说，您可以查看IE 7、8、9、10和IE10兼容性视图的浏览器模式，功能多么强大。 。请记住，当您选择某种浏览器模式时，将基于该浏览器呈现网页，并且您将无法访问仅在新版本的Internet Explorer中可用的文档模式。

“文档模式”菜单

您可以测试Internet Explorer的其他版本将如何解析您的页面。对页面所做的更改将影响该页面上的所有文档，包括iframe。

浏览器模式和文档模式有什么区别？简而言之，“浏览器模式”会影响浏览器的版本和IE的条件注释。 “文档模式”的切换将直接影响页面的呈现。有关详细信息，请参阅本文。

标签

介绍菜单栏后，让我们看一下视图工具栏。

您可以看到这里有6个标签，现在让我介绍一下它们的功能

“ HTML”标签

在F12开发人员工具中修改HTML代码和CSS代码非常容易。单击一段代码（可以单击“ Html”面板或右侧的“ Details”面板中的CSS），然后可以对其进行更改。但是请注意，刷新后，所做的更改将不会继续生效。

让我从左到右介绍它：

（1）单击以选择一个元素：快捷键为Ctrl + B，可在每个选项卡上使用。该功能是在页面上选择元素，然后该元素的代码将在菜单中高亮显示。下方的HTML面板会出来，右侧的详细信息面板将显示样式，跟踪样式，布局和属性。

（2）清除缓存：快捷键为Ctrl + R，功能是在下次刷新时清除现有页面的缓存，可以从服务器获取最新的网页信息。在每个页面上。

（[3）保存：修改元素后，保存它

（[4）刷新：仅F5，但编辑时此按钮不可用。

（5）“具有样式的元素源”按钮：仅在新窗口中显示所选元素的HTML源和内容以及适用于其的CSS。这有助于仅关注所选元素Source文件。必须先使用“ HTML”标签视图在DOM树的主体中选择一个HTML元素，然后才能运行此命令。要选择一个元素，请单击“单击以选择元素”按钮，或单击一个元素在DOM树中。

（6）编辑：在Html面板中编辑代码，完成编辑后，再次按按钮，将根据修改后的代码显示页面，但刷新后修改将消失，因此请记住保存

（[7）自动换行：单击编辑按钮后，单击此按钮将自动换行太长的HTML代码，否则该按钮不可用...

CSS标签

此标签类似于“ HTML”标签，

这里唯一要注意的是最右边的下拉列表。下拉列表中的选项由当前页面中使用的所有CSS组成。在此处选择一个文件，然后您可以编辑CSS文件。

“ CSS”标签上的快捷菜单选项

右键单击“ CSS”选项卡时，可以打开快捷菜单。但是请注意，启用的选项是上下文相关的。当您单击不同区域时，可以使用的菜单项不同

菜单项的右键单击位置

添加属性

向标签或元素添加新属性。

关于规则或属性（任何元素）。

添加规则

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shumachanpin/article-366099-1.html