怎么着调试Javascript代码,IE开发者工具教程

by admin on 2019年1月31日

IE开发者工具教程

2015/01/13 · JavaScript
· IE

原稿出处:
YouYaInsist的博客   

当下,常用的浏览器IE、Chrome、Firefox都有对应的脚本调试功用。作为大家.NET
阵营,学会怎样在IE中调剂JS就够用了,在支配了IE中的调试方法之后,Chrome和Firefox中的调试方法也变得一定不难了。

用console.table()调试javascript,javascriptconsole

用CONSOLE.LOG()呈现数组

想像下您构造了如下数组
var languages = [
{ name: “JavaScript”, fileExtension: “.js” },
{ name: “TypeScript”, fileExtension: “.ts” },
{ name: “CoffeeScript”, fileExtension: “.coffee” }
];

console.log(languages);

console.log() 会那样体现数组

必发88 1

诸如此类的显示方式对于开发很有用,可是我意识那样还要手动去点每个Object有些笨重。那时候我觉着console.table()有点看头。

用CONSOLE.TABLE()浮现数组

今昔大家用console.table()试试:

必发88 2

可怜迷你有木有?

当然,console.table()更契合,扁平
列成表格式的数量,显示的更周密,否组你在
假如每个数组元素都是见仁见智结构,你的报表很多格子都是 undefined。

用CONSOLE.TABLE() 展示object

console.table()另一个特点就是显得 object。

var languages = {
csharp: { name: "C#", paradigm: "object-oriented" },
fsharp: { name: "F#", paradigm: "functional" }
};

console.table(languages);

必发88 3

妥妥的。

CONSOLE.TABLE() 的过滤效果

假若你想限制console.table()突显某一列, 你可以在在参数中传出关键字列表
如下:
// Multiple property keys
console.table(languages, [怎么着调试Javascript代码,IE开发者工具教程。”name”, “paradigm”]);

比方您想拜会一个性质的话,一个参数就够了,

// A single property 
keyconsole.table(languages, "name");

自家已经以为自己曾经精通了 Chrome
开发者工具绝大部分的意义,不过现在肯定我错了, 骚年空闲去探访Chrome
DevTools文档吧!

转自原文怎么调试Javascript代码

写在前头

直白十分谷歌的控制台,因为自己是做前端的,谷歌(谷歌(Google))浏览器在我看来是解析JS最快的浏览器,所谓的熟能生巧,用熟知了谷歌浏览器之后就专门喜欢用谷歌的控制台调试脚本、改变样式、查看HTML、查看资源加载等新闻。

在那时推荐两篇有关谷歌(谷歌)控制台怎么使用的三篇博文(在我看来那三篇博文是自己看过介绍谷歌(谷歌)控制台最佳最全的应用手册啦)

Chrome 控制台不完全指南

Chrome 控制台console的用法

Chrome控制台怎样调试JavaScript

在F12开发人员工具中开展调节

怎调试javascript

VS2005以及一下就调试不了了,VS2008
中有一个调节js的插件,把那一个插件插入到VS2008里边,调试js代码就好像调试C#代码一样,总共有多少个文件,把里面的DLL文件附加到VS2008之中就行了,假若懒得到网上找,给本人一个你的信箱我发给你一份吧。
PluginForJS.dll
PluginForJS.AddIn
Microsoft.JScript.Compiler.dll

java的…那个没有,我是.net程序员 –!

对了,FF浏览器有一个firebug的工具,那些能跟踪调试js
 

 

进入正题

自我这篇小说可不是想介绍Chrome控制台,做前端最首要的就是要维持各种浏览器包容,即使Chrome控制台很强劲,但你能确保你的兼具用户都能像您同样是Chrome的忠实粉丝呢?况且IE浏览器在华夏市场上的占据份额那也是一对一大的一片段的。

在此介绍一下IE开发人士工具(在没熟谙使用IE开发人士工具此前,我是打心里里专门讨厌IE的,通晓使用之后才发觉原本IE开发人士工具也是蛮可爱的)

