編譯地址：DevTools Tips For Sublime Text Users
作者：Addy Osmani 和 Wes Bos，翻譯：韓國(guó)愷
原文地址：像 Sublime Text 一樣使用 Chrome DevTools

介紹

本文將告訴大家如何把我們已經(jīng)熟悉的 Sublime Text 技巧應(yīng)用到另一個(gè)強(qiáng)大的工具 Chrome DevTools 上。

DevTools, JSBin 和 Codepen 這些現(xiàn)代工具都以 CodeMirror 作為他們內(nèi)部的代碼編輯器，這樣像 Sublime Text 中的鍵盤綁定方式就很容易在這上面實(shí)現(xiàn)。

下面的介紹主要是在 DevTools 中的 Sources 面板中使用。如果在 Sources 面板里設(shè)置了 Workspace ，就能直接把它作為瀏覽器內(nèi)置的強(qiáng)大編輯器了。

DevTools 中的 Sources 面板可以被用來(lái)當(dāng)作一個(gè)強(qiáng)大的編輯器和調(diào)試工具

鍵盤快捷鍵

任意跳轉(zhuǎn)
和 Sublime 類似，DevTools 也有一個(gè) Goto “Anything” 搜索框。它可以讓你跳轉(zhuǎn)到指定的文件、行號(hào)或方法定義上。使用 Ctrl/Cmd + P 調(diào)出的搜索框用來(lái)搜索或過濾文件名。使用 Ctrl/Cmd + Shift + P 調(diào)出的搜索框用來(lái)搜索方法——如 JavaScript 方法或 CSS 選擇器。

行跳轉(zhuǎn)
Ctrl+ G調(diào)出的搜索框可以讓你跳轉(zhuǎn)到文件中指定的行。如果你想跳轉(zhuǎn)到當(dāng)前文件中的某行，在搜索框中的冒號(hào)后面輸入行號(hào)即可。如果你想跳轉(zhuǎn)到其他文件，輸入文件名、冒號(hào)和行號(hào)即可（如 app.js:25）。

跳轉(zhuǎn)到行首或行尾

• 跳到行尾：Alt+ Right or Cmd+ Right
• 跳到行首：Alt+ Left or Cmd+ Left

跳轉(zhuǎn)到文件頂部或尾部

• 跳到文件開頭：Alt+ Up or Cmd+ Up
• 跳到文件末尾：Alt+ Down or Cmd+ Down

向左或向右跳過一個(gè)單詞

• 向左移動(dòng)一個(gè)單詞：Ctrl+ Left or Alt+ Left
• 向右移動(dòng)一個(gè)單詞：Ctrl+ Right or Alt+ Right

上一行或下一行

• 向上一行：Up
• 向下一行：Down

使用多光標(biāo)

光標(biāo)以閃爍的形式代表你正在輸入的位置。和 Sublime Text 類似，DevTools 也可以使用多光標(biāo)。

添加多光標(biāo)

打開在 Sources 面板中的文件，按住 Cmd/ Alt，然后點(diǎn)擊所有你希望編輯的地方。

例如，如果你有多行 JavaScript 代碼需要添加前綴、編輯或在兩側(cè)添加引號(hào)，那么多光標(biāo)可以輕而易舉地一次完成。

下面的步驟可以快速選擇多行：

1. 點(diǎn)擊第一行
2. 同時(shí)按住? 和 Option
3. 拖動(dòng)鼠標(biāo)到剩下的行

現(xiàn)在每行都有光標(biāo)了。

從行首使用多光標(biāo)

使用 Cmd+ ←(Windows/Linux 上為Alt+ ←) 可以把所有光標(biāo)同時(shí)移到行首，然后按住 Option的同時(shí)使用方向鍵跳過單詞。到達(dá)要修改的名字前，輸入前綴即可。

在兩端添加引號(hào)或括號(hào)

用 Alt+ Shift+ ← (Windows/Linux 上為 Ctrl+ Shift+ ←) 選擇要包含的單詞，然后輸入單個(gè)引號(hào)或左括號(hào)。DevTools 就會(huì)將選中的部分用引號(hào)或括號(hào)括起來(lái)。

列選擇

光標(biāo)也可以在文本中按列選擇。按住 Alt 然后點(diǎn)擊并拖拽你想選擇的區(qū)域。DevTools 會(huì)高亮這個(gè)區(qū)域，你可以復(fù)制或編輯它。

多光標(biāo)選擇匹配的單詞

光標(biāo)也可以用來(lái)高亮特定的單詞。在編輯器中選擇一個(gè)單詞（比如一個(gè)變量、方法或任何實(shí)際的單詞）。DevTools 會(huì)用邊框高亮所有同樣的單詞。

這時(shí)按 Cmd+ D (or Alt+ D) ，DevTools 會(huì)以多光標(biāo)的形式高亮下一個(gè)匹配的單詞。這在批量重命名操作時(shí)特別有用。

跳到括號(hào)的另一端

在復(fù)雜的代碼段中，你經(jīng)常會(huì)發(fā)現(xiàn)直接用肉眼很難找到括號(hào)對(duì)應(yīng)的另一端。使用 Ctrl+ M 可以讓光標(biāo)快速移動(dòng)到那里。連續(xù)使用可以來(lái)回跳轉(zhuǎn)。

