NUS Hackers Wiki
NUS Hackers Wiki
  • NUS Hackers Wiki
  • Hackerschool
    • Virtual Machines and Linux
    • Beginners' Guide to the Terminal
      • Introduction to the Terminal
      • Modern Shell Tools
      • Shell Scripting
      • Real World Scripting
      • Resources
    • Self-Hosting: Three Easy Pieces
      • 1. Setting up your server
      • 2. Running Services
      • 3. Monitoring your server
    • Vim
    • Introduction to Zig
      • Language Basics
      • Error Handling
      • Memory Management
      • Working with C
      • Exploring comptime
    • CI/CD with Github Actions
      • Background
      • Basics of Github Actions
        • Target workflow
        • Running unit tests
        • Linting code
        • Deploying to Github Pages
      • Advanced use cases
        • Pollers
        • Github script
        • Executing third-party scripts
        • Reusable workflows
      • Cookbook
    • Lightning Git
      • Git Concepts
      • Getting Started with Git
      • Making your first commit
      • Branching
      • Merge Conflicts
      • Integrating remote repositories
      • Collaborative Workflows
      • Commit Manipulation and Reflog
      • Interactive rebasing
      • filter-repo
  • Orbital
    • JavaScript
      • Browser Developer Tools
      • Getting Started
      • Datatypes
      • Operators and Operations
      • Loops and Conditions
      • Functions
      • Strings
      • Arrays
      • HTML
        • Getting Started
        • Tag Attributes
        • HTML Forms
        • Browser Inspector
      • CSS
        • Selectors
        • Colors in CSS
        • Measurements in CSS
        • The Box Model
        • Adding Styles - Part 1
        • Adding Styles - Part 2
      • Working with the DOM
        • Querying the DOM - Selectors
        • Querying the DOM - Element Attributes
        • Querying the DOM - Element Styles
        • Events with JS and HTML
        • Exercise: Click Counter
        • Editing the DOM
        • Fetch Requests
        • Exercise: The NUSMods API
    • React
      • Setup
      • State
    • React Native
      • Setup
      • Intro to JSX
      • Basic Syntax
      • Handling UI
      • Props
      • State Management
    • Git
      • Setup
      • Command Glossary
      • Fundamental Concepts
        • Getting Started
        • Integrating Remote Repositories
        • Branching
        • Merge Conflicts
      • Collaborative Workflows
        • Fork and PR Workflow
        • Branch and PR Workflow
      • Advanced Concepts
        • Ignoring Files
        • Commit Message Conventions
        • Github Collaborators
        • CI/CD with Github Actions
        • Advanced Git Commands
      • FAQ
    • Telegram Bot
      • Creating a TeleBot
      • API Calls
      • Telebot Basics
      • Integrating API's
    • Relational Database
      • Database Overview
      • Database Design
      • Entity Relationship Diagram
      • SQL Basics & PostgreSQL
    • TypeScript
      • Types and Interfaces
      • Utility Types
      • Typing Component Props, Events, and Hooks
      • Why You Should Avoid Using any (and What to Do Instead)
      • TypeScript Tricks You’ll Use All the Time in React
Powered by GitBook
On this page
Edit on GitHub
Export as PDF
  1. Orbital
  2. JavaScript
  3. HTML

Browser Inspector

PreviousHTML FormsNextCSS

Last updated 12 months ago

Good, you'll need it.

Press f12 or fn + f12 to open up the Dev Tools. On Firefox, this by default opens the Inspector tab, which is where the page's HTML can be seen. Let's use Google's homepage as an example for now.

You'll see 3 windows in the tab (on Firefox at least).

  1. The leftmost window (in the picture above) contains the HTML of the page. It allows to read the HTML, see elements, look at what tags they are using and what attributes they are assigned, and more. It also allows you to look for hidden elements - elements that aren't visible on the page but are present all the same. You can even edit the HTML by double-clicking at a certain part of the code to change its value temporarily and see (in real time) how it affects the contents of the page.

  2. The middle window allows you to see the CSS properties of a selected element on the page. We'll get into CSS in the next section, and there this will be handy since you can inspect the CSS of any element on any webpage, as well as edit styles to see what effect the changes have on the page in real time.

  3. The rightmost window allows you to see the Box model of a selected element, Flexbox of a selected element and Grid layout of the page. When we get into margin and padding later on, the Box model will become a useful visualising tool, but for now we have nothing to do with it.

If you want to select an element on a page, there are 2 ways. The first is to read through the HTML and try and figure out which element is the one you want. This however, is going to be difficult when pages get long and complicated. Just look at this excerpt from the Google homepage:

The second way, and better, is to use the element picker. You'll notice a cursor icon next to the "Inspector" tab title. This is the element picker.

Click on it, and when you move your cursor over the webpage you'll be able to highlight an element. Click on the element or part of the page you wish to look at in detail, and the element will get selected, showing its style and HTML in the Inspector.

Remember how you can temporarily edit the HTML and CSS of the page? Combine that with the element picker, and you have a powerful set of tools to test out CSS styles and HTML elements in real time for development. Here's an example of me playing around on the Google homepage using these tools:

Once you reload the page, all the temporary changes you make are removed and the page is restored to its original, unaltered state.

Next steps

We've made a pretty nice webpage so far, but it seems... plain. It needs some style, some color, a different font maybe.

In the next section, we'll learn some CSS to add some styling to our page.

Remember how to open the Browser Developer Tools?
Ignore the slow framerate