consoleshow

快捷管理 console，自定义命令，url 过滤命令

使用指南

安装：

  npm install consoleshow

演示地址:

http://pangxieju.github.io/consoleshow/index.html

扩展命令：

• console.color ：修改打印颜色
• console.api ：输出接口相关信息
• console.block ：输出块，组件相关信息
• console.event ：输出事件相关信息
• console.data ：输出数据信息
• console.tag ：输出标签
• console.test ：普通输出
• console.plus ：自定义输出信息

  // 默认初始化
  window.consoleshow.config();

  // 清除控制台信息
  window.consoleshow.config({
    clear: true // url 改变时清除控制台信息
  });

  // 是否折叠控制台信息
  window.consoleshow.config({
    collapsed: false // 默认值为 true ，折叠显示控制台信息
  });

  // 显示指定 console
  window.consoleshow.config({
    show: [name_1, name_2]
  });

  // 隐藏指定 console
  window.consoleshow.config({
    hide: [name_1, name_2]
  });

  // 扩展命令
  window.consoleshow.config({
    extend: [{
      name: "api",      // 用于控制过滤 console 标记，默认为 test
      type: "table",    // console 默认命令名，默认为 log
      color: "#fff3cf", // 标题颜色，默认色 #ddd
      group: true,      // 是否使用组显示 console 日志， 默认 false
      code: false       // 是否支持 function，默认false
    }]
  });

注意：

1、扩展 name 参数不允许与 console 命令和扩展命令名相同；

• console 命令："debug", "error", "info", "log", "warn", "dir", "dirxml", "table", "trace", "group", "groupCollapsed", "groupEnd", "clear", "count", "assert", "markTimeline", "profile", "profileEnd", "timeline", "timelineEnd", "time", "timeEnd", "timeStamp", "memory"；（Chrom 浏览器）

• 扩展命令： "color", "api", "block", "event", "data", "tag","test", "plus"；

• 如果与 console 命令名相同，name 会取默认参数 test；如果与扩展命令名相同，会覆盖重名扩展设置；

2、扩展 color 属性只支持 16 进制颜色；

3、扩展 type 参数主要设置输出的控制台命令名，例如：table 等于 console.table；

4、扩展 group 参数设置显示 console 是否为 group，用于折叠显示日志；

url 过滤 console：

  // 显示当前页面指定 console
  http://xxx.com?console.show=name_1,name_2

  // 隐藏当前页面指定 console
  http://xxx.com?console.hide=name_1,name_2

url 展开/折叠 console

  // 展开group console
  http://xxx.com?console.collapsed=false

  // 折叠group console
  http://xxx.com?console.collapsed=true

  // 组合过滤
  http://xxx.com?console.collapsed=false&console.show=name_1,name_2
  http://xxx.com?console.collapsed=true&console.hide=name_1,name_2

url 过滤参数会覆盖初始化参数里的过滤信息。

扩展命令

1、api, block, event, data, tag, test, plus 命令;

  // test 为扩展命令名
  console.test('This is test 1.');

  console.test('This is test 1.', 'This is test 1.1.', 'This is test 1.2.');

  // 内联配置
  console.test('This is test 2.', {
    config: {
      "name": "@test1",  // 用于控制过滤 console 标记，默认为 test
      "type": "log",     // console 默认命令名，默认为 log
      "color": "#f50"    // 标题颜色，默认色 #ddd
    }
  });

  console.plus("This is demo 1.");

  console.plus([
    {a: 1, b: 1},
    {a: 2, b: 2},
    {a: 3, b: 3},
    {a: 4, b: 4}
  ], {
    config: {
      "name": "demo2",
      "type": "table",
    }
  });

  console.plus(function () {
    console.log("This is demo 3");
    console.color('This is color.');
    console.color('This is color.', "#f00");
    console.event('This is event 1.');
  },
  {
    config: {
      "name": "demo3"
    }
  })

2、color 命令：console.color(string, color);

  console.color('This is color.');

  console.color('This is color.', "#f00");

注意：

在 webpack 中可以配置是否在正式代码中过滤 console ；一般开发环境是要显示 console 方便调试，正式不显示；相关配置如下：

  // webpack2-3x 入口配置
  entry: {
    index: [
      '../src/index.js',
      '../node_modules/consoleshow/index.js' // 可以通过 process.env.NODE_ENV 来控制是否输出
    ]
  }

  // webpack2-3x UglifyJsPlugin 配置
  compressor: {
    drop_console: true, // 清除 console
    pure_funcs: ['window.consoleshow.config'] // 打包过滤
  }

License

This content is released under the MIT License.