alexaugustobr/index.html

## index.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <title>HTTP Cache Debug</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4f6f8;
      margin: 0;
      padding: 20px;
    }

    h1 {
      margin-bottom: 10px;
    }

    .container {
      max-width: 1000px;
      margin: auto;
      background: #fff;
      padding: 20px;
      border-radius: 6px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    .form-group {
      margin-bottom: 12px;
    }

    label {
      font-weight: bold;
      display: block;
      margin-bottom: 5px;
    }

    input[type="text"] {
      width: 100%;
      padding: 8px;
      font-size: 14px;
    }

    .options {
      display: flex;
      gap: 20px;
      margin-bottom: 10px;
    }

    button {
      padding: 10px 16px;
      font-size: 14px;
      cursor: pointer;
      border: none;
      background: #1976d2;
      color: #fff;
      border-radius: 4px;
    }

    button:hover {
      background: #125aa0;
    }

    .result {
      margin-top: 20px;
    }

    .box {
      background: #f9fafb;
      border: 1px solid #ddd;
      padding: 10px;
      border-radius: 4px;
      margin-bottom: 15px;
      overflow-x: auto;
    }

    pre {
      margin: 0;
      white-space: pre-wrap;
      word-break: break-word;
      font-size: 13px;
    }

    .status {
      font-weight: bold;
    }

    .success {
      color: green;
    }

    .error {
      color: red;
    }
  </style>
</head>
<body>

<div class="container">
  <h1>HTTP Cache Debug</h1>

  <div class="form-group">
    <label for="urlInput">URL da requisição</label>
    <input
      type="text"
      id="urlInput"
      placeholder="https://api.exemplo.com/recurso"
    />
  </div>

  <div class="options">
    <label>
      <input type="checkbox" id="disableCache" />
      Ignorar cache do navegador (cache: no-store)
    </label>
  </div>

  <button onclick="makeRequest()">Fazer requisição</button>

  <div class="result">
    <div class="box">
      <div class="status" id="status"></div>
      <div id="time"></div>
    </div>

    <div class="box">
      <h3>Headers</h3>
      <pre id="headers"></pre>
    </div>

    <div class="box">
      <h3>Body</h3>
      <pre id="body"></pre>
    </div>
  </div>
</div>

<script>
  async function makeRequest() {
    const url = document.getElementById('urlInput').value;
    const disableCache = document.getElementById('disableCache').checked;

    const statusEl = document.getElementById('status');
    const timeEl = document.getElementById('time');
    const headersEl = document.getElementById('headers');
    const bodyEl = document.getElementById('body');

    statusEl.textContent = '';
    headersEl.textContent = '';
    bodyEl.textContent = '';
    timeEl.textContent = '';

    if (!url) {
      alert('Informe uma URL');
      return;
    }

    const options = {
      method: 'GET',
      cache: disableCache ? 'no-store' : 'default'
    };

    const start = performance.now();

    try {
      const response = await fetch(url, options);
      const end = performance.now();

      statusEl.textContent = `Status: ${response.status} ${response.statusText}`;
      statusEl.className = 'status ' + (response.ok ? 'success' : 'error');

      timeEl.textContent = `Tempo: ${(end - start).toFixed(2)} ms`;

      // Headers
      const headers = {};
      response.headers.forEach((value, key) => {
        headers[key] = value;
      });
      headersEl.textContent = JSON.stringify(headers, null, 2);

      // Body
      const contentType = response.headers.get('content-type') || '';
      let body;

      if (contentType.includes('application/json')) {
        body = await response.json();
        bodyEl.textContent = JSON.stringify(body, null, 2);
      } else {
        body = await response.text();
        bodyEl.textContent = body;
      }

    } catch (error) {
      statusEl.textContent = 'Erro ao fazer a requisição';
      statusEl.className = 'status error';
      bodyEl.textContent = error.toString();
    }
  }
</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="pt-BR">
	<head>
	<meta charset="UTF-8" />
	<title>HTTP Cache Debug</title>

	<style>
	body {
	font-family: Arial, sans-serif;
	background: #f4f6f8;
	margin: 0;
	padding: 20px;
	}

	h1 {
	margin-bottom: 10px;
	}

	.container {
	max-width: 1000px;
	margin: auto;
	background: #fff;
	padding: 20px;
	border-radius: 6px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	}

	.form-group {
	margin-bottom: 12px;
	}

	label {
	font-weight: bold;
	display: block;
	margin-bottom: 5px;
	}

	input[type="text"] {
	width: 100%;
	padding: 8px;
	font-size: 14px;
	}

	.options {
	display: flex;
	gap: 20px;
	margin-bottom: 10px;
	}

	button {
	padding: 10px 16px;
	font-size: 14px;
	cursor: pointer;
	border: none;
	background: #1976d2;
	color: #fff;
	border-radius: 4px;
	}

	button:hover {
	background: #125aa0;
	}

	.result {
	margin-top: 20px;
	}

	.box {
	background: #f9fafb;
	border: 1px solid #ddd;
	padding: 10px;
	border-radius: 4px;
	margin-bottom: 15px;
	overflow-x: auto;
	}

	pre {
	margin: 0;
	white-space: pre-wrap;
	word-break: break-word;
	font-size: 13px;
	}

	.status {
	font-weight: bold;
	}

	.success {
	color: green;
	}

	.error {
	color: red;
	}
	</style>
	</head>
	<body>

	<div class="container">
	<h1>HTTP Cache Debug</h1>

	<div class="form-group">
	<label for="urlInput">URL da requisição</label>
	<input
	type="text"
	id="urlInput"
	placeholder="https://api.exemplo.com/recurso"
	/>
	</div>

	<div class="options">
	<label>
	<input type="checkbox" id="disableCache" />
	Ignorar cache do navegador (cache: no-store)
	</label>
	</div>

	<button onclick="makeRequest()">Fazer requisição</button>

	<div class="result">
	<div class="box">
	<div class="status" id="status"></div>
	<div id="time"></div>
	</div>

	<div class="box">
	<h3>Headers</h3>
	<pre id="headers"></pre>
	</div>

	<div class="box">
	<h3>Body</h3>
	<pre id="body"></pre>
	</div>
	</div>
	</div>

	<script>
	async function makeRequest() {
	const url = document.getElementById('urlInput').value;
	const disableCache = document.getElementById('disableCache').checked;

	const statusEl = document.getElementById('status');
	const timeEl = document.getElementById('time');
	const headersEl = document.getElementById('headers');
	const bodyEl = document.getElementById('body');

	statusEl.textContent = '';
	headersEl.textContent = '';
	bodyEl.textContent = '';
	timeEl.textContent = '';

	if (!url) {
	alert('Informe uma URL');
	return;
	}

	const options = {
	method: 'GET',
	cache: disableCache ? 'no-store' : 'default'
	};

	const start = performance.now();

	try {
	const response = await fetch(url, options);
	const end = performance.now();

	statusEl.textContent = `Status: ${response.status} ${response.statusText}`;
	statusEl.className = 'status ' + (response.ok ? 'success' : 'error');

	timeEl.textContent = `Tempo: ${(end - start).toFixed(2)} ms`;

	// Headers
	const headers = {};
	response.headers.forEach((value, key) => {
	headers[key] = value;
	});
	headersEl.textContent = JSON.stringify(headers, null, 2);

	// Body
	const contentType = response.headers.get('content-type') \|\| '';
	let body;

	if (contentType.includes('application/json')) {
	body = await response.json();
	bodyEl.textContent = JSON.stringify(body, null, 2);
	} else {
	body = await response.text();
	bodyEl.textContent = body;
	}

	} catch (error) {
	statusEl.textContent = 'Erro ao fazer a requisição';
	statusEl.className = 'status error';
	bodyEl.textContent = error.toString();
	}
	}
	</script>

	</body>
	</html>
No results found