DevTools Tips for Sublime Text Users

A Word on DevTools

Are you a Sublime Text Users? Yes. So, this post is for you where we will study how to wrap text in sublime text using different tools. And, our focus of study today is going to be the Chrome DevTools.

DevTools is a very dynamic and cool tool that is available with the help of programmers all around the world. Apart from DevTools plenty of other cool tools are present, like JSBin and Codepen. The options of keywords binding are one of the fruitful advantages of these tools and that’s why let’s explore the tips of the DevTools in context of the Sublime Text.

Keyboard Shortcuts

 

  • Goto Anything

 

Just like Sublime, DevTools also has the Goto Anything option. Using DevTools Goto Anything option you can search any file, particular line, and method definition. You just have to click on the Goto Anything option and search for your file or can use keyboard shortcut Ctrl/Cmd + P.  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

 

This shortcut will take you to the line which you want to explore. Just use “Ctrl” + “G” keys and you will see the dialog box in front of you. Then, enter the number of lines which you want to appear in the colon and then you will be redirected to that line. For example, :27 if you want to go-to the line number 27 in the file.

 

  • Goto Start & End of Line

 

  • To Goto Start of the Line use  `Alt` + `Right` or `Cmd` + `Right`
  • To Goto End of the line use shortcut `Alt` + `Left` or `Cmd` + `Left`

 

  • Goto Start & End of File

 

  • To Goto Start of the file use  `Alt` + `Up` or `Cmd` + `Up`
  • To Goto End of the file go for `Alt` + `Down` or `Cmd` + `Down`

 

  • Go One Word Left or Right

 

  • To Go One Word Left adopt shortcut `Ctrl`+ `Left` or `Alt` + `Left`
  • To Go One Word Right use key shortcut `Ctrl`+ `Right` or `Alt` + `Right`

Using Carets / Multiple Cursors

Well, the caret is the blinking dash which indicates on which line you are currently typing. Similarly, Sublime in DevTools, you can use as many as carets you desire and tips related to carets are:

 

  • Add Multiple Carets

 

At one time you can add as many as carets you like in the file with help of supported file in the source. Simply select each line by holding down `Cmd`/`Alt` and clicking wherever you would like to add a new caret.

 

  • Insert Multiple Carets At The Beginning of Line

 

If you want to insert prefix in front of your every line, then simply use `Cmd` + `←` ( `Alt` + `←` for Windows/Linux) and then hold `Down ` button and then your carets will appear in front of the lines.

 

  • Wrap Text In Quotes or Bracket

 

To wrap your text in brackets in DevTools, simply highlight text with the `Cmd` + `Shift` + `←` ( `Ctrl` + `Shift` + `←` for Windows/Linux) and type opening text. And, just like that, your text will be wrapped in brackets.

Locating Matching Brackets

While working with the long code, it became difficult for the user to detect their matching brackets. So, in that case, use  `Ctrl` + `M` and you will be directly jumped to the matching brackets.

Indentation

Every program developer understand the importance of Indentation as they make the code readable for them. So, to increase or decrease the density of Indentation in DevTools, you can use following shortcuts:

  • Indent text: `Tab`
  • Unindent text: `Shift` + `Tab`

For Quick Comment

If you want to quickly comment or uncomment a piece of code, then you can use the same shortcut as you use to do in Sublime:

Comment text: `Cmd`/`Ctrl` + `/`

Uncomment text: `Cmd`/`Ctrl` + `/` on the same section of text.

Toggle Autocompletion

Okay, so if autocompletion of code annoys the hell out of you in DevTools, then you should use `Ctrl` + `Space` to ignore such interruption.

Basic Cut/Copy/Paste Shortcuts

  • Cut: `Cmd` + `X`
  • Copy: `Cmd` + `C`
  • Paste: `Cmd` + `V`
  • Undo: `Cmd` + `Z`
  • Soft undo: `Cmd` + `U`
  • Redo: `Cmd` + `Y`

Final Comment

Well, if you have liked all these above mentioned DevTools shortcuts helping keys, then you should check out DevTools settings menu for more shortcuts. You can also get help from the DevTools Setting page.

And, friends, DevTools also supports a few nice debugging helpers that can further augment your daily editing & debugging workflow. So, go and use DevTools frequently and be productive.

Send a Message