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
  • Removing distractions
  • Opening the Developer Tools
  • Navigating the Tools Menu
  • Next steps
Edit on GitHub
Export as PDF
  1. Orbital
  2. JavaScript

Browser Developer Tools

PreviousJavaScriptNextGetting Started

Last updated 12 months ago

For this guide, Mozilla Firefox will be our browser of choice because of its powerful, wide-ranging and easy-to-use developer tools. Feel free to use any browser of your choice, keeping in mind that not all features may be available in the same form as with Firefox.

Removing distractions

When first learning JavaScript, it is customary to open a blank page on your browser to give your Browser Console a clean slate. To do so, open a new tab in your browser and type the following:

about:blank

and press enter. You should see a completely blank white (or black, based on your settings) page.

Opening the Developer Tools

To open up the Browser Developer Tools, navigate to a blank page and just use the keyboard shortcut f12 or fn + f12 (based on your keybinds). This should open up the Dev Tools window, which is resizable and can be placed on any side of the screen you want (except the top).

Navigating the Tools Menu

You'll see a few tabs at the top of the window labelled with names like Inspector, Console and Style Editor (depending on the browser). Navigate to the Console tab by clicking on it. You should see a, well, console with your typing cursor targetted on the first line. This is where you will write all your JavaScript code for the first part of this guide.

Next steps

Next you'll get started with using the console to execute some JavaScript code.

Blank page in Firefox (dark mode)
Dev Tools in Firefox
The Console in Firefox