# Debugging

# vConsole

On a physical device, if you want to view the log and additional debugging information output by the console API, tap the button in the upper right corner of the screen and then select Enable Debugging in the menu. At this point, the Mini Program/Mini Game exits. After opening it again, tap the vConsole button that appears in the lower right corner to open the log panel.

The display of vConsole differs between Mini Program and Mini Game. The left figure below shows Mini Program vConsole, and the right is Mini Game vConsole.

# How to use vConsole

Restricted by the implementation mechanism, the log printed by calling the console API is transferred to vConsole after being converted to JSON strings. Therefore, there are some limitations in the content displayed in vConsole:

• Every type except Number, String, Boolean, and null is treated as Object, with the Enumerable property in the object and prototype chain printed out.
• Infinity and NaN are displayed as a null.
• undefined, ArrayBuffer, and Function types cannot be displayed.
• Circularly-referenced objects are not printed out.

let a = {}
a.b = a
console.log(a) // For base libraries below 2.3.2, `An object width circular reference can't be logged` is output.

Mini Programs/Mini Games incorporate the solutions to the above problems.

• Base library 2.3.2 or above supports outputting circularly-referenced objects, with the reference path displayed in the object property and @ representing the object.

const circular = { x: {}, c: {} }
circular.x = [{ promise: Promise.resolve() }]
circular.a = circular
circular.c.x0 = circular.x[0]

console.log(circular)
// "{a: '<Circular: @>', c: {x0: '<Circular: @.x[0]>'}, x: [{promise: '<Promise>'}]}"

• Base library 2.3 1 or above supports displaying all types.The base library converts the log content, and each converted string is enclosed by <>. For example:

  • <Function: func>
  • <Undefined>
  • <Infinity>
  • <Map: size=0>
  • <ArrayBuffer: byteLength=10>
  • ...

• In base libraries 2.2.3-2.3.0, ArrayBuffer and Function types are displayed and undefined is output as the string 'undefined'.

Note: Do not print a log that is too complicated or too long in a non-debugging scenario (such as sprites or material objects in a game engine) to avoid extra time consumption.

# Source Map

This is only supported on iOS 6.7.2 or above.

All the js code is packaged into a file during the Mini Program/Mini Game packaging. Mini Programs/Mini Games come with Source Map to make it easier for developers to pinpoint errors on phones.

When ES6-to-ES5 conversion and code compression are enabled in Weixin DevTools, the .map file for Source Map is generated. For Mini Programs of developer version, the base library uses the .map file in the code package to remap the error message stack shown in the vConsole (only for developer code files).

If you process the source file using an external makefile, simply place the generated Source Map file in the same directory as the source file.

For example:

pages/index.js

pages/index.js.map

app.js

app.js.map

The Weixin DevTools will read, parse and upload the Source Map file.

Then you can use the uploaded Source Map file for error analysis in the operation center at the Mini Program backend.

1. The size of Source Map file is not counted in the code package size.
2. The code package of developer version contains the .map file, so the actual code package is larger than the test and official versions.

# Physical Device Debugging

Remote debugging allows you to directly debug a Mini Program on the mobile phone via network connection using Weixin DevTools, making it easy for you to pinpoint errors on the phone. For more information, see Weixin DevTools documentation Physical Device Debugging.