DevTools Tips For Text Editor Users
Introduction
In this quick write-up, we’ll cover how to take advantage of your existing knowledge of features in Text Editors like VSCode or Sublime Text and apply them to another powerful tool in your arsenal — the Chrome DevTools.
Thanks to several modern tools including DevTools and Codepen relying on the excellent CodeMirror editor, keyboard bindings like those in Text Editors are more readily available elsewhere than they have been.
Let’s assume for the rest of this write-up that we’ll primarily be working inside the DevTools Sources panel — a feature which, when paired with Workspaces gives you a powerful in-browser editor.
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.
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).
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 Text Editors, DevTools can have as many carets as you want.
Adding multiple Carets
You can start playing with carets by opening any supported file in Sources, then selecting each line by holding down `Cmd`/`Alt` and clicking wherever you would like to add a new caret.
For example, if you have multi-line JavaScript that needs to be prefixed, edited or wrapped in quotes, multiple carets can make this a breeze.
The following steps will quickly get every line selected:
1. Click on the first line
2. While holding down `⌘` and `Option`
3. Drag your mouse through the rest of the lines
You should now have a cursor somewhere on each line.
Use multiple carets from the front of a line
Use `Cmd` + `←` ( `Alt` + `←` for Windows/Linux) to bring all cursors to the front of the line, and then hold down `Option` while using the arrow keys to jump by word. When in front of the file name, simply type in your prefix and you’re done!
Wrap with Quotes or Brackets
Highlight the words with `Cmd` + `Shift` + `←` ( `Ctrl` + `Shift` + `←` for Windows/Linux) and type an opening quote or bracket. Dev tools will wrap each word in the selected quote or bracket.
Column selection
Carets can similarly be used for selecting custom columns of text. Hold down `Alt` and then click and drag over the region of text you would like to select. DevTools will highlight the area and you can now copy or edit it as needed.
Carets and matching words
Carets can also be used for highlighting specific words. Select a word in your editor (it can be a variable, method, or anything really). DevTools will highlight other instances of this word with a border around them.
Now use `Cmd` + `D` (or `Alt` + `D`) and DevTools will highlight and place multiple cursors on the matching words. This is particularly useful during batch rename operations. Hitting D a few more time while still holding ⌘ selects the next instance of the selection found. By hitting ⌘, then D three times, you can select three iterations of the text.
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.
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:
Indent text: `Tab`
Unindent text: `Shift` + `Tab`
Quickly comment your code
If you need to comment/uncomment a piece of code, the same shortcuts you would use for this in Text Editors also apply:
Comment text: `Cmd`/`Ctrl` + `/`
Uncomment text: `Cmd`/`Ctrl` + `/` on the same section of text.
This works across all languages and works pretty well with lines or whole selections.
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:
`Ctrl` + `Space`
Cut/Copy/Paste/Undo/Redo
You can cut, copy and paste text using the same shortcuts you’re used to in other editors:
Cut: `Cmd` + `X`
Copy: `Cmd` + `C`
Paste: `Cmd` + `V`
Undo: `Cmd` + `Z`
Soft undo: `Cmd` + `U`
Redo: `Cmd` + `Y`
Increment and Decrement values
Note: ⇞ and ⇟ are page up and page down. On an Apple keyboard, you can page up/down by holding fn + ↑/↓
In the Sources pane, you can select a numeric value and easily increment or decrement the value using your keyboard. Highlight the value and then:
Increment CSS unit by 1: `Option` + `↑`
Decrement CSS unit by 1: `Option` + `↓`
Increment CSS unit by 10: `Option` + `⇟`
Decrement CSS unit by 10: `Option` + `⇟`
The Styles pane also supports shortcuts for incrementing/decrementing values.
Increment value: ↑
Decrement value: ↓
Increment by 10: ⇞ or ⇧↑
Decrement by 10: ⇟ or ⇧↓
Increment by 100: ⇧⇞
Decrement by 100: ⇧⇟
Increment by 0.1: ⌥↑
Decrement by 0.1: ⌥↓
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+:
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:
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.
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.
Some of our choice picks for DevTools themes are the following:
- https://github.com/mauricecruz/chrome-devtools-zerodarkmatrix-theme
- https://github.com/xero/greybeard-devtools
To install a theme:
- Install it from the Chrome Web Store
- Open chrome://flags ▶ Enable Developer Tools experiments and click “Relaunch Now” at the bottom.
- Open developer tools settings ▶ Experiments ▶ [✔] Allow custom UI themes.
Boom. You should be good to go. Themes can be found in a number of places, including the Web Store, DevThemez.com and GitHub.
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.
Wrapping up
We hope you’ve found these DevTools tips helpful!.
Many of the Text Editor equivalents we’ve covered here work equally as well in other editors and we encourage you to spend time learning about the shortcuts in apps you use regularly. They’re powerful stuff and can make a HUUUGE difference to your workflow.
Heartz ❤
Addy Osmani and Wes Bos
![Addy Osmani](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><rect fill-opacity="0"/></svg>){kind=small}
