DevTools Tips For Sublime Text Users
By Addy Osmani and Wes Bos. Translated by Kai, Korea
introduce
This article will show you how to apply familiar Sublime Text techniques to another powerful tool, Chrome DevTools.
Modern tools such as DevTools, JSBin, and Codepen all use CodeMirror as their internal code editor, making keyboard bindings like those found in Sublime Text easy to implement.
The following introduction is mainly used in the Sources panel in DevTools. If you set Workspace in the Sources panel, you can use it directly as a powerful editor built into your browser.
Keyboard shortcuts
Any jump
Like Sublime, DevTools has a Goto “Anything” search box. It allows you to jump to a specified file, line number, or method definition. Use Ctrl/Cmd + P to bring up the search box to search or filter file names. Use Ctrl/Cmd + Shift + P to bring up the search box to search for methods — such as JavaScript methods or CSS selectors.
Line to jump
Ctrl + G brings up a search box that allows you to jump to the specified line in the file. If you want to jump to a line in the current file, type the line number after the colon in the search box. If you want to jump to another file, enter the filename, colon, and line number (e.g. App.js :25).
Jumps to the beginning or end of a line
Skip to end of line: Alt + Right or Cmd + Right
Skip to the beginning of the line: Alt + Left or Cmd + Left
Jump to the top or end of the file
Skip to the beginning of the file: Alt + Up or Cmd + Up
Skip to the end of the file: Alt + Down or Cmd + Down
Skip a word to the left or right
Move a word to the Left: Ctrl+ Left or Alt + Left
Move a word Right: Ctrl + Right or Alt + Right
One line up or one line down
Up line: Up
Next line: Down
Use multiple cursors
The cursor flashes to represent the position you are entering. Like Sublime Text, DevTools can use multiple cursors.
Add multiple cursors
Open the file in the Sources panel, press Cmd/Alt, then click on all the places you want to edit.
For example, if you have multiple lines of JavaScript code that need to be prefixed, edited, or flanked by quotes, multiple cursors can easily be done at once.
The following steps can quickly select multiple lines:
- Click on the first line
- At the same time hold down the
⌘和Option - Drag the mouse over the remaining row
Each line now has a cursor.
Use multiple cursors from the beginning of the line
Use Cmd + ← (Alt + ← on Windows/Linux) to move all the cursors to the top of the line at the same time, and then use the arrow keys while holding down Option to skip words. Before you reach the name you want to change, enter the prefix.
Add quotation marks or parentheses at both ends
Use Alt + Shift + ← (Ctrl + Shift + ← on Windows/Linux) to select the word to include, and then enter a single quotation mark or open parenthesis. DevTools will enclose the selected portions in quotes or parentheses.
Column selection
The cursor can also be selected by column in the text. Hold Alt and then click and drag the area you want to select. DevTools will highlight this area and you can copy or edit it.
Multi-cursor selection matches the word
The cursor can also be used to highlight specific words. Select a word (such as a variable, method, or any actual word) in the editor. DevTools highlights all the same words with a border.
Press Cmd + D (or Alt + D) and DevTools will highlight the next matching word in a multi-cursor format. This is especially useful in batch rename operations.
Jump to the other end of the bracket
In complex code blocks, you will often find it difficult to find the other end of the bracket directly with the naked eye. Use Ctrl + M to move the cursor there quickly. Continuous use can jump back and forth.
The indentation
We know the importance of indentation. It makes code readable and easy to understand. To increase or decrease the indentation of the current line, use the following shortcut keys:
Add indentation: Tab
Reduce indentation: Shift + Tab
Quick comment code
If you need to comment or uncomment a piece of code, use the same shortcuts as in Sublime Text:
Cmd/Ctrl + /
Uncomment: Cmd/Ctrl + / run again
This works for all languages, single or multiple lines.
Done automatically
In the Sources panel of DevTools, an auto-complete prompt is displayed as you type. If you ignore them and want to call autocomplete manually, you can do this:
Ctrl + Space
Cut/copy/paste/Undo/redo
The shortcut keys for cutting, copying, and pasting text are used the same as any other editor:
Cut: Cmd + X Copy: Cmd + C Paste: Cmd + V Undo: Cmd + Z Soft Undo: Cmd + U Redo: Cmd + Y
Increase or decrease the value
Note: ⇞ and ⇟ represent the up and down page turning keys respectively. On an apple keyboard, you can use fn + ↑/↓ as a page turning key.
In the Sources panel, you can select a numeric value and use the keyboard to increase or decrease the value. Select this value and then:
Add 1 CSS: Option + ↑ Reduce 1 CSS: Option + ↓ Add 10 CSS: Option + ⇟ Reduce 10 CSS: Option + ⇟
The Styles palette also supports this shortcut:
Add 1: ↑ decrease 1: ↓ increase 10: ⇞ or registering + ↑ decrease 10: ⇟ or registering + ↓ increase 100: registering + ⇞ decrease 100: registering + ⇟ increase 0.1: ⇟ + decrease 0.1: enter + ↓
Edit position jumps forward and backward
DevTools also keeps your cursor position history in the Sources panel. Use Alt – and Alt + to jump back and forth between the last edit and the next:
Shortcut list
If you find the above shortcuts useful, you can find most of them in the Settings menu in DevTools. Its location is here:
Source panel function Settings
The Settings screen also lets you set the behavior of the editor. This includes customizing default indentation, bracket matching, auto completion, and displaying whitespace characters.
DevTools theme
Like other editors, DevTools allows you to customize the theme of the interface (syntax highlighting, panel colors, the appearance of UI elements). Some themes use color wisely to highlight key parts of the interface without distracting you from the code.
Here are a few DevTools themes we picked:
How to install a theme:
- Install a theme from the Chrome Web Store
- Open Chrome ://flags, start Developer Tools Experiments, and restart the browser.
- Open Experiments in the DevTools setup and check Allow Custom UI Themes (you may need to restart the browser again).
Okay, so here comes the theme. Themes can be found in many places, including the Web Store, DevThemez.com, and GitHub.
Bonus
DevTools also supports some handy debugging features to help you further improve your daily editing and debugging workflow. For example, when debugging, you can preview the inline values of JavaScript variables in the current session. Very powerful.
summary
Hope you found these DevTools tips helpful!
The equivalents of Sublime Text that we describe here are also available in other editors. We encourage you to take the time to learn these shortcuts in common applications. They are very powerful helpers and can make a huge difference to your workflow.
If you’re eager to learn more and continuously improve your workflow, check out our Sublime Text Book + Videos, which are available for $11 off with code DEVTOOLS. You can also check out the first episode of our Totally Tooling Tips video series on the Sublime Text plug-in.