[jsfm] add more debug logs for vdom operation

runtime/bridge/TaskCenter.js

@@ -19,7 +19,7 @@
 
 import CallbackManager from './CallbackManager'
 import Element from '../vdom/Element'
-import { typof } from '../shared/utils'
+import { typof, checkLevel, debugLog } from '../shared/utils'
 import { normalizePrimitive } from './normalize'
 
 let fallback = function () {}
@@ -106,12 +106,20 @@ export class TaskCenter {
     }
 
     switch (type) {
-      case 'dom':
+      case 'dom': {
+        if (checkLevel('debug')) {
+          debugLog(`[task](${this.instanceId},${this.type},${action}) ${JSON.stringify(args)}`)
+        }
         return this[action](this.instanceId, args)
+      }
       case 'component':
         return this.componentHandler(this.instanceId, ref, method, args, Object.assign({ component }, options))
-      default:
+      default: {
+        if (checkLevel('debug')) {
+          debugLog(`[task](${this.instanceId},${module},${method}) ${JSON.stringify(args)}`)
+        }
         return this.moduleHandler(this.instanceId, module, method, args, options)
+      }
     }
   }
 

runtime/shared/utils.js

@@ -114,5 +114,5 @@ export function checkLevel (type) {
  * This methods can avoid "double level check" compared with using wrapped console.debug
  */
 export function debugLog (text) {
-  global.nativeLog(text, '__DEBUG')
+  global.nativeLog('wxInteractionAnalyzer: [jsfm]' + text, '__DEBUG')
 }

runtime/vdom/Document.js

@@ -20,6 +20,7 @@
 import Comment from './Comment'
 import Element from './Element'
 import Listener from '../bridge/Listener'
+import { checkLevel, debugLog } from '../shared/utils'
 import { TaskCenter } from '../bridge/TaskCenter'
 import { createHandler } from '../bridge/Handler'
 import { addDoc, removeDoc, appendBody, setBody } from './operation'
@@ -109,6 +110,10 @@ export default class Document {
           appendBody(this, node, before)
         }
       })
+
+      if (checkLevel('debug')) {
+        debugLog(`Create document element (id: "${el.docId}", ref: "${el.ref}")`)
+      }
     }
 
     return this.documentElement
