Add a console to the games debugger (#2770)

* When launching the Debugger to inspect a game, open the Console to see internal messages sent by the game, JavaScript code or the game engine.
* This is an advanced feature that is useful to find issues in your game or to see if your game is displaying any internal error.

Author: arthuro555

.vscode/tasks.json

@@ -80,7 +80,7 @@
     },
     {
       "type": "typescript",
-      "tsconfig": "GDJS/tsconfig.json",
+      "tsconfig": "tsconfig.json",
       "option": "watch",
       "problemMatcher": ["$tsc-watch"],
       "group": "test",

Extensions/AdMob/admobtools.ts

@@ -2,6 +2,8 @@ namespace gdjs {
   declare var admob: any;
 
   export namespace adMob {
+    const logger = new gdjs.Logger('AdMob');
+
     export enum AdSizeType {
       BANNER,
       LARGE_BANNER,
@@ -127,13 +129,13 @@ namespace gdjs {
           () => {
             bannerShowing = true;
             bannerLoading = false;
-            console.info('AdMob banner successfully shown.');
+            logger.info('AdMob banner successfully shown.');
           },
           (error) => {
             bannerShowing = false;
             bannerLoading = false;
             bannerErrored = true;
-            console.error('Error while showing an AdMob banner:', error);
+            logger.error('Error while showing an AdMob banner:', error);
           }
         );
     };
@@ -190,14 +192,14 @@ namespace gdjs {
         })
         .then(
           () => {
-            console.info('AdMob interstitial successfully loaded.');
+            logger.info('AdMob interstitial successfully loaded.');
             if (displayWhenLoaded) showInterstitial();
           },
           (error) => {
             interstitialLoading = false;
             interstitialReady = false;
             interstitialErrored = true;
-            console.error('Error while loading a interstitial:', error);
+            logger.error('Error while loading a interstitial:', error);
           }
         );
     };
@@ -216,7 +218,7 @@ namespace gdjs {
         (error) => {
           interstitialShowing = false;
           interstitialErrored = true;
-          console.error('Error while trying to show an interstitial:', error);
+          logger.error('Error while trying to show an interstitial:', error);
         }
       );
     };
@@ -270,15 +272,15 @@ namespace gdjs {
         })
         .then(
           () => {
-            console.info('AdMob reward video successfully loaded.');
+            logger.info('AdMob reward video successfully loaded.');
 
             if (displayWhenLoaded) showVideo();
           },
           (error) => {
             videoLoading = false;
             videoReady = false;
             videoErrored = true;
-            console.error('Error while loading a reward video:', error);
+            logger.error('Error while loading a reward video:', error);
           }
         );
     };
@@ -298,7 +300,7 @@ namespace gdjs {
         (error) => {
           videoShowing = false;
           videoErrored = true;
-          console.error('Error while trying to show a reward video:', error);
+          logger.error('Error while trying to show a reward video:', error);
         }
       );
     };

Extensions/DebuggerTools/JsExtension.js

