Outil de débogage côté client

Utilisation de l’outil debug via la console

Edit me

Introduction

Lorsque la directive debug.activate vaut true, tous les outils de débogage sont disponibles depuis la console JavaScript de votre navigateur.

Il est aussi possible d’activer uniquement certaines fonctions.

Exemple :

On active tous les outils de débug :

; Dans le fichier application.ini
debug.activate = true

On active uniquement les outils suivants :

debug.getContext()
debug.refresh()
debug.hardRefresh()

; Dans le fichier application.ini
debug.activate.getContext = true
debug.activate.refresh = true
debug.activate.hardRefresh = true

Toutes les méthodes “debug” sont présentes ici.

N’hésitez pas à proposer des améliorations de cet outil en passant par une modification directement sur GitHub

Rafraîchissement

render menu_refresh — Un menu pour les développeurs

Les deux méthodes suivantes sont très pratiques lors de la phase de développement d’un projet.

Pour un développeur, l’idéal est d’ajouter les deux composants suivants dans une ressource de type menu :

{
    "type": "button",
    "icon": {"fa": "refresh"},
    "label": "Refresh",
    "name": "buttonRefresh",
    "callback": "debug.refresh()"
},
{
    "type": "button",
    "icon": {"fa": "refresh fa-spin"},
    "textClass": "text-danger",
    "label": "<b>Hard Refresh</b>",
    "class": "bg-danger",
    "name": "buttonHardRefresh",
    "callback": "debug.hardRefresh()"
}

debug.refresh( ‘{sTarget}’ )

Recharge la frame courrante.

Tip: Si le paramètre sTarget est passé, le loader sera placé dans la balise ciblé.

<button id="refresh-button" onclick="debug.refresh( 'refresh-button' )">
    Refresh
</button>

debug.hardRefresh()

Recharge la page (css, js) et conserve le contexte courant.

Très utile durant la phase de conception d’un widget.

Dataset

debug.getDatasets()

Retourne un tableau de tous les datasets de la frame courante.

Exemple de sortie de la console :

debug.getDatasets();
  Array(5) [ "visite", "patient", "radiologues", "cardiologues" ]

debug.getDataset( ‘{dataset_id}’ )

Retourne l’objet DataSet() pour un dataset donné.

Exemple de sortie de la console :

debug.getDataset( 'patient' );
  Object { _BaseInvoked: true, _yuid: "yui_3_10_1_1_1566455287208_256", _yuievt: {…}, _state: {…}, _ATTR_E_FACADE: {…}, _eventPrefix: "DataSet", _plugins: {}, _lazyAddAttrs: true, name: "DataSet", _classes: (2) […], … }

debug.getDataset( ‘{dataset_id}’ ).proto

Retourne toutes les méthodes de l’objet DataSet() pour un dataset donné.

Note: __proto__ est disponible sur tous les objets JavaScript

Exemple de sortie de la console :

debug.getDataset( 'patient' ).__proto__
  Object { constructor: DataSet(), initializer: initializer(), Mode: Mode(), Cacheable: Cacheable(), TotalRows: TotalRows(), Id: Id(), UniqId: UniqId(), DataSetManager: DataSetManager(), MetaData: MetaData(), RowData: RowData(), … }

debug.getDataset( ‘{dataset_id}’ ).ToJSON()

Retourne le JSON pour un dataset donné.

Exemple de sortie de la console :

debug.getDataset( 'patient' ).ToJSON()
  {…}
    begin: 0
    clientdata: Object { generatedids: [], changedfields: [] }
    cursor: 0
    id: "patient"
    metadata: Object { fields: {…}, variables: [] }
    mode: "r"
    range: 0
    rowdata: Array(7) [ {…}, {…}, {…}, … ]
    standby: true
    total_rows: 7

debug.getDataset( ‘{dataset_id}’ )._attrs

Retourne tous les ATTRS de l’objet DataSet() pour un dataset donné.

Exemple de sortie de la console :

debug.getDataset( 'patient' )._attrs
  Object { initialized: {…}, destroyed: {…}, sId: {…}, sUniqId: {…}, sMode: {…}, bCacheable: {…}, bStandBy: {…}, bAutoAddRecord: {…}, oDataSetManager: {…}, oRowData: {…}, … }

debug.getDataset( ‘{dataset_id}’ ).get( ‘iTotalRows’ )

Retourne le nombre de rowdatas pour un dataset donné.

Exemple de sortie de la console :

debug.getDataset( 'patient' ).get( 'iTotalRows' )
  7

