Browser

Inspect Elements

• Video guide – How to Inspect Element & change text on a website
• Geeks for Geeks – Browser Developer Tools
• Dev.to – Dev Tool Tips

---

---

Choose a website

Pick a website that you're drawn to: a website that you want to understand. (Note that not all websites might be compatible with this exercise — try to choose something that is filled with text and images rather than heavy interactivity.)

Some example websites to try:
https://forecast.weather.gov/
https://en.wikipedia.org/wiki/Province_flowers_of_Sweden
https://appletreeinnlenox.com/
https://nice.rocks/
http://www.goodroombk.com/

---

Milestone 1: Editing text

First, let's get familiar with how to access developer tools.

Open the developer tools by pressing F12 or Ctrl+Shift+I (Windows) or Cmd+Option+I (Mac).

Click on the Elements tab to view the HTML and CSS of the page.

First, try to edit text:
Highlight and right-click on a portion of text on the page, inspecting from there. You should be able to then see that bit of text in the developer tools window.

Now, keep double-clicking into the element in the developer tools pane — you should be able to edit its contents. Hit Enter to see the changes, after typing.

Milestone 2: Duplication & Deletion

Trying adding copies of existing elements, and deleting copies of other elements entirely.

Where do you notice repeated structures, if any? How are you altering the rhythm of a page?

Milestone 3: Editing styling

Now, use the 'Computed' and 'Styles' tabs to alter the styling of elements. Start with simple changes, like on colors or position — before playing with other properties.

With some code selected, look at the 'Computed' tab to see all the properties that are being applied to it. Then, you'll click the → next to a property's value, bringing you to the Styles tab.

Changing the 'Computed' properties generally change an element directly; changing the source 'Styles' properties might apply changes on several element at once.

As you make these changes, consider how it feels to be in control of a page. What are you attempting to alter, reveal, redact? What type of voice are you looking to impose? Are you rewriting a page, continuing it, or making it entirely your own?

Consider these questions as you think about your usage of every other website you're on — social platform or not...

Console

• perfectly emulated human body
• All about computer love

Prompting Scripts

Optional, AI-assisted creativity workflow

To find scripts for your console, you can either write them from scratch, re-use existing ones, or you can try getting AI to assist writing scripts for you. This is a common workflow for many developers and artists — and we want to give you the option to explore it, if you're open to it.

Steps

1. Go to an AI assistant: On a new tab, go to chatgpt.com, or use your own code generator of choice.
2. Prompt it for a script: Ask it to write a script for you, with something like the prompt below.
   
   Example prompt:
   Write a self-contained JavaScript function I can paste into the browser console to [describe the effect you would like to do here]. Include error handling and make it work across different sites."
   
   For example, I can prompt it like: Write a self-contained JavaScript function I can paste into browser console to darken the page, turning the area around my cursor into a flashlight. Include error handling and make it work across different sites."
3. Copy-paste the script it generates into the console of your chosen tab.
   
   Example output (flashlight):
   function createFlashlight() { try { // Check if overlay already exists and remove it const existingOverlay = document.getElementById('flashlight-overlay'); if (existingOverlay) { existingOverlay.remove(); console.log('Flashlight effect removed'); return; } // Create overlay element const overlay = document.createElement('div'); overlay.id = 'flashlight-overlay'; overlay.style.cssText = ` position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.85); pointer-events: none; z-index: 999999; transition: none; `; // Create radial gradient for flashlight effect let mouseX = window.innerWidth / 2; let mouseY = window.innerHeight / 2; const flashlightSize = 150; // Radius of the light circle function updateFlashlight(x, y) { const gradient = `radial-gradient(circle at ${x}px ${y}px, transparent 0px, transparent ${flashlightSize * 0.6}px, rgba(0, 0, 0, 0.3) ${flashlightSize * 0.8}px, rgba(0, 0, 0, 0.85) ${flashlightSize}px)`; overlay.style.background = gradient; } // Mouse move handler function handleMouseMove(e) { mouseX = e.clientX; mouseY = e.clientY; updateFlashlight(mouseX, mouseY); } // Touch move handler for mobile function handleTouchMove(e) { e.preventDefault(); if (e.touches.length > 0) { mouseX = e.touches[0].clientX; mouseY = e.touches[0].clientY; updateFlashlight(mouseX, mouseY); } } // Keyboard handler to toggle or exit function handleKeyPress(e) { if (e.key === 'Escape' || e.key === 'f' || e.key === 'F') { removeFlashlight(); } } // Remove flashlight function function removeFlashlight() { try { document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('touchmove', handleTouchMove); document.removeEventListener('keydown', handleKeyPress); overlay.remove(); console.log('Flashlight effect removed'); } catch (err) { console.warn('Error removing flashlight:', err); } } // Add event listeners document.addEventListener('mousemove', handleMouseMove); document.addEventListener('touchmove', handleTouchMove, { passive: false }); document.addEventListener('keydown', handleKeyPress); // Set initial position updateFlashlight(mouseX, mouseY); // Add overlay to page document.body.appendChild(overlay); // Store cleanup function globally for manual removal window.removeFlashlight = removeFlashlight; console.log('Flashlight effect activated! Move your mouse to control the light.'); console.log('Press Escape or F to exit, or run createFlashlight() again to toggle.'); } catch (error) { console.error('Error creating flashlight effect:', error); // Fallback cleanup in case of errors try { const overlay = document.getElementById('flashlight-overlay'); if (overlay) overlay.remove(); } catch (cleanupError) { console.warn('Error during cleanup:', cleanupError); } } } // Run the function createFlashlight();

   ---

   My script in action:
   
4. Feel free to continue chatting with it to make any tweaks. It's good to also save each version of the script generated, if there are any drastic changes.

Bookmarklets

Now, how can you use all these scripts together, as if you were using your entire browser as an instrument? Copy-pasting into the console alone is a bit clunky, so we're going to create bookmarklets that make things a bit more ergonomic and easy to use.