像 Sublime Text 一樣使用 Chrome DevTools
英文原文：DevTools Tips For Sublime Text Users
作者：Addy Osmani 和 Wes Bos，翻譯：韓國愷
介紹
本文將告訴大家如何把我們已經熟悉的 Sublime Text 技巧應用到另一個強大的工具 Chrome DevTools 上。
DevTools, JSBin 和 Codepen 這些現代工具都以 CodeMirror 作為他們內部的代碼編輯器，這樣像 Sublime Text 中的鍵盤綁定方式就很容易在這上面實現。
下面的介紹主要是在 DevTools 中的 Sources 面板中使用。如果在 Sources 面板里設置了 Workspace ，就能直接把它作為瀏覽器內置的強大編輯器了。
Chrome DevTools 中的 Sources 面板可以被用來當作一個強大的編輯器和調試工具
鍵盤快捷鍵
任意跳轉
和 Sublime 類似，DevTools 也有一個 Goto “Anything” 搜索框。它可以讓你跳轉到指定的文件、行號或方法定義上。使用 Ctrl/Cmd + P 調出的搜索框用來搜索或過濾文件名。使用 Ctrl/Cmd + Shift + P 調出的搜索框用來搜索方法——如 JavaScript 方法或 CSS 選擇器。
行跳轉
Ctrl + G 調出的搜索框可以讓你跳轉到文件中指定的行。如果你想跳轉到當前文件中的某行，在搜索框中的冒號后面輸入行號即可。如果你想跳轉到其他文件，輸入文件名、冒號和行號即可（如 app.js:25）。
跳轉到行首或行尾
跳到行尾：Alt + Right or Cmd + Right
跳到行首：Alt + Left or Cmd + Left
跳轉到文件頂部或尾部
跳到文件開頭：Alt + Up or Cmd + Up
跳到文件末尾：Alt + Down or Cmd + Down
向左或向右跳過一個單詞
向左移動一個單詞：Ctrl+ Left or Alt + Left
向右移動一個單詞： Ctrl + Right or Alt + Right
上一行或下一行
向上一行：Up
向下一行：Down
使用多光標
光標以閃爍的形式代表你正在輸入的位置。和 Sublime Text 類似，DevTools 也可以使用多光標。
添加多光標
打開在 Sources 面板中的文件，按住 Cmd / Alt ，然后點擊所有你希望編輯的地方。
例如，如果你有多行 JavaScript 代碼需要添加前綴、編輯或在兩側添加引號，那么多光標可以輕而易舉地一次完成。
下面的步驟可以快速選擇多行：
- 點擊第一行
- 同時按住 ? 和 Option
- 拖動鼠標到剩下的行
現在每行都有光標了。
從行首使用多光標
使用 Cmd + ← (Windows/Linux 上為Alt + ←) 可以把所有光標同時移到行首，然后按住 Option 的同時使用方向鍵跳過單詞。到達要修改的名字前，輸入前綴即可。
在兩端添加引號或括號
用 Alt + Shift + ← (Windows/Linux 上為 Ctrl + Shift + ←) 選擇要包含的單詞，然后輸入單個引號或左括號。DevTools 就會將選中的部分用引號或括號括起來。
列選擇
光標也可以在文本中按列選擇。按住 Alt 然后點擊并拖拽你想選擇的區域。DevTools 會高亮這個區域，你可以復制或編輯它。
多光標選擇匹配的單詞
光標也可以用來高亮特定的單詞。在編輯器中選擇一個單詞（比如一個變量、方法或任何實際的單詞）。DevTools 會用邊框高亮所有同樣的單詞。
這時按 Cmd + D (or Alt + D) ，DevTools 會以多光標的形式高亮下一個匹配的單詞。這在批量重命名操作時特別有用。
跳到括號的另一端
在復雜的代碼段中，你經常會發現直接用肉眼很難找到括號對應的另一端。使用 Ctrl + M 可以讓光標快速移動到那里。連續使用可以來回跳轉。
縮進
我們知道代碼縮進的重要性。它讓代碼可讀并且易于理解。為了增加或減小當前行的縮進，可以使用如下快捷鍵：
增加縮進：Tab
減小縮進：Shift + Tab
快速注釋代碼
如果你需要注釋或取消注釋一段代碼，和 Sublime Text 中的快捷鍵一樣：
注釋：Cmd/Ctrl + /
取消注釋：Cmd/Ctrl + / 再次執行
這種方式適用所有語言，單行或多行都可以。
自動完成
在 DevTools 的 Sources 面板中，輸入的同時會顯示自動完成的提示。如果你忽略他們而想手工調用自動完成，你可以用如下方法：
Ctrl + Space
剪切/復制/粘貼/撤銷/重做
剪切、復制和粘貼文本的快捷鍵和其他編輯器的用法一樣：
剪切：Cmd + X
復制：Cmd + C
粘貼：Cmd + V
撤銷：Cmd + Z
軟撤銷：Cmd + U
重做：Cmd + Y
增加或減小數值
注：? 和 ? 分別表示上下翻頁鍵。在蘋果鍵盤上，可以用 fn + ↑/↓ 組合作為翻頁鍵。
在 Sources 面板中，你可以選擇一個數字值，然后用鍵盤增加或減小這個值。選中這個值，然后：
增加 CSS 1 個單位: Option + ↑
減小 CSS 1 個單位: Option + ↓
增加 CSS 10 個單位: Option + ?
減小 CSS 10 個單位: Option + ?
Styles 面板也支持這種快捷鍵：
增加 1：↑
減小 1：↓
增加 10： ? 或? + ↑
減小 10： ? 或? + ↓
增加 100： ? + ?
減小 100： ? + ?
增加 0.1： ? + ↑
減小 0.1： ? + ↓
編輯位置前后跳轉
DevTools 還可以保留你在 Sources 面板中的光標位置歷史。使用 Alt - 和Alt + 可以在上一次和下一次編輯位置之間前后跳轉：
快捷鍵列表
如果你覺以上快捷鍵有用，你可以在 DevTools 中的設置菜單中找到其中的大部分。它的位置在這里：
Source 面板功能設置
設置界面還可以讓你設置編輯器的行為。這包括自定義默認縮進、括號匹配、自動完成和顯示空白字符。
DevTools 主題
和其他編輯器類似，DevTools 也可以自定義界面的主題（語法高亮、面板顏色、UI 元素的外觀）。有些主題會聰明的使用顏色來高亮界面中的關鍵部分，而不會干擾你在代碼上的注意力。
下面是我們挑選的幾個 DevTools 主題：
- https://github.com/mauricecruz/chrome-devtools-zerodarkmatrix-theme
- https://github.com/xero/greybeard-devtools
安裝主題的方法：
- 從 Chrome Web Store 中安裝某個主題
- 打開 chrome://flags ，啟動其中的 Developer Tools experiments 并重啟瀏覽器。
- 打開 DevTools 設置中的 Experiments ，勾選上 Allow custom UI themes 選項(可能需要再次重啟瀏覽器)。
好啦，現在主題就出現了。可以從很多地方找到主題，包括 Web Store, DevThemez.com 和 GitHub 。
額外的獎勵
DevTools 也支持一些方便的調試功能幫助你進一步提高日常編輯和調試的工作流程。例如，在調試的時候，你可以在當前調試點及時預覽 JavaScript 變量的內聯值。非常強大。
(橙色高亮的代碼塊中)顯示內聯值。通過 Settings > Sources > Display variable values inline while debugging 啟用。
小結
希望這些 DevTools 技巧對你有幫助！
我們這里介紹的 Sublime Text 的等價功能在其他編輯器中也適用。我們鼓勵你在常用的應用中花時間學習這些快捷鍵。他們是非常強大的幫手，能讓你的工作流發生巨大變化。
如果你渴望了解更多，想持續改進你的工作流，來看我們的 Sublime Text Book + Videos 吧，使用代碼 DEVTOOLS 可以獲得 $11 的優惠。你也可以查看我們錄制的 Totally Tooling Tips 系列視頻第一集，關于 Sublime Text 插件的內容。
來自：http://chinagdg.org/2015/12/%E5%83%8F-sublime-text-%E4%B8%80%E6%A0%B7%E4%BD%BF%E7%94%A8-chrome-devtools/