Chrome 控制台console的用法(转)

1、查看命令

下面咱们来看看console里面具体提供了哪些方法能够供咱们平时调试时使用。

目前控制台方法和属性有：

["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]

下面咱们来一一介绍一下各个方法主要的用途。

2、命令介绍

通常状况下咱们用来输入信息的方法主要是用到以下四个：

一、console.log 用于输出普通讯息

二、console.info 用于输出提示性信息

三、console.error用于输出错误信息

四、console.warn用于输出警示信息

用图来讲话：

六、console.groupEnd结束一组输出信息

看你需求选择不一样的输出方法来使用，若是上述四个方法再配合group和groupEnd方法来一块儿使用就能够输入各类各样的不一样形式的输出信息。

七、console.assert对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台。

八、console.count（这个方法很是实用哦）当你想统计代码被执行的次数。

九、console.dir(这个方法是我常用的 可不知道比for in方便了多少) 直接将该DOM结点以DOM树的结构进行输出，能够详细查对象的方法发展等等。

十、console.time 计时开始。console.timeEnd  计时结束（看了下面的图你瞬间就感觉到它的厉害了）

十一、keys和values 前者返回传入对象全部属性名组成的数据，后者返回全部属性值组成的数组。

十二、console.table方法

1三、Chrome 控制台中原生支持类jQuery的选择器，也就是说你能够用$加上熟悉的css选择器来选择DOM节。

1四、console.profile和console.profileEnd配合一块儿使用来查看CPU使用相关信息。

 

3、使用总结

一、修改javascript代码

不少人遇到手动修改脚本后，而后不生效。

a、独立的js文件的修改方法

　　在F12调试界面中修改的JS代码，是修改的“本地缓存文件”中的代码，而不是存在于服务器上的网页的真正代码，网页的真正代码在浏览器中是没法修改的。

　　Chrome开发者调试工具（F12），能够在调试界面修改代码（包括JS、HTML和CSS）模拟本地运行，具体步骤大体以下：

　　在须要修改的代码段上方合理代码行设置断点；按F5键刷新网页，并等待网页执行到断点；修改JS代码或其它须要修改的代码，修改后选择单步执行或继续执行便可。

　　一般，调试中修改无效，是由于网页加载完成，其实就是运行已经完成了，修改代码不会再次执行。

b、修改html上的js

　　js写在html的脚本区域上，这时在source面板下是没法编辑的，但在Elements仍是能够的。

　　修改方法就是直接将js代码修改，而后在console再执行一次。

　　缺陷：无法控制已经执行的脚本

 

原文：http://www.cnblogs.com/zhongxinWang/p/4121111.html

相关推荐：https://github.com/dwqs/blog