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. 【ADO.NET】5、手机归属地查询( winfrom )

    using System.IO; 有一个数据库手机号码的txt文件,格式是 : 13500000000-13560000000-中国移动 查询结果: 湖南移动[邵阳]文件夹选择对话框 FolderBr ...

  2. python 自动化之路 day 08 面向对象进阶

    面向对象高级语法部分 经典类vs新式类 静态方法.类方法.属性方法 类的特殊方法 反射 异常处理 面向对象高级语法部分 经典类vs新式类 把下面代码用python2 和python3都执行一下 1 2 ...

  3. linux驱动(一)

    编写模块必须先声明下面两句: #include <linux/module.h>               //这个头文件包含了许多符号与函数的定义,这些符号与函数多与加载模块有关 #i ...

  4. input表单

    submit:点击submit按钮表单就会被提交给服务器,中文IE下默认按钮文本为“提交查询”,可以设置value属性修改按钮的显示文本 text:size属性为宽度,value为值,maxlengt ...

  5. JS选择checkbox

    <script> window.onload = function () { //获取checkbox var ids1 = document.getElementsByName('Vot ...

  6. HDU1004 (数组元素出现最多)

    HDU1004 思路:求数组中出现次数最多的那个元素: 遍历数组元素,找出每个元素出现的次数 Input Input contains multiple test cases. Each test c ...

  7. PHP利器-WAMPServer

    为了配置memcacheAdmin,牵涉到搭建PHP的环境,使用的是WAMPServer,安装之后,需要对apache进行配置, 端口,需要将wamp\bin\apache\Apache2.2.21\ ...

  8. Js Carousel

    http://getbootstrap.com/javascript/#carousel http://owlgraphic.com/owlcarousel/#demo https://www.mob ...

  9. Js处理数据——前端分页工具

    这几天有小伙伴讨论起了分页的相关问题,这里我也简单讲下前端如何简单便捷的利用Js(库)写出优雅,好用的分页工具. 分页是个很简单又超多接触的技术点,粗略来讲分如下两种: 真分页--每次根据页码.页大小 ...

  10. 从零到一:caffe-windows(CPU)配置与利用mnist数据集训练第一个caffemodel

    一.前言 本文会详细地阐述caffe-windows的配置教程.由于博主自己也只是个在校学生,目前也写不了太深入的东西,所以准备从最基础的开始一步步来.个人的计划是分成配置和运行官方教程,利用自己的数 ...