How can I debug the values of a XForm in progress?

Imported Question by marc · Nov 23, 2016 at 05:57 PM

When creating a new form or debugging a deployed one it is useful to see the values being calculated in the XForm. It is possible to create debug notes showing these fields, but it requires uploading a modified form which can be cumbersome and not ideal for a live project.

What is the best way to see these values without changing the form?

  1. Open the browser’s developer console
  2. Turn on angular’s dev mode: angular.reloadWithDebugInfo();
  3. Then get the xform…
  • from an Action form
  • or from a Person or Place form

In 3.7.0 the Action Person and/or Place commands change.

From the contacts tab

  • angular.element('/*/div[id=report-form]/*/form').scope().$parent.contactsReportCtrl.form.getModel().getStr()

Person or Place

  • angular.element('/*/div[id=report-form]/*/form').scope().$parent.contactsEditCtrl.enketoContact.formInstance.getModel().getStr();

From the reports tab

  • angular.element('/*/div[id=report-form]/*/form').scope().$parent.reportsAddCtrl.form.getModel().getStr()
1 Like

As of 3.9.0 this is much easier. Once the form is loaded, open the developer console in your browser and type window.debugFormModel(). (issue)

For versions 3.7.0 to 3.9.0, refer to this answer from @Nick

For versions earlier than 3.7.0 use this answer


For an action form triggered by a task, in 3.8.1:

  • angular.element('/*/div[id=report-form]/*/form').scope().$parent.tasksContentCtrl.form.getModel().getStr()
1 Like

This does not seem to be working anymore. Tested in 3.11.0, 3.14.0:

VM243:1 Uncaught TypeError: window.debugFormModel is not a function
    at <anonymous>:1:8

Is there another way to debug a form?

Please try window.CHTCore.debugFormModel

1 Like