<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Debugger MCP Test App</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
text-align: center;
}
.section {
margin: 20px 0;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
}
button {
background: #007cba;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin: 5px;
}
button:hover {
background: #005a87;
}
.output {
background: #f8f8f8;
border: 1px solid #ddd;
padding: 10px;
margin: 10px 0;
border-radius: 3px;
font-family: monospace;
min-height: 100px;
}
.error {
color: red;
}
.success {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>🔍 Debugger MCP Test Application</h1>
<div class="section">
<h3>Basic Functions</h3>
<button onclick="simpleFunction()">Simple Function</button>
<button onclick="functionWithLoop()">Function with Loop</button>
<button onclick="asyncFunction()">Async Function</button>
<div id="basicOutput" class="output"></div>
</div>
<div class="section">
<h3>Error Testing</h3>
<button onclick="throwError()">Throw Error</button>
<button onclick="asyncError()">Async Error</button>
<button onclick="typeError()">Type Error</button>
<div id="errorOutput" class="output"></div>
</div>
<div class="section">
<h3>API Simulation</h3>
<button onclick="simulateApiCall(200)">Success API Call</button>
<button onclick="simulateApiCall(404)">Failed API Call</button>
<button onclick="simulateApiCall(500)">Server Error</button>
<div id="apiOutput" class="output"></div>
</div>
<div class="section">
<h3>User Interaction</h3>
<input type="text" id="userInput" placeholder="Enter your name">
<button onclick="processUserInput()">Process Input</button>
<button onclick="validateForm()">Validate Form</button>
<div id="userOutput" class="output"></div>
</div>
</div>
<script>
// Global variables for testing
let counter = 0;
let users = [
{ id: 1, name: "Alice", isAdmin: true },
{ id: 2, name: "Bob", isAdmin: false },
{ id: 3, name: "Charlie", isAdmin: false }
];
// Basic function - good for simple breakpoints
function simpleFunction() {
console.log("Simple function called");
counter++;
const result = counter * 2;
document.getElementById('basicOutput').innerHTML = `Counter: ${counter}, Result: ${result}`;
return result;
}
// Function with loop - good for conditional breakpoints
function functionWithLoop() {
console.log("Function with loop called");
let sum = 0;
for (let i = 1; i <= 10; i++) {
sum += i;
// Good place for conditional breakpoint: i > 5
if (i % 3 === 0) {
console.log(`Multiple of 3: ${i}`);
}
}
document.getElementById('basicOutput').innerHTML = `Loop completed. Sum: ${sum}`;
return sum;
}
// Async function - good for testing async breakpoints
async function asyncFunction() {
console.log("Async function started");
document.getElementById('basicOutput').innerHTML = "Processing async operation...";
try {
await new Promise(resolve => setTimeout(resolve, 1000));
const data = await fetchMockData();
document.getElementById('basicOutput').innerHTML = `Async result: ${JSON.stringify(data)}`;
return data;
} catch (error) {
console.error("Async error:", error);
document.getElementById('basicOutput').innerHTML = `Async error: ${error.message}`;
}
}
// Mock data fetching
async function fetchMockData() {
await new Promise(resolve => setTimeout(resolve, 500));
return { timestamp: Date.now(), random: Math.random() };
}
// Error functions for testing error handling
function throwError() {
console.log("About to throw error");
document.getElementById('errorOutput').innerHTML = "Throwing error...";
throw new Error("This is a test error for debugging");
}
async function asyncError() {
console.log("About to throw async error");
document.getElementById('errorOutput').innerHTML = "Throwing async error...";
await new Promise(resolve => setTimeout(resolve, 500));
throw new Error("This is an async test error");
}
function typeError() {
console.log("About to cause type error");
document.getElementById('errorOutput').innerHTML = "Causing type error...";
const obj = null;
return obj.someProperty; // This will cause a TypeError
}
// API simulation functions
async function simulateApiCall(statusCode) {
console.log(`Simulating API call with status ${statusCode}`);
document.getElementById('apiOutput').innerHTML = "Making API call...";
const response = {
status: statusCode,
statusText: getStatusText(statusCode),
data: null
};
// Simulate network delay
await new Promise(resolve => setTimeout(resolve, 800));
if (statusCode >= 200 && statusCode < 300) {
response.data = { message: "Success", timestamp: Date.now() };
document.getElementById('apiOutput').innerHTML =
`<span class="success">API Success: ${JSON.stringify(response)}</span>`;
} else {
response.data = { error: "API Error", code: statusCode };
document.getElementById('apiOutput').innerHTML =
`<span class="error">API Error: ${JSON.stringify(response)}</span>`;
// Good place for conditional breakpoint: response.status >= 400
console.error("API call failed:", response);
}
return response;
}
function getStatusText(code) {
const statusTexts = {
200: "OK",
404: "Not Found",
500: "Internal Server Error"
};
return statusTexts[code] || "Unknown";
}
// User interaction functions
function processUserInput() {
const input = document.getElementById('userInput').value;
console.log(`Processing user input: ${input}`);
if (!input || input.trim() === '') {
document.getElementById('userOutput').innerHTML =
'<span class="error">Please enter a name</span>';
return;
}
const user = findUserByName(input);
if (user) {
document.getElementById('userOutput').innerHTML =
`<span class="success">Found user: ${JSON.stringify(user)}</span>`;
} else {
document.getElementById('userOutput').innerHTML =
`<span class="error">User not found: ${input}</span>`;
}
}
function findUserByName(name) {
// Good place for conditional breakpoint: user.isAdmin === true
return users.find(user => user.name.toLowerCase() === name.toLowerCase());
}
function validateForm() {
const input = document.getElementById('userInput').value;
console.log(`Validating form input: ${input}`);
const validations = [
{ test: input.length >= 2, message: "Name must be at least 2 characters" },
{ test: /^[a-zA-Z\s]+$/.test(input), message: "Name must contain only letters and spaces" },
{ test: input.length <= 50, message: "Name must be less than 50 characters" }
];
const errors = validations.filter(v => !v.test).map(v => v.message);
if (errors.length === 0) {
document.getElementById('userOutput').innerHTML =
'<span class="success">Form validation passed!</span>';
} else {
document.getElementById('userOutput').innerHTML =
`<span class="error">Validation errors: ${errors.join(', ')}</span>`;
}
return errors.length === 0;
}
// Error handling
window.addEventListener('error', function(event) {
console.error('Global error caught:', event.error);
const errorDiv = document.getElementById('errorOutput');
errorDiv.innerHTML = `<span class="error">Caught error: ${event.error.message}</span>`;
});
window.addEventListener('unhandledrejection', function(event) {
console.error('Unhandled promise rejection:', event.reason);
const errorDiv = document.getElementById('errorOutput');
errorDiv.innerHTML = `<span class="error">Unhandled rejection: ${event.reason.message}</span>`;
});
// Initialize
console.log("Test application loaded and ready for debugging!");
document.getElementById('basicOutput').innerHTML = "Ready for testing...";
document.getElementById('errorOutput').innerHTML = "No errors yet...";
document.getElementById('apiOutput').innerHTML = "No API calls yet...";
document.getElementById('userOutput').innerHTML = "No user interactions yet...";
</script>
</body>
</html>
