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. Python3 高级特性

    切片 L[0:3]表示,从索引0开始取,直到索引3为止,但不包括索引3.即索引0,1,2,正好是3个元素. 如果第一个索引是0,还可以省略: >>> L =['Michael', ' ...

  2. JavaScript学习总结【11】、JS 运动

    动画效果在网站中是一种非常常见的交互式体验效果,比如侧边栏分享.图片淡入淡出,我们把这种动画效果就叫做运动,也就是让物体动起来.如果想让一个物体动起来,无非就是改变它的速度,也就是改变属性值,比如 l ...

  3. PHP 读json文件并转php配置文件

    <?php$c = file_get_contents('./cities_v2.json');$s = "<?php return " . var_export(js ...

  4. php对象的高级特性

    对象比较,当同一个类的两个实例的所有属性都相等时,可以使用比较运算符==进行判断,当需要判断两个变量是否为同一个对象的引用时,可以使用全等运算符===进行判断. class Car { } $a =  ...

  5. skymvc网站测试之mysql数据生成

    skymvc网站测试之mysql数据生成 使用方法: 删除数据 /index.php?m=test_mysql&a=autoDelete 重置自增ID /index.php?m=test_my ...

  6. windows 查看某个端口号被占用情况

    1.查看3798端口是否被占用,以及占用端口的进程PID netstat -ano |findstr 3798 C:\Users\zhaojingbo>netstat -ano|findstr ...

  7. json序列化后日期如何变回来

    日期格式为 日期小于10的时候 占一位 比如 2019年9月1日 2015/9/1 function ChangeDateFormat(cellval) {           var date = ...

  8. BZOJ 1828: [Usaco2010 Mar]balloc 农场分配

    Description Input 第1行:两个用空格隔开的整数:N和M * 第2行到N+1行:第i+1行表示一个整数C_i * 第N+2到N+M+1行: 第i+N+1行表示2个整数 A_i和B_i ...

  9. 两种方法,获取磁盘剩余空间--PYTHON

    import ctypes import os import platform import sys def get_free_space_mb(folder): """ ...

  10. WINDOWS WMI--这是一个神奇的应用

    运行:wbemtest.exe