实际从那件工作过后得到一个结论,不要谈论任何人或者其他事不佳,要怪只可以怪你不懂。对万事万物如故满怀一颗宽容博大的心能让自己活得自然幸福些。(那是费话,大家跳过不看)

开辟IE浏览器,按下F12键,就会打开开发人士工具,那是IE内置的开发人士开发工具,方便开发人士对HTML、CSS、Javascript等网页资源进行跟踪调试使用的。

申明怎调试javascript

现阶段,常用的浏览器IE、Chrome、Firefox都有相应的脚本调试作用。大家先来看IE的:

1、在F12开发人士工具中开展调节
怎么着调试Javascript代码,IE开发者工具教程。开拓IE浏览器,按下F12键,就会打开开发职员工具,那是IE内置的开发人员开发工具,方便开发人士对HTML、CSS、Javascript等网页资源开展跟踪调试使用的。

只要你打开的时候从不定点在网页尾部,可以点击右上角菜单栏中的按钮来落成。

咱俩看来在那些工具窗口里面有多少个标签页,分别是:HTML、CSS、控制台、脚本、探查器和网络,点开每一个标签,可以执行相应的天职。
在HTML标签窗口中,工具栏中的按钮所执行的操作如下图:

CSS标签是用来查阅样式的;控制台突显网页中JS的各类输出音信,包括错误新闻、用户日志等;打开脚本标签页,这些中才是大家想要的始末。

自家在图中用红色矩形选中连个控件,左边的下拉列表用来摘取文件,左边的按钮用来启动调试。当点击启动调试后,调试程序会将窗口最大化,大家在当选的文书中找到须求调剂的岗位,点击左侧边栏添加断点即可开展调剂。

当有程序运行到大家的断点处时,就可以拓展调节了:

在此间,大家得以行使飞快键进行操作,常用的急速键如下:
F9:添加/移除 断点
F10:逐进程,即跳过该语句中的方法、表明式等
F11:逐语句调试,即单步调试,会跳入方法、表达式,举办逐语句的跟踪调试

在履行进度中,如果大家要执行即时的代码,大家就必要在右手的窗格中输入代码,按回车即可:

如若要执行多行代码,点击运行按钮右边的双箭头,就会打开多行方式。我就不再截图片了。

那种直白在浏览器中调剂的法子一致适用于谷歌(Google)浏览器Chrome和FireFoxFireDebug,只不过在细枝末叶上面有些不一致而已,主体的机能都是均等的。
按F12键进去开发者工具,可以查看源代码、样式和js:

点击Scripts按钮,可以打开这么些调试窗口,里面含有了网页中脚本文件源码,点击左侧的按钮可以打开选拔文件的侧窗口。

2、使用debugger关键字展开调试
那种情势很粗略,大家只必要在进行调剂的地点投入debugger关键字,然后当浏览器运行到那一个根本字的时候,就会搁浅:

安装将来就可以运用debugger关键字展开调剂了;进过那样的安装,大家仍可以捕获到意外的一无可取,举行跟踪调试。

必发88 4
 

