控制台命令调试时通过浏览器开发工具中的控制台命令嵌入到JavaScript中,输出特定的信息或日志,从而达到调试的目的。

我们常用的Chrome和FireFox,都可以通过F12来打开开发工具。

下面简要介绍几个常用的控制台命令:

(1)常规信息输出

console.log()是我们最常用的命令,只需要将我们希望输出的内容传进入即可:

console.log("这是我要输出的信息");

除了console.log()命令外,我们还有其它三种命令:

console.info("这是我要输出的信息");

console.error("错误信息");

console.warn("警告信息");

从这四种命令的名称就可以看出来它们的作用,它们是用来展示不同类型信息,使得我们的信息输出更加规范(个人观点)。

(2)常规信息分组输出

大量的信息输出,我们可以使用分组输出来对它们进行分组,方便我们查看:

console.group("第一组开始");
console.log("第一组第一条");
console.log("第一组第二条");
console.groupEnd();

console.group("第二组开始");
console.log("第二组第一条");
console.log("第二组第二条");
console.groupEnd();

console.group()命令用于分组的开始,console.groupEnd()用来结束分组。

(3)对象输出

console.dir()是专门输出对象所有方法和属性的,我们就可以不用自己遍历就查看对象的信息:

var obj = {
    name: "haha",
    desc: "doubi"
};
console.dir(obj);

(4)DOM输出

console.dirxml()命令是专门输出某个节点(node)所包含的html/xml代码:

var div = document.getElementById("demo");
console.dirxml(div);

由于内容过多,图片并没有截全。

(5)函数调用轨迹监测

var x = test3(1);

function test(a) {
    console.trace();
    return a;
}

function test1(a) {
    return test(a);
}

function test2(a) {
    return test1(a);
}

function test3(a) {
    return test2(a);
}

(6)计时功能

有时我们需要监测一段代码花费的时间,我们通常可以这样做:

var time1 = new Date();
for (var i = 0; i < 100; i++) {

}
var time2 = new Date();
console.log(time2 - time1);

我们还可以通过console.time()和console.timeEnd()帮助我们完成这件事:

console.time("计时器");
for (var i = 0; i < 100; i++) {

}
console.timeEnd("计时器");

需要注意的是,这两个命令里面的参数要一致,才会输出计时信息。

好了,在下了解的console常用命令就这些啦,如果有遗漏的console相关的其它常用命令,也欢迎大家来补充哦。

浏览器控制台命令调试——console的更多相关文章

  1. vue 在浏览器控制台怎么调试 谷歌插件vue Devtools

    vue 在浏览器控制台怎么调试 谷歌插件vue Devtools 问题: vuejs里面的变量,怎么用浏览器的console查看? 例如,想在chrome里用console.log查看变量$data, ...

  2. 在浏览器控制台输出内容 console.log(string);

    在浏览器控制台中写如数据 1添加    <script type="text/javascript">djConfig = { isDebug: true };< ...

  3. [UE4]游戏中服务器切换地图,控制台命令Execute console Command

    Execute console Command ServerTravel {地图名称}?listen 在服务器执行了这个命令,所有连接到该服务器的客户端都会跟着服务器同时切换到指定的地图. 1.创建一 ...

  4. javascript基础(一): 浏览器控制台使用Element,console,network,source,application

    console https://www.jianshu.com/p/67bcb481d1c5 Element https://www.kkpan.com/article/1845.html

  5. Yii2之控制台命令篇(console)

    控制台命令 Yii 中有一个拥有丰富功能的控制台,它们主要用于创建网站后台处理的任务.在项目根目录下执行相关操作,有意思的事,可以通过 yii 自带的功能,列出当前已有的命令. 1.查看当前项目控制台 ...

  6. 小谈chrome调试命令:console.log的使用

    相信从事前端开发的您,一定不会陌生Mozilla五星级推荐的一款插件:firebug,它是如此强大,乃至于我们可以很方便地调试DHTML的近乎所有元素.而在它深邃的机体里,还存有一个命令:consol ...

  7. 不依赖浏览器控制台的JavaScript断点调试方法

    随着浏览器的逐渐强大,绝大多数情况下的代码调试都是可以通过浏览器自带的一些调试工具进行解决.然而对于一些特殊情况仍然无法享受到浏览器的强大 调试能力,比如QQ客户端内嵌web的调试(虽然说QQ目前已经 ...

  8. console.debug()浏览器控制台打印输出 仅仅在支持console的浏览器下打印

    console.debug()浏览器控制台打印输出 仅仅在支持console的浏览器下打印 var util = {}; /** * 工具类 */ util = new function() { /* ...

  9. 浏览器控制台console的使用

    前天在团队项目中因为产品需求在提交订单的时候需要多个页面的数据作为提交接口的参数,这种需求让人醉醉的,项目用angular来做的,没办法只能用全局变量来定义要交互的值和localStorage来临时的 ...

随机推荐

  1. 生成随机id对比

    生成随机id 最近公司的项目游戏生成的随机不重复id,重复概率有点大, 代码如下: private static int id = 0; public static int serverID = 0; ...

  2. Google地图开发总结

    我们经常使用地图查位置.看公交.看街景,同时地图还开放第三方的API给开发者.利用这些API进行地图的个性化的展示和控制,例如北京被水淹了,开发一个网页显示北京被淹的地图,地图上面标志被水淹的位置.严 ...

  3. asp.net MVC 应用程序的生命周期

    下面这篇文章总结了 asp.net MVC 框架程序的生命周期.觉得写得不错,故转载一下. 转载自:http://www.cnblogs.com/yplong/p/5582576.html       ...

  4. 在DevExpress程序中使用内置的图标构建美观的界面元素

    在我们一般的程序中,为一般的界面元素添加一定的图标展示,有助于提升界面的整体的美观.结合排版布局,以及固定场景的图标,往往给用户非常好的直观感受:统一.美观.易理解.因此在一般的程序界面中,都尽量在略 ...

  5. 【WP8.1】WebView笔记

    之前在WP8的时候做过WebBrowser相关的笔记,在WP8.1的WebView和WebBrowser有些不一样,在这里做一些笔记 下面分为几个部分 1.禁止缩放 2.JS通知后台C#代码(noti ...

  6. 解决NTKO Office中文文件名保存到服务器时出现乱码的问题

    再使用NTKO office控件时,在ntko往服务器提交文件时,中文文件名会出现乱码的问题! 其实解决这个问题可以换一种思路,在ntko往服务器提交文件时英文肯定是不会出现乱码的问题的! 那么想办法 ...

  7. php在没有登录的情况下自动跳转到登录页

    <?php namespace Home\Controller; use Think\Controller; class BaseController extends Controller{ / ...

  8. Android Studio的SVN Performing VCS Refresh/Commit 长时间不结束

    给Android Studio项目里面的一个文件改名以后,再提交SVN时总是提示冲突,没办法解决.再后来不知道怎么弄的,每次提交时停留在SVN Performing VCS Refresh始终都不会完 ...

  9. openresty 前端开发入门二

    这一章主要介绍介绍怎么获取请求参数,并且处理之后返回数据 我们知道http请求通常分为两种,分别是GET,POST,在http协议中,GET参数通常会紧跟在uri后面,而POST请求参数则包含在请求体 ...

  10. Struts2框架简介和示例

    struts2框架 Struts2是java web的框架,在Java Web开发中,表示层框架,其核心是通过扩展Servlet来帮助处理http请求. Struct2的基本流程 Struct2的框架 ...