cc.debug源码及使用

cc.debug研究

CCDebug.js：cocos2d\core\CCDebug.js

相关函数

函数列表

方法名	作用	参数
cc.log	普通输出	(msg: string/any, …subst: any[])
cc.warn	警告类型输出，chrome中有黄色背景，黄色警告图标
cc.error	错误类型输出，chrome中有红色背景，红色错误图标
cc.assert	断言性输出，当传入的condition为false时才起作用，本质上是cc.error，在调试模式并在chrome中时，会有程序运行挂起的效果，继续运行会跳过后续代码。有助于debug。	(condition?: boolean, …data: any[])

测试代码

onLoad () {
   
  cc.log("这是一条log");
  cc.warn("这是一条warn");
  cc.error("这是一条error");
  cc.log("这是一条log", 111, "其他信息");
  cc.assert(true, "这是第一条assert");
  cc.assert(false, "这是第二条assert");
  cc.log("该行代码被跳过");
},
  
start () {
   
  cc.log("这是一条log start");
},

测试结果

在Cocos Creator中，点击运行预览按钮（工具栏上类似播放键的那个）使用浏览器模式，预览。

运行到cc.assert(false, “这是第二条assert”);时，被挂起。

点击顶部蓝色按钮继续运行。

• 第一条cc.assert中，由于传入第一个参数为true，故没有任何效果。
• 继续运行后，后续的代码被跳过，但不会影响其他地方的代码，如start()中的输出语句。
• 输出/运行效果(如颜色)在不同的浏览器/运行环境下可能不同。

代码实现

日志等级（DebugMode）

值	枚举名	作用
0	NONE	禁止模式，啥也不打印
1	INFO	信息模式，啥都打印
2	WARN	警告模式，警告及以上打印
3	ERROR	错误模式，仅打印错误
4	INFO_FOR_WEB_PAGE	在画面上输出，同INFO（仅WEB端下生效）
5	WARN_FOR_WEB_PAGE	在画面上输出，同WARN（仅WEB端下生效）
6	ERROR_FOR_WEB_PAGE	在画面上输出，同ERROR（仅WEB端下生效）

后面三种模式其实和前面的是一样的，但只有在Web端才生效，因为打印到画面的实现方法是，使用代码动态创建一个HTML节点，并将日志文本输出到节点中，所以在其他端无法使用。

初始化

// CCGame.js		cocos2d\core\CCGame.js
_initConfig (config) {
   
  // 若输入不合法的debugMode 修改为0(DebugMode.NONE 啥等级的也不显示)
  if (typeof config.debugMode !== 'number') {
   
    config.debugMode = 0;
  }
  // 此处省略部分代码
 	// 调用_resetDebugSetting方法进行初始化，此处的debugMode默认为cc.debug.DebugMode.INFO
  // DebugMode.INFO：显示所有日志
  debug._resetDebugSetting(config.debugMode);
}

resetDebugSetting

// CCDebug.js		cocos2d\core\CCDebug.js
module.exports = cc.debug = {
   
  // 此处省略部分代码
    _resetDebugSetting: resetDebugSetting,
}

let resetDebugSetting = function (mode) {
   
    // reset
 		// 重置各个方法，这就是设置日志等级的核心所在。
  	// 重置后再根据mode参数给对应的方法赋值，即实现了只打印部分等级日志。
    cc.log = cc.warn = cc.error = cc.assert = function () {
   };
		
  	// 啥也不打印 所以直接return 哪个方法都不配置
    if (mode === DebugMode.NONE)
        return;
  
		// 当mode大于ERROR的时候 是要将日志打印到画面中
    if (mode > DebugMode.ERROR) {
   
        //log to web page

      	// 把日志打印到游戏画面上
      	// 用代码创建一个div节点，固定在左上角，里面放一个textarea，然后把日志写到textarea里
     		// 日志打印到一个textarea，所以还可以拖动改大小 妙啊
      	// 是不是可以把创建节点的代码挪到外面去？这样就可以不用每次都判断是否存在logList
        function logToWebPage (msg) {
   
            if (!cc.game.canvas)
                return;

            if (!logList) {
   
                var logDiv = document.createElement("Div");
                logDiv.setAttribute("id", "logInfoDiv");
                logDiv.setAttribute("width", "200");
                logDiv.setAttribute("height", cc.game.canvas.height);
                var logDivStyle = logDiv.style;
                logDivStyle.zIndex = "99999";
                logDivStyle.position = "absolute";
                logDivStyle.top = logDivStyle.left = "0";

                logList = document.createElement("textarea");
                logList.setAttribute("rows", "20");
                logList.setAttribute("cols", "30");
                logList.setAttribute("disabled", "tr