让js调试更简单—console

时间：2022-09-06 15:57:55

一、显示信息的命令

  • console.log 用于输出普通信息
  • console.info 用于输出提示性信息
  • console.error用于输出错误信息
  • console.warn用于输出警示信息

让js调试更简单—console

最常用的就是console.log了。

二、占位符

console上述的集中度支持printf的占位符格式，支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）:

让js调试更简单—console

<script type="text/javascript">

     console.log("%d年%d月%d日",2011,3,26);

</script>

让js调试更简单—console

%o、%O都是用来输出Object对象的，对普通的Object对象，两者没区别，但是打印dom节点时就不一样了：

// 格式成可展开的的DOM，像在开发者工具Element面板那样可展开

console.log('%o',document.body.firstElementChild);

// 像JS对象那样访问DOM元素，可查看DOM元素的属性

// 等同于console.dir(document.body.firstElementChild)

console.log('%O',document.body.firstElementChild);

%c占位符是最常用的。使用%c占位符时，对应的后面的参数必须是CSS语句，用来对输出内容进行CSS渲染。常见的输出方式有两种：文字样式、图片输出。

三、显示某个节点的内容

<!DOCTYPE html>

    <html>

    <head>

        <title>常用console命令</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    </head>

    <body>

        <div id="info">

            <h3>我的博客：http://www.cnblogs.com/chaoran/</h3>

        </div>

        <script type="text/javascript">

            var info = document.getElementById('info');

            console.dirxml(info);

        </script>

    </body>

    </html>

让js调试更简单—console

四、判断变量是否是真

console.assert()用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常。

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

<script type="text/javascript">

 　　var result = 1;

 　　console.assert( result );

 　　var year = 2014;

 　　console.assert(year == 2018 );

</script>

1是非0值，是真；而第二个判断是假，在控制台显示错误信息

让js调试更简单—console

五、追踪函数的调用轨迹

console.trace()用来追踪函数的调用轨迹。

<script type="text/javascript">

    /*函数是如何被调用的，在其中加入console.trace()方法就可以了*/

　　function add(a,b){

        console.trace();

 　　　　return a+b;

 　　}

 　　var x = add3(1,1);

 　　function add3(a,b){return add2(a,b);}

 　　function add2(a,b){return add1(a,b);}

 　　function add1(a,b){return add(a,b);}

</script>

控制台输出信息：

让js调试更简单—console

六、计时功能

console.time()和console.timeEnd()，用来显示代码的运行时间。

<script type="text/javascript">

 　　console.time("控制台计时器一");

 　　for(var i=0;i<1000;i++){

　　　　for(var j=0;j<1000;j++){}

 　　}

 　　console.timeEnd("控制台计时器一");

</script>

让js调试更简单—console

七、console.profile()的性能分析

性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是console.profile()。

<script type="text/javascript">

    function All(){

        alert(11);

　　　　 for(var i=0;i<10;i++){

           funcA(1000);

        }

 　　　　funcB(10000);

 　　}

    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();
　　｝

</script>

让js调试更简单—console

参考：

让js调试更简单—console的更多相关文章

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

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

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

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

  3. &lbrack;转&rsqb;九个Console命令，让js调试更简单

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

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

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

  5. 【F12】Console命令，让js调试更简单

    Console命令,让js调试更简单 一.显示信息的命令 console.log("normal"); // 用于输出普通信息 console.info("informa ...

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

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

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

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

  8. 九个Console命令，让js调试更简单

    一.显示信息的命令 最常用的就是console.log了. 二.占位符 console上述的集中度支持printf的占位符格式,支持的占位符有:字符(%s).整数(%d或%i).浮点数(%f)和对象( ...

  9. console 让 js 调试更简单

    浏览器的控制台(console)是最重要的面板,主要作用是显示网页加载过程中产生各类信息. 显示信息 console.log('hello world'); console.debug('debug' ...

随机推荐

  1. 进程&amp&semi;线程

    进程与线程的区别 什么是进程(Process):普通的解释就是,进程是程序的一次执行,而什么是线程(Thread),线程可以理解为进程中的执行的一段程序片段.在一个多任务环境中下面的概念可以帮助我们理 ...

  2. OpenVPN中的几个和连接相关的Timer解析

    在OpenVPN中存在几个计时器,这些计时器限制着OpenVPN的一些特定行为的最长持续时间,如果设置不好,就会带来莫名其妙的断线问题,然而如何设置这些计数器也没有一个通用的方案,特定情况下不能太大也 ...

  3. haproxy 超时自动重发

    timeout connect 5000 timeout client 50000 timeout server 50000 timeout check 5s stats refresh 30s Ap ...

  4. SQL中的Update、delete与inner join 联合使用

    Update XXX set XXX where 这种写法大家肯定都知道,才发现update和delete居然支持inner join的update方式,太神奇了. update的格式是 update ...

  5. jQuery UI 日期选择器（Datepicker）

    设置JqueryUI DatePicker默认语言为中文 <!doctype html><html lang="en"> <head> < ...

  6. &period;NET 对 XML 进行创建，增加，删除，修改操作整理

    前言: 最近做了一个项目,程序A在一个服务器程序B在另一台服务器,然而主程序A需要访问程序B的图片集文件夹下载到本服务器上,为了防止多次对Web Services进行调用,在主程序A中创建一个XML文 ...

  7. 笔记12 注入AspectJ切面

    虽然Spring AOP能够满足许多应用的切面需求,但是与AspectJ相比, Spring AOP 是一个功能比较弱的AOP解决方案.AspectJ提供了Spring AOP所不能支持的许多类型的切 ...

  8. SourceInsight宏插件2&lpar;非常好用，强力推荐&rpar;

    Quicker宏在SI中的使用方法(下载地址:链接:https://pan.baidu.com/s/1VrDxlPhft7RPUCCOKxsGIg  提取码:2d4u) Quicker宏的添加到SI中 ...

  9. KVM虚拟机管理——虚拟机克隆

    1. 概述2. 部署基本操作系统虚拟机3. 配置虚拟机3.1 修改/etc/sysconfig/network3.2 删除/etc/sysconfig/network-scripts/ifcfg-et ...

  10. D - Football &lpar;aka Soccer&rpar;

    Football the most popular sport in the world (americans insist to call it "Soccer", but we ...

相关文章