縮進(jìn)

我們知道代碼縮進(jìn)的重要性。它讓代碼可讀并且易于理解。為了增加或減小當(dāng)前行的縮進(jìn)，可以使用如下快捷鍵：

• 增加縮進(jìn)：Tab
• 減小縮進(jìn)：Shift+ Tab

快速注釋代碼

如果你需要注釋或取消注釋一段代碼，和 Sublime Text 中的快捷鍵一樣：

• 注釋：Cmd/Ctrl+/
• 取消注釋：Cmd/Ctrl+/再次執(zhí)行

這種方式適用所有語(yǔ)言，單行或多行都可以。

自動(dòng)完成

在 DevTools 的 Sources 面板中，輸入的同時(shí)會(huì)顯示自動(dòng)完成的提示。如果你忽略他們而想手工調(diào)用自動(dòng)完成，你可以用如下方法：

Ctrl+ Space

剪切/復(fù)制/粘貼/撤銷/重做

剪切、復(fù)制和粘貼文本的快捷鍵和其他編輯器的用法一樣：

• 剪切：Cmd+ X
• 復(fù)制：Cmd+ C
• 粘貼：Cmd+ V
• 撤銷：Cmd+ Z
• 軟撤銷：Cmd+ U
• 重做：Cmd+ Y

增加或減小數(shù)值

注：? 和 ? 分別表示上下翻頁(yè)鍵。在蘋果鍵盤上，可以用 fn + ↑/↓ 組合作為翻頁(yè)鍵。

在 Sources 面板中，你可以選擇一個(gè)數(shù)字值，然后用鍵盤增加或減小這個(gè)值。選中這個(gè)值，然后：

• 增加 CSS 1 個(gè)單位: Option+ ↑
• 減小 CSS 1 個(gè)單位: Option+ ↓
• 增加 CSS 10 個(gè)單位: Option+ ?
• 減小 CSS 10 個(gè)單位: Option+ ?

Styles 面板也支持這種快捷鍵：

• 增加 1：↑
• 減小 1：↓
• 增加 10： ?或?+ ↑
• 減小 10： ?或?+ ↓
• 增加 100： ?+ ?
• 減小 100： ?+ ?
• 增加 0.1： ?+ ↑
• 減小 0.1： ?+ ↓

編輯位置前后跳轉(zhuǎn)

DevTools 還可以保留你在 Sources 面板中的光標(biāo)位置歷史。使用 Alt - 和Alt +可以在上一次和下一次編輯位置之間前后跳轉(zhuǎn)：

快捷鍵列表

如果你覺以上快捷鍵有用，你可以在 DevTools 中的設(shè)置菜單中找到其中的大部分。它的位置在這里：

Source 面板功能設(shè)置

設(shè)置界面還可以讓你設(shè)置編輯器的行為。這包括自定義默認(rèn)縮進(jìn)、括號(hào)匹配、自動(dòng)完成和顯示空白字符。

DevTools 主題

和其他編輯器類似，DevTools 也可以自定義界面的主題（語(yǔ)法高亮、面板顏色、UI 元素的外觀）。有些主題會(huì)聰明的使用顏色來(lái)高亮界面中的關(guān)鍵部分，而不會(huì)干擾你在代碼上的注意力。

下面是我們挑選的幾個(gè) DevTools 主題：

• https://github.com/mauricecruz/chrome-devtools-zerodarkmatrix-theme
• https://github.com/xero/greybeard-devtools

安裝主題的方法：

• 從 Chrome Web Store 中安裝某個(gè)主題
• 打開 chrome://flags ，啟動(dòng)其中的 Developer Tools experiments 并重啟瀏覽器。
• 打開 DevTools 設(shè)置中的 Experiments ，勾選上 Allow custom UI themes 選項(xiàng)(可能需要再次重啟瀏覽器)。

好啦，現(xiàn)在主題就出現(xiàn)了。可以從很多地方找到主題，包括 Web Store, DevThemez.com 和 GitHub 。

額外的獎(jiǎng)勵(lì)

DevTools 也支持一些方便的調(diào)試功能幫助你進(jìn)一步提高日常編輯和調(diào)試的工作流程。例如，在調(diào)試的時(shí)候，你可以在當(dāng)前調(diào)試點(diǎn)及時(shí)預(yù)覽 JavaScript 變量的內(nèi)聯(lián)值。非常強(qiáng)大。

(橙色高亮的代碼塊中)顯示內(nèi)聯(lián)值。通過 Settings > Sources > Display variable values inline while debugging 啟用。

小結(jié)

希望這些 DevTools 技巧對(duì)你有幫助！

我們這里介紹的 Sublime Text 的等價(jià)功能在其他編輯器中也適用。我們鼓勵(lì)你在常用的應(yīng)用中花時(shí)間學(xué)習(xí)這些快捷鍵。他們是非常強(qiáng)大的幫手，能讓你的工作流發(fā)生巨大變化。

如果你渴望了解更多，想持續(xù)改進(jìn)你的工作流，來(lái)看我們的 Sublime Text Book + Videos 吧，使用代碼 DEVTOOLS 可以獲得 $11 的優(yōu)惠。你也可以查看我們錄制的 Totally Tooling Tips 系列視頻第一集，關(guān)于 Sublime Text 插件的內(nèi)容。