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

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

阅读量：6098 次

发布时间：2019-06-20

本文共 2553 字，大约阅读时间需要 8 分钟。

ITFriend-IT从业者互动交流平台

最近，在看公司一个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);