使用 F12 开发人员工具，Web 开发人员能够在无需离开浏览器的情况下快速调试 JavaScript 代码。 通过内置到每个 Windows Internet Explorer&9 安装中，F12 工具可提供一些调试工具（例如，断点、监视和局部变量查看）以及一个用于消息和即时代码执行的控制台。
　　本主题介绍如何使用 F12 工具来调试你的 JavaScript 代码。本主题的目的并不是要提供一个全面的调试教程，而是重点介绍可帮助你着手使用自己的代码的工具。从 Internet Explorer&9 中，按&F12&以打开工具，然后单击&脚本&选项卡即可开始使用。
　　在&脚本&选项卡中，左侧将显示源代码窗格，可在其中查看 JavaScript 代码，设置断点并逐步执行函数的执行路径。在右侧窗格中，可在&控制台&、&监视变量&、&局部变量&、&监视堆栈&和&断点&选项卡之间进行切换。
　　启动和停止调试程序
　　首次打开 F12 工具并单击&脚本&选项卡时，会在左侧显示代码，在右侧显示控制台。在控制台中，可能会显示一条消息："刷新此页以查看 F12 工具打开前可能已出现的消息。 "当刷新网页时，控制台会向你显示浏览器发出的任何错误或警告。
　　若要能够设置断点，查看监视和局部变量，以及查看一系列函数的调用堆栈，则单击&开始调试&按钮。通过按&开始调试&按钮，可以刷新网页并在调试程序中重新启动代码。
　　使用控制台查找语法和其他代码错误
　　在大多数编码项目中，错误通常包含语法、逻辑或数据输入错误。控制台视图将显示 JavaScript 错误和异常，以及文档对象模型 (DOM) 异常。在你的代码内部，你可使用控制台对象将状态和程序错误消息发送到控制台，而不是使用 "alert()" 调用或屏幕空间。例如，你可以向 JavaScript 代码中添加一行（如
　　JavaScript
window.console.log("The file opened successfully");）以在脚本中获取状态，而不中断执行。 有关使用控制台的详细信息，请参阅。
　　使不美观的脚本更美观
　　F12 工具可在行或语句级别调试 JavaScript，而不管代码是否按行或语句显示。那些大块的编写紧凑的代码仍可逐步执行。不过，如果将代码全部放在一个代码块中，则有时很难遵循逻辑。
　　若要设置脚本格式或&出色打印&脚本，请单击&配置&按钮&，然后单击&格式化 JavaScript&。以下屏幕快照展示 JavaScript 代码块在格式化之前和之后的对比。
　　中断代码执行
　　在 F12 工具中设置断点的方式与在二进制代码调试程序（例如，Microsoft Visual Studio）中的方式相似。在左侧窗格中，单击要中断的代码行的左侧。断点是可以切换的，因此可以单击以添加断点，再次单击以移除断点。
　　可以向代码中添加所需任意数量的断点。可以右键单击代码行并单击&插入断点&，或者单击要中断的语句旁边的左边距。
　　通过使用 F12 工具，可在语句级别设置断点，即使这些语句位于多语句块或行中也是如此。从而能够在紧凑的代码节内进行中断。在这些条件下设置断点的最好方式是，右键单击代码，然后从快捷菜单中单击&插入断点&。还可使用前面介绍的脚本格式化（美观显示）功能来对代码行进行格式化，以方便在页边距中进行单击。
　　通过使用&断点&选项卡管理多个断点
　　如果你具有包含很多断点（甚至跨多个文件）的大型代码库，则&断点&选项卡可帮助你跟踪所有这些断点。 在&脚本&选项卡中，单击属性窗格（右侧窗格）中的&断点&选项卡。有关示例，请参阅下图。
　　通过&断点&选项卡，可以启用或禁用、删除、选择并复制断点，而无需转到要设置它们的确切位置。若要打开或关闭某个断点，请单击要更改的设置旁边的复选框。通过双击列表，可立即跳转到代码中的断点。通过按&Ctrl&键并单击多个断点，可选择多个断点。
　　&断点&选项卡还具有一个快捷菜单（当你右键单击时可用），可让你批量删除、启用、禁用或复制断点。下表中显示了相关选项。
菜单项作用
永久删除断点。
永久删除所有断点。
设置列表中的所有复选框。
清除列表中的所有复选框。
允许为断点设置条件断点。如果选择了多个断点，则此选项禁用。
复制所选择的断点描述的文本。
突出显示列表中的所有断点。
转到源代码
导航左侧代码窗格以显示所选的断点。如果选择了多个断点，则此选项禁用。
　　条件断点
　　无条件地中断一行代码是很有帮助的，但在某个属性或变量到达特定值时中断甚至更为有用。若要在到达或设置特定值时中断，请设置断点，然后打开&断点&选项卡。右键单击要使用的断点，然后单击&条件&。
　　在&条件&对话框中，添加有效的 JavaScript 语句。运行代码时，如果该语句为 True，则代码将在断点处停止运行。例如，在下图中，当 oAudio.paused 属性为 False 时，代码将停止运行。
　　你既可以使用单一条件，也可以通过使用逻辑语句根据更加复杂的条件进行断开。但请记住，变量和对象的作用域将是相同的，就好像在监视窗口中在断点处对其进行检查一样。如果使用某个不在作用域中的条件，则不会将该条件计算为 True。
　　逐步执行代码
　　当代码执行在某个断点处停止时，可使用导航按钮来继续执行函数 (F5)、全部中断执行函数 (Ctrl+Shift+B) 或逐语句执行函数 (F11)、逐过程执行函数 (F10) 或跳出函数执行 (Shift+F11)。当在断点处暂停执行或正逐步执行时，调试窗口实际上是模式窗口。
　　正因如此，当再次与网页交互前，需要停止调试 (Shift+F5) 或继续执行代码 (F5)。如果你的网页似乎无法做出响应，则记住这一点是很有必要的。如果打开了多个窗口，而调试程序没有位于顶部，则它可能正在断点上等待响应。如果发生这种情况，请在调试窗口找到相应的网页并按&F5&继续执行代码，或按&Shift+F5&停止调试以将控制权归还给网页。
　　使用&监视&和&局部变量&选项卡监视变量
　　使用&监视&选项卡，可以在代码中设置并监视变量。其中将会列出指定的变量的名称、值和类型。可在&监视&选项卡中单击标记为&单击以添加...&的行，并键入变量名称。如果不想键入变量名称，则可将其复制并粘贴到&监视&列表中。
　　监视变量列表将显示你是否正在调试代码的值。打开调试并跟踪代码或已设置断点时，列表中变量值的作用域就是你在脚本中所处的位置。如果关闭调试，则作用域为全局，并且只有全局变量才会显示值。
　　与&监视&选项卡（显示变量是否超出作用域）不同，&局部变量&选项卡视图仅显示当前作用域中的变量。你无需添加要监视的变量，因为它会随着作用域的更改更新所有可用的变量。
　　若要查看不同之处，请在 Internet Explorer&9 中打开以下示例并按照步骤操作。
&!DOCTYPE html&
&title&JavaScript debugging example&/title&
&script type="text/javascript"&
//create a global variable for our &div&
function init() {
//initialize only after the HTML has been loaded
display = document.getElementById("results");
function firstParam() {
//set breakpoint here
var a = 5;
secondParam(a);
function secondParam(a) {
var b = 10;
thirdParam(a, b);
function thirdParam(a, b) {
var c = 15;
var d = a + b +
//display to console if F12 tools is open
if (window.console && window.console.log) {
window.console.log(a + " + " + b + " + " + c + " = " + d);
display.innerText = a + " + " + b + " + " + c + " = " +
&body onload="init();"&
&p&&button onclick="firstParam();"&Run&/button&&/p&
&div id="results"&&/div&
在 Internet Explorer&9 中，加载示例。
按&F12&打开 F12 工具，并单击&脚本&选项卡
在左侧窗格中，滚动到第一个函数，右键单击内容为 "var a = 5;" 的行，然后单击&插入断点&。
function firstParam() {
//set breakpoint here
var a = 5;
secondParam(a);
单击&开始调试&，然后在浏览器中的网页上，单击&运行&按钮。
在 F12 工具中，单击右侧的&监视&选项卡，然后添加变量 "a、b、c 和 d"。
通过按&F11&逐步执行代码，或者单击&单步执行&按钮，并监视&监视&选项卡上的变量。
　　在逐步执行每个函数时，应看到监视的值会从未定义更改为某个值。
　　若要通过&局部变量&选项卡查看差别，请按&F5&继续使用 F12 工具。在浏览器中，单击网页上的&运行&按钮以重新运行代码，并返回到 F12 工具。 在&脚本&选项卡的右侧窗格中，单击&局部变量&选项卡，并按&F11&以再次逐步执行函数。在局部变量列表中，请注意其中仅列出了包含值的变量。 &局部变量&视图还将显示传递到某个函数的参数、参数值以及类型。
　　查看调用堆栈
　　使用&调用堆栈&选项卡，可以查看从你的代码中调用函数时所采用的路径。这可帮助你作为 Bug 发现意外的代码路径。 通过&调用堆栈&选项卡中，可双击任意函数，并转到源代码中相应的调用。
　　尝试前面所提到的示例，并在跟踪函数时，查看&调用堆栈&选项卡。
　　在&调用堆栈&选项卡中，当前函数或位置总是位于顶部（在&调用堆栈&选项卡中和代码页边距中，箭头指向的位置）。双击列表中的任意函数时，将突出显示调用该函数的语句。
　　调试多个脚本
　　大型网页通常包含多个 JavaScript 文件。使用 F12 工具，可以在调试代码时对多个脚本文件进行操作。若要查看不同的文件，请单击&开始调试&按钮旁边的向下箭头，以显示与网页关联的脚本的列表。使用 F12 工具逐步执行代码时，F12 工具将遵循跨越多个文件的执行路径。你可添加变量以从任意脚本文件中进行监视，&调用堆栈&视图将显示跨不同脚本文件中所包含的函数的执行路径。
　　更改文档模式设置
　　&菜单&栏右侧的&文档模式&设置可以用于 F12 工具的任何选项卡，但在&脚本&选项卡中调试代码时尤其有用。使用 Internet Explorer&9，可以更改文档模式以模拟早期版本的 Windows Internet Explorer 的标准。在 Internet Explorer&9 中，停止使用 &!doctype& 声明会导致将文档类型默认设置为 Quirks 模式。使用新功能或标准功能（例如 HTML5&&或）时，有些可能看起来是编码错误的 Bug 实际上是缺少文档类型声明或文档类型声明不正确造成的。
　　Internet Explorer&9&F12 工具无法为你修复代码，但它可以使查找 JavaScript 错误更容易一点。
阅读(...) 评论()
var ME = {
"name": "土豆/Artwl",
"job": "coding",
"languages": [
"JS", "HTML",
"CSS", "jQuery"
"MVC",".NET",
"设计模式"
"hobby": [
"阅读", "旅游",
"音乐", "电影"
升级了最近的补丁以后，IE11 根本不能浏览页面，只要一打开页面，IE肯定崩溃掉。查看系统事件记录，发现是urlmon.dll导致问题出现，于是使用下面的方法问题解决。
1. 退出正在运行的所有程序。
2. 单击 开始，然后单击
3. 键入 regsvr32 urlmon.dll，然后单击确定。
4. 当收到“DllRegisterServer in urlmon.dll succeeded”（urlmon.dll 中的 DllRegisterServer 成功）消息时，单击确定。
然后打开IE11，问题解决。IE11经常崩溃的坛友，如果是这个dll文件导致的，可以试试上面的方法。
本文已收录于以下专栏：
相关文章推荐
问：win8.1企业版IE11经常停止响应需要重启IE，包括微软的网页(如本论坛)打开也经常这样!这个太麻烦了!另外的异常现象，关闭IE再次打开，本来曾经登录过的微博和论坛等需要重新登录(选择了自动登...
HP QC IE11不支持（ win7 64位 无法安装）解决方法
转载来自http://blog.csdn.net/chenhongwu666/article/details/#comments
如有雷同，不胜荣幸，若转载，请注明
之前给政府部门做项目，没先到他们还在用ie8，没办法，找了很多方法，发现这篇博客不错
博客来自：http://blog.csdn.net/chenhongwu666/article/details/4...
如有雷同，不胜荣幸，若转载，请注明让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法最近做一个Web网站，之前一直觉得bootstrap非常好，这次使用了bootst...
让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法，IE6 IE7 IE8 IE9 IE10 IE11，chrome,firefox,safari,opera，360...
让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
如有雷同，不胜荣幸，若转载，请注明
让IE6 IE7 IE8 IE9 IE10 I...
前两天遇到要bootstrap兼容ie各个版本的问题，但是各种百度，各种博客，最后算是解决了，但是迷迷糊糊的，现在来总结一下，如有雷同纯属总结。
首先看看代码的模样：
他的最新文章
讲师：王哲涵
讲师：韦玮
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)16381人阅读
JS/CSS（35）
自己亲自使用心得:
在想要调试的网页上按下f12快捷键，然后切换到调试模式。在想要调试的代码上加断点,然后点击启动调试，但是ie往往会提示:无法加载进程，该进程可能附加另一个...，点击确定，然后重新点击开始调试，刷新页面，然后即可。但是你要保证你调试的代码能够运行到。
一下是转载的关于ie调试的扩展功能:
浏览器模式
应了《无间道》的那句话&&&出来混，迟早是要还的！&。IE6种下的苦果，现在果然到了要咽下的时候了。当IE8发布的时候，他不得不面对着世界上成千上万&只有在IE6中才能正常显示&的页面。不发布IE8了吧，FireFox和Chrome又跟着后面抢蛋糕；不管那些&IE6 only&的页面吧，那浏览器出来还不被人骂死；让所有的站长都把页面重构吧，想想自己都要笑。唉，这可咋整呀。
唉，有了，咱采取一个手段，让用户自己去处理，如果他碰到了&IE6 only&页面，就让他自己手动处理一下，让浏览器还用老的渲染模式渲染页面，这虽然麻烦了一点用户，但是也不失是个办法。于是&浏览器模式&出来了。说白了，就是让用户选择当前页面用何种IE版本去渲染。
举个例子吧，顺便练习一下《》，核心代码如下&&
&div id="divTest"&
&!--[if IE 7]&
浏览器是IE7
&![endif]--&
&!--[if IE 8]&
浏览器是IE8
&![endif]--&
让我们来试试这个页面，在不同的浏览器模式下的显示效果吧&&
对于普通用户，微软官方推荐的是这个玩意&&兼容性视图按钮。
当然，对前端开发人员来说，这个工具主要用来测试页面多浏览器兼容性而已。但是非常遗憾的是：没有IE6模式。没有IE6的世界，虽然是一个美好的愿望，但是可惜的是：我们生活在现实之中，或许说生活在地狱中更确切。所以，我还是不得不提下面的两个工具&&
说起&文本模式&这个名词，这又要回到渲染页面的3种模式了：诡异模式（Quirks mode，也有翻译为兼容模式、怪异模式的），标准模式（Standards mode），和几乎标准模式（Almost standards mode）。这是一个非常重要、但是很多人却比较模糊的概念。一两句话不太能说清楚，这样说吧&&&页面的不同渲染模式，将直接影响页面的最终呈现效果&，也就是说，一个页面如果在这种模式下显示完美，但是在另外一种模式下可能就显示的一塌糊涂。而决定页面模式的是页面的!DOCTYPE属性。
乖乖，这玩意太绕人了，还是直接上例子吧。最经典的就是对盒装模型的解释差异了。下面两个图，是相同页面，采用不同页面渲染模式的最终显示效果。
页面很简单，只要一个div元素，然后随便设置一点高度、宽度、padding、margin就可以了。核心代码如下&&
&style type="text/css"&
background-color:
padding:10
height:100
&div id="divTest"&
&!--[if IE 7]&
浏览器是IE7
&![endif]--&
&!--[if IE 8]&
浏览器是IE8
&![endif]--&
从图片中，我们可以清楚的看到，红色div块的大小和位置，在不同的文本模式下，发生了明显的变化。
关于文本模式的详细资料，我建议你看这篇文章《》。虽然是英文原版的资料，也绝对值得翻着字典看完。还有这篇视频教程中，我也有较为详细的介绍到，《》
利用IE8开发人员工具调试JavaScript脚本
重头戏来了。很多朋友梦寐以求的功能呀&&JavaScript脚本调试。一直摆脱不掉FireFox，就是因为Firebug实在太好用。虽然利用。但是，很多前台开发人员并不会为了一个JavaScript调试功能而去安装那种大家伙。所以对JavaScript的调试，IE的用户一直耿耿于怀。但是，现在终于可以平息了。因为IE8开发人员工具终于也有了小巧，却功能强大的JavaScript调试功能。
不多说，直接上例子，这里就举一个简单到弱智的例子吧。核心代码如下：
&button onclick="test();"&Button&/button&
&script type="text/javascript"&
1: function test(){
4: function test2(){
var _obj=document.getElementById("divTest");
var str=_obj.
alert(str);
还是让我们先看看脚本调试界面吧
图上的说明已经很清楚了，下面就详细讲一下&控制台&、&断点&、&局部变量&、&监视&、&调用堆栈&这些视图吧。
在控制台会显示脚本调试中的一些信息，例如错误信息、警告信息一类的。
恩，其实也可以当成是一个微型JavaScript运行环境。你可以在这里直接键入脚本并运行。如果一行不够的话，可以切换到多行模式。输入完毕后，点击&运行脚本&，就可以看到运行结果了。
是一个显示你设定的所有断点的列表。方便你统一管理：统一删除、统一使用或者统一禁用。
我非常喜欢的视图之一。可以详细的显示各个变量的所有方法、事件和属性。我最喜欢干的事情，就是一个个的看下去，看到不知道的就去查资料，绝对是个学习JavaScript的好方法。例如，下面途中这就发现了一些IE8特有的方法。
我非常喜欢的视图之一。可以显示任意你需要的变量的方法、事件和属性。可以添加多个。整体来说和局部变量视图差不多，只是可以更灵活的显示你需要的而已。
可以直观地显示函数调用堆栈情况，以及现在执行到哪个函数的情况。对于理顺脚本的运行顺序和嵌套很有帮助。
IE8开发人员工具的探查器
&探查器&这玩意一开始还真的让我摸不到头脑，还以为是类似那些国产的，用在马桶或者世界之窗上的插件，用来分析出网页中的flash或者视频、音频地址的呢。到后来，看到的英文原版的才知道，其实就是&&&Profiler&。
用过微软SQL数据库中的Profiler的朋友都知道，那个一个帮助SQL分析效率的工具。它会记录所有的执行以及他们的执行时间，从而提供一份报表。这样，就可以知道到底是什么在效率上拖l了后腿。
IE8 的探查器(Profiler)，也引入了这个概念，只是它探测的是JavaScript脚本而已。
先点击【开始配置文件】按钮，然后运行脚本或者刷新页面。等脚本执行完了，或者页面刷新完毕后点击【停止配置文件】按钮，就会生成探查报告了。
它提供两种视图，一种是&函数&，另一种是&调用树&。无论何种视图，都可以清晰且忠实的展现出各个函数的执行所用时间。从而，方便你分析出&为啥我的页面那么慢呢？&
函数视图可以方便的按照各个参数进行排序，从而方便的找出类似&谁用的时间最长&这样的答案。
调用树视图可以方便的看出各个函数之间的调用关系。
一些关于IE8开发人员工具探查器(Profiler)的资料
如果，你还没有过瘾的话，可以看看下面这篇文章，绝对权威。《》
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1388193次
积分：16552
积分：16552
排名：第645名
原创：496篇
转载：141篇
评论：220条
(1)(1)(4)(3)(1)(1)(12)(9)(16)(6)(161)(1)(18)(1)(13)(9)(2)(4)(1)(2)(1)(5)(1)(30)(14)(14)(33)(12)(4)(1)(26)(36)(20)(1)(1)(5)(1)(21)(6)(3)(10)(14)(12)(73)(27)
(window.slotbydup = window.slotbydup || []).push({
id: '4740881',
container: s,
size: '200,200',
display: 'inlay-fix'