Chrome浏览器调试,console详解

作为一个前端开发者,不可避免的需要进行各种各样的调试。

在谷歌浏览器出来以前,火狐的firebug是特别有名的一款调试工具,不过自从谷歌浏览器诞生以来,其自带的开发者工具足以媲美firebug,某种程度上甚至超越了firebug。

虽然这篇介绍谷歌调试工具,但是还是要说一句,火狐的调试工具依然强大。二者都是业界调试工具的佼佼者。

谷歌开发者工具功能丰富,包括代码审查,样式调整,性能优化以及其他更高级的功能,调试方式多种多样,不一而足。

这里主要介绍控制台的console

打开控制台

Windows系统快捷键【三个】:

F12

Ctrl+shift+i

Ctrl+shift+j

鼠标操作1:如图【是不是多余了?】

鼠标操作2:在网页上任意位置右键,最后一个选项:检查,如图

打开后,可以看到这样的界面

上面的不同的单词:Elements,Console,Source,Network等等,分别针对不同的功能面板。我们这里主要介绍Console面板。

上面的图上一大片空白,就是console面板输入区域。可以在这里直接输入JavaScript代码。网页中的报错信息,提示信息等也都会出现在这里。

console是浏览器开发者工具自带的API,并不是JavaScript原生对象。不过目前所有主流的浏览器均支持。可以在js代码中用console输出信息。

现在我们在面板里面输入console。

可以看到console对象有这么多方法。

先来看以下五个方法:

console.log

console.error

console.info

console.warn

console.debug
这五个方法是我们比较常用的方法,也算是比较直观的方法。这几个方法的区别就是输出的结果的颜色不一样,还有输出结果前面的提示符号不同。具体如何,请按如下代码测试,讲log换成对应的info,warn,debug,error

关于这五个方法,有如下几点:

1.都可以输出任意类型的值,字符串,数值,对象,数组,函数;

console.log(100);
console.log("pelli");
console.log(function hh(){});
console.log([1,2,3]);
console.log({name:‘pelli‘});
console.log(null);
console.log(undefined);
console.log(true);

2.都可以有任意多个参数(65535个以内),可以运行以下代码,查看效果。顺便提一下,65535是一个特别的数字,有兴趣可以百度一下;

var str = ‘console.log("hello"‘;

for(var i = 0; i < 100000; i++){
    str = str + "," + i;
}

str += ‘);‘;
eval(str);

3.都可以用占位符进行格式化输出,比如输出带样式的字符串,输出图片等。

一共有四种占位符:

浮点:%f

字符:%c

整数:%d或%i

对象:%o

请看以下代码:代码中的log可以和warn,info,debug,error随意互换

//输出带有样式的文字
console.log("%c这是蓝色的20号字","color:blue;font-size:20px;");
//输出图片
console.log("%c","background:url(‘http://www.baidu.com/img/tupian.jpg‘)");
//格式化输出日期
console.log("今天是%i年%i月%i日",2016,05,04);
//输出小数
console.log("%f是圆周率",3.141592653);var obj = {  name : ‘pelli‘,  age : 24}console.log("%o",obj);

除了console.log外,还有其他很多方法。上面的图片中列出的是所有的方法。

 console.count();

这个方法是用来记录该行所在的代码是第几次执行。一般写在循环和函数中。每一次执行到这一行的时候,都会在控制台输出一个数值----在前一个数值基础上加一。有一个可选参数,可选参数是任意值(字符串,数字,对象,数组,函数,null,undefined,布尔值,正则表达式),参数会输出在数字前面的冒号之前。

其输出结果一定会有一个冒号,冒号后面紧紧跟着数字。

也就是说,如果没有参数的话,会输出一个冒号和一个数字。

在函数中写这个方法,可以记录该函数是第几次被调用。

console.dir()

用于输出一个对象。

console.dirxml()

输出dom对象

console.clear()

清空控制台信息,执行该方法,会清空控制台中的所有之前的输出信息

console.assert()

输出断言消息

console.assert(3 < 4,"该断言是正确的断言,所以不会有任何输出");

console.assert(3 > 4,"这句话是断言出错后输出的信息");

var a = 100;

console.assert(a%5===3,"断言有两个参数,第一个是必须参数,断言语句,第二个参数是可选语句,断言出错后输出的信息,如果断言正确,则不输出断言");

console.trace()

跟踪该函数调用链,会输出该函数被哪些函数调用过。以下是谷歌浏览器效果。

其他的是有关于性能方面的信息输出。

输出代码执行的时间。

console.time()

console.timeEnd();

console.time()和console.timeEnd()通常会一起使用,console.time()表示计时开始,console.timeEnd()表示计时结束,二者传递相同的参数,用以表示同一个计时标记

二者可以嵌套使用。

显示代码执行过程中性能的情况

console.profile()

console.profileEnd()

通常这两个方法也是一起使用,二者都有一个可选的相同参数,表示记录标记。

输出的结果会再控制台,profile 栏显示。

分组显示:

console.group()

console.groupEnd()

以上两个方法可以将输出的信息分组显示;儿者都有一个可选的参数,表示分组标记。可以嵌套使用。

以上是对于控制台console对象的简单介绍。

还有很多不完善的地方,还望见谅。

时间: 2024-11-04 21:43:52

Chrome浏览器调试,console详解的相关文章

控制台命令Console详解

