DevTools Tips For Sublime Text Users

Addy Osmani
Aug 24, 2015 · 8 min read

Introduction

In this quick write-up, we’ll cover how to take advantage of your existing knowledge of features in Sublime Text and apply them to another powerful tool in your arsenal — the Chrome DevTools.

Image for post
Image for post
The Sources panel in Chrome DevTools can be used as a powerful editor and companion during debugging

Keyboard Shortcuts

Goto Anything

Very similar to Sublime, DevTools has a Goto “Anything” dialog. This can take you to a specific file, a line number or a method definition. You can bring up the Goto “Anything” search using Ctrl/Cmd + P. This lets you search/filter through files just by starting to type in the files name. To search for a method — such as a JavaScript method or a CSS selector, use Ctrl/Cmd + Shift + P and start typing in the method name.

Image for post
Image for post

Goto Line in file

`Ctrl` + `G` will toggle a dialog allowing you to jump to a specific line in a file. If you wish to go to a line in the current file, bring up the dialog and type in a colon followed by the line number you are interested in. For example, :25 will take you to line 25. If you wish to go to a line in a different file, type in the file name, a colon and then the line number (e.g app.js:25).

Image for post
Image for post

Go to the start or end of a line

Go to end of a line: `Alt` + `Right` or `Cmd` + `Right`
Go to the start of a line: `Alt` + `Left` or `Cmd` + `Left`

Go to start or end of a file

Go to the start of a file: `Alt` + `Up` or `Cmd` + `Up`
Go to the end of a file: `Alt` + `Down` or `Cmd` + `Down`

Go one word left or right

Go one word left: `Ctrl`+ `Left` or `Alt` + `Left`
Go one word right: `Ctrl` + `Right` or `Alt` + `Right`

Go up or down a line

Go up a line: `Up`
Go down a line: `Down`

Using Carets / Multiple Cursors

A caret is that blinking line that indicates where you’re typing at the moment. Similar to Sublime Text, DevTools can have as many carets as you want.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Jump to matching brackets

When working with non-complex pieces of code, you might find it tricky to find corresponding opening and closing brackets with your naked eye. `Ctrl` + `M` allows you to instantly move your cursor there. Using it twice will jump to its opening or closing counterpart.

Image for post
Image for post

Indentation

We know the importance of indentation. It helps keep our code readable and easy to understand. To increase or decrease the current line’s indent, use the shortcuts below:

Image for post
Image for post

Quickly comment your code

If you need to comment/uncomment a piece of code, the same shortcuts you would use for this in Sublime Text also apply:

Image for post
Image for post

Toggle Autocompletion

When typing values in the DevTools Sources panel, you’re presented with autocompletions as you type. If however you dismiss these and would like to manually toggle autocompletion, you can do so with:

Image for post
Image for post

Cut/Copy/Paste/Undo/Redo

You can cut, copy and paste text using the same shortcuts you’re used to in other editors:

Increment and Decrement values

Note: ⇞ and ⇟ are page up and page down. On an Apple keyboard, you can page up/down by holding fn + ↑/↓

Image for post
Image for post
Image for post
Image for post

Cycle through editing locations

DevTools can now also preserve your position cursor history in Sources. This lets you cycle through your previous editing locations using Alt- and Alt+:

Image for post
Image for post

Shortcuts page

If you’ve found the above shortcuts helpful, you can pull most of them up via the DevTools settings menu. It looks a little like this:

Image for post
Image for post

Source Settings

The Settings page also allows you to configure how the editor behaves. This includes customizing the default indendation, toggling bracket matching, autocompletion and the display of whitespace characters.

Image for post
Image for post

Themes

Similar to your editor, the DevTools UI can also be customized (the theming for the syntax highlighting, the colors across each of the panels, the look of UI elements like tabs). Some of these themes make intelligent use of color to highlight the key pieces of UI in DevTools without taking your focus away from the code.

Image for post
Image for post
The ZeroDarkMatrix theme
  • Open chrome://flags ▶ Enable Developer Tools experiments and click “Relaunch Now” at the bottom.
  • Open developer tools settings ▶ Experiments ▶ [✔] Allow custom UI themes.

Quick bonus tip

DevTools also supports a few nice debugging helpers that can further augment your daily editing & debugging workflow. For instance, while debugging you can preview the inline values of JavaScript variables at the current point in time. Super powerful.

Image for post
Image for post
Display values inline while you’re debugging (see the blocks highlighted in orange). Enabled via Settings > Sources > Display variable values inline while debugging

Wrapping up

We hope you’ve found these DevTools tips helpful!.

Google Developers

Engineering and technology articles for developers, written…

Addy Osmani

Written by

Eng. Manager at Google working on Chrome • Passionate about making the web fast.

Google Developers

Engineering and technology articles for developers, written and curated by Googlers. The views expressed are those of the authors and don't necessarily reflect those of Google.

Addy Osmani

Written by

Eng. Manager at Google working on Chrome • Passionate about making the web fast.

Google Developers

Engineering and technology articles for developers, written and curated by Googlers. The views expressed are those of the authors and don't necessarily reflect those of Google.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store