F12 开发人员工具调试网页 (Windows)2
IE调试网页之六：使用F12开发人员工具调试HTML和CSS（Windows）
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 样式或仅按照元素本身选择的元素。
“带有样式的元素源”按钮仅在新窗口中显示选定元素的 HTML 源及其内容，以及适用于它的 CSS。
这有助于只关注选定元素的源文件。
必须首先使用“HTML”选项卡视图选择 DOM 树的主体内的某个 HTML 元素，然后才可以运行此命令。
若要选择某个元素，可单击“单击选择元素”按钮，或在 DOM 树中单击某个元素。
当你使用“单击选择元素”时，首先刷新视图是个不错的主意。
若要展开或折叠某个元素的属性，请单击用加号 (+ ) 或减号 (-) 标记的框。
HTML 和 CSS 视图中的所有元素都是可编辑的，并且编辑操作会立即生效。
通过单击元素名称旁边的复选框，可以打开或关闭样式规则和特性。
F12开发工具
“查找”菜单只有“单击选择元素”这一个菜单项。
你可以从菜单项启用该功能，方法是单击“单击选择元素”按钮或按Ctrl+B。
通过启用此功能，你可以通过在网页上单击元素来选择页面上的元素。
在网页上单击元素后，会在该元素周围绘制一个边框。
如果“HTML”选项卡打开，左窗格将滚动到选定的元素，并突出显示该元素。
属性窗格（右侧窗格）会根据你选择的当前属性类型（样式、跟踪样式、布局或特性）显示选定元素的属性。
如果“HTML”选项卡当前没有打开，使用“单击选择元素”会选择该元素，并自动将焦点切换回“HTML”选项卡。
在你单击某个元素后，“单击选择元素”才会启用。
自定义（无快捷键）自定义设置会打开一个对话框，你可以在其中输入自己要测试的屏幕大小。
自定义条目在你关闭浏览器后仍然存在，以便你可以在以后的测试会话中再次使用它们。
让你可以更改在请求网页时发送到网站的用户代理(User-Agent) 头信息。
有一组预设的用户代理 (User-Agent) 头信息和一个自定义选项。
自定义选项会显示一个对话框，可在其中输入自己的字符串。
保存自定义项后，它们会出现在“更改用户代理 (User-Agent) 头信息”子菜单中。
刷新网页可使更改显示出来。
请注意，更改文档模式会覆盖自定义的用户代理设置。
显示颜色选取器工具，以从页面上的任何对象采集颜色样本。
“颜色选取器”对话框显示选取器所在的颜色样本。
颜色选取器还会显示颜色的 RGB 和 HEX 值。
若要查看网页上使用的颜色值，请使用取色器光标单击感兴趣的颜色。
单击“复制并关闭”可将该值得到剪贴板，以在你的网页中使用。
单击 X 按钮或此菜单上的“隐藏颜色选取器”可关闭对话框。
通过使标识元素的大小和位置变得更加轻松，帮助你了解和调试页面布局。
你可以设置一种颜色来标识特定元素类型的所有元素。
可使用 CSS 选择器语法在网页上指定元素。
例如，要突出显示所有段落，请在选择器字段中使用p，然后设置一种颜色。
测试工作中浏览器F12工具简单使用介绍
测试⼯作中浏览器F12⼯具简单使⽤介绍F12常⽤于⽹站界⾯测试、调试，分析⽹页所出现的问题，查看html元素、查看响应事件等⽅⾯。
打开⼀个⽹页，点击F12，弹出⼀个窗⼝，其窗⼝的功能如下:元素（Elements）查看元素的代码：点击左上⾓的箭头图标（或按快捷键Ctrl+Shift+C）进⼊选择元素模式，然后从页⾯中选择需要查看的元素，然后可以在开发者⼯具元素（Elements）⼀栏中定位到该元素源代码的具体位置。
查看元素的属性：定位到元素的源代码之后，可以从源代码中读出改元素的属性。
给元素添加断点：在元素的右键菜单中选择断点选项（Break on…），选中之后，当元素被修改（通常是被JS代码修改）时，页⾯加载会暂停，然后可以查看该元素的属性。
元素断点添加之后，可以在右侧栏的DOM Breakpoints页⾯中看到，这个页⾯可以看到当前⽹页的所有元素断点。
查看元素的监听事件：元素的右边栏的Event Listener页⾯，可以查看到该元素的所有监听事件。
在开发中，尤其是维护其他⼈的代码时，会出现不了解元素对应的监听事件，这个时候，可以在这个页⾯中找到。
这个页⾯不仅能看到对应的事件函数，还可以定位该函数所在的JS⽂件以及在该⽂件中的具体位置（⾏数）。
控制台（Console）当⽹页的JS代码中使⽤了console.log( )函数时，该函数输出的⽇志信息会在控制台中显⽰。
⽇志信息⼀般情况下是测试开发⼯程师在测试调试时启⽤，⽽在正式上线后，⼀般会将console.log( )函数去掉。
在测试界⾯时，如果出现Bug问题，⼀般情况下会在这栏展⽰，查看调试⽇志信息或者异常错误信息，然后前端开发⼯程师根据具体问题来调试，进⾏解决问题。
源代码（Sources）当前打开的⽹页界⾯所涉及到的所有源代码都会出现在该栏，包括：样式、css、图⽚、js⽂件等。
⽹络（Network）Name/Pat：资源名称以及URL路径（main.css）Method：Http请求⽅法(GET或者POST)status/Text：Http状态码/⽂字解释（200，ok）Type ：请求资源的MIME类型，MIME是Multipurpose Internet Mail Extensions (html,css,js等)Initiator：解释请求是怎么发起的，有四种可能的值1.Parser ：请求是由页⾯的html解析时发送2.Redirect：请求是由页⾯重定向发送3.script ：请求是由script脚本处理发送4.other ：请求是由其他过程发送的，⽐如页⾯⾥的Link链接点击size/content：size是响应头部和响应体结合的⼤⼩，content是请求解码后的⼤⼩。
IE11-F12 开发人员工具使用手册
了解有关 DOM 资源管理器工具的详细信息 。
“控制台”工具 (CTRL + 2)
“控制台”工具 提供了与运行代码交互、使用控制台的命令行发送信息和使用 控制台调试 API 获取 信息的方式。“控制台”工具对开发人员而言非常有用，我们已使其更易于获得。现在你可以使用 UI 右上角“帮助”按钮旁边的“控制台”按钮或按 CTRL + `在任何其他工具的底部打开它。 以下新功能 包含在 “控制台”工具 中：
使用 F12 开发人员工具
使用 F12 开发人员工具，你可以调试、测试网页并加快其速度。无论你是需要微调你的 CSS 布局还 是查找内存泄漏，你都能在此处找到帮助工具。
正在工作的 F12 工具
在 IE11 中，我们重头开始重建 F12 工具。它们具有全新的 UI 和新功能性，可使你更快、更轻松 地进行开发和调试。 在键盘上按“F12”键以打开工具。如果你的键盘没有功能键，则可以使用 “工具”菜单。 有八个不同工具，每个工具在 F12 工具界面中都带有其自己的选项卡。你将在此处找到每个工具的 图像、工具的作用和新增功能小结，以及该工具简化的几个典型开发或调试任务。
“内存”工具 在 IE11 中是 F12 工具的新增工具。某些有趣的功能如下：
• 使用时间线可以查看内存使用的进度更改。 • 使用快照可以在特定点检查内存使用的详细信息。 • 使用快照比较可以标识特定增长点。
它简化的开发和调试任务：
• 标识断开的 DOM 节点。 • 标识内存增长点。 • 计量对象的内存使用情况。
通过f12绕过前端验证的方法
通过f12绕过前端验证的方法
绕过前端验证可以有几种方法，其中一种是使用F12开发者工具的控制台来进行操作。
以下是一种可能的方法：
1. 打开需要绕过验证的网页，并按下F12键，打开开发者工具。
2. 在开发者工具的选项卡中选择“控制台”选项卡。
3. 找到需要绕过的验证代码或函数，通常是在提交表单或点击按钮时进行的验证。
4. 在控制台中输入适当的JavaScript代码来绕过验证。
这可能包括更改验证函数的返回值或直接模拟提交表单的操作。
5. 执行代码，然后尝试提交表单或点击按钮，查看是否成功绕过验证。
需要注意的是，绕过前端验证可能会导致安全漏洞或导致不正确的数据被提交到后端。
因此，在进行此类操作时应谨慎，并确保理解其潜在的风险。
此外，绕过前端验证违背了网站的设计意图，可能会违反使用条款或法律规定。
如何使用浏览器的F12调试页面
如何使用浏览器的F12调试页面
一、背景介绍
一个程序员按照要求编写一个网页，不可能一次编写就完全达到目的，一般要对自己的的代码修改调试几次后才能到达要求，浏览器的F12开发人员工具就可以很方便的帮助程序员调试自己的代码。
二、知识剖析
F12 开发人员工具是一套按需采用的工具，网站开发人员可以随时在任何网页上使用 F12 工具，从而快速调试 JavaScript、HTML 和级联样式表 (CSS)，还可以跟踪并查明网页或网络的性能问题。
注：部分电脑打开F12是需要组合键：Fn+F12；例如：Mac，ThinkPad等
三、常见问题
F12调试CSS样式的主要功能有哪些？
四、解决方案
1、如何更改调试窗口的显示位置
按下F12进入调试
2、如何选中需要修改的元素，如何进行手机端调试
3、如何更直观的观察到页面中设置的盒子模型
4、如何修改当前元素的样式
1、直接在当前元素上添加样式
2、在当前元素对应的class上修改样式
5、如何修改元素设置的伪类属性
6、如何添加新的class、复制和删除原来的class
7、如何快速增加元素样式
谷歌浏览器自带了4个快速增加属性的按钮：text-shadow、box-shadow、color、background-color
五、编码实战
六、拓展思考
如何通过F12开发者工具来学习优秀网站的设计。
IE调试网页之四：F12开发人员工具控制台错误消息（Windows）
IE 调试网页之四：F12开发人员工具控制台错误消息（Windows ）F12 工具控制台可以报告在运行时期间发生的错误和信息消息。
本文将介绍错误消息，并提供有关如何修正这些错误的建议。
简介F12 工具控制台错误消息提供了一些代码（例如，SEC7111 或 HTML1114），这些代码提供有关错误的信息。
这些代码和消息显示在 F12 工具的“控制台”和“脚本”选项卡中。
对于 JavaScript 编程人员来说，这些代码是从 Windows Internet Explorer 引发的。
ActiveX 和浏览器扩展开发人员还可发送这些错误和消息。
本主题后面的表分为若干部分，这些部分中包括代码、消息、说明以及（适用时）解决问题的建议。
尽管该表中的描述提供了问题调试的起点，但获取信息的最佳方法是在线访问开发人员论坛或 Internet Explorer 开发人员中心。
安全性错误这些错误的格式均为 SEC7xxx （如 SEC7113）。
这些错误反映 Windows Internet Explorer 9 强制实施的安全条件，如混合内容和跟踪保护。
代码消息说明建议的解决办法SEC7111 "HTTPS 安全受到[name ofresource] 威胁"安全超文本传输协议 (HTTPS) 页面包含不安全（混合）内容。
不要在 HTTPS 页面上包含不安全的内容。
SEC7112 "[URL] 的脚本因 mime 类型不匹配而被阻止" 由 URL 指定的JavaScript 文件的HTTP 响应标头具有"X-Content-Type-Options: nosniff "标头，但没有内容类型声明。
添加 JavaScript 文件的正确内容类型（如文本/javascript 、应用程序/javascript 等），有关详细信息以及内容类型的完整列表，请参阅 InternetExplorer 中的 MIME 处理更改 。
f12用户操作手册
f12用户操作手册
F12用户操作手册是关于F12键的使用指南，F12键在计算机
键盘上位于F11键和Print Screen键之间。
它在不同的操作系
统和应用程序中有不同的功能，下面是一些常见的用法和功能：
1. 打开开发者工具：在大多数现代的网页浏览器中，按下F12
键可以打开开发者工具。
这些工具可以用来检查和调试网页的HTML、CSS和JavaScript代码，以及网络请求等等。
开发者
工具通常包括元素检查器、控制台、网络监视器、调试器等工具。
2. 刷新网页：在一些浏览器中，按下F12键可以刷新当前的
网页。
这对于调试网页时经常需要用到，可以确保网页上的更改立即生效。
3. 打开控制台：在某些应用程序和操作系统中，按下F12键
可以打开控制台窗口。
这个控制台可以用来输入命令、查看系统日志、进行系统设置等操作。
4. 打开系统设置：在一些操作系统中，按下F12键可以打开
系统设置窗口。
这些设置窗口可以用来调整屏幕亮度、音量等系统设置。
5. 打开BIOS设置：在一些品牌的计算机中，比如戴尔、惠普等，按下F12键可以进入BIOS设置界面。
在BIOS中可以调
整计算机的启动顺序、硬件设置等。
请注意，以上的功能和用法可能因操作系统、浏览器、应用程序的不同而有所区别。
建议在特定的系统和应用程序中查看相应的用户手册或文档，以获取详细的操作说明。
Web开发经验谈之F12开发者工具Web调试[利刃篇]
Web开发经验谈之F12开发者⼯具Web调试[利刃篇] 引语：如今的整个Web开发⾏业甚⾄说整个软件开发⾏业，已经相当成熟，基本上已经很少找不到没有前⼈做过的东西了，或者换句话说，你想要实现的功能，你总能在某个地⽅搜索到答案，关键是你有没有这个时间精⼒去搜寻！以⾄于⼤多数的开发，其实就是⼀个找资料的过程，⼀个复制粘贴的过程，这的确也是⼀个可悲的现象。
不过，换个⾓度来看，其实也挺好，现在咱们凡事都讲求⼀个效率问题，只要能实现功能，就甭管他复制粘贴抄袭了。
问题的关键是，你得会复制、粘贴、抄袭，你得会调试你的代码啊！难道有⼈给了你所有的配件你就能把车⼦给组装起来？难道有⼈送你⼀辆好车你就会改装了？然并卵，关键还得看你⾃⼰有⼏⽄⼏两了。
我记得我曾经有⼀位资深的运维同事给我说过⼀句话：所谓的开发不过是仅仅掌握了⼀些调试代码的技巧⽽已。
虽然我本⼈对于运维的⼯作也不怎么看得上眼，但是，不得不说，我很赞同他这句话。
因为如今互联⽹横⾏的今天，有太多太多的参考，你可以实现所有你想实现的。
但⼜正是因为有太多太多的参考，以⾄于我们都不知道选择什么好，哪个是对的，哪个是错的？谁说不是呢，没有选择是⼀种⽆奈，太多选择总会让⼈浮躁！你如果能够随⼼所欲地调试你的代码，谁敢说你不⽜掰我都不信了？ 看本⽂标题，是讲Web调试的，但是我估计废话所占的篇幅不⼩，因为，哈哈，我TM就是⼀个喜欢来虚的这么⼀个⼈！我所谓的虚的，是指理论级别的东西⽽⾮实战级别。
但是，我始终坚信，理论是实践的基础，实践会加深真理论的认识！想成为⼀个真正的开发⼈员，我觉得，⾄少你得了解计算机它是怎么⼯作的。
基础知识真的是必不可少的，如：计算机原理，汇编，单⽚机，C，VB，VC，数据结构，经典算法！这些⽆疑都会加深你对理论的了解！ 好，废话已经太多。
下⾯进⼊正题，作为Web开发者，Web调试⼯具⾃然是必不可少的。
那么，我们就来聊聊Chrome, Firefox, IE三⼤家的Web调试的⼀些特点(虽然市⾯有数不清的浏览器，但是纠其内核，基本都是这三者之⼀)，以及都有哪些技巧？ ⼀、Firefox 插件之 Firebug, ⽕狐调试利器【初学必备】 为什么要第⼀个提到⽕狐呢？因为啊，这东西确实是太⽅便了，刚开始接触开发那会⼉，根本都不知道调试，只是凭着感觉去做事。
浏览器的f12专业术语
浏览器的f12专业术语浏览器的F12是开发者工具集，是现代浏览器中提供给开发者的一个重要工具。
它提供了一系列专业术语和功能，帮助开发者调试和优化网页。
本文将详细介绍F12中的一些主要专业术语，并探讨它们的功能和用途。
1.元素（Elements）：元素面板显示网页的结构和内容。
它允许开发者通过DOM（文档对象模型）树来查看和编辑HTML元素。
开发者可以在元素面板中选择特定元素，查看其样式和属性，并可以实时进行编辑和调试。
2.控制台（Console）：控制台面板可以显示当前网页的运行时信息和错误。
开发者可以在控制台中执行JavaScript代码，查看输出结果，并检查日志和警告信息，帮助定位和解决问题。
3.网络（Network）：网络面板显示网页的网络请求和响应信息。
开发者可以查看每个请求的详细信息，包括请求URL、请求方式、请求头、响应码等。
此外，还可以对网络请求进行筛选、排序和时间线分析，以优化网页性能。
4.源代码（Sources）：源代码面板显示网页和脚本的源代码。
开发者可以查看和编辑HTML、CSS、JavaScript等文件，并在调试过程中设置断点和监视变量。
此外，还可以对代码进行格式化和搜索，以提高开发效率。
5.性能（Performance）：性能面板用于分析网页的性能和加载速度。
开发者可以记录并查看网页的性能数据，包括加载时间、资源占用、请求时间等。
此外，还可以进行性能分析和比较，找出性能瓶颈并进行优化。
6.应用程序（Application）：应用程序面板用于管理网页的应用程序缓存、数据库和存储。
开发者可以查看和编辑网页的离线存储、Cookie、本地存储等数据，以及查看和清除缓存。
7.安全性（Security）：安全性面板提供网页的安全性信息和证书。
开发者可以查看网页使用的证书、安全警告和漏洞，以及检查和防御XSS（跨站脚本攻击）、CSRF（跨站请求伪造）等安全问题。
8.动画（Animations）：动画面板用于分析和优化网页的动画效果。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
a 下面的示例演示了此行为。下面的代码示例展示了源代码和在网页中动态创建元素时 Internet Explorer 解释的生成代码。
1. <!DOCTYPE html PUBLIC>
13. </script>
14. <title>Dynamic page sample</title>
15. </head>
16. <body onload="makePage();">
17. <h1>Dynamic page sample</h1>
18. <div id="myCount"></div>
如何使用 F12 开发人员工具调试网页 (Windows)
/zh-cn/gg589507
主页 技术资源库 学生中心 学习 代码库 下载 支持 社区 技术Байду номын сангаас坛
中国（简体中文） 登录 使用 Bing 搜索 MSDN
如何使用 F12 开发人员工具调试网页
如何使用 F12 开发人员工具调试网页
可通过六个专用选项卡访问代码级别工具，这些选项卡提供了 HTML、CSS 和脚本调试以及代码分析和网络流量捕获功能。“控制台”选项卡提供用于接收和查看消息 的方法，可使用 控制台命令从代码内发送这些消息。
有关详细信息，请参阅以下主题：
使用 F12 开发人员工具控制台查看错误和状态 使用 Internet Explorer 开发人员工具网络捕获
8.
var myDiv = document.getElementById("myCount");
9.
myChild.appendChild(document.createTextNode("Number: " + i));
10.
myDiv.appendChild(myChild);
11.
}
12.
}
in 2. <html>
3. <head>
4. <script type="text/javascript">
5.
function makePage() {
F 6.
for (var i = 1; i < 10; i++) {
7.
var myChild = document.createElement("div");
F12 工具的菜单和按钮提供了可帮助你在该工具套件中导航的页面和可视化工具。在这些工具中，你可以创建包含文档中所有链接的报告列表、更改文档模式或以可视 方式绘制页面上特定元素的轮廓。本主题包含以下部分：
网页工具
“文件”菜单 “查找”菜单 “禁用”菜单 “查看”菜单 “图像”菜单 “缓存”菜单
l “工具”菜单
使用 F12 开发人员工具调试 HTML 和 CSS
F12 工具可帮助你查找和修复 HTML 和级联样式表 (CSS) 代码中的错误。如果不使用这些工具，则可能很难在源代码中发现这些错 误。
F12 工具提供了内置脚本探查器，你可以利用它分析在 Windows Internet Explorer 9 中运行的 JavaScript 代码的性能。本主题介绍 使用探查器工具分析代码性能
F12 开发人员工具入门
此内容参考较早版本的 F12 开发人员工具。请查看 最新的 F12 工具文档。
如果你不是希望测试或调试自己内容的网页开发人员，那么可参考以下提供的帮助链接：
这些链接适用于任何版本的 Windows Internet Explorer。
关于 Internet Explorer 脚本错误应采取什么措施？ 问题：我无法在 Internet Explorer 的选项下关闭自动脚本调试程序。
在 F12 工具中导航网页和代码
F12 工具大致分为两个区域，页面和可视化工具以及代码级别或调试工具。
大多数情况下，将使用主菜单或快捷键访问页面和可视化工具。这些工具可完成一些任务，例如，创建文档中的所有链接的报告或以可视方式概述页上某个特定元素。 有关使用页面和可视化工具、菜单以及按钮的更多信息，请参阅 F12 开发人员工具入门。
F12 开发人员工具是一套按需工具，内建于 Windows Internet Explorer 9 的每次安装之中。网站开发人员可以随时在任何网页上使用 F12 工具，从而快速调试 JavaScript、HTML 和级联样式表 (CSS)，还可以跟踪并查明网页或网络的性能问题。
本节内容
主题 F12 开发人员工具简介
相关主题
F12 开发人员工具入门 如何使用 F12 开发人员工具调试网页 使用 F12 开发人员工具控制台查看错误和状态 使用 Internet Explorer 开发人员工具网络捕获
Final
个人信息中心 | MSDN Flash 中心 | 法律信息 | 联系我们 | 保留所有权利 | 商标 | 隐私权声明 © 2013 Microsoft. 版权所有。
如果有多个命中结果，则可通过按 Enter 或 Shift+Enter，或者单击“下一个”或“上一个”结果按钮，在这些结果间进行导航。
第2页 共3页
2013/11/20 13:25
F12 开发人员工具简介 (Windows)
/zh-cn/gg589512
在查看源代码时（在浏览器窗口中右键单击，然后单击“查看源文件” ），只能看到用作父元素的第一个 "<div>" 标记，而看不到任何其他内容。
但在 HTML 选项卡中进行查看时，则会看到父标记 ("<div id="myCount">") 以及脚本添加的其他 "div" 元素和文本。在使用和更改脚本代码时，按 F5 可刷新并获取 当前的 DOM 视图。
HTML 选项卡将在树视图中显示网页的动态标记。这与初始源代码不同，在初始源代码中，它反映 Internet Explorer 9 解释初始标记代码的方式以及加载页面后对 DOM 所做的任何更改。需定期更新此视图以反映对 DOM 所做的任何最新更改。
l 例如，如果使用脚本生成网页，则查看源无法显示实际显示给用户的内容。如果使用原始的源代码，则可能需要花一些时间才能发现 HTML 或层叠样式表 (CSS) CSS
状态
行流。
F12 工具控制台错误消息
F12 工具控制台可以报告在运行时期间发生的错误和信息消息。本文将介绍错误消息，并提供有关如何修正这些错误的建议。
使用 F12 开发人员工具调试 JavaScript 错误
使用 F12 工具，Web 开发人员能够在无需离开浏览器的情况下快速调试 JavaScript 代码。
单击选择元素
若要在大型的 DOM 树中查找特定的元素，则可以在浏览器中选择各个元素，然后在 F12 工具的 HTML 选项卡中将它们突出显示。从 F12 工具调试窗口中，单击“单
击选择元素”按钮 或按 Ctrl+B 以便在悬停在页面上方时在网页上突出显示元素。在单击某个突出显示的元素时，HTML 选项卡将打开，并在代码窗格中滚动到所 选元素。在某些情况下，可能需要刷新 HTML 选项卡才能看到此元素。
此工具的功能以及如何使用它检查脚本的性能。
al 相关主题 Fin Internet Explorer 9 示例和教程
个人信息中心 | MSDN Flash 中心 | 法律信息 | 联系我们 | 保留所有权利 | 商标 | 隐私权声明 © 2013 Microsoft. 版权所有。
第1页 共2页
2013/11/20 13:24
第3页 共3页
2013/11/20 13:25
F12 开发人员工具入门 (Windows)
/zh-cn/gg589500
主页 技术资源库 学生中心 学习 代码库 下载 支持 社区 技术论坛
中国（简体中文） 登录 使用 Bing 搜索 MSDN
F12 开发人员工具入门
F12 工具中的许多工具和选项都与上下文相关，即在更改选项卡时，选项也将随之更改。有些功能可用于所有工具。以下提示和技巧将有助于开始使用这些工具。
更改特性和变量
从 F12 工具的大部分视图中，可以单击特性和变量来更改值，然后键入新值。在 CSS 选项卡中，可以通过选中或清除复选框来切换样式和规则。
搜索项
若要关闭 F12 工具，请再次按下 F12，或单击 F12 工具右上角的 X。 若要使 Internet Explorer 工具栏保持可见，请依次单击 Alt 和“查看”，然后指向“工具栏”并选中“菜单栏”，接着单击“锁定工具栏”。有关详细信息，请参阅 Internet Explorer 中缺少菜单栏和工具栏知识库文章。
F12 工具的功能 打开 F12 工具 在 F12 工具中导航网页和代码
更改特性和变量 搜索项 单击选择元素
相关主题
F12 工具的功能
分析 HTML 代码时，通过 F12 工具看到的视图就是 Internet Explorer 9 文档对象模型 (DOM) 解释页面的实际方式，并不是原始的源代码。这是要注意的一个重要区 别。 由于表示形式，最好是刷新 HTML 选项卡来获取当前的 DOM，尤其是在使用动态元素时。
可以在“搜索”框中键入特定标记、ID、元素、变量或字符串，然后按 Enter 在网页代码或详细信息中（如“脚本”选项卡上的属性的扩展列表下）中查找对应的项。 当前视图中将突出显示所有找到的项，可搜索除“控制台”选项卡或“脚本”选项卡上的控制台视图之外的所有项。 对于 网络选项卡，如果在“摘要”视图中，则搜 索将打开“详细信息”视图并显示所有类别的搜索结果。在“脚本”选项卡中，还可以搜索要用于页的所有脚本文件，而不只是搜索要显示的脚本文件。