用console.table()调试javascript,javascriptconsole

用console.table()调试javascript,javascriptconsole

图片 1

用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() 会这样展示数组

图片 2

这样的展示形式对于开发很有用,但是我发现这样还要手动去点每个Object有些笨重。这时候我觉得console.table()有点意思。

用CONSOLE.TABLE()展示数组

现在我们用console.table()试试:

图片 3

非常小巧有木有?

当然,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);

图片 4

妥妥的。

CONSOLE.TABLE() 的过滤功能

如果你想限制console.table()显示某一列, 你可以在在参数中传入关键字列表
如下:
// Multiple property keys
console.table(languages, [“name”, “paradigm”]);

如果你想访问一个属性的话,一个参数就够了,

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

我曾经以为我已经了解了 Chrome
开发者工具绝大部分的功能,但是现在显然我错了, 骚年没事去看看Chrome
DevTools文档吧!

如果你想限制console.table()显示某一列, 你可以在在参数中传入关键字列表
如下:
// Multiple property keys
console.table(languages, [“name”, “paradigm”]);

说明怎调试javascript

目前,常用的浏览器IE、Chrome、Firefox都有相应的脚本调试功能。我们先来看IE的:

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

如果你打开的时候没有固定在网页底部,可以点击右上角菜单栏中的按钮来完成。

我们看到在这个工具窗口里面有几个标签页,分别是:HTML、CSS、控制台、脚本、探查器和网络,点开每一个标签,可以执行相应的任务。
在HTML标签窗口中,工具栏中的按钮所执行的操作如下图:

CSS标签是用来查看样式的;控制台显示网页中JS的各种输出信息,包括错误信息、用户日志等;打开脚本标签页,这里面才是我们想要的内容。

我在图中用黄色矩形选中连个控件,左侧的下拉列表用来选择文件,右侧的按钮用来启动调试。当点击启动调试后,调试程序会将窗口最大化,我们在选中的文件中找到需要调试的位置,点击左侧边栏添加断点即可进行调试。

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

在这里,我们可以使用快捷键进行操作,常用的快捷键如下:
F9:添加/移除 断点
F10:逐过程,即跳过该语句中的方法、表达式等
F11:逐语句调试,即单步调试,会跳入方法、表达式,进行逐语句的跟踪调试

在执行过程中,如果我们要执行即时的代码,我们就需要在右侧的窗格中输入代码,按回车即可:

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

这种直接在浏览器中调试的方法同样适用于Google浏览器Chrome和FireFox
FireDebug,只不过在细枝末叶上面有些不同罢了,主体的功能都是一样的。
按F12键进入开发者工具,可以查看源代码、样式和js:

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

2、使用debugger关键字进行调试
这种方法很简单,我们只需要在进行调试的地方加入debugger关键字,然后当浏览器运行到这个关键字的时候,就会中断:

设置以后就可以使用debugger关键字进行调试了;进过这样的设置,我们还可以捕获到意外的错误,进行跟踪调试。

图片 5
 

http://www.bkjia.com/Javascript/874131.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/874131.htmlTechArticle用console.table()调试javascript,javascriptconsole
用CONSOLE.LOG()展示数组 想象下你构造了如下数组 var languages = [ {
name: “JavaScript”, fileExtension: “.js” }…

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

怎调试javascript

VS2005以及一下就调试不了了,VS2008
中有一个调试js的插件,把这个插件插入到VS2008里面,调试js代码就像调试C#代码一样,总共有三个文件,把其中的DLL文件附加到VS2008里面就行了,如果懒得到网上找,给我一个你的邮箱我发给你一份吧。
PluginForJS.dll
PluginForJS.AddIn
Microsoft.JScript.Compiler.dll

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

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

CONSOLE.TABLE() 的过滤功能

当然,console.table()更适合,扁平
列成表格式的数据,展现的更完美,否组你在
如果每个数组元素都是不同结构,你的表格很多格子都是 undefined。

用CONSOLE.TABLE() 展示object

这样的展示形式对于开发很有用,但是我发现这样还要手动去点每个Object有些笨重。这时候我觉得console.table()有点意思。

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

console.table(languages);

用CONSOLE.LOG()展示数组

非常小巧有木有?

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

网站地图xml地图