Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Debugging network requests in the Moodle App: Difference between revisions

From MoodleDocs
(Added instructions for creating a debuggable build of the desktop app)
(8 intermediate revisions by 3 users not shown)
Line 11: Line 11:


== Requirements ==
== Requirements ==
* Moodle 3.0 onwards (your site needs at least this version)
* Moodle 3.1 onwards (your site needs at least this version)
* Google Chrome or Chromium browser
* Moodle Desktop app 3.6.1 onwards or Google Chrome/Chromium browser
[[{{ns:file}}:moodlemobile_enabledebug.png|thumb|300px]]
[[{{ns:file}}:moodlemobile_enabledebug.png|thumb|300px]]


Line 24: Line 24:
Note: Remember to disable debugging again once you have finished debugging your problem.
Note: Remember to disable debugging again once you have finished debugging your problem.


== Setting up Chrome ==
== Enabling debugging on the mobile app ==
 
# Go to the More tab
# Go to Settings > General
# Enable "Display debug messages"
 
Note: Remember to disable debugging again once you have finished debugging your problem.
 
== First try ==
 
At this point, you may not need fo go further on this guide.
 
Log-out and log-in again into your site and try to reproduce the error, hopefully, with Moodle and app debugging enabled you will see an explanatory message of what is happening.
 
