💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
# console console.log("normal"); // 用于输出普通信息 console.info("information"); // 用于输出提示性信息 console.error("error"); // 用于输出错误信息 console.warn("warn"); // 用于输出警示信息 ![](https://box.kancloud.cn/a6035f99bd30d659548eb97922f5e081_243x80.png) ~~~ console.log("%s","string"); //字符(%s) console.log("%d年%d月%d日",2016,8,29); //整数(%d或%i) console.log("圆周率是%f",3.1415926); //浮点数(%f) var dog = {}; dog.name = "大毛"; dog.color = "黄色"; dog.sex = "母狗"; console.log("%o",dog); // ~~~ ![](https://box.kancloud.cn/c23a3f33cfbac43e67b5ad22c33195c7_414x265.png) **三、信息分组 (console.group(),console.groupEnd())** ~~~ console.group("第一组信息"); console.log("第一组第一条:我的博客"); console.log("第一组第二条:CSDN"); console.groupEnd(); console.group("第二组信息"); console.log("第二组第一条:程序爱好者QQ群"); console.log("第二组第二条:欢迎你加入"); console.groupEnd(); ~~~ ![](https://box.kancloud.cn/c1927b3e863aa264eaed9dc62fc5e219_379x245.png) **四、将对象以树状结构展现 (console.dir()可以显示一个对象所有的属性和方法)** ~~~ var info = { name : "Alan", age : "27", grilFriend : "nothing", getName : function(){ return this.name; } } console.dir(info); ~~~ ![](https://box.kancloud.cn/25d427e173d5e48a9f5da22adfb052fd_380x235.png) **五、显示某个节点的内容 (console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码)** ~~~ var node = document.getElementById("info"); node.innerHTML += "<p>追加的元素显示吗</p>"; console.dirxml(node); ~~~ ![](https://box.kancloud.cn/fee21295cc63dc54dfa49eb72b50090d_378x145.png) **六、判断变量是否是真 (console.assert()用来判断一个表达式或变量是否为真,只有表达式为false时,才输出一条相应作息,并且抛出一个异常)** ~~~ var testObj = false; console.assert(testObj, '当testObj为false时才输出!'); ~~~ ![](https://box.kancloud.cn/92948984150570c8bfb6e7e78512ddef_609x121.png) **七、计时功能 (console.time()和console.timeEnd(),用来显示代码的运行时间)** ~~~ console.time("控制台计时器"); for(var i = 0; i < 10000; i++){ for(var j = 0; j < 10000; j++){} } console.timeEnd("控制台计时器"); ~~~ ![](https://box.kancloud.cn/a0346b770c12d82ff7aa64ab0b906cec_450x98.png) **八、性能分析performance profile (就是分析程序各个部分的运行时间,找出瓶颈所在,使用的方法是console.profile()和console.proileEnd();) ** ~~~ function All(){ // alert(11); for(var i = 0; i < 10; i++){ funcA(100); } funcB(1000); } function funcA(count){ for(var i = 0; i < count; i++){}; } function funcB(count){ for(var i = 0; i < count; i++){}; } console.profile("性能分析器"); All(); console.profileEnd(); ~~~ 详细的信息在chrome控制台里的"profile"选项里查看 ![](https://box.kancloud.cn/91a2c0907ce5ae1289a58e34d9e5677b_513x227.png) **九、console.count()统计代码被执行的次数** ~~~ function myFunction(){ console.count("myFunction 被执行的次数"); } myFunction(); //myFunction 被执行的次数: 1 myFunction(); //myFunction 被执行的次数: 2 myFunction(); //myFunction 被执行的次数: 3 ~~~ ![](https://box.kancloud.cn/247521f9f1baa1b03011b2cecbda8cca_507x228.png) **十一、console.table表格显示方法** ~~~ var mytable = [ { name: "Alan", sex : "man", age : "27" }, { name: "Wu", sex : "gril", age : "28" }, { name: "Tao", sex : "man and gril", age : "29" } ] console.table(mytable); ~~~ ![](https://box.kancloud.cn/56448db6caa9ef76c4de19875083ac9f_681x348.png) **十二、Chrome 控制台中原生支持类jQuery的选择器,也就是说你可以用$加上熟悉的css选择器来选择DOM节。** ![](https://box.kancloud.cn/594cd5a4e47992ad4c5676c0b4bdd258_1284x420.png) **十三、copy通过此命令可以将在控制台获取到的内容复制到剪贴板** ![](https://box.kancloud.cn/1f1f9343ef0623d4821b39c41cee7999_558x123.png) **十四、$_命令返回最近一次表达式执行的结果,$0-$4代表了最近5个你选择过的DOM节点** ![](https://box.kancloud.cn/e413a0355f0e06135c8af6fad62d5c08_836x455.png) **十五、利用控制台输出文字,图片,以%c开头,后面的文字就打印的信息,后面一个参数就是样式属性;** ~~~ console.log("请在邮件中注明%c 来自:console","font-size:16px;color:red;font-weight:bold;"); ~~~ ![](https://box.kancloud.cn/0dc04fccff920ad513684ff648fbd435_620x41.png)