控制台命令Console详解 一 什么是 Console Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 Console 对象,使用该对象 可以输出信息到 Console 窗口中. 二 什么浏览器支持 Console 很多人可能都知道 Chrome 和 FireFox(FireBug)中都支持 Console.而其他浏览器都支 持不好.比如 IE8 自带的开发工具虽然支持 Console,但功能比较单调,显示对象的时候都是显示 [Object,Objec

Google Chrome抓包分析详解

Google Chrome抓包分析详解 一:什么是抓包 即抓取我们本地电脑与远端服务器通信时候所传递的数据包 二:Chrome浏览器讲解 Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代.调试和分析 三:打开Chrome开发者工具 在Chrome界面按F12 or在页面元素上右键点击,选择“检查” 四:开发者工具的结构 Elements(元素面板):使用“元素”面板可以通过自由操纵DOM和CSS来重演您网站的布局和设计. Console

chrome浏览器调试功能之后端篇

作为后端开发人员,可能有很多同学不怎么了解chrome调试功能,而即将成为大神的我们,怎么也得会,知其然更要知其所以然,今天我带领大家好好的梳理一下,chrome浏览器调试,个人把它分成了前端功能和后端功能,在百度上也有很多关于该功能的使用说明,而其中很多都是抄来抄去的,很多概念模糊不清,甚至错误的也发了出来,鄙人实在看不下去了,就来给大家讲解我们PHP工程师需要用到的功能,重点在后面的TimeLine; 好了,闲话少说,首先打开chrome浏览器,按F12键进入调试模式,选择NetWork,打

windows下eclipse调试hadoop详解

1)下载Eclipse http://www.eclipse.org/downloads/ Eclipse Standard 4.3.2 64位 2) 下载hadoop版本对应的eclipse插件 我的hadoop是1.0.4,因此下载hadoop-eclipse-plugin-1.0.4.jar 下载地址:http://download.csdn.net/detail/m_star_jy_sy/7376169 3)安装hadoop插件 将hadoop-eclipse-plugin-1.0.4.

SylixOS调试方法详解——性能分析

1. SylixOS调试方法介绍 SylixOS实现了一个功能强大的调试stub(桩),可在设备或模拟器上在线调试应用程序,RealEvo-IDE也提供配套的调试插件.目前RealEvo-IDE既支持自动推送调试.也支持传统的手动启动gdbserver的调试方式.在官方公布的使用手册中没有详细写出在日常开发中非常实用的几种调试方式,本文主要介绍性能分析的调试方法. 在日常开发过程中经常会遇到程序不够快的情况,但是不知道到底慢在哪里,往往是随意寻找函数优化,并没有没有真正定位到程序哪里慢,存在很大

Windbg调试命令详解

发表于2013 年 8 月 23 日由张佩 转载注明>> [作者:张佩][原文:http://www.yiiyee.cn/Blog] 1. 概述 用户成功安装微软Windows调试工具集后,能够在安装目录下发现四个调试器程序,分别是:cdb.exe.ntsd.exe.kd.exe和Windbg.exe.其中cdb.exe和ntsd.exe只能调试用户程序,Kd.exe主要用于内核调试,有时候也用于用户态调试,上述三者的一个共同特点是,都只有控制台界面,以命令行形式工作. Windbg.exe在

SylixOS 调试方法详解——静态代码分析

1. SylixOS调试方法介绍 SylixOS 实现了一个功能强大的调试 stub,可在设备或模拟器上在线调试应用程序,RealEvo-IDE 也提供配套的调试插件.目前 RealEvo-IDE 既支持自动推送调试.也支持传统的手动启动 gdbserver 的调试方式.在官方公布的使用手册中没有详细写出在日常开发中非常实用的几种调试方式,我们通过新建几个App工程来做相应的演示,主要有代码静态分析.代码覆盖率检查.性能分析以及一个实战案列的演示,本文主要介绍代码静态分析调试. 2. Sylix

SocketLog-微信调试、API调试和AJAX的调试的工具,能将日志通过WebSocket输出到Chrome浏览器的console中

说明 SocketLog适合Ajax调试和API调试, 举一个常见的场景,用SocketLog来做微信调试, 我们在做微信API开发的时候,如果API有bug,微信只提示"改公众账号暂时无法提供服务,请稍候再试" ,我们根本不知道API出来什么问题. 有了SocketLog就不一样了, 我们可以知道微信给API传递了哪些参数, 程序有错误我们也能看见错误信息(下方有张图片,可能加载慢,请耐心等待一下) 正在运行的API有bug,不能var_dump进行调试,因为会影响client的调用

Google Chrome浏览器调试功能介绍

作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html ] 在Google Chrome浏览器出来之前,我一直使用FireFox,因为FireFox的插件非常丰富,更因为FireFox有强大的Firebug,对于前端开发可谓神器. 在Chrome出来的时候,我就喜欢上它的简洁.快速,无论是启动速度还是页面解析速度还是Javascript执行速度(现

前端chrome浏览器调试总结

引言 "工欲善其事,必先利其器" 恩,这句话我觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负责打眼影,各司其职,有了专业的工具才能干专业的事,这个灵感要来源于之前我想买化妆品时,店里的海报标语,由此联想到,如果你想在某个事情上做好,并且做的专业,那么你一定要把你的工具用好,这样才能事半功倍,我见过很多师兄师姐,他们写了很多代码,他们能够很快的完成工作,能够处理很多复杂的业务逻辑,但是对于浏览器的调试掌握的并不全面和熟悉,说说我自己吧,我