@@ -83,6 +83,30 @@ module.exports = {
       .setIncludeFile('Extensions/DebuggerTools/debuggertools.js')
       .setFunctionName('gdjs.evtTools.debuggerTools.enableDebugDraw');
 
+    extension
+      .addAction(
+        'ConsoleLog',
+        _('Log a message to the console'),
+        _("Logs a message to the debugger's console."),
+        _(
+          'Log message _PARAM0_ of type _PARAM1_ to the console in group _PARAM2_'
+        ),
+        _('Debugger Tools'),
+        'res/actions/bug32.png',
+        'res/actions/bug32.png'
+      )
+      .addParameter('string', 'Message to log', '', false)
+      .addParameter(
+        'stringWithSelector',
+        'Message type',
+        '["info", "warning", "error"]',
+        true
+      )
+      .addParameter('string', 'Group of messages', '', true)
+      .getCodeExtraInformation()
+      .setIncludeFile('Extensions/DebuggerTools/debuggertools.js')
+      .setFunctionName('gdjs.evtTools.debuggerTools.log');
+
     return extension;
   },
   runExtensionSanityTests: function (

Extensions/DebuggerTools/debuggertools.ts

@@ -13,6 +13,20 @@ namespace gdjs {
         runtimeScene.getGame().pause(true);
       };
 
+      /**
+       * Logs a message to the console.
+       * @param message - The message to log.
+       * @param type - The type of log (info, warning or error).
+       * @param group - The group of messages it belongs to.
+       */
+      export const log = function (
+        message: string,
+        type: 'info' | 'warning' | 'error',
+        group: string
+      ) {
+        gdjs.log(group, message, type, false);
+      };
+
       /**
        * Enable or disable the debug draw.
        * @param runtimeScene - The current scene.

Extensions/DialogueTree/dialoguetools.ts

@@ -1,6 +1,8 @@
 // @ts-nocheck - Weird usage of `this` in this file. Should be refactored.
 
 namespace gdjs {
+  const logger = new gdjs.Logger('Dialogue tree');
+
   gdjs.dialogueTree = {};
   gdjs.dialogueTree.runner = new bondage.Runner();
 
@@ -21,7 +23,7 @@ namespace gdjs {
         gdjs.dialogueTree.startFrom(startDialogueNode);
       }
     } catch (e) {
-      console.error(e);
+      logger.error('Error while loading from scene variable: ', e);
     }
   };
 
@@ -42,10 +44,7 @@ namespace gdjs {
       .getJsonManager()
       .loadJson(jsonResourceName, function (error, content) {
         if (error) {
-          console.error(
-            'An error happened while loading JSON resource:',
-            error
-          );
+          logger.error('An error happened while loading JSON resource:', error);
         } else {
           if (!content) {
             return;
@@ -54,7 +53,7 @@ namespace gdjs {
           try {
             gdjs.dialogueTree.runner.load(gdjs.dialogueTree.yarnData);
           } catch (error) {
-            console.error(
+            logger.error(
               'An error happened while loading parsing the dialogue tree data:',
               error
             );
@@ -155,7 +154,7 @@ namespace gdjs {
       this.clipTextEnd >= this.dialogueText.length
     ) {
       if (gdjs.dialogueTree.getVariable('debug')) {
-        console.warn(
+        logger.warn(
           'Scroll completed:',
           this.clipTextEnd,
           '/',
@@ -244,15 +243,15 @@ namespace gdjs {
           gdjs.dialogueTree.pauseScrolling = false;
           commandCalls.splice(index, 1);
           if (gdjs.dialogueTree.getVariable('debug')) {
-            console.info('CMD:', call);
+            logger.info('CMD:', call);
           }
         }, parseInt(call.params[1], 10));
       }
       if (call.cmd === command) {
         gdjs.dialogueTree.commandParameters = call.params;
         commandCalls.splice(index, 1);
         if (gdjs.dialogueTree.getVariable('debug')) {
-          console.info('CMD:', call);
+          logger.info('CMD:', call);
         }
         return true;
       }
@@ -366,7 +365,7 @@ namespace gdjs {
         this.dialogueData = this.dialogue.next().value;
         gdjs.dialogueTree.goToNextDialogueLine();
       } catch (error) {
-        console.error(
+        logger.error(
           `An error happened when trying to access the dialogue branch!`,
           error
         );
@@ -562,7 +561,7 @@ namespace gdjs {
     this.selectedOption = -1;
     this.selectedOptionUpdated = false;
     if (gdjs.dialogueTree.getVariable('debug')) {
-      console.info('parsing:', this.dialogueData);
+      logger.info('Parsing:', this.dialogueData);
     }
     if (!this.dialogueData) {
       gdjs.dialogueTree.stopRunningDialogue();
@@ -797,7 +796,7 @@ namespace gdjs {
   gdjs.dialogueTree.loadState = function (inputVariable: gdjs.Variable) {
     const loadedState = inputVariable.toJSObject();
     if (!loadedState) {
-      console.error('Load state variable is empty:', inputVariable);
+      logger.error('Load state variable is empty:', inputVariable);
       return;
     }
     try {
@@ -808,7 +807,7 @@ namespace gdjs {
         gdjs.dialogueTree.runner.variables.set(key, value);
       });
     } catch (e) {
-      console.error('Failed to load state from variable:', inputVariable, e);
+      logger.error('Failed to load state from variable:', inputVariable, e);
     }
   };
 

Extensions/ExampleJsExtension/dummyeffect.ts

@@ -1,5 +1,6 @@
 //A simple PIXI filter doing some color changes
 namespace gdjs {
+  const logger = new gdjs.Logger('Dummy effect');
   import PIXI = GlobalPIXIModule.PIXI;
 
   const DummyPixiFilter = function () {
@@ -46,7 +47,7 @@ namespace gdjs {
       // `effectData.stringParameters.someImage`
       // `effectData.stringParameters.someColor`
       // `effectData.booleanParameters.someBoolean`
-      console.info(
+      logger.info(
         'The PIXI texture found for the Dummy Effect (not actually used):',
         (layer
           .getRuntimeScene()

Extensions/ExampleJsExtension/dummyruntimebehavior.ts

@@ -1,4 +1,6 @@
 namespace gdjs {
+  const logger = new gdjs.Logger('Dummy behavior');
+
   /**
    * The DummyRuntimeBehavior changes a variable in the object that is owning
    * it, at every tick before events are run, to set it to the string that was
@@ -20,7 +22,7 @@ namespace gdjs {
       this._textToSet = behaviorData.property1;
 
       // You can also run arbitrary code at the creation of the behavior:
-      console.log('DummyRuntimeBehavior was created for object:', owner);
+      logger.log('DummyRuntimeBehavior was created for object:', owner);
     }
 
     updateFromBehaviorData(oldBehaviorData, newBehaviorData): boolean {

Extensions/ExampleJsExtension/dummyruntimeobject.ts

@@ -1,4 +1,6 @@
 namespace gdjs {
+  const logger = new gdjs.Logger('Dummy object');
+
   /**
    * A dummy object doing showing a text on screen.
    * @ignore
@@ -126,9 +128,9 @@ namespace gdjs {
      * A dummy method that can be called from events
      */
     myMethod(number1: float, text1: string) {
-      console.log('Congrats, this method was called on a DummyRuntimeObject');
-      console.log('Here is the object:', this);
-      console.log('Here are the arguments passed from events:', number1, text1);
+      logger.log('Congrats, this method was called on a DummyRuntimeObject');
+      logger.log('Here is the object:', this);
+      logger.log('Here are the arguments passed from events:', number1, text1);
     }
   }
   gdjs.registerObject(

Extensions/ExampleJsExtension/dummywithshareddataruntimebehavior.ts

@@ -1,4 +1,5 @@
 namespace gdjs {
+  const logger = new gdjs.Logger('Dummy behavior (with shared data)');
   export class DummyWithSharedDataRuntimeBehavior extends gdjs.RuntimeBehavior {
     _textToSet: string;
 
@@ -20,11 +21,11 @@ namespace gdjs {
       this._textToSet = (sharedData as any).sharedProperty1;
 
       // You can also run arbitrary code at the creation of the behavior:
-      console.log(
+      logger.log(
         'DummyWithSharedDataRuntimeBehavior was created for object:',
         owner
       );
-      console.log('The shared data are:', sharedData);
+      logger.log('The shared data are:', sharedData);
     }
 
     updateFromBehaviorData(oldBehaviorData, newBehaviorData): boolean {

Extensions/ExampleJsExtension/examplejsextensiontools.ts

@@ -1,4 +1,6 @@
 namespace gdjs {
+  const logger = new gdjs.Logger('Example extension');
+
   export namespace evtTools {
     /**
      * This is an example of some functions that can be used through events.
@@ -24,15 +26,15 @@ namespace gdjs {
        * that will be called at this moment.
        */
       gdjs.registerRuntimeSceneLoadedCallback(function (runtimeScene) {
-        console.log('A gdjs.RuntimeScene was loaded:', runtimeScene);
+        logger.log('A gdjs.RuntimeScene was loaded:', runtimeScene);
       });
 
       /**
        * In **rare cases** you may want to run code at the end of a scene. You can define a callback
        * that will be called at this moment.
        */
       gdjs.registerRuntimeSceneUnloadedCallback(function (runtimeScene) {
-        console.log('A gdjs.RuntimeScene was unloaded:', runtimeScene);
+        logger.log('A gdjs.RuntimeScene was unloaded:', runtimeScene);
       });
 
       /**
@@ -42,15 +44,15 @@ namespace gdjs {
         runtimeScene,
         runtimeObject
       ) {
-        console.log(
+        logger.log(
           'A gdjs.RuntimeObject was deleted from a gdjs.RuntimeScene:',
           runtimeScene,
           runtimeObject
         );
       });
 
       // Finally, note that you can also simply run code here. Most of the time you shouldn't need it though.
-      console.log(
+      logger.log(
         'gdjs.exampleJsExtension was created, with myGlobalString containing:' +
           myGlobalString
       );