Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Les Vecteurs – 3ème</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:wght@300;400;500&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-chtml.min.js"></script>
<script>window.MathJax={tex:{inlineMath:[['\\(','\\)'],['$','$']],displayMath:[['\\[','\\]']]},options:{skipHtmlTags:['script','noscript','style','textarea','pre']}};</script>
<style>
:root{
--ink:#0f0e0e;--paper:#faf7f2;--cream:#f2eddf;
--accent:#c8402a;--gold:#d4963a;--blue:#2a5fc8;--teal:#1a8a7a;
--light-blue:#dde8f8;--border:#2a2520;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'DM Sans',sans-serif;background:var(--paper);color:var(--ink);line-height:1.65;font-size:16px;}
.hero{background:var(--ink);color:var(--paper);padding:3.2rem 2rem 2.6rem;text-align:center;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 40px,rgba(255,255,255,.025) 40px,rgba(255,255,255,.025) 41px);}
.badge{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;border:1px solid var(--gold);color:var(--gold);padding:.25rem .75rem;border-radius:2px;margin-bottom:1rem;}
.hero h1{font-family:'Playfair Display',serif;font-size:clamp(2.2rem,6vw,4rem);font-weight:900;letter-spacing:-.02em;margin-bottom:.3rem;}
.hero h1 span{color:var(--gold);}
.hero p{font-size:.95rem;opacity:.6;max-width:440px;margin:0 auto;}
.container{max-width:860px;margin:0 auto;padding:0 1.4rem 5rem;}
.section-label{display:flex;align-items:center;gap:.8rem;margin:3rem 0 1.1rem;}
.section-label .num{font-family:'Playfair Display',serif;font-size:1.8rem;font-weight:700;color:var(--accent);line-height:1;min-width:2rem;}
.section-label h2{font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:700;border-bottom:2px solid var(--ink);padding-bottom:.2rem;flex:1;}
.card{background:#fff;border:1.5px solid var(--border);border-radius:4px;padding:1.3rem 1.5rem;margin-bottom:1rem;box-shadow:3px 3px 0 var(--ink);}
.card.accent{border-color:var(--accent);box-shadow:3px 3px 0 var(--accent);}
.card.blue{border-color:var(--blue);box-shadow:3px 3px 0 var(--blue);background:var(--light-blue);}
.card.gold{border-color:var(--gold);box-shadow:3px 3px 0 var(--gold);background:#fdf6e8;}
.card.teal{border-color:var(--teal);box-shadow:3px 3px 0 var(--teal);background:#e6f5f3;}
.card-title{font-family:'Playfair Display',serif;font-weight:700;font-size:1rem;margin-bottom:.65rem;display:flex;align-items:center;gap:.5rem;}
.def-box{background:var(--cream);border-left:4px solid var(--accent);padding:.9rem 1.1rem;margin:.7rem 0;font-size:.95rem;}
.def-box strong.lbl{color:var(--accent);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:.25rem;}
.formula-strip{background:var(--ink);color:var(--paper);padding:.8rem 1.2rem;border-radius:3px;margin:.7rem 0;font-family:'JetBrains Mono',monospace;font-size:.9rem;display:flex;align-items:center;gap:.8rem;overflow-x:auto;}
.formula-strip .lbl{font-size:.65rem;opacity:.5;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;min-width:4.5rem;}
.prop-list{list-style:none;padding:0;}
.prop-list li{padding:.5rem 0 .5rem 1.4rem;border-bottom:1px dashed rgba(0,0,0,.12);position:relative;font-size:.92rem;}
.prop-list li:last-child{border-bottom:none;}
.prop-list li::before{content:'▸';position:absolute;left:0;color:var(--accent);font-size:.82rem;top:.55rem;}
/* ── INTERACTIVE CANVAS WIDGET ── */
.widget{background:#fff;border:1.5px solid var(--border);border-radius:4px;box-shadow:3px 3px 0 var(--ink);overflow:hidden;margin-bottom:1rem;}
.widget-header{background:var(--ink);color:var(--paper);padding:.45rem 1rem;font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.08em;display:flex;align-items:center;gap:.5rem;}
.wd{width:9px;height:9px;border-radius:50%;}
.widget canvas{display:block;width:100%;cursor:grab;}
.widget canvas:active{cursor:grabbing;}
.widget-caption{padding:.55rem 1rem;font-size:.78rem;color:#555;background:var(--cream);border-top:1px solid rgba(0,0,0,.08);}
.widget-info{padding:.5rem 1rem;font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--blue);background:#f5f8ff;border-top:1px solid rgba(42,95,200,.12);min-height:1.8rem;}
/* steps */
.steps{counter-reset:step;}
.step{display:flex;gap:.9rem;margin-bottom:.8rem;align-items:flex-start;}
.step-num{counter-increment:step;min-width:1.9rem;height:1.9rem;background:var(--ink);color:var(--paper);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:.75rem;font-weight:600;flex-shrink:0;margin-top:.1rem;}
.step-content{font-size:.92rem;padding-top:.2rem;}
.example-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
@media(max-width:560px){.example-grid{grid-template-columns:1fr;}}
.exo-card{border:2px dashed var(--blue);border-radius:4px;padding:1.2rem 1.4rem;background:var(--light-blue);margin-top:1rem;}
.exo-card h4{font-family:'Playfair Display',serif;font-size:1rem;margin-bottom:.55rem;color:var(--blue);}
.retenir{background:var(--ink);color:var(--paper);border-radius:4px;padding:1.8rem 1.8rem 1.4rem;margin-top:3rem;position:relative;}
.retenir .tag{position:absolute;top:-13px;left:1.4rem;background:var(--gold);color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;padding:.25rem .7rem;border-radius:2px;font-weight:600;}
.retenir h3{font-family:'Playfair Display',serif;font-size:1.1rem;margin-bottom:.9rem;color:var(--gold);}
.retenir ul{list-style:none;padding:0;}
.retenir ul li{padding:.38rem 0 .38rem 1.4rem;border-bottom:1px solid rgba(255,255,255,.08);font-size:.9rem;position:relative;opacity:.9;}
.retenir ul li:last-child{border-bottom:none;}
.retenir ul li::before{content:'→';position:absolute;left:0;color:var(--gold);}
.divider{display:flex;align-items:center;gap:1rem;margin:2.5rem 0 0;opacity:.25;}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--ink);}
.divider span{font-family:'JetBrains Mono',monospace;font-size:.68rem;white-space:nowrap;}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.card,.widget,.exo-card,.retenir{animation:fadeUp .45s ease both;}
</style>
</head>
<body>
<div class="hero">
<div class="badge">Mathématiques · 3ème · Géométrie</div>
<h1>Les <span>Vecteurs</span></h1>
<p>Une capsule interactive — faites glisser les points pour explorer chaque concept.</p>
</div>
<div class="container">
<!-- ══ 1. DÉFINITION ══ -->
<div class="section-label"><span class="num">1</span><h2>Notion de vecteur</h2></div>
<div class="card accent">
<div class="card-title"><span>📐</span> Définition</div>
<div class="def-box">
<strong class="lbl">Vecteur</strong>
Un <strong>vecteur</strong> est défini par trois caractéristiques : une <em>direction</em>, un <em>sens</em> et une <em>norme</em> (longueur).
On le note \(\overrightarrow{AB}\), où \(A\) est l'<strong>origine</strong> et \(B\) l'<strong>extrémité</strong>.
</div>
<p style="font-size:.88rem;color:#444;margin-top:.5rem;">
Deux vecteurs sont <strong>égaux</strong> s'ils ont la même direction, le même sens et la même norme — quelle que soit leur position dans le plan.
</p>
</div>
<!-- WIDGET 1 : vecteur libre -->
<div class="widget" id="w1">
<div class="widget-header">
<span class="wd" style="background:#e74c3c"></span>
<span class="wd" style="background:#f1c40f"></span>
<span class="wd" style="background:#2ecc71"></span>
INTERACTIF · Représentation du vecteur \(\overrightarrow{AB}\)
</div>
<canvas id="c1" height="300"></canvas>
<div class="widget-info" id="info1">Chargement…</div>
<div class="widget-caption">🖱 Faites glisser les points <strong>A</strong> (bleu) et <strong>B</strong> (rouge) pour modifier le vecteur.</div>
</div>
<!-- ══ 2. CARACTÉRISTIQUES ══ -->
<div class="section-label"><span class="num">2</span><h2>Caractéristiques d'un vecteur</h2></div>
<div class="example-grid">
<div class="card blue">
<div class="card-title"><span>📏</span> La norme</div>
<p style="font-size:.88rem;">La norme de \(\overrightarrow{AB}\) est notée \(\|\overrightarrow{AB}\|\). Elle est égale à la longueur \(AB\).</p>
<div class="formula-strip"><span class="lbl">Norme</span>\(\|\overrightarrow{AB}\| = AB\)</div>
</div>
<div class="card gold">
<div class="card-title"><span>🧭</span> Direction & sens</div>
<p style="font-size:.88rem;">La <strong>direction</strong> est la droite \((AB)\). Le <strong>sens</strong> indique l'orientation de \(A\) vers \(B\).</p>
</div>
</div>
<!-- ══ 3. VECTEURS ÉGAUX ══ -->
<div class="section-label"><span class="num">3</span><h2>Vecteurs égaux & translation</h2></div>
<div class="card teal">
<div class="card-title"><span>⚖️</span> Vecteurs égaux</div>
<ul class="prop-list">
<li>Même direction (droites parallèles ou confondues)</li>
<li>Même sens (flèche orientée de la même façon)</li>
<li>Même norme : \(\|\overrightarrow{AB}\| = \|\overrightarrow{CD}\|\)</li>
<li>On écrit alors : \(\overrightarrow{AB} = \overrightarrow{CD}\)</li>
<li>Équivalence : \(\overrightarrow{AB} = \overrightarrow{CD} \iff ABDC\) est un parallélogramme</li>
</ul>
</div>
<!-- WIDGET 2 : vecteurs égaux -->
<div class="widget" id="w2">
<div class="widget-header">
<span class="wd" style="background:#e74c3c"></span>
<span class="wd" style="background:#f1c40f"></span>
<span class="wd" style="background:#2ecc71"></span>
INTERACTIF · Vecteurs égaux — parallélogramme
</div>
<canvas id="c2" height="300"></canvas>
<div class="widget-info" id="info2">Chargement…</div>
<div class="widget-caption">🖱 Déplacez <strong>A</strong> ou <strong>B</strong>. Le vecteur \(\overrightarrow{CD}\) est construit égal à \(\overrightarrow{AB}\) à partir du point <strong>C</strong> (déplaçable aussi).</div>
</div>
<!-- ══ 4. RELATION DE CHASLES ══ -->
<div class="section-label"><span class="num">4</span><h2>Relation de Chasles</h2></div>
<div class="card blue">
<div class="card-title"><span>➕</span> Addition de vecteurs</div>
<div class="def-box">
<strong class="lbl">Relation de Chasles</strong>
Pour tous points \(A\), \(B\), \(C\) :
</div>
<div class="formula-strip"><span class="lbl">Chasles</span>\(\overrightarrow{AC} = \overrightarrow{AB} + \overrightarrow{BC}\)</div>
<p style="font-size:.86rem;margin-top:.5rem;color:#333;">On peut enchaîner plusieurs points : \(\overrightarrow{AD} = \overrightarrow{AB} + \overrightarrow{BC} + \overrightarrow{CD}\)</p>
</div>
<!-- WIDGET 3 : Chasles -->
<div class="widget" id="w3">
<div class="widget-header">
<span class="wd" style="background:#e74c3c"></span>
<span class="wd" style="background:#f1c40f"></span>
<span class="wd" style="background:#2ecc71"></span>
INTERACTIF · Relation de Chasles : \(\overrightarrow{AB} + \overrightarrow{BC} = \overrightarrow{AC}\)
</div>
<canvas id="c3" height="300"></canvas>
<div class="widget-info" id="info3">Chargement…</div>
<div class="widget-caption">🖱 Déplacez les points <strong>A</strong>, <strong>B</strong>, <strong>C</strong>. La somme \(\overrightarrow{AC}\) (en vert) est toujours égale à \(\overrightarrow{AB} + \overrightarrow{BC}\).</div>
</div>
<!-- ══ 5. VECTEUR OPPOSÉ & SCALAIRE ══ -->
<div class="section-label"><span class="num">5</span><h2>Vecteur opposé & scalaire</h2></div>
<div class="example-grid">
<div class="card">
<div class="card-title"><span>🔄</span> Vecteur opposé</div>
<p style="font-size:.88rem;margin-bottom:.6rem;">Le vecteur opposé de \(\overrightarrow{AB}\) est \(-\overrightarrow{AB} = \overrightarrow{BA}\) : même direction, sens contraire, même norme.</p>
<div class="formula-strip"><span class="lbl">Opposé</span>\(-\overrightarrow{AB} = \overrightarrow{BA}\)</div>
</div>
<div class="card gold">
<div class="card-title"><span>✖️</span> Multiplication par \(k\)</div>
<ul class="prop-list" style="font-size:.86rem;">
<li>Même direction que \(\vec{u}\)</li>
<li>Même sens si \(k>0\), opposé si \(k<0\)</li>
<li>\(\|k\vec{u}\| = |k|\cdot\|\vec{u}\|\)</li>
</ul>
<div class="formula-strip" style="margin-top:.6rem;font-size:.82rem;"><span class="lbl">Scalaire</span>\(k\overrightarrow{AB} \Rightarrow \text{norme} = |k|\cdot AB\)</div>
</div>
</div>
<!-- ══ 6. COORDONNÉES ══ -->
<div class="section-label"><span class="num">6</span><h2>Coordonnées d'un vecteur</h2></div>
<div class="card teal">
<div class="card-title"><span>🗺️</span> Dans un repère orthonormé \((O\,;\,\vec{\imath},\vec{\jmath})\)</div>
<p style="font-size:.88rem;margin-bottom:.7rem;">Si \(A(x_A\,;\,y_A)\) et \(B(x_B\,;\,y_B)\), alors :</p>
<div class="formula-strip"><span class="lbl">Coords</span>\(\overrightarrow{AB}\begin{pmatrix}x_B - x_A \\ y_B - y_A\end{pmatrix}\)</div>
<div class="formula-strip"><span class="lbl">Norme</span>\(\|\overrightarrow{AB}\| = \sqrt{(x_B-x_A)^2+(y_B-y_A)^2}\)</div>
</div>
<!-- WIDGET 4 : coordonnées -->
<div class="widget" id="w4">
<div class="widget-header">
<span class="wd" style="background:#e74c3c"></span>
<span class="wd" style="background:#f1c40f"></span>
<span class="wd" style="background:#2ecc71"></span>
INTERACTIF · Coordonnées & norme dans un repère
</div>
<canvas id="c4" height="340"></canvas>
<div class="widget-info" id="info4">Chargement…</div>
<div class="widget-caption">🖱 Déplacez <strong>A</strong> et <strong>B</strong> pour lire les coordonnées et la norme calculées en temps réel.</div>
</div>
<div class="card blue">
<div class="card-title"><span>🔢</span> Opérations avec les coordonnées</div>
<p style="font-size:.86rem;margin-bottom:.6rem;">Si \(\vec{u}\begin{pmatrix}a \\ b\end{pmatrix}\) et \(\vec{v}\begin{pmatrix}c \\ d\end{pmatrix}\) :</p>
<div class="formula-strip"><span class="lbl">Addition</span>\(\vec{u}+\vec{v} = \begin{pmatrix}a+c \\ b+d\end{pmatrix}\)</div>
<div class="formula-strip"><span class="lbl">Scalaire</span>\(k\vec{u} = \begin{pmatrix}ka \\ kb\end{pmatrix}\)</div>
</div>
<!-- ══ EXERCICE ══ -->
<div class="section-label"><span class="num">★</span><h2>Exercice d'application</h2></div>
<div class="exo-card">
<h4>Coordonnées, norme et relation de Chasles</h4>
<p style="font-size:.88rem;margin-bottom:.8rem;">Dans un repère orthonormé : \(A(1\,;\,2)\), \(B(4\,;\,6)\), \(C(-1\,;\,3)\).</p>
<div class="steps">
<div class="step"><span class="step-num"></span><div class="step-content">Calculer les coordonnées de \(\overrightarrow{AB}\) et \(\overrightarrow{AC}\).</div></div>
<div class="step"><span class="step-num"></span><div class="step-content">Calculer \(\|\overrightarrow{AB}\|\) et \(\|\overrightarrow{AC}\|\).</div></div>
<div class="step"><span class="step-num"></span><div class="step-content">Calculer \(\overrightarrow{AB}+\overrightarrow{AC}\) à l'aide des coordonnées.</div></div>
<div class="step"><span class="step-num"></span><div class="step-content">Vérifier par Chasles que \(\overrightarrow{AB}+\overrightarrow{BC} = \overrightarrow{AC}\).</div></div>
</div>
<details style="margin-top:1rem;font-size:.87rem;">
<summary style="cursor:pointer;color:var(--blue);font-weight:600;">📋 Voir la correction</summary>
<div style="margin-top:.7rem;padding:.8rem;background:#fff;border-radius:3px;line-height:2;">
<p><strong>1.</strong> \(\overrightarrow{AB}\begin{pmatrix}3\\4\end{pmatrix}\) · \(\overrightarrow{AC}\begin{pmatrix}-2\\1\end{pmatrix}\)</p>
<p><strong>2.</strong> \(\|\overrightarrow{AB}\|=\sqrt{9+16}=5\) · \(\|\overrightarrow{AC}\|=\sqrt{4+1}=\sqrt{5}\)</p>
<p><strong>3.</strong> \(\overrightarrow{AB}+\overrightarrow{AC}=\begin{pmatrix}1\\5\end{pmatrix}\)</p>
<p><strong>4.</strong> \(\overrightarrow{BC}\begin{pmatrix}-5\\-3\end{pmatrix}\), donc \(\overrightarrow{AB}+\overrightarrow{BC}=\begin{pmatrix}3-5\\4-3\end{pmatrix}=\begin{pmatrix}-2\\1\end{pmatrix}=\overrightarrow{AC}\) ✓</p>
</div>
</details>
</div>
<!-- ══ À RETENIR ══ -->
<div class="retenir">
<div class="tag">À retenir</div>
<h3>Résumé essentiel</h3>
<ul>
<li>\(\overrightarrow{AB}\) possède une direction, un sens et une norme \(\|\overrightarrow{AB}\|\).</li>
<li>\(\overrightarrow{AB}=\overrightarrow{CD}\) ⟺ même direction, même sens, même norme.</li>
<li>Relation de Chasles : \(\overrightarrow{AC}=\overrightarrow{AB}+\overrightarrow{BC}\)</li>
<li>Vecteur opposé : \(-\overrightarrow{AB}=\overrightarrow{BA}\)</li>
<li>Coordonnées : \(\overrightarrow{AB}\begin{pmatrix}x_B-x_A\\y_B-y_A\end{pmatrix}\)</li>
<li>Norme : \(\|\overrightarrow{AB}\|=\sqrt{(x_B-x_A)^2+(y_B-y_A)^2}\)</li>
</ul>
</div>
<div class="divider"><span>fin de la capsule</span></div>
<p style="text-align:center;margin-top:1.4rem;font-size:.72rem;color:#aaa;font-family:'JetBrains Mono',monospace;">Mathématiques · 3ème · Géométrie plane · Les Vecteurs</p>
</div><!-- /container -->
<script>
// ══════════════════════════════════════════════
// SHARED DRAWING UTILITIES
// ══════════════════════════════════════════════
const COLORS = {
blue:'#2a5fc8', red:'#c8402a', green:'#1a8a7a',
gold:'#d4963a', ink:'#0f0e0e', gray:'#aaa',
lightBlue:'#dde8f8', cream:'#f2eddf'
};
function setupCanvas(id){
const canvas = document.getElementById(id);
const rect = canvas.parentElement.getBoundingClientRect();
const dpr = window.devicePixelRatio || 1;
const w = Math.min(rect.width, 860);
const h = parseInt(canvas.getAttribute('height'));
canvas.width = w * dpr;
canvas.height = h * dpr;
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
const ctx = canvas.getContext('2d');
ctx.scale(dpr, dpr);
return {canvas, ctx, w, h};
}
function drawArrow(ctx, x1, y1, x2, y2, color='#0f0e0e', lw=2.5, headSize=14){
const dx=x2-x1, dy=y2-y1, len=Math.sqrt(dx*dx+dy*dy);
if(len<4) return;
const ux=dx/len, uy=dy/len;
ctx.save();
ctx.strokeStyle=color; ctx.fillStyle=color; ctx.lineWidth=lw;
ctx.beginPath(); ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.stroke();
const ax=x2-ux*headSize, ay=y2-uy*headSize;
const px=-uy*headSize*0.4, py=ux*headSize*0.4;
ctx.beginPath();
ctx.moveTo(x2,y2);
ctx.lineTo(ax+px,ay+py);
ctx.lineTo(ax-px,ay-py);
ctx.closePath(); ctx.fill();
ctx.restore();
}
function drawPoint(ctx, x, y, color, label, labelPos='top'){
ctx.save();
ctx.beginPath(); ctx.arc(x,y,7,0,Math.PI*2);
ctx.fillStyle='#fff'; ctx.fill();
ctx.strokeStyle=color; ctx.lineWidth=2.5; ctx.stroke();
ctx.fillStyle=color; ctx.font='bold 13px DM Sans,sans-serif';
ctx.textAlign='center';
if(labelPos==='top') ctx.fillText(label,x,y-12);
else if(labelPos==='bottom') ctx.fillText(label,x,y+20);
else if(labelPos==='left') { ctx.textAlign='right'; ctx.fillText(label,x-10,y+4); }
else if(labelPos==='right') { ctx.textAlign='left'; ctx.fillText(label,x+10,y+4); }
ctx.restore();
}
function drawGrid(ctx, w, h, ox, oy, step){
ctx.save();
ctx.strokeStyle='#e8e4dc'; ctx.lineWidth=1;
for(let x=ox%step; x<=w; x+=step){ ctx.beginPath(); ctx.moveTo(x,0); ctx.lineTo(x,h); ctx.stroke(); }
for(let y=oy%step; y<=h; y+=step){ ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(w,y); ctx.stroke(); }
ctx.restore();
}
function dist(a,b){ return Math.sqrt((a.x-b.x)**2+(a.y-b.y)**2); }
function makeDraggable(canvas, points, onMove, margin=20){
let dragging=null;
const scale = ()=> canvas.width / (canvas.Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
14
Requests
4
Domains
419KB
Transfer Size
1327KB
Content Size
636.0ms
Dom Content Loaded
668.0ms
First Paint
1,139.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...