文档章节

我的第一个JS组件-跨浏览器JS调试工具

FansUnion
 FansUnion
发布于 2015/05/03 01:27
字数 869
阅读 11
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

  武汉九天鸟-p2p网贷系统开发-互联网应用软件开发

  公司官网:http://jiutianniao.com
  社交问答:http://ask.jiutianniao.com 


最近,在看公司一个JS大牛写的各种组件,复杂的不能完全看懂,只好从容易的入手。

看了一个JS调试工具类,在写Demo的过程中,发现了问题。

于是,我网上查找了一些资料,然后自己亲自动手,写了一个JS调试工具。

实际需求

JS不方便调试,alert这种方式不太友好,比较浪费时间。

了解到浏览器内置了Console对象(JavaScript中没有),但是不同浏览器支持的方法确是不同的。

因此,有必要自己对Console的方法进行封装下,从而适应不同浏览器。

工具类JS源码

/**
 * FansUnion-JS-Log1.0
 *
 * QQ: 240370818
 * Email: LeiWen@FansUnion.cn
 * Date:2013.12.9
 * Copyright 2013-2014, leiwen
 */
//调试工具类
var LogUtil = (function(win, doc) {
 var LogUtil = win.LogUtil || {};
 //默认可以使用
 LogUtil.enable = true;
 
 //以下4个方法,IE/Firefox/Chrome/Opera都支持
 
 //console-info 消息
 LogUtil.info = function(msg){
     LogUtil.doLog(msg,'info');
 };
  
 //console-error 错误
 LogUtil.error = function(msg){
     LogUtil.doLog(msg,'error');
 };
 
 //console-warn  警告
 LogUtil.warn = function(msg){
     LogUtil.doLog(msg,'warn');
 };
 
 //console-log,可以显示(Firefox下,在All中显示,错误-警告-消息-调试信息中都不会显示)
 LogUtil.log = function(msg){
     LogUtil.doLog(msg,'log');
 };
 
 
 //以下是某个或某几个浏览器支持的方法,部分浏览器可能不支持;如果不支持,不会报错,也没有提示
 
 //debug
 LogUtil.debug = function(msg){
  LogUtil.doLog(msg, 'debug');
 };
 
 //用户根据自己的需求,调用某个浏览器特定的方法
 LogUtil.doLog = function(msg, level){
     var useable = LogUtil.isUseable(level);
  //可用才能调用
  if(useable){
     win.console[level](msg);
  }
 };
 
 //console的方法是否可用,IE/Firefox/Chorome/Opera支持的方法是不同的
 //IE控制台 log  info  warn  error  assert  dir  clear  profile  profileEnd
   //Firebug控制台 log  info  warn  error  debug  exception  assert  dir  dirxml  trace 
   //group  groupEnd  groupCollapsed  time  timeEnd  profile  profileEnd  count  clear  table notifyFirebug  firebug
   //Chrom控制台 profiles  memory  debug  error  info  log  warn  dir  dirxml  trace  assert  count  markTimeline 
    //profile  profileEnd  time  timeEnd  group  groupCollapsed  groupEnd 
   //Opera控制台 time  timeEnd  trace  profile  profileEnd  debug  log info  warn  error  assert  dir 
   //dirxml  group  groupCollapsed  groupEnd  count  table 
 
 //判断某个level的调试是否可用(level=error,warn,info,debug等)
 LogUtil.isUseable =function(level){
    var useable =  LogUtil.enable && win.console && win.console[level];
    return useable;
 }
 
 return LogUtil;
})(window, document);


 

测试例子

 

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fansunion-log-demo</title>
<script src="js/fansunion-log.js"></script>
<script type="text/javascript">
function testLog(){

  //4个“一定”正确的方法,IE/Firefox/Chrome/Opera都支持
  LogUtil.info("info");
  LogUtil.log("log");
  LogUtil.error("error");
  LogUtil.warn("warn");
 
  //可选的,Firefox支持,IE不支持
  LogUtil.debug("debug");
 
}

testLog();

</script>

<body>
</body>
</html>


 

运行效果

 

自我评价

写了人生第一个JS组件,还是蛮激动的。

亲自动手,胜过千言万语。

不动手,永远不会,永远只能膜拜大牛。

一个重大失误

