DevTools Tips For Sublime Text Users

Addy Osmani
Aug 24, 2015 · 8 min read

Introduction

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

Keyboard Shortcuts

Goto Anything

Goto Line in file

Go to the start or end of a line

Go to start or end of a file

Go one word left or right

Go up or down a line

Using Carets / Multiple Cursors

Jump to matching brackets

Indentation

Quickly comment your code

Toggle Autocompletion

Cut/Copy/Paste/Undo/Redo

Increment and Decrement values

Cycle through editing locations

Shortcuts page

Source Settings

Themes

The ZeroDarkMatrix theme

Quick bonus tip

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

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.