Toggleable debug console on mobile in local/dev/stage

[spwoodcock]

What type of PR is this? (check all applicable)

• 🍕 Feature
• 🐛 Bug Fix
• 📝 Documentation
• 🧑‍💻 Refactor
• ✅ Test
• 🤖 Build or CI
• ❓ Other (please specify)

Describe this PR

• Minor improvement to DX and frontend debugging.
• Add a toggleable debugging console, that displays the output of the console.
• Helpful on mobile, when it's not easy to bring up browser debug tools.

Screenshots

Menu

Console

Checklist before requesting a review

• 📖 Read the FMTM Contributing Guide: https://github.com/hotosm/fmtm/blob/main/CONTRIBUTING.md
• 📖 Read the HOT Code of Conduct: https://docs.hotosm.org/code-of-conduct
• 👷‍♀️ Create small PRs. In most cases, this will be possible.
• ✅ Provide tests for your changes.
• 📝 Use descriptive commit messages.
• 📗 Update any related documentation and include any relevant screenshots.

[optional] What gif best describes this PR or how it makes you feel?

[NSUWAL123]

This can be very very helpful in debugging

[spwoodcock]

It's not ready yet! I was hoping you could give me a hand making the console log actually display in the box 😁 Do you have any ideas?

We can look at it this afternoon otherwise 👍

[NSUWAL123]

@spwoodcock, the logs are being displayed on the box. I tried in both mobile and laptop browsers.

Note:
Instead of using: setLogs((prevLogs) => [...prevLogs, args.join(' ')]);

use JSON.stringify for the arguments of object type:

setLogs((prevLogs) => [
          ...prevLogs,
          args.map((arg) => (typeof arg === 'object' ? JSON.stringify(arg) : arg)).join(' '),
]);

as it is currently displaying [object object] for args of type object