Remove Development Debug Code from Production Builds

Q&A (please complete the following information)

• OS: Linux (Ubuntu 22.04)
• Browser: Chrome, Firefox, Safari (affects all browsers)
• Version: Latest
• Method of installation: npm, dist assets
• Swagger-UI version: 5.17.14 (and likely earlier versions)
• Swagger/OpenAPI version:OpenAPI 3.0, Swagger 2.0 (affects all versions)

Content & configuration

Example Swagger/OpenAPI definition:

openapi: 3.0.0
info:
  title: Sample API
  version: 1.0.0
paths:
  /users:
    get:
      summary: Get users
      responses:
        '200':
          description: Successful response

Swagger-UI configuration options:

SwaggerUI({
  dom_id: '#swagger-ui',
  url: 'https://example.com/openapi.json',
  deepLinking: true
})

?yourQueryStringConfig

Describe the bug you're encountering

Development-only debugging code is executing in production builds, causing:

1. Security Issue: The Debug component exposes internal application props to window.props in production environments, potentially exposing sensitive configuration data
2. Console Pollution: Debug console logs are appearing in production builds, creating noise for end users and potentially exposing internal application state
3. Performance Impact: Unnecessary debug operations are running in production

#Affected Components:

• Debug component (debug.jsx) - exposes window.props globally
• ExamplesSelect component (examples-select.jsx) - debug console logs
• Spec Actions (actions.js) - parse error logging without environment checks

To reproduce...

Steps to reproduce the behavior:

1. Build Swagger-UI for production (NODE_ENV=production)
2. Open browser developer console
3. Navigate to any Swagger-UI instance
4. Check console for debug messages
5. Type window.props in console - see internal application state exposed
6. Trigger spec parsing errors - see detailed error logs in production

Expected behavior

In production builds:

• No debug code should execute
• window.props should not be set or should be undefined
• Console should be clean of debug messages
• Error handling should be user-friendly without exposing internal details
• Only user-facing error messages should appear in production

Additional context or thoughts

This is both a security concern and code quality issue:

Security Impact:

• Internal application configuration exposed via window.props
• Potential information disclosure through debug logs
• Stack traces and internal paths exposed in production

Code Quality Impact:

• Unprofessional appearance with debug logs in production
• Performance overhead from unnecessary debug operations
• Violates production build best practices

Suggested Fix: Wrap all debug code in environment checks:

if (process.env.NODE_ENV === "development") {
  // debug code here
}

Start by inspecting the mentioned Debug component in debug.jsx, ExamplesSelect in examples-select.jsx, and Spec Actions in actions.js, then reproduce the reported behavior with a NODE_ENV=production build. Done means production builds no longer expose window.props or emit development debug logs, while user-facing error handling remains available.