Console命令,让js调试更简单

一、显示信息的命令

console.log("normal");           // 用于输出普通信息
console.info("information"); // 用于输出提示性信息
console.error("error"); // 用于输出错误信息
console.warn("warn"); // 用于输出警示信息

二、点位符:字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o);

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); //对象(%o)

三、信息分组 (console.group(),console.groupEnd())

按 Ctrl+C 复制代码
按 Ctrl+C 复制代码

四、将对象以树状结构展现 (console.dir()可以显示一个对象所有的属性和方法)

var info = {
name : "Alan",
age : "27",
grilFriend : "nothing",
getName : function(){
return this.name;
}
}
console.dir(info);

五、显示某个节点的内容 (console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码)

var node = document.getElementById("info");
node.innerHTML += "<p>追加的元素显示吗</p>";
console.dirxml(node);

六、判断变量是否是真 (console.assert()用来判断一个表达式或变量是否为真,只有表达式为false时,才输出一条相应作息,并且抛出一个异常)

var testObj = false;
console.assert(testObj, '当testObj为false时才输出!');

七、计时功能 (console.time()和console.timeEnd(),用来显示代码的运行时间)

console.time("控制台计时器");
for(var i = 0; i < 10000; i++){
for(var j = 0; j < 10000; j++){}
}
console.timeEnd("控制台计时器");

八、性能分析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"选项里查看

九、console.count()统计代码被执行的次数

function myFunction(){
console.count("myFunction 被执行的次数");
}
myFunction(); //myFunction 被执行的次数: 1
myFunction(); //myFunction 被执行的次数: 2
myFunction(); //myFunction 被执行的次数: 3

十、keys和values,要在浏览器里输入

十一、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);

十二、Chrome 控制台中原生支持类jQuery的选择器,也就是说你可以用$加上熟悉的css选择器来选择DOM节。

$("body");           //选择body节点

十三、copy通过此命令可以将在控制台获取到的内容复制到剪贴板

copy(document.body);                      //复制bodycopy(document.getElementById("info"));    //复制某id元素的的节点

十四、$_命令返回最近一次表达式执行的结果,$0-$4代表了最近5个你选择过的DOM节点

十五、利用控制台输出文字,图片,以%c开头,后面的文字就打印的信息,后面一个参数就是样式属性;

console.log("请在邮件中注明%c 来自:console","font-size:16px;color:red;font-weight:bold;");

【F12】Console命令,让js调试更简单的更多相关文章

  1. 【转载】你不知道的 console,让 JS 调试更简单

    对于前端工程师,肯定不会对console陌生,但是,又能深入了解多少呢? Chrome控制台-开发者工具 windows按F12, MAC按Command + Option + C或Command + ...

  2. [转]九个Console命令,让js调试更简单

    转自:九个Console命令,让js调试更简单 一.显示信息的命令 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html ...

  3. 让js调试更简单—console

    一.显示信息的命令 console.log 用于输出普通信息 console.info 用于输出提示性信息 console.error用于输出错误信息 console.warn用于输出警示信息 最常用 ...

  4. 灵活使用 console 让 js 调试更简单

    摘要: 玩转console. 原文:灵活使用 console 让 js 调试更简单 作者:前端小智 Fundebug经授权转载,版权归原作者所有. Web 开发最常用的就是 console.log , ...

  5. .net core2.0添加json文件并转化成类注入控制器使用 让js调试更简单—console

    .net core2.0添加json文件并转化成类注入控制器使用 上一篇,我们介绍了如何读取自定义的json文件,数据是读取出来了,只是处理的时候太麻烦,需要一遍一遍写,很枯燥.那么有没有很好的办法呢 ...

  6. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  7. 分享几个日常调试方法让js调试更简单

    下面分享几个日常调试代码的时候在Console命令行显示你的操作,让你的js调试更简单. console显示信息的命令 在浏览器按f12在console上显示你的文本. <!DOCTYPE ht ...

  8. 【F12】九个Console命令,让js调试更简单

    一.显示信息的命令 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html> <head>     &l ...

  9. 九个Console命令,让 JS 调试更简单

    一.显示信息的命令 <!DOCTYPE html> <html> <head> <title>常用console命令</title> < ...

随机推荐

  1. Unity Shader 修改自定义变量的值

    Properties { _R(,)) = 1.0 _ColorTex("ColorTex (RGB)", 2D) = "red" {} } SubShader ...

  2. DrawCall 优化 .

    unity3D 对于移动平台的支持无可厚非,但是也有时候用Unity3D 开发出来的应用.游戏在移动终端上的运行有着明显的效率问题,比如卡.画质等各种问题.自己在做游戏开发的时候偶有所得.对于主要影响 ...

  3. 天猫浏览型应用的CDN静态化架构演变(转)

    转自:http://wbj0110.iteye.com/blog/2036613 在天猫双11活动中,商品详情.店铺等浏览型系统,通常会承受超出日常数倍甚至数十倍的流量冲击.随着历年来双11流量的大幅 ...

  4. N76E003之ISP

    Flash存储器支持硬件编程和应用编程(IAP).如果产品在研发阶段或产品需要更新软固件时,硬件编程就显得不太方便,采用在系统编程(ISP)方式,可使这一过程变得方便.执行ISP不需要将控制器从系统板 ...

  5. codeforces水题100道 第二十题 Codeforces Round #191 (Div. 2) A. Flipping Game (brute force)

    题目链接:http://www.codeforces.com/problemset/problem/327/A题意:你现在有n张牌,这些派一面是0,另一面是1.编号从1到n,你需要翻转[i,j]区间的 ...

  6. apk反编译看包名什么的

    首先默认你是装了java环境的 到google code里面下载apktool1.5.2.tar.bz2和apktool-install-windows-r05-ibot.tar.bz2(地址:htt ...

  7. win7系统自带分区工具,能分出逻辑分区

    先把硬盘里除了你装系统的主分区以外的分区全删除运行CMD输入 DISKPART然后输入list disk,找到你要分的盘,假如是要分第1个硬盘的就输入:select disk 0 这样就选择了第一个硬 ...

  8. 国产手机插入mac os 系统中无法被识别的解决方法

    一些国产手机插入mac os 系统中无法被识别,在命令行输入 system_profiler SPUSBDataType在, 然后将魅蓝note的vendor id 添加至 ~/.android/ad ...

  9. 时间的类型的相互转换(date/String)及时区的比较

    String ->Date ->String @Test public void date() throws ParseException{ String sdate = "01 ...

  10. WinDbg远程调试unable to initialize target machine information win32 error 0n87

    Debugging Target:Windows XP SP3 32-bit Debugging Host:Windows Server 2012 64-bit 当附加到目标服务器某个进程后,WinD ...