Watcher

debug.watch( ‘{dataset_id}’, ‘{field_name}’ )

Affiche la valeur du champ {field_name} pour le dataset {dataset_id} pour le record courant à chaque altération de celui-ci.

Exemple de sortie de la console :

debug.watch( 'patient', 'ddn' )
// Avant de toucher au champ "ddn"
  patient.ddn = null
  
// Après avoir saisie la date "22/08/2019"
  patient.ddn = 2019-08-22
  
// Après avoir saisie la date "13/08/2019"
  patient.ddn = 2019-08-13

Contexte

Les méthodes suivantes permettent de récupérer le contexte d’exécution de la frame.

debug.getContext( {bHTMLRender} )

Retourne les informations sur le contexte d’exécution de la page courante.

debug.getContext() retourne, dans la console :

Date : 10/10/2019 08:29:12

Environment : production

Version of Voozanoo 4 : 19w38a-9174

User infos : 
 - Username : epiconcept-web
 - Groups : Main[1]
 - Roles : admin[1]
 - Connection type : 11

Direct URL : 
http://localhost/apps/voodocgen/public/voodocgen//mainframe/index/one/dp/home_index_frame/mfid/yui_3_10_1_1_1568193503765_32/id/16/

Parameters : 
 - module : home
 - controller : index
 - action : frame
 - mfid : yui_3_10_1_1_1568193503765_32
 - id : 16

debug.getContext( true ) affiche :

debug.getUserInfos()

Retourne les informations de l’utilisateur courant.

Exemple de sortie de la console :

debug.getUserInfos()
  aGroups: Array(3) [ "France", "Paris", "12eme", … ]
  aRoles: Array [ "Patient" ]
  oAccess: Array(107) [ "form/frame/get", "form/frame/save", "form/frame/delete", … ]
  oGroups: Object { 1: {…}, 2: {…}, 3: {…}, … }
  oRoles: Object { 1: "patient" }
  oTreeGroups: Object { 1: {…} }
  sEmail: "email@gmail.com"
  sFirstname: "Martin"
  sLastname: "Dupont"
  sLocale: "fr_FR"
  sUsername: "m.dupont"

debug.getParameters()

Retourne les paramètres de la frame courante

Exemple de sortie de la console :

debug.getParameters()
  action: "get"
  controller: "frame"
  date: "2019-03-05"
  mfid: "yui_3_10_1_1_1566455287208_32"
  module: "form"
  sid: "test.autocomplete"

debug.getParameter( ‘{key}’ )

Retourne la valeur d’un paramètre donné de la frame courante

Exemple de sortie de la console :

debug.getParameter( 'date' )
  "2019-03-05"

debug.getURL()

Retourne l’URL (XHR) de la frame courante.

Cette méthode est utilisée par la méthode debug.refresh()

Exemple de sortie de la console :

debug.getURL()
  "http://cardiomassy.voozanoo.net/rythmo/form/frame/get/sid/test.autocomplete/date/2019-03-05/mfid/yui_3_10_1_1_1566455287208_32/"

debug.getDirectURL()

Retourne l’URL de la frame courante.

Cette méthode est utilisée par la méthode debug.hardRefresh()

Exemple de sortie de la console :

debug.getDirectURL()
  "http://cardiomassy.voozanoo.net/rythmo/mainframe/index/one/dp/form_frame_get/sid/test.autocomplete/date/2019-03-05/mfid/yui_3_10_1_1_1566455287208_32/"

debug.getDirectives()

Retourne les directives qui ne contiennent pas d’informations sensible ( Ex: resources.db.params.password )

Exemple de sortie de la console :

debug.getDirectives()
  autoloadernamespaces: Array [ "App_" ]
  bootstrap: Object { class: "Bootstrap" }  
  debug: Object { activate: {…} }  
  disable: Object { data_group: {…} }  
  epicraft: Object { store_project_str: "1", maximum_backups: "3" }  
  github: Object { webhook: [], access: [] }  
  lib: Object { yui: {…} }  
  phpSettings: Object { display_startup_errors: "1", display_errors: "1", date: {…} }  
  query: Object { respect_rights: "" }  
  resources: Object { session: {…}, modules: (1) […], frontController: {…}, … }  
  voozanoo: Object { use_date_advanced: "1", use_widgetboolean: "1", protocole: "http", … }
    
  
debug.getDirectives().voozanoo.session.time_out
  "28800"

Variable dynamique

debug.JsQuery( ‘{mon_calcul}’ )

