Tour of Xcode

Now that you’ve got Xcode installed and downloaded any extra components, it’s time to get a tour. You’ll begin where you left off in the last section, at the Welcome to Xcode window.

Welcome to Xcode

When Xcode launches, you’ll be greeted with its welcome screen. Because you’ve just installed Xcode, it looks empty.

Over time, shortcuts to your most recent projects will appear in the right pane so you can open them quickly. The three buttons on the left are shortcuts for the most common ways to start a new project.

If you’re trying to follow along, click the close button in the top left corner of the window. It might look like you just closed Xcode, but notice the menu bar at the top of your screen still says Xcode. For this first tour, you don’t need a lot of distractions, so you’ll start by creating a single Swift file.

Start with File ▸ New ▸ File, and on the template screen, click Next to accept the defaults. Now, choose a name and location for your file and click Create.

Xcode will show you a window with some text but not much else. As a developer, you’ll spend hours writing and editing your Swift files in this main window. This main window with your code is the Editor area.

Writing software involves a lot of typing. Whenever you have to take your hands off the keyboard to reach for the mouse, it can break your concentration and rhythm. Xcode provides keyboard shortcuts for most functions. Try to memorize the shortcuts for things you do regularly as you work. You’ll be much more efficient.

Navigators

Press Command-1, and Xcode shows the Navigator area with the first tab selected. The Navigator area has nine tabs you can jump to by pressing Command-1 through Command-9. You can also use Command-0 to show and hide the Navigator area. As you can tell from the name, the Navigator area is for navigating your project in different ways.

1. Project: Shows all of the files in your project and lets you add, delete, and group them. Selecting a file opens it in an appropriate editor.

2. Source Control: When your project is under source control, like Git, all changes to the working copy appear here. You’ll also find your branches, remotes, tags, and stashed changes.

3. Bookmark: You can add bookmarks to files or specific lines in a file, and they’ll appear here. Selecting a bookmark jumps to that location in your project.

4. Find: Search your project for specific text here. You can also use the controls above and below the text search box to focus the search and to recall prior searches. Once you have results, selecting one opens the editor at that location.

5. Issue: Any errors or warnings appear here when you compile your code into an app. When your app is running, any runtime issues also appear here. Selecting one of the warnings opens the editor to show the code that generated the warning.

6. Test: This shows test results and lets you create and manage unit and UI tests.

7. Debug: When your app is running, this will show CPU, memory, disk, and network statistics. When your app crashes or the debugger pauses it, you’ll also find the stack trace here.

8. Breakpoint: As you create breakpoints in your code, you can edit, manage, and delete them from here.

9. Report: Xcode generates different logs whenever you build your code into an app. You can view and export them from this navigator.

At the bottom of each navigator, you’ll find a filter for that navigator’s list. You can enter text to filter. If there are any icons on the right side of the text window, those are pre-defined filters. Hover over them with your mouse to get a description.

To the left of most filters is a plus or circle icon containing a context menu for adding and other common tasks. It’s important to note that the filters stay active until you turn them off. So, check the filter if you open a navigator and can’t find something that you know must be in the list.

You can close the Navigator area by pressing Command-0.

Inspectors

While you use Command to work with the navigators, you use Command-Option to work with the inspectors. Command-Option-0 shows or hides the area on the right, the Inspector area. The inspectors change depending on what kind of file is open and even what element is selected in the main Editor area. At most, five inspectors appear.

You can access the different inspectors using Command-Option-1 through Command-Option-5.

1. File: This gives data about the actual file, similar to using Get Info in the Finder.

2. History: When a file is monitored by source control, the history of changes appears here. Selecting a change displays that change and the current state of the file so you can compare the differences.

3. Quick Help: When you select a token name in your source code file, the short form of the related documentation appears here. You can then open the long form of the documentation if you need it.

4. Accessibility: For tokens in your code that display in the UI, any accessibility information appears here.

5. Attributes: Graphical and other files in the Asset catalogs and tokens displayed in the UI have extra attributes or controls that appear here.

The Attributes inspector, the last one in the image above, is Command-Option-4, and the Accessibility inspector, the second to last, is Command-Option-5. This is because in some older file types that aren’t used much anymore, like storyboards, there were up to seven inspectors and the File, History, Quick Help, and Attributes inspectors retain the keyboard shortcuts they’ve always had.

Debug Area

The pane at the bottom is the Debug area. It usually stays hidden when you’re writing your code. When your code is running, it automatically appears. You can show or hide it using Command-Shift-Y.

The Debug area shows the console and the variables. The console generates messages the entire time your app runs, but the variables section only has information when you’ve paused your app. Have you ever used the print() command in a Swift playground? That’s the console.

You can have your code print messages to the console as it runs, and the system will print its own messages. Xcode saves the contents of the console every time your app runs. You can review console logs from the Report navigator.

Editor

Now that you’ve gone all around the edges of the window, it’s time to focus on the main area, the Editor.

The editor is where you write all of your code. You can see the line numbers on the left side beside the gutter. You’ll click the gutter to set breakpoints and manage code folding as your app gets more complicated.

Across the top of the editor, the squarish button in the left corner is the Related Items navigator. Think of it as a dynamic project navigator because it gives you shortcuts to all of the files Xcode thinks you might want to visit from the current file.

Next to that, the two arrows that look like forward and back controls let you navigate your history just like an Internet browser. You’ll see a tab for the current file next. As you open more files, their tabs will appear along the top.

On the right side, the two arrows are used for code reviews when your project is under source control. The next button is a context menu for the Editor to help you change some of its properties. The last button splits the screen so that you can open two files at once.

Underneath this toolbar, you’ll find the Breadcrumb view. It’s another way to navigate the project without opening the Project Navigator. Control-6 is a handy keyboard shortcut to use with this view. It opens a menu showing all the declarations of variables and functions in the current file. Selecting one will jump to its place in the file. That’s quite helpful with large files!

The cooler part of this menu is that it filters itself if you start typing. But the coolest part of this menu is that it does partial matches when it filters, so you don’t need to remember the exact name of a declaration to find it.

Settings

The last stop on this Xcode tour is navigating to Xcode ▸ Settings. Later in the lesson you’ll explore this area more, but for now, here are the Themes settings.

Xcode provides several preset themes you can switch to at any time. When you’re giving a videoconference presentation and need a bigger font, switch to one of the Presentation themes. Once you get older, you might find yourself using a presentation theme all the time. :]

You can make your own theme using the plus button at the bottom left. Often, it’s easier to find one that’s close to what you want and tweak it a little.

There are many themes on the Internet that other developers have shared. Xcode themes are stored as .xccolortheme files. With a little snooping around on GitHub or similar sites, you can ensure your Xcode looks just as you want.

Next, take a look at the Key Bindings tab.

Here, you can see all Menu options and Text commands that accept key bindings and change the current bindings. For example, perhaps you want to rearrange the inspectors. You can also make new bindings for any command that doesn’t have one. Double-click the right side of the pane to make a text box appear and update the binding.

Wrap up

Though you’ve seen a lot of Xcode, you’ve only scratched the surface. This tour was just an introduction. Over the next few sections and lessons, you’ll explore some other parts of Xcode. The Xcode documentation can help you if you get stuck. Going to Help ▸ Xcode Help brings you to the Xcode section of the Developer documentation. There are lots of articles and instructions.

In the next section, you’ll see a video demo tour of Xcode to highlight most things from this section and a few others.