Add Debugger Mode

When developing a website with multiple languages (i18n), translators are usually responsible for translating the content instead of the web developer. However, translators often struggle to find the specific message they need to edit on the webpage because they don't know its key. This leads to them having to ask the developer for the key, resulting in a lot of time wasted on communication.

To solve this issue, a solution is proposed: When the debugger mode in react-intl-universal is enabled, each message on the webpage will be wrapped in a special span element with the key "data-i18n-key". This way, translators can easily see the key of the message and make the necessary edits themselves using some message management system, without needing to ask the developer.

Enabling debugger mode:

intl.init({
  // ...
  debug: true
})

Message will be wrapped in a span element with the key "data-i18n-key":