JS利用Console调试工具给页面加一个彩蛋

          阅读(104)

    JS利用Console调试台给页面加一个彩蛋

    在兆兆博客按下F12,打开Console调试工具,我们可以看到,这里输出了一些欢迎语,也算是一个小彩蛋吧。Console是一个页面调试工具,会输出浏览器执行的错误结果等等,Web开发人员肯定最熟悉不过了。百度曾用这种方式来招聘前端开发员工。那么我们怎么实现这个功能呢?很简单,一段JS代码就好了。

    JS利用Console调试工具给页面加一个彩蛋

    JS利用Console调试工具给页面加一个彩蛋

    示例代码

    先来看看兆兆的代码,将下面语句插入主题的“footer.php”即可,或者外部引入也可以。代码很简单,有木有~

    <script>
    console.info('兆兆博客欢迎您~');
    console.group("Info");
    console.log("兆兆博客(http://blog.izhaoo.com/");
    console.log("兆兆's个人博客,专注于wp网页设计、网络信息安全、IT技术。");
    console.groupEnd();
    console.time("页面访问时间");
    for(var i=0;i<1000;i++){
    for(var j=0;j<1000;j++){}}
    console.timeEnd("页面访问时间");
    </script>

    语法说明

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

    完整代码

    <script type="text/javascript">
    console.log('兆兆博客欢迎您');
    console.info('信息:兆兆博客欢迎您');
    console.error('错误:兆兆博客崩溃了');
    console.warn('警告:您没有给兆兆博客点赞呢');
    var info = {
    blog:"http://blog.izhaoo.com/",
    message:"兆兆's个人博客,专注于wp网页设计、网络信息安全、IT技术。"
    };
    console.dir(info);
    console.group("第一组信息");
    console.log("第一组第一条:人生若只如初见,");
    console.log("第一组第二条:何事秋风悲画扇。");
    console.groupEnd();
    console.group("第二组信息");
    console.log("第二组第一条:等闲变却故人心,");
    console.log("第二组第二条:却道故人心易变。");
    console.groupEnd();
    console.time("页面加载时间");
    for(var i=0;i<1000;i++){
    for(var j=0;j<1000;j++){}
    }
    console.timeEnd("页面加载时间");
    </script>

    好了,就是这么简单。快给你的页面加一个吧。看看哪些有心人会发现。

    2017-01-26 20:06:03

     


    喜欢 0



已经有2 人抢在你前面了~

加载中……