1.在页面中引入js文件

官网:http://log4javascript.org/index.html

```javascript

<script src="http://cdn.bootcss.com/log4javascript/1.4.3/log4javascript.min.js"></script>
```
2.初始化
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script type="text/javascript">
    //启用javascript 日志功能
    var logger = log4javascript.getLogger("main");
    log4javascript.setEnabled(false);
    var appender = new log4javascript.InPageAppender();
  appender.layout.pattern='%d{yyyy-MM-dd HH:mm:ss,SSS} [%c] %-5p - %m{1}%n';
    appender.visible=false;
    logger.addAppender(appender);
    logger.debug("This is a debugging message from the log4javascript in-page page");
     
    document.onkeydown = function(evt) {
         var VK_F9=120;
         //兼容IE和Firefox获得keyBoardEvent对象
         var evt = (evt) ? evt : ((window.event) ? window.event : "");
         //兼容IE和Firefox获得keyBoardEvent对象的键值
         var key = evt.keyCode?evt.keyCode:evt.which;
        if(evt.ctrlKey && evt.altKey && key == VK_F9){
            if(appender.visible){
                log4javascript.setEnabled(false);
                logger.info("隐藏记录日志.");
                appender.hide();
                appender.visible=false;
            }else{
                log4javascript.setEnabled(true);
                logger.info("显示记录日志.");
                appender.show();
                appender.visible=true;
            }
             
        }  
    };
 
</script>

3.总结
现在你就可以在页面上通过 Ctrl+Alt+F9 来开始/显示js日志 或结束/隐藏js日志

效果图:

 

javascript日志框架使用的更多相关文章

  1. Javascript单元测试框架比较Qunit VS Jasmine

    Javascript单元测试框架比较Qunit VS Jasmine 工欲行其事必先利其器,好的单元测试框架是TDD成功的一半.Javascript优秀的测试框架很多, 包括Jasmine,Qunit ...

  2. javascript单元测试框架mochajs详解

    关于单元测试的想法 对于一些比较重要的项目,每次更新代码之后总是要自己测好久,担心一旦上线出了问题影响的服务太多,此时就希望能有一个比较规范的测试流程.在github上看到牛逼的javascript开 ...

  3. 解读ASP.NET 5 & MVC6系列(9):日志框架

    框架介绍 在之前的.NET中,微软还没有提供过像样的日志框架,目前能用的一些框架比如Log4Net.NLog.CommonLogging使用起来多多少少都有些费劲,和java的SLF4J根本无法相比. ...

  4. JavaScript单元测试框架JsUnit基本介绍和使用

    JavaScript单元测试框架JsUnit基本介绍和使用 XUnit framework XUnit是一套标准化的独立于语言的概念和结构集合,用于编写和运行单元测试(Unit tests). 每一个 ...

  5. Java日志框架:SLF4J,Common-Logging,Log4J,Logback说明

    Log4j  Apache的一个开放源代码项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台.文件.GUI组件.甚至是套接口服务 器.NT的事件记录器.UNIX Syslog守护进程等 ...

  6. java日志框架slf4j与log4j

    日志记录自然是非常重要的,但恐怕能记住slf4j与log4j等日志框架配置的人就很少了,这个东西不难,只是配置好后很少会去动它,开发新项目一般也是从其他项目拷贝,或者参照文档 废话不多说,先说log4 ...

  7. 一个简单的、面向对象的javascript基础框架

    如果以后公司再能让我独立做一套新的完整系统,那么我肯定会为这个系统再写一个前端框架,那么我到底该如何写这个框架呢? 在我以前的博客里我给大家展示了一个我自己写的框架,由于当时时间很紧张,做之前几乎没有 ...

  8. 12种JavaScript MVC框架之比较

    Gordon L. Hempton是西雅图的一位黑客和设计师,他花费了几个月的时间研究和比较了12种流行的JavaScript MVC框架,并在博客中总结了每种框架的优缺点,最终的结果是,Ember. ...

  9. Moon转告给你一个比Log4net更好日志框架--TracerX Logger 及其对应的日志查看器

    一.介绍 TracerX logger是一个易于上手,且拥有众多高级特性的.NET日志框架. 它能够发送输出结果到多目的地(循环文件.事件日志等....).它也能生成文本和二进制文件.它拥有一个强大的 ...

随机推荐

  1. 【DP_背包专题】 背包九讲

    这段时间看了<背包九讲>,在HUST VJUDGE上找到了一个题单,挑选了其中16道题集中做了下,选题全部是HDU上的题,大多是简单题.目前做了点小总结,大概提了下每道题的思路重点部分,希 ...

  2. jquery 多级无限分类

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  3. PHP实现递归的三种方法

    递归函数是我们常用到的一类函数,最基本的特点是函数自身调用自身,但必须在调用自身前有条件判断,否则无限无限调用下去.实现递归函数可以采取什么方式呢?本文列出了三种基本方式.理解其原来需要一定的基础知识 ...

  4. js获取url的get传值函数

    function getvl(name) { var reg = new RegExp("(^|\\?|&)"+ name +"=([^&]*)(\\s| ...

  5. php url字符转义操作

    遇到一段代码,从数据库里读出来带 \ 字符 需要转义成中文~ 用到url_decode(); //$info 为刚从数据库中读取的二维数组 foreach($info as $key1 => & ...

  6. HTML 5 video 视频标签全属性详解

    Video标签的使用 Video标签含有src.poster.preload.autoplay.loop.controls.width.height等几个属性, 以及一个内部使用的标签<sour ...

  7. 头文件的宏定义#ifndef测试

    一.入题 在头文件的书写中,都加入了如下内容: #ifndef __头文件名_H #define __头文件名_H #endif 曾经在书中看到的解释是“防止重复定义”,今天突然想到为什么是这样的解释 ...

  8. php的ftp类

    1.需求 了解php的ftp使用 2.例子 使用CI封装好的ftp类库 上传 $this->load->library('ftp'); $config['hostname'] = 'ftp ...

  9. TCP/IP入门学习(2)---OSI分层

    一.会话层以上的处理 1.表示层 将数据从主机特有的格式转换为网络标准传输格式.以此使得不同环境之间的通信成为可能. 2.会话层 即决定使用哪个连接或者哪种连接方式将数据发送出去.会话层也会在数首部添 ...

  10. POJ_1220_Nmber Sequence

    上网查了一下进制转换的算法,发现一个性能比较好的:m进制转换成n进制,先用例如62进制ABC转换成10进制,就是用余位c(第一个数余位数值为0)乘以原基数from,加上A表示的数值,然后得到一个数,对 ...