Use Sophia to knock out your gen-ed requirements quickly and affordably. Learn more
×

Introduction to GDB Online Interface

Author: Sophia

what's covered
Software developers rely on integrated development environments (IDEs) to write, run, and manage their code. This lesson introduces GDB Online, the browser-based development environment used throughout this course. You will explore how to create a GDB Online account and examine the key components of the interface, including the tools used to write, execute, and review C++ programs. Becoming familiar with the development environment will help you navigate and complete programming activities more effectively. Specifically, this lesson will cover the following:

Table of Contents

1. Introduction to GDB Online

In this course, you will write C++ programs, run them, and see what they produce. To do all of that, you need a workspace. GDB Online is that workspace. It puts everything you need in one browser window so you can start writing code immediately.

GDB Online is a free, browser-based development environment used to write, compile, and run C++ programs. Because it runs in a web browser, no software installation is required. You can access the workspace from any device with an internet connection.

GDB Online is also an integrated development environment, or IDE. An IDE combines tools for writing, compiling, and running programs in one place. The GDB Online workspace includes several components that you will use throughout this course.

Screenshot of the GDB Online workspace with five key components labeled: Run Button, Language Selector Dropdown, Code Editor Pane, Line Numbers, and Input/Output Console.
Annotated screenshot of the GDB Online workspace, with the five components covered in this lesson labeled.

try it
Visit the GDB Online workspace and familiarize yourself with the interface.

  1. Open a web browser.
  2. Go to GDB Online.
  3. When the page loads, take a moment to look at the layout. Notice the different areas of the screen.
You will explore each of these areas in the sections that follow.

terms to know
GDB Online
A free, browser-based development environment that allows you to write, compile, and run programs in multiple languages, including C++, without installing any software on your computer.
Integrated Development Environment (IDE)
A software environment that combines a code editor, a compiler, and an output panel in one place, so you can write and test code without switching between separate applications.


2. Creating a GDB Online User Account

You can use GDB Online without creating an account, but your work will not be saved after you close the browser tab or end your session. Creating a free account allows you to save your projects to your profile and access them again later from any device.

Saving projects also makes it easier to continue your work throughout this course because each project is stored in your account and can be reopened whenever you sign in.

The following table compares how GDB Online handles your work depending on whether you are logged in.

Question No Account Logged In
Has work been saved between sessions? No, the browser closes and the editor resets. Yes, files are saved to your profile.
Can you name and organize your projects? No Yes
How do you know your session is active? You cannot tell. Your username appears in the left menu panel, replacing the Sign Up/Login links.
What happens if you close the tab early? Your code will be gone. Your saved files will be waiting for you in the next session.

try it
Create your free GDB Online account so your work is protected from the first session.

New to GDB Online? Follow these steps:

1. Go to GDB Online.

2. In the left menu panel, select Sign Up.

The GDB Online left menu panel with the Sign Up link marked, showing where a new user clicks to start creating an account.

3. Enter your name, email address, and password, then follow the email verification steps.

4. Once registered, select Login from the left menu panel and sign in.

5. After logging in, confirm that your username appears in the left menu panel, replacing the Sign Up or Login links. That confirms that your session is active.

Already have a Google account? Select Login from the left menu panel and choose the Google option to sign in. You do not need to complete the registration form.
How can you confirm that your GDB Online session is active?
After logging in, your username appears in the left menu panel, replacing the Sign Up or Login links. If you notice the Sign Up or Login links instead, you are not logged in.


3. The GDB Online IDE

Once your account is set up, take a closer look at the workspace. The parts of GDB Online fall into three groups: the toolbar controls at the top, the main areas where you write and view code, and the editor features that make writing code easier.

At the top of the screen is a toolbar with two controls you will use in every session.

The Run button compiles and runs your program in one click. When you click it, GDB Online checks your code, runs it, and shows the result.

The Language Selector controls which programming language GDB Online uses when it processes your code. Before clicking Run, check this drop-down near the top of the toolbar. You will see options for several programming languages and multiple versions of C++. For every program in this course, select the option labeled simply “C++.” Do not select a version-specific option. If a different programming language is selected, the compiler will not recognize your C++ code and will return errors. If a specific C++ version is selected instead of the default, your program may behave differently than expected. Checking this setting at the start of each session takes 1 s and prevents a common source of confusion.

Below the toolbar are the two areas where you spend most of your time. The code editor pane is the large text area where you type your code. It works like a text editor where you can click anywhere and start typing, but it includes features designed specifically for programming.

The input/output console, usually called the console, shows whatever your program produces after you click Run. Depending on your screen size, it appears either below or to the right of the code editor. It looks different from the editor—with a different background color and no line numbers—because it serves a different purpose.

The console and the code editor are separated by a draggable divider bar. You can drag that bar to adjust the size of either area. If a program produces a lot of output and you need more room to read it, drag the divider to give the console more space. If you need more room to type code, drag it the other way.

EXAMPLE

When you click Run on a working program, the output appears in the console. If your program has a line that prints “Hello, world!” that exact text appears in the console after the program finishes. The console keeps that text on screen until you click Run again.

The code editor includes a few features that make writing code easier.

Line numbers appear along the left edge of the editor. Every row gets its own number, starting from 1 at the top and increasing as you add code. They help you find specific lines quickly.

Syntax highlighting shows your code in different colors. Different types of code elements appear in different colors, which makes your code easier to read and helps you spot mistakes. These colors do not change how your program runs; they are purely a visual aid.

The editor also handles indentation—the spacing at the start of each line—automatically. When you press Enter, the cursor moves to the correct starting position for the next line. This keeps your code organized without you having to add spaces by hand.

With the GDB Online workspace mapped out, you have everything in place to start writing code. The next step is putting it into practice: writing, compiling, and running your first C++ program.

terms to know
Code Editor Pane
The main text area in GDB Online, where you type your source code.
Input/Output Console
The panel in GDB Online where program output appears after you click Run.
Line Numbers
Numbers along the left edge of the code editor that label each row of code, making it easy to find specific lines.
Syntax Highlighting
A feature that shows different types of code in different colors, making the code easier to read and helping you spot mistakes at a glance.

summary
In this lesson, you were introduced to GDB Online and its role as a browser-based environment for writing and testing C++ programs. You then learned about creating a GDB Online user account, gaining access to features that support saving and managing your work. Finally, you explored the GDB Online IDE, becoming familiar with the development environment’s interface and tools so you could confidently navigate, edit, run, and manage programs in future lessons.

Source: THIS TUTORIAL WAS AUTHORED BY SOPHIA LEARNING. PLEASE SEE OUR TERMS OF USE.

REFERENCES

OnlineGDB. (n.d.). Home - GDB Online. www.onlinegdb.com

Terms to Know
Code Editor Pane

The main text area in GDB Online, where you type your source code.

GDB Online

A free, browser-based development environment that allows you to write, compile, and run programs in multiple languages, including C++, without installing any software on your computer.

Input/Output Console

The panel in GDB Online where program output appears after you click Run.

Integrated Development Environment (IDE)

A software environment that combines a code editor, a compiler, and an output panel in one place, so you can write and test code without switching between separate applications.

Line Numbers

Numbers along the left edge of the code editor that label each row of code, making it easy to find specific lines.

Syntax Highlighting

A feature that shows different types of code in different colors, making the code easier to read and helping you spot mistakes at a glance.