@@ -124,6 +129,10 @@ export default class Document {
     if (!this.body) {
       const el = new Element(type, props)
       setBody(this, el)
+      if (checkLevel('debug')) {
+        debugLog(`[createBody](${this.id},${el.type},${el.ref}) `
+          + `(${JSON.stringify(el.toJSON(true))}).`)
+      }
     }
 
     return this.body
@@ -136,7 +145,12 @@ export default class Document {
   * @return {object} element
   */
   createElement (tagName, props) {
-    return new Element(tagName, props)
+    const el = new Element(tagName, props)
+    if (checkLevel('debug')) {
+      debugLog(`[createElement](${this.id},${el.type},${el.ref}) `
+        + `(${JSON.stringify(el.toJSON(true))}).`)
+    }
+    return el
   }
 
   /**
@@ -182,11 +196,17 @@ export default class Document {
   * Destroy current document, and remove itself form docMap.
   */
   destroy () {
+    if (checkLevel('debug')) {
+      debugLog(`[destroy](${this.id},document,${this.ref}) `
+        + `Destroy document (id: "${this.id}", URL: "${this.URL}")`)
+    }
+
     removeDoc(this.id)
     delete this.id
     delete this.URL
     delete this.documentElement
     delete this.ownerDocument
+    delete this.body
 
     // remove listener and taskCenter
     delete this.listener

runtime/vdom/Element.js

@@ -28,7 +28,7 @@ import {
   moveIndex,
   removeIndex
 } from './operation'
-import { uniqueId, isEmpty } from '../shared/utils'
+import { uniqueId, isEmpty, checkLevel, debugLog } from '../shared/utils'
 import { getWeexElement, setElement } from './WeexElement'
 
 const DEFAULT_TAG_NAME = 'div'
@@ -75,6 +75,10 @@ export default class Element extends Node {
     }
     /* istanbul ignore else */
     if (!node.parentNode) {
+      if (checkLevel('debug')) {
+        debugLog(`[appendChild](${this.docId},${node.type},${node.ref}) `
+          + `Append <${node.type}> to <${this.type}> (${this.ref}).`)
+      }
       linkParent(node, this)
       insertIndex(node, this.children, this.children.length, true)
       if (this.docId) {
@@ -93,6 +97,10 @@ export default class Element extends Node {
       }
     }
     else {
+      if (checkLevel('debug')) {
+        debugLog(`[appendChild](${this.docId},${node.type},${node.ref}) `
+          + `Move <${node.type}> to ${this.children.length} of <${this.type}> (${this.ref}).`)
+      }
       moveIndex(node, this.children, this.children.length, true)
       if (node.nodeType === 1) {
         const index = moveIndex(node, this.pureChildren, this.pureChildren.length)
@@ -122,6 +130,10 @@ export default class Element extends Node {
       return
     }
     if (!node.parentNode) {
+      if (checkLevel('debug')) {
+        debugLog(`[insertBefore](${this.docId},${node.type},${node.ref}) `
+          + `Insert <${node.type}> to <${this.type}> (${this.ref}), before (${before.ref}).`)
+      }
       linkParent(node, this)
       insertIndex(node, this.children, this.children.indexOf(before), true)
       if (this.docId) {
@@ -184,6 +196,10 @@ export default class Element extends Node {
       return
     }
     if (!node.parentNode) {
+      if (checkLevel('debug')) {
+        debugLog(`[insertAfter](${this.docId},${node.type},${node.ref}) `
+          + `Insert <${node.type}> to <${this.type}> (${this.ref}), after (${after.ref}).`)
+      }
       linkParent(node, this)
       insertIndex(node, this.children, this.children.indexOf(after) + 1, true)
       /* istanbul ignore else */
@@ -236,6 +252,10 @@ export default class Element extends Node {
     if (node.parentNode) {
       removeIndex(node, this.children, true)
       if (node.nodeType === 1) {
+        if (checkLevel('debug')) {
+          debugLog(`[removeChild](${this.docId},${node.type},${node.ref}) `
+            + `Remove <${node.type}> from <${this.type}> (${this.ref}).`)
+        }
         removeIndex(node, this.pureChildren)
         const taskCenter = getTaskCenter(this.docId)
         if (taskCenter) {
@@ -403,6 +423,10 @@ export default class Element extends Node {
       this.event = {}
     }
     if (!this.event[type]) {
+      if (checkLevel('debug')) {
+        debugLog(`[addEvent](${this.docId},${this.type},${this.ref}) `
+          + `Add "${type}" event on <${this.type}> (${this.ref}).`)
+      }
       this.event[type] = { handler, params }
       const taskCenter = getTaskCenter(this.docId)
       if (taskCenter) {
@@ -421,6 +445,10 @@ export default class Element extends Node {
    */
   removeEvent (type) {
     if (this.event && this.event[type]) {
+      if (checkLevel('debug')) {
+        debugLog(`[removeEvent](${this.docId},${this.type},${this.ref}) `
+          + `Remove "${type}" event on <${this.type}> (${this.ref}).`)
+      }
       delete this.event[type]
       const taskCenter = getTaskCenter(this.docId)
       if (taskCenter) {
@@ -446,6 +474,10 @@ export default class Element extends Node {
     let isStopPropagation = false
     const eventDesc = this.event[type]
     if (eventDesc && event) {
+      if (checkLevel('debug')) {
+        debugLog(`[fireEvent](${this.docId},${this.type},${this.ref}) `
+          + `Fire "${type}" event on <${this.type}> (${this.ref}).`)
+      }
       const handler = eventDesc.handler
       event.stopPropagation = () => {
         isStopPropagation = true
@@ -486,9 +518,10 @@ export default class Element extends Node {
 
   /**
    * Convert current element to JSON like object.
+   * @param {boolean} ignoreChildren whether to ignore child nodes, default false
    * @return {object} element
    */
-  toJSON () {
+  toJSON (ignoreChildren = false) {
     const result = {
       ref: this.ref.toString(),
       type: this.type,
@@ -508,7 +541,7 @@ export default class Element extends Node {
     if (event.length) {
       result.event = event
     }
-    if (this.pureChildren.length) {
+    if (!ignoreChildren && this.pureChildren.length) {
       result.children = this.pureChildren.map((child) => child.toJSON())
     }
     return result