Retourne l’exécution (via JsQuery) de {mon_calcul}.

Cette méthode est très pratique pour récupérer, en temps réel, le résultat d’une option show_on.

Pour :

<option output="html" option_name="show_on" value="new Date( {visite.date} ) &gt; new Date()" />>

Exemple de sortie de la console :

debug.JsQuery( 'new Date( {visite.date} ) &gt; new Date()' )
  true

Widgets

debug.getWidgets()

Retourne la liste des objets widget de la frame courante.

Exemple de sortie de la console :

debug.getWidgets()
    ctlogger_main: Object { _BaseInvoked: true, _yuid: "yui_3_10_1_1_1568217448558_49390", _eventPrefix: "WidgetAVMessageLogger", … }
    form_main: Object { _BaseInvoked: true, _yuid: "yui_3_10_1_1_1568217448558_49411", _eventPrefix: "WidgetPage", … }
    meter-widget: Object { _BaseInvoked: true, _yuid: "yui_3_10_1_1_1568217448558_49454", _eventPrefix: "WidgetMeter", … }
    vzn5d7919bd151e33_04092569: "form_main"
    vzn5d7919bd152127_15051802: Object { _BaseInvoked: true, _yuid: "yui_3_10_1_1_1568217448558_49429", _eventPrefix: "WidgetButton", … }
    vzn5d7919bd152b23_16186959: Object { _BaseInvoked: true, _yuid: "yui_3_10_1_1_1568217448558_49445", _eventPrefix: "WidgetBox", … }

debug.getWidget( {sIdWidget} )

Retourne un objet widget de la frame courante.

Pour :

<meter id="meter-widget" label="Synthèse des examens" action="exit" class="col-md-6">
    ...
</meter>

Exemple de sortie de la console :

debug.getWidget('meter-widget')
    Object { _BaseInvoked: true, _yuid: "yui_3_10_1_1_1568218959659_440", _yuievt: {…}, _state: {…}, _ATTR_E_FACADE: {…}, _eventPrefix: "WidgetMeter", _plugins: {}, _lazyAddAttrs: true, name: "WidgetMeter", _classes: (4) […], … }

debug.getWidgetOptions( {sIdWidget} )

Retourne les ATTRS de type option ou option_array

Exemple de sortie de la console :

debug.getWidgetOptions('meter-widget')
    aData: Array [ {…} ]
    mIsDenominatorPrinted: true
    mRefreshBtn: false
    sActionTarget: "global"
    sDataToPrint: "1"
    sDataToPrintColor: null
    sDenominatorColor: "grey"
    sDenominatorField: "({all_widgets.nb} == 0 ? 1 : {all_widgets.nb})"
    sDenominatorLabel: "Total number of widgets scanned"
    sLegend: null
    sTitleColor: "primary"
    sType: "bar"

Redirection

debug.goTo( {nom_du_module} )

Redirige vers le module spécifié

Exemple de sortie de la console :

debug.goTo()
    [
  "consumer",
  "logout",
  "dictionaries",
  "exports",
  "filters",
  "groups",
  "listings",
  "project",
  "provider-customer-management",
  "provider-user-management",
  "resources",
  "roles",
  "consistency-tests",
  "translation",
  "users",
  "calculated-variables",
  "notices"
]
debug.goTo('exports')
# redirection vers l'écran de gestion des exports.

Outil de débogage côté client

Introduction

Rafraîchissement

debug.refresh( ‘{sTarget}’ )

debug.hardRefresh()

Dataset

debug.getDatasets()

debug.getDataset( ‘{dataset_id}’ )

debug.getDataset( ‘{dataset_id}’ ).__proto__

debug.getDataset( ‘{dataset_id}’ ).ToJSON()

debug.getDataset( ‘{dataset_id}’ )._attrs

debug.getDataset( ‘{dataset_id}’ ).get( ‘iTotalRows’ )

Watcher

debug.watch( ‘{dataset_id}’, ‘{field_name}’ )

Contexte

debug.getContext( {bHTMLRender} )

debug.getUserInfos()

debug.getParameters()

debug.getParameter( ‘{key}’ )

debug.getURL()

debug.getDirectURL()

debug.getDirectives()

Variable dynamique

debug.JsQuery( ‘{mon_calcul}’ )

Widgets

debug.getWidgets()

debug.getWidget( {sIdWidget} )

debug.getWidgetOptions( {sIdWidget} )

Redirection

debug.goTo( {nom_du_module} )

debug.getDataset( ‘{dataset_id}’ ).proto