Add JSON formatting toggle to cors-fetch tool

[simonw]

Modify the cors-fetch tool such that if the response cleanly parses using JSON.parse it is automatically displayed pretty indented with a toggle at the top to switch between formatted and original

When the response body is valid JSON, automatically pretty-print it with 2-space indentation. A toggle switch appears above the body output to switch between formatted and original views. The toggle defaults to formatted and resets when a new JSON response is received.

https://gistpreview.github.io/?21b21ef0b16f9cc78b8f51a70986b1dd/index.html

[claude]

Claude finished @simonw's task —— View job

---

PR Code Review

Reviewing the JSON formatting toggle implementation:

• Read and analyze cors-fetch.html changes
• Review code quality and best practices
• Check for potential bugs or issues
• Assess performance considerations
• Evaluate security concerns
• Consider test coverage

Analysis

The implementation adds automatic JSON detection and pretty-printing with a toggle switch. The code is well-structured and follows good practices.

Code Quality ✅

Strengths:

• Clean separation of concerns with dedicated functions (setResponseBody, updateBodyDisplay)
• Consistent naming conventions and clear state management
• Proper CSS organization with logical grouping (lines 447-493)
• Accessible toggle design with visual feedback

Minor suggestions:

• Consider extracting the JSON parsing logic into a separate utility function for better testability
• The toggle could benefit from keyboard navigation support (space/enter keys)

Potential Bugs ✅

Well handled:

• JSON parsing uses proper try/catch error handling (lines 751-757)
• Edge cases covered: empty responses, non-JSON content
• State reset logic works correctly when new responses arrive (lines 764-767)

No significant issues found.

Performance ✅

• JSON parsing only occurs once per response, not on every toggle
• DOM updates are minimal and efficient
• CSS animations use transform for optimal performance (line 491)
• No memory leaks or excessive event listeners

Security ✅

• Uses JSON.parse() safely with try/catch
• No eval() or unsafe dynamic code execution
• HTML escaping already handled by existing escapeHtml() function
• No XSS vulnerabilities introduced

Test Coverage ⚠️

Missing test scenarios:

• JSON detection with various edge cases (empty objects, arrays, malformed JSON)
• Toggle state persistence across requests
• UI interaction testing (toggle clicking)
• Consider adding unit tests for setResponseBody() and updateBodyDisplay()

Overall Assessment

This is a solid implementation that enhances UX without compromising security or performance. The code is maintainable and follows the existing patterns well.

Recommendation: ✅ APPROVE - Ready to merge with minor suggestions for future iterations.

---