JS函数不能同名。
 
 下面2个是同一个方法,JS只根据函数名区分函数,不能重载。(与Java不同)
 LogUtil.debug = function(msg){

     //这个地方调用的是下面的方法,不是“类似于Java中的方法重载”,而是“JavaScript中的方法覆盖”

     LogUtil.debug(msg,"debug");
 };
 
 LogUtil.debug = function(msg,level){
 };
 下面的会覆盖上面的。

请求支援

CSDN2013博客之星评选,正在进行中,欢迎支持!

http://vote.blog.csdn.net/blogstaritem/blogstar2013/FansUnion

参考资料

http://blog.csdn.net/cy88310/article/details/6908826

公司某JavaScript大牛半成品的JS调试组件

原文链接http://blog.fansunion.cn/articles/3422(小雷博客-blog.fansunion.cn)

  武汉九天鸟-p2p网贷系统开发-互联网应用软件开发

  公司官网:http://jiutianniao.com
  社交问答:http://ask.jiutianniao.com 


© 著作权归作者所有

FansUnion
粉丝 60
博文 858
码字总数 825464
作品 0
丰台
高级程序员
私信 提问
分享10个 javascript 在线 debugging 工具

日期:2012/01/18 来源:GBin1.com 调试Javascript可能是web开发中最让人郁闷的事情。所以这里我们绝定来寻找一些好的工具来帮助大家调试。这里是10款我们精选的基于浏览器的JS在线调试工具,...

gbin1
2012/01/19
1K
2
.NET开发者的机遇与Web Blazor基础(有彩蛋)

一.唠唠WebAssembly的发展历程   目前有很多支持WebAssembly的项目,但发展最快的是Blazor,这是一个构建单页面的.NET技术,目前已经从Preview版本升级到了beta版本,微软计划在2020年5月发...

ZaraNet
11/24
0
0
5 个非常有用的 JavaScript 调试工具

JavaScript被称作以原型(prototype)为基础的语言。这种语言有很多特色,比如动态和弱类型,它还有一等函数(first class function)。另一个特点是它是一个多范型(multi-paradigm)语言,支持...

tsl0922
2012/05/06
5K
11
5个最好的 javascript 调试工具

JavaScript主要被用作一种语言来实现客户端浏览器的一部份,目的是为了提供更好的用户界面。JavaScript是已经被应用于许多现代的网站,也有很多现代网络应用程序。 JavaScript被认为是基于原型...

晨曦之光
2012/02/23
28.1K
30
TypeScript 开发系列(一)——简介与简单创建

免责声明:由于关于创建TypeScript的文章已经很多了,在这里为了完善我的这个系列,从网络上copy了下面这篇介绍,原文地址:http://www.cnblogs.com/liangquewei/archive/2012/11/15/2772298...

lhan
2013/01/09
6.2K
0

没有更多内容

加载失败,请刷新页面

加载更多

有哪些常用的命名git分支实例的例子? [关闭]

现在,我已经使用本地git存储库与我的组的CVS存储库进行了几个月的交互。 我已经制作了一个几乎神经质的分支,其中大部分幸运地合并回我的行李箱。 但是命名开始成为一个问题。 如果我有一个...

javail
3分钟前
1
0
在virtualenv中使用不同的Python版本

我有一个目前使用python 2.5.4运行的Debian系统。 我正确安装了virtualenv,一切正常。 我是否可以将virtualenv与其他版本的Python一起使用? 我编译了Python 2.6.2,并希望将其与一些virtu...

技术盛宴
18分钟前
4
0
保证金术语参考

术语,定义 1.钱包, 余额. ON THE ENCHANGED CONVERGENCE OF STANDARD LATTICE METHODS FOR OPTION PRICING...

MtrS
21分钟前
3
0
x006-函数和模块的使用

函数和模块的使用 在Python中可以使用def关键字来定义函数,和变量一样每个函数也有一个响亮的名字,而且命名规则跟变量的命名规则是一致的。在函数名后面的圆括号中可以放置传递给函数的参数...

伟大源于勇敢的开始
31分钟前
3
0
为什么面试必问线程状态?你的回答满分了吗

看很多同学的面经、网上的面试资料,都不约而同的提到了一个基础问题:“你知道线程有几种状态吗?状态之间的扭转是怎样的?”,有准备的同学都知道有五种:New(新建)、Runnable(可运行)...

Z_J_H
32分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部