Show URL params and environment variables in developer tab (#3134)

locales/en/app.json

@@ -65,12 +65,14 @@
     "debug_tile_layout_label": "Debug tile layout",
     "device_id": "Device ID: {{id}}",
     "duplicate_tiles_label": "Number of additional tile copies per participant",
+    "environment_variables": "Environment variables",
     "hostname": "Hostname: {{hostname}}",
     "livekit_server_info": "LiveKit Server Info",
     "livekit_sfu": "LiveKit SFU: {{url}}",
     "matrix_id": "Matrix ID: {{id}}",
     "show_connection_stats": "Show connection statistics",
     "show_non_member_tiles": "Show tiles for non-member media",
+    "url_params": "URL parameters",
     "use_new_membership_manager": "Use the new implementation of the call MembershipManager"
   },
   "disconnected_banner": "Connectivity to the server has been lost.",

src/settings/DeveloperSettingsTab.tsx

@@ -20,6 +20,7 @@ import {
 import type { MatrixClient } from "matrix-js-sdk";
 import type { Room as LivekitRoom } from "livekit-client";
 import styles from "./DeveloperSettingsTab.module.css";
+import { useUrlParams } from "../UrlParams";
 interface Props {
   client: MatrixClient;
   livekitRoom?: LivekitRoom;
@@ -43,6 +44,8 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRoom }) => {
     useNewMembershipManagerSetting,
   );
 
+  const urlParams = useUrlParams();
+
   const sfuUrl = useMemo((): URL | null => {
     if (livekitRoom?.engine.client.ws?.url) {
       // strip the URL params
@@ -169,6 +172,10 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRoom }) => {
           </pre>
         </>
       ) : null}
+      <p>{t("developer_mode.environment_variables")}</p>
+      <pre>{JSON.stringify(import.meta.env, null, 2)}</pre>
+      <p>{t("developer_mode.url_params")}</p>
+      <pre>{JSON.stringify(urlParams, null, 2)}</pre>
     </>
   );
 };