If you are unable to find a solution, contact a [https://moodle.com/partners/ Moodle Partner] or post in the [https://moodle.org/mod/forum/view.php?id=7798 Moodle for mobile forum] on moodle.org for non-guaranteed community support.
 
== Setting up the debugging tool ==
 
=== Moodle Desktop ===
 
The recommended way to debug the problem is using the Moodle Desktop app. Please notice that the app version should be 3.6.1 or higher. The desktop app lets you debug some features, such as Single Sign-On, that require a built app to work, rather than a hosted or local ionic build running in a web browser.
 
You can download the desktop app [https://download.moodle.org/desktop/ from here].
 
Download the desktop app, install it and open it. Once it's open, you can open the "Developer tools" with the following shortcut:
 
* In MacOS: Cmd + Option + I
* In Windows or Linux: Ctrl + Shift + I
 
Once the Developer Tools are open, follow these steps:
 
# Dock the new panels on the right side (in the new panel top-right options choose “Dock to the right” icon)
# Click the Network tab (at the top-center)
# Enable the filter (filter shape icon) so it changes to colour red
# In the new text field displayed when enabling the filter write <code>.php</code>
 
Now you are ready to debug all the web services requests sent to your Moodle site by the mobile app.
 
=== Chrome or Chromium ===


[[{{ns:file}}:moodlemobile_chrome_inspect_network.png|thumb|300px]]
[[{{ns:file}}:moodlemobile_chrome_inspect_network.png|thumb|300px]]
Another option is to use Google Chrome or Google Chromium to debug this. If you already have the Moodle Desktop app you can skip this section.


Debugging the mobile app is not so easy, so we have provided an online web version of the app that can be easily debugged using the Chrome browser.
Debugging the mobile app is not so easy, so we have provided an online web version of the app that can be easily debugged using the Chrome browser.


# Open your Chrome browser and go to https://prototype.moodle.net/mobile/webapp/
# Open your Chrome browser and go to https://mobileapp.moodledemo.net/
# Open your browser options (icon at the top-right of your browser window), then go to More tools -> Developer tools
# Open your browser options (icon at the top-right of your browser window), then go to More tools -> Developer tools
# Dock the new panels on the right side (in the new panel top-right options choose “Dock to the right” icon)
# Dock the new panels on the right side (in the new panel top-right options choose “Dock to the right” icon)
Line 47: Line 87:
# Click on each one of them (starting with the last one in the list) but skip those that don’t start with token.php or server.php
# Click on each one of them (starting with the last one in the list) but skip those that don’t start with token.php or server.php
# In the new sub-window open select the “Response” tab and check if you see an error
# In the new sub-window open select the “Response” tab and check if you see an error
# Copy the error then go to the [[:en:Moodle Mobile FAQ Moodle Mobile FAQ]] in the user docs to check if there is a known solution for it
# Copy the error then go to the [[:en:Moodle Mobile FAQ|Moodle Mobile FAQ]] in the user docs to check if there is a known solution for it
# If you are unable to find a solution, post in the [https://moodle.org/mod/forum/view.php?id=7798 Moodle for mobile forum] on moodle.org
# If you are unable to find a solution, contact a [https://moodle.com/partners/ Moodle Partner] or post in the [https://moodle.org/mod/forum/view.php?id=7798 Moodle for mobile forum] on moodle.org for non-guaranteed community support.
 
== Building Moodle Desktop with devtools enabled ==
 
You may be using some features, such as Single Sign-On, that require a built app to work, rather than a hosted or local ionic build running in a web browser.
In this case, you can build the Moodle Desktop app with the browser's developer tools enabled.
 
Note: these instructions are based on building for Windows 7. There will be differences for other environments, so please add to these instructions if you can.
 
# Ensure you have a working [[Setting_up_your_development_environment_for_Moodle_Mobile_2|app development environment]]
# In your terminal of choice, go to the directory where you have the app's code.
# Edit desktop/electron.js.  Around line 66 (at the end of the createWindow() function, but inside the function), add the line:<br /><code>mainWindow.webContents.openDevTools();</code><br />It should look something like:<br /><pre>  mainWindow.on('focus', () => {&#10;    mainWindow.webContents.send('coreAppFocused'); // Send an event to the main window.&#10;  });&#10;  mainWindow.webContents.openDevTools();&#10;}</pre>
# Run <code>npm install -g electron electron-builder</code>
# Run <code>npm install electron-builder-squirrel-windows  app-builder-lib</code>
# Run <code>npm run desktop.pack</code>
 
This should give you a build of the app in desktop/dist.  For example, in windows you can run <code>desktop/dist/win-unpacked/Moodle Desktop.exe</code>.  When the app starts, the browser devtools will run inside the app, allowing you to inspect and debug the pages.  If you close the tools, you will have to restart the app to open them again.


== See also ==
== See also ==


* [[Moodle Mobile development using Chrome or Chromium]]
* [[Moodle Mobile development using Chrome or Chromium]]

Revision as of 09:08, 30 July 2019

Introduction

This guide will help you find and report problems with the Moodle Mobile app on your site.

It is especially useful for the following problems:

  • Unable to log in on your site
  • When you receive one of the following error messages in the app:
    • Can not find data record in database table external_functions
    • Invalid response value detected
    • Cannot get course contents

Requirements

  • Moodle 3.1 onwards (your site needs at least this version)
  • Moodle Desktop app 3.6.1 onwards or Google Chrome/Chromium browser
moodlemobile enabledebug.png

Enabling debugging on your Moodle site

  1. Go to Debugging in the Site administration
  2. For "Debug messages" select 'DEVELOPER'
  3. Tick "Display debug messages"
  4. Click the 'Save changes' button.

Note: Remember to disable debugging again once you have finished debugging your problem.

Enabling debugging on the mobile app

  1. Go to the More tab
  2. Go to Settings > General
  3. Enable "Display debug messages"

Note: Remember to disable debugging again once you have finished debugging your problem.

First try

At this point, you may not need fo go further on this guide.

Log-out and log-in again into your site and try to reproduce the error, hopefully, with Moodle and app debugging enabled you will see an explanatory message of what is happening.

If you are unable to find a solution, contact a Moodle Partner or post in the Moodle for mobile forum on moodle.org for non-guaranteed community support.

Setting up the debugging tool

Moodle Desktop

The recommended way to debug the problem is using the Moodle Desktop app. Please notice that the app version should be 3.6.1 or higher. The desktop app lets you debug some features, such as Single Sign-On, that require a built app to work, rather than a hosted or local ionic build running in a web browser.

You can download the desktop app from here.

Download the desktop app, install it and open it. Once it's open, you can open the "Developer tools" with the following shortcut:

  • In MacOS: Cmd + Option + I
  • In Windows or Linux: Ctrl + Shift + I

Once the Developer Tools are open, follow these steps:

  1. Dock the new panels on the right side (in the new panel top-right options choose “Dock to the right” icon)
  2. Click the Network tab (at the top-center)
  3. Enable the filter (filter shape icon) so it changes to colour red
  4. In the new text field displayed when enabling the filter write .php

Now you are ready to debug all the web services requests sent to your Moodle site by the mobile app.

Chrome or Chromium

moodlemobile chrome inspect network.png

Another option is to use Google Chrome or Google Chromium to debug this. If you already have the Moodle Desktop app you can skip this section.

Debugging the mobile app is not so easy, so we have provided an online web version of the app that can be easily debugged using the Chrome browser.

  1. Open your Chrome browser and go to https://mobileapp.moodledemo.net/
  2. Open your browser options (icon at the top-right of your browser window), then go to More tools -> Developer tools
  3. Dock the new panels on the right side (in the new panel top-right options choose “Dock to the right” icon)
  4. Click the Network tab (at the top-center)
  5. Enable the filter (filter shape icon) so it changes to colour red
  6. In the new text field displayed when enabling the filter write .php

Now you are ready to debug all the web services requests sent to your Moodle site by the mobile app.

Debugging a web service (WS) error

moodlemobile chrome debug ws error.png
  1. Connect to your site and browse to the functionality displaying an error
  2. In the right panel you will see a list of requests made by the app to your Moodle site (token.php server.php server.php etc..)
  3. Click on each one of them (starting with the last one in the list) but skip those that don’t start with token.php or server.php
  4. In the new sub-window open select the “Response” tab and check if you see an error
  5. Copy the error then go to the Moodle Mobile FAQ in the user docs to check if there is a known solution for it
  6. If you are unable to find a solution, contact a Moodle Partner or post in the Moodle for mobile forum on moodle.org for non-guaranteed community support.

See also