用CONSOLE.LOG()显示数组 想象下你构造了之类数组 var languages = [ {
name: “JavaScript”, fileExtension: “.js” }…

时下,常用的浏览器IE、Chrome、Firefox都有照应的剧本调试功效。作为大家.NET
阵营,学会怎么着在IE中调剂JS就够用了,在精通了IE中的调试方法之后,Chrome和Firefox中的调试方法也变得一定简单了。

简单的说介绍

像Chrome控制台一样,要打开IE开发人员工具也是按快速键F12即可。

可以见到,在主工作区中有两个挑选卡—-HTML、CSS、控制台、Javascript(脚本)、Profiler(探查器)、互联网。那就是开发工作的机要条件。

1、HTML是默许的选项卡,网页的源代码就以DOM树的花样在中间突显。点击最左边的+号,可以开展/减少该DOM元素。

2、CSS选项卡重倘使列出页面的样式,即便当前页面有七个外表样式表的话,则足以从下拉接纳框中举办精选来查阅相应的样式文件。

3、控制台选项卡首如果便利开发人士进行日志记录或者脚本调试等(现在IE9也支撑console.log
不信你在红尘的文本框里面输入试试),当然你也可以在里边输入多行脚本然后点击右边的小肉色按钮(灰色按钮叫运行脚本)

必发88 5

4、脚本选项卡就不多说了,重假如惠及开发人员举行脚本调试。(在下文元帅会介绍如何进展脚本调试)

5、探查器选项卡首要用于进行脚本调优和本子总括等作用,它列出Javascript脚本中每一个函数、每一个发令运行的次数和所消费的时间,很有助于找出网页代码的品质瓶颈。

6、网络选项卡一般用来查阅资源的加载新闻

必发88 6

在F12开发人士工具中举行调剂

开辟IE浏览器,按下F12键,就会打开开发人士工具,那是IE内置的开发职员开发工具,方便开发人士对HTML、CSS、Javascript等网页资源进行跟踪调试使用的。

必发88 7

若是你打开的时候没有一向在网页底部,可以点击右上角菜单栏中的按钮来落成。

必发88 8

我们看到在这一个工具窗口里面有多少个标签页,分别是:HTML、CSS、控制台、脚本、探查器和互连网,点开每一个标签,可以进行相应的义务。

在HTML标签窗口中,工具栏中的按钮所举行的操作如下图:

必发88 9

CSS标签是用来查阅样式的;控制台显示网页中JS的种种输出音讯,包括错误音讯、用户日志等;打开脚本标签页,那之中才是我们想要的始末。

必发88 10

本身在图中用青色矩形选中连个控件,左侧的下拉列表用来选拔文件,左边的按钮用来启动调试。当点击启动调试后,调试程序会将窗口最大化,大家在当选的文件中找到须求调剂的地点,点击左侧边栏添加断点即可开展调节。

必发88 11

当有程序运行到我们的断点处时,就可以展开调试了。

必发88 12

在那边,大家得以应用火速键举行操作,常用的快速键如下:

F9:添加/移除 断点

F10:逐进度,即跳过该语句中的方法、表明式等

F11:逐语句调试,即单步调试,会跳入方法、表明式,举行逐语句的跟踪调试

 

在执行进程中,假若大家要实施即时的代码,大家就须要在右侧的窗格中输入代码,按回车即可。

必发88 13

即使要执行多行代码,点击运行按钮右边的双箭头,就会打开多行格局。我就不再截图片了。

 

那种直白在浏览器中调剂的不二法门一致适用于谷歌浏览器Chrome和FireFoxFireDebug,只不过在细枝末叶上边有些差别而已,主体的作用都是同等的。

按F12键进来开发者工具,可以查看源代码、样式和js。

必发88 14

点击Scripts按钮,可以打开这么些调试窗口,里面包罗了网页中脚本文件源码,点击左侧的按钮可以打开选用文件的侧窗口。左边有调节的工具按钮,不过自己不欣赏那几个纯英文的界面,所以半数以上的调节都依旧在IE下举行。并且会在IE下转到VS中。

下边我就介绍怎么着在VS中调剂大家的JS代码。

其它话

大家兴许都明白,外部体制会被页面上写的同种样式复写而招致外部体制不见效,在FireBug里面,样式选项卡里面是不会显示出不奏效的体制,那一点自己认为IE是做的相比较好的,它会将兼具样式都显得出来可是对于失效的体制会选拔删除线的款型,列出被其余CSS命令取代的体裁设置,可以很便宜地看出样式之间的一连关系。

其余小技巧就是颜色取色器,做前端可能大家都会日常的想要变换样式,想要改变颜色,在IE开发人士工具里面,点击
  工具–>突显颜色取色器  
这样就开辟了一个颜料取色工具,如下图所示,点击那么些取色图标的按钮就可以展开取色了(可是你可不要想着各处取色哦,你能取色的限定只可以是在脚下IE浏览器里面哦
  你可别想着在桌面或者别的浏览器里面进行取色哦
 它还尚无强大到跳出当前运作条件去……)

必发88 15

借使您打开的时候没有一直在网页尾部,可以点击右上角菜单栏中的按钮来形成。

选取debugger关键字展开调试

那种艺术很不难,大家只需求在拓展调节的地点投入debugger关键字,然后当浏览器运行到那个主要字的时候,就会提醒是不是打开调试,大家接纳是就可以了。那种调试能够采取调试工具,是新开拓vs依旧在存活的VS中调剂,都可以接纳,个人比较欣赏那中调剂格局。

必发88 16

当大家运行那段程序的时候,会弹出调试提醒窗口:

必发88 17

一经你的浏览器没有弹出那么些窗口,你需求举办一下简便的装置,打开Internet选项:

必发88 18

将革命方框中的两项取消勾选就足以了。

安装未来就可以利用debugger关键字展开调试了;进过那样的安装,大家仍可以捕获到意外的百无一是,举办跟踪调试。

 

好了,本文就介绍到此地,有不知道的位置请和自我交流。调试是一个推行的长河,唯有利用次数多了,才能控制其中的法子和技能。


2013年6月14日 

  • 在IE中调试Javascript
  • 在Visual
    Studio中调试Javascript
  • 在Google
    Chrome中调试Javascript

 

假使认为此文对你有扶持,别忘了支持一下哦!

 

 

修改网页中的文字

我们只要想要修改网页中的文字在此之前必须得接纳你要修改的文字,可以采用二种方法展开精选

1、开发人士工具HTML选项卡第三个图标
也就是老大鼠标箭头按钮,当然你也得以行使它的火速键ctrl+b

2、直接在开发人士工具HTML选项卡左侧的物色框中输入您要选用的文字,单击探索按钮或者按回车键即可

慎选好之后,那时它所在的区域会体现紫色边框,同时在开发人员工具里面选中的部分会以高亮突显,点击之后将会变成可编制状态,修改成您想要修改的文字,按下回车后,网页就会自动更新。

必发88 19

修改元素的品质

应用地方的选中你要修改的要素,右击–>添加属性  然后输入您想增加的品质比如说您想让其布局居中,输入align=center(注意那中间输入的是align=center而不是align=”center”那点跟Chrome控制台照旧有反差的)

理所当然上述方法只好在你挑选的元素上面生效。比如说你碰巧修改的要素是td,而你想让眼前表格的兼具td都接纳居中布局的话,应该如何是好吗,选用好td元素后,切换来右手的属性选项卡,添加一个属性,名称为”align”,值为”center”。点击添加按钮。

必发88 20

累加落成后,会有一个”将性能应用于”的唤醒,选择好点击确定即可。

必发88 21

 

大家见到在那一个工具窗口里面有多少个标签页,分别是:HTML、CSS、控制台、脚本、探查器和网络,点开每一个标签,可以实施相应的任务。

体制相关操作

假使你要修改元素相关的体裁的话,可以选中元素后,在其右手的样式面板中展开操作。(那一个操作跟Chrome控制台一样的)

如果要为网页添加一个新的体裁呢,

1、在CSS选项卡中,随便接纳一个规则,打开右键菜单,在”此前增进规则”和”之后添加规则”中任选一个点击

2、键入样式名,比如说.price(注意那里仅仅只是输入.price
 不须求再输入前面的{}),然后打开右键菜单,采取”添加属性”。

3、添加规则,比如说border:1px solid
red;如若要双重添加规则的话,如故一样 右键菜单,选拔”添加属性”……

在HTML标签窗口中,工具栏中的按钮所进行的操作如下图:

调试JavaScript

开拓脚本选项卡,”启动调试“按钮旁边有一个下拉列表框,里面加载了您眼前页面所需要使用的体裁,在此切换到您须求调剂的本子上。

在需求调剂的脚本行上设置断点(设置断点事实上就是点击一下行首),

点击”启动调试“按钮,当您点击页面上的因素触发了你设置断点的本兔时,那时会活动跳到断点处,然后,你仍能在左边”控制台”底部的输入脚本,比如说你设置脚本的函数参数中有一个参数名为color,即便您在右边”控制台”尾部的输入”color=”#bee7ed””,再点击”运行脚本”,那时候函数参数color的值就为你刚刚输入的”#bee7ed”
 (私下觉得这一个效果真好)

 

必发88 22

探查器面板的应用

1、拔取”探查器”选项卡,点击”开端采样”。

2、在页面上点击你想要采样的元素

3、点击”为止采样”,那时就会来得出富有的代码运行音信。一共有二种查看格局,一种是”函数”,另一种是”调用树”。

在”函数”查看形式中,可以观望有着被调用的函数新闻,包蕴调用数量、函数执行所需时长、函数被调用的url、甚至席卷具体的公文行号

在”调用树”查看情势中,可以观察函数被调用的逐条。

CSS标签是用来查看样式的;控制台展现网页中JS的各类输出新闻,包含错误消息、用户日志等;打开脚本标签页,那中间才是咱们想要的始末。

本博文的参考文献为阮大师的
 IE8开发人士工具教程 
 ,那些天看她的博文真心收益不少,才发现人与人从前的差别不是形似的小。对团结说加油。

赞 收藏
评论

必发88 23

必发88 24

我在图中用蓝色矩形选中连个控件,左边的下拉列表用来挑选文件,左边的按钮用来启动调试。当点击启动调试后,调试程序会将窗口最大化,我们在当选的公文中找到需求调剂的义务,点击左边边栏添加断点即可进行调试。

必发88 25

当有程序运行到大家的断点处时,就可以进行调剂了。

必发88 26

在此地,大家得以选择飞快键举办操作,常用的神速键如下

F9:添加/移除 断点

F10:逐进度,即跳过该语句中的方法、表达式等

F11:逐语句调试,即单步调试,会跳入方法、表明式,举办逐语句的跟踪调试

在履行进度中,如若大家要履行即时的代码,大家就需求在左边的窗格中输入代码,按回车即可。

必发88 27

一经要推行多行代码,点击运行按钮右边的双箭头,就会打开多行情势。我就不再截图片了。

那种直白在浏览器中调剂的法子同样适用于谷歌(Google)浏览器Chrome和FireFoxFireDebug,只但是在细枝末叶上面有些差距而已,主体的效劳都是一律的。

按F12键跻身开发者工具,能够查看源代码、样式和js。

必发88 28

点击Scripts按钮,可以打开那些调试窗口,里面含有了网页中脚本文件源码,点击右侧的按钮可以打开拔取文件的侧窗口。左侧有调节的工具按钮,但是自己不爱好这几个纯英文的界面,所以大多数的调剂都依然在IE下开展。并且会在IE下转到VS中。

上边我就介绍怎么样在VS中调剂大家的JS代码。

行使debugger关键字展开调节

必发88 ,这种措施很简单,大家只须求在展开调节的地方投入debugger关键字,然后当浏览器运行到这么些紧要字的时候,就会唤醒是不是打开调试,我们挑选是就可以了。那种调试可以拔取调试工具,是新开拓vs依旧在现有的VS中调剂,都可以挑选,个人比较喜欢那中调剂格局。

必发88 29

当大家运行那段程序的时候,会弹出调试提醒窗口:

必发88 30

比方你的浏览器没有弹出那一个窗口,你要求进行一下简易的安装,打开Internet选项:

必发88 31

将革命方框中的两项打消勾选就足以了。

安装未来就可以使用debugger关键字展开调试了;进过这样的设置,大家仍能捕获到意外的不当,进行跟踪调试。

好了,本文就介绍到此处,有不知晓的地点请和自家交换。调试是一个举行的长河,唯有利用次数多了,才能了然其中的章程和技巧。

阵营,学会怎么着在IE中调剂JS就丰盛了,在左右了IE中的调试方…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图