Xavier’s Danger Room Guidelines

Press F12 (Windows) or ⌘+Option+I (Mac). Click the Elements tab. You’ll see the full HTML tree of the page.

Click the arrow icon in the top-left corner of DevTools. Then click anywhere on the page — the Elements tree jumps directly to that element. This is your X-ray vision.

In the Elements tree, expand any element with a ▶. Double-click the text node (the plain words between the tags) to edit the text directly. The page updates instantly.

Double-click an attribute value (like a class or href) to change it in-place. For bigger changes: right-click the element in the tree → Edit as HTML — a text area opens with the full tag and all its children.

Ctrl+Z undoes changes in the Elements panel, one step at a time. Refresh the page (F5) to reset everything back to the original — your Danger Room resets.

Use the cursor picker or click in the tree. The right half of DevTools shows the Styles pane — every CSS rule targeting that element, from most to least specific.

Click the value next to a property (e.g., click #fff next to color). Type your new value — the page updates as you type. Press Tab to move to the next property.

Hover to the left of any property — a checkbox appears. Uncheck it to disable the rule. Check it to re-enable. Use this to test what each rule is actually doing.

In the Styles pane, find the element.style {} block at the very top. Click inside it and type a property and value (e.g., background: hotpink). This adds an inline style that overrides everything else.

When multiple rules conflict, the Computed tab (next to Styles) shows the final winning value for every property. Struck-through properties in Styles are overridden — Computed tells you what actually won.

In DevTools, click the Console tab. Or open it directly: Ctrl+Shift+J (Windows) / ⌘+Option+J (Mac). The > prompt is where you type.

Type any expression and press Enter to see its value. Try document.title to see the page title, or document.URL to see the full URL. The result appears in blue below your command.

Use document.querySelector() to find an element by CSS selector, then change it. Example: document.querySelector('h1').textContent = 'Mutant Training Active';

The Console and Elements panel are connected. document.querySelector('h1').style.color = 'gold'; does the same thing as editing the Styles pane — but you can do it with a single command.

If a page has a global function like draw() (from p5.js apps), you can replace it entirely: paste a new function definition like draw = function() { background(0); ellipse(200,200,100,100); } and press Enter. The page now runs your version instead.

Use the cursor picker and click any element on a TNT page. In the Elements tree, look at the class attribute — you’ll see names like container, btn btn-primary, col-md-6.

In the Elements tree, double-click the class attribute value (the text after class=). It becomes editable. The entire space-separated string of class names is now yours to change.

Position your cursor at the end of the class string, type a space, then type a Bootstrap class name (e.g., shadow-lg, rounded-pill, text-center). Press Enter — the layout updates instantly.

Delete a class name from the string (e.g., remove btn-primary and type btn-success). Press Enter. The change is instant — swapping color classes, sizing classes, or layout classes all work this way.

Press Ctrl+Shift+M to open the Device Toolbar. Drag the viewport width to test breakpoints. A col-md-6 element becomes full-width below 768px — watch it happen live.