关闭

使用F12开发人员工具调试JavaScript错误

标签: F12IE11IE浏览器javascript调试
2354人阅读 评论(0) 收藏 举报
分类:

使用F12工具中的调试程序,Web开发人员能够无需离开浏览器的情况下快速调试JavaScript代码,方便快速的定位到JavaScript文件的错误代码,来提高开发效率。

开始使用调试程序

新版的IE11,使用调试程序工具调试而无需刷新页面,保留状态,并且F12工具仍然可以吸附在浏览器窗口中。

在Internet Explorer 11中打开加载有问题的网页,按F12键或从工具菜单中选择F12开发人工具选项。


调试工具的默认显示布局为三个窗格,通过拖拽可以改变各个窗格的大小。

脚本窗口(左)界面中会显示网页HTML和JavaScript的源代码,通过顶部的选项卡可以快速切换文件进行编辑。脚本窗格周围的滚动条还突出显示了已经标记的断点位置。

监视窗格(右上角)中显示变量的值。当你在中断模式下时,它显示了你当前位置代码的变量,

在右下方的两个功能是调用堆栈和断点:

调用堆栈:显示当前断点的函数调用链。

断点:显示断点和跟踪点的设置列表,并提供删除、切换,和编辑断点的函数。

当调试程序执行到一个断点,你可以通过控制图标按钮来告诉它接下来做什么。


图标从左到右表示:

继续(F5 或 F8): 叶中断模式,并继续到下一个断点。

中断(Ctrl + Shift + B):在下一条语句处中断运行。

步入(F11): 如果不是在一个函数,到下一条语句或步骤到所调用的函数。

步进(F10): 如果不是在一个函数,到下一条语句或步骤在被调用的函数。

步出(Shift + F11): 从当前函数和调用函数的步骤。

出现新工作进程时中断(Ctrl + Shift + W): 当创建一个新的Web Worker时中断。

异常控制(Ctrl + Shift + E):


默认情况下这将忽略异常,他们只是记录到控制台工具。你可以选择所有异常,或只是不被由try... catch异常处理程序在您的代码中处理上中断。

最后两个图标是启用优质打印(Ctrl + Shift + P)和启用自动换行(Alt+W)可以增加经压缩的代码的可读性。


在调试过程中如果想在某个属性或变量到达特定值时才中断,可以先在脚本窗口中设置断点,然后在断点选项卡中右键要使用的断点,单击条件选项。在条件对话框中,添加有效的 JavaScript 条件语句。运行代码时,如果该语句为 True,则代码将在断点处停止运行。

0
0
查看评论

F12 开发人员工具控制台错误消息

此内容参考较早版本的 F12 工具。请查看最新的 F12 工具文档。 F12 工具控制台可以报告在运行时期间发生的错误和信息消息。本文将介绍错误消息,并提供有关如何修正这些错误的建议。 简介 F12 工具控制台错误消息提供了一些代码(例如,SEC7111 或 HTML1114),这...
  • aerchi
  • aerchi
  • 2015-07-24 10:09
  • 8047

IE F12 开发人员工具控制台错误消息

F12 开发人员工具控制台错误消息 此内容参考较早版本的 F12 工具。请查看最新的 F12 工具文档。 F12 工具控制台可以报告在运行时期间发生的错误和信息消息。本文将介绍错误消息,并提供有关如何修正这些错误的建议。 简介 F12 工具控制台错误消息提供了一些代码...
  • w_jinfeng
  • w_jinfeng
  • 2014-11-18 13:45
  • 1558

学习记录--使用 F12 开发人员工具调试 HTML 和 CSS

怎样打开Chrome的开发者工具? 你可以直接在页面上点击右键,然后选择审查元素: 或者在Chrome的工具中找到: 或者,你直接记住这个快捷方式: Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台),或者直接按F12。 打开的开发者工具就长下面...
  • gaoranfighting
  • gaoranfighting
  • 2016-06-15 14:54
  • 19678

Web开发经验谈之F12开发者工具/Web调试

Web开发经验谈之F12开发者工具/Web调试
  • qq_35432904
  • qq_35432904
  • 2016-11-08 11:34
  • 1315

[已解决]IE按F12任务栏会出现“开发人员工具”按钮,但窗口不显示

原创内容: 说实话这个问题是我去年碰到了,怎么都搜不到解决方案,当时有个网友说是被移动到屏幕以外去了,但没说怎么解决,网上常见的解决办法(N多复制粘贴的,真无聊)有: ctrl+p会把这个弄到浏览器里面,不好用 右击任务栏按钮把他最大化,但是想用指针选取浏览器中的元素时不方便   ...
  • juyangjia
  • juyangjia
  • 2013-11-21 17:32
  • 2841

IE6 WEB开发调试插件:IE Developer Toolbar

First 如题,知道并用过该插件的请飘过。好吧,我承认我是新手而且我孤陋寡闻了-.-。 先附上Internet Explorer Developer Toolbar最新下载地址,便于下载使用:http://download.microsoft.com/download/1/6/4/164E1C...
  • binyao02123202
  • binyao02123202
  • 2014-02-09 09:39
  • 4942

ie 开发人员工具F12找不到的解决办法

<br />ie 开发人员工具F12找不到的解决办法 问题描述:今天打开ie8"开发人员工具",按下f12之后,在工具栏看得到已经打开了"开发人员工具",但就是显示不了。 解决 1.按下F12打开“开发人员工具”,看到在工具栏了,右键"开...
  • jing_xin
  • jing_xin
  • 2011-05-13 12:30
  • 4562

如何使用 F12 开发人员工具调试网页

地址:https://msdn.microsoft.com/zh-cn/library/gg589507(v=vs.85).aspx          牛逼哄哄的。
  • stpeace
  • stpeace
  • 2016-02-26 21:51
  • 3581

ie 开发人员工具使用方法(F12)

refrence:http://blog.csdn.net/xinjoker/article/details/8516914 现在网上关于IE10的开发人员工具并没有详细的中文资料,所以许多开发人员对IE10提供的开发人员工具知之甚少。但是IE10的开发人员工具功能强大,非常值得广大开发人员,甚至I...
  • u010140338
  • u010140338
  • 2013-08-15 18:40
  • 6537

浏览器中的开发人员工具(IE9的F12和Chrome的Ctrl+Shift+I)-网页分析的利器

【如何打开“开发人员工具”】 IE9:Tools->F12 Developer Tools,快捷键是F12 Chrome:浏览器地址栏右边那个扳手的图标的配置按钮->工具->开发人员工具,快捷键是Ctrl+Shift+I 【IE9和Chrome的开发人员工具 使用...
  • Angelahhj
  • Angelahhj
  • 2015-08-08 11:36
  • 2228
    个人资料
    • 访问:83885次
    • 积分:678
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:6篇
    • 译文:0篇
    • 评论:17条
    文章分类
    最新评论