開發
過去幾年來，瀏覽器開發工具一直是 Web 開發者最得力的工具。它能夠與Web瀏覽器和諧相處，允許我們在當前視窗中實時地操作DOM元素、CSS樣式和JavaScript，以及獲取一些其他的有用資訊。
以前開發者使用Firefox的一個名叫Firebug的擴充套件，來開發和除錯他們的網站。但是最近，各個瀏覽器都開發了一套它們自己的工具，並且每一個都有自己的優勢和劣勢。如今很難想像沒有這些方便的工具，如何來構建一個網站。（《Web開發者應掌握的12個Firebug技巧》）
啟用開發工具通常是按下“F12”鍵（ Mac 系統為 Cmd + Option + I ），或通過右鍵點選頁面，選擇彈出選單中的“審查元素”。
| 瀏覽器 | 開發工具集 | 型別 | 文件 |
|---|---|---|---|
| Chrome | Developer Tools | 整合 | Documentation |
| Firefox | Firebug | 擴充套件 | Documentation |
| Internet Explorer | Developer Toolbar | 整合 | Documentation |
| Opera | Dragonfly | 整合 | Documentation |
| Safari | Developer Tools | 整合 (預設關閉) | Overview |
你充分發揮了這些工具的潛力嗎？開發工具最大的特點就是很容易使用，但結果就是開發者們常常錯過了它們所提供的大部分功能。受到 Paul Irish 和 Pavel Feldman 視訊談話 的啟發，我列出了一個有關開發控制檯“祕密”的列表。我不指望它們中的每一個都對你來說是未知的，只希望它們中的某一些能夠有助你成為一個更好的Web開發者。
如果你有更多的“祕密”，請自在地在文章末尾留言——一旦我確認了，我會及時更新這篇文章。我也很想知道你哪個開發控制檯是你首要的開發工具，也可以直接在下面留言。
控制檯選項卡
引用當前元素
Chrome, Firefox, Opera, Safari – 如果在“元素”選項卡中，你有一個元素正被選中的話，你可以通過引用“$0”來你的程式碼中呼叫它。比如，為了看到你選中元素的內容，你可以輸入 “$0.innerHTML”。在Chrome和Safari中，你可以通過按下“Esc”鍵，立即從其他選項卡切換到控制檯（開發工具開啟了的情況 下）。在Firebug中，控制檯通過點選選項卡左側的圖示，或按下 Ctrl + Shift + L 來切換（Mac 下是 Cmd + Shift + L ）。
在Opera中，你可以用“$1”往前引用元素。在Chrome和Safari中，你可以用“$1~$4”往前引用元素。
使用console.log同時輸出多個值和物件
所有瀏覽器 – 我們都知道，console.log() 方法用來輸出除錯資訊到控制檯時非常有用，尤其是與alert相比。但是當你想要輸出一個字串緊跟著一個物件時，它輸出的形式會讓人生煩。比如使用 console.log('message:' + $('#message')) 將僅僅告訴你訊息是一個物件（*譯註：可能輸出結果是“message:[object Object]”），並且如果這個過程在一個迴圈體中的話，物件的表示讓人困惑。
console.log()實際上可以接收多個引數，所以你可以同時輸出字串和物件：console.log('message:', $('#message')); 或者其他你能想到的JavaScript型別組合。
你可以用 console.warn() 輸出警告訊息；用 console.error() 輸出錯誤訊息；用 console.info() 輸出資訊訊息。 你也可以使用 console.assert() 來檢測表示式為 true 或 false。
(感謝Masklinn提供了此項資訊)
重用JavaScript命令
所有瀏覽器 – 如果你輸入過一條命令到JavaScript控制檯，並且你又想重新執行它，只要簡單地按下方向鍵“↑”來回滾你呼叫過的命令就可以了。
保持
Chrome, Firefox – Firebug 控制檯上方有一個很明顯的 “保持”（Persist） 按鈕，但 Chrome 中被稍微隱藏掉了——需要右鍵點選控制檯，在彈出的右鍵選單中選擇 “Preserve Log upon Navigation” 選項。
* 譯註：保持的作用是讓控制檯在重新整理頁面後仍然保留已輸出的控制檯資訊。
檢視物件源
Firefox – Firefox支援 toSource() 方法，這意味著在Firebug中可以直接呼叫這個方法來列印一個物件的字串表示。
改變 frame
Firefox – 從控制檯直接執行JavaScript命令是很有用的，但是如果你頁面用了iframe內容的話，就變得麻煩了。幸運的是，用下面的“cd”命令能夠進入到指定的iframe環境，得以重新執行你的命令：
cd(window.frames['frameName']);
* 譯註：比如cd(window.frames[0])，它會進入第一個iframe的執行環境，並顯示一條info訊息：[“Current window:”, Window sample.com]；同時，返回上層可以使用：cd(parent)
Chrome – Chrome 允許你用一個不同的方式來改變 frame ，點選控制檯底部的下拉選單進行切換：
Opera – Opera中，控制檯和文件選項卡都存在一個用來切換frame的下拉選單——控制檯中的那個下拉選單僅在有 frame 可供選擇時才顯示：
（感謝Paul Irish 和Daniel提供此項資訊）
直接複製你的程式碼到剪貼簿
Chrome, Firefox, Safari – 在控制檯中使用copy()命令，以內容作引數，將直接複製內容到剪貼簿。
讓瀏覽器做計算
所有瀏覽器 – 這個技巧很有意義，但令人驚訝的是會有多少人不這麼去用它。當你想快速知道一個數學計算的答案（比如，一個456畫素寬度的容器分三欄，每欄有多寬？），你不需要開啟一個計算器，直接在控制檯輸入就能立即返回答案。順便說一下，答案是152。
* 譯註：這又不是Bot, O_O 作者應該是指直接在控制檯輸入表示式：456/3
指令碼選項卡
頁面所有執行指令碼安身的地方，這個選項卡包含了一個下拉選單，讓你可以選擇你想要除錯的指令碼。
處理壓縮過的指令碼
Chrome, Internet Explorer, Safari – 放置一個斷點在程式碼中會讓除錯更簡單。如果指令碼是已經投入生產環境了的話，它就很可能已經被壓縮過了。這時怎麼你怎麼除錯壓縮過的程式碼呢？幸好，部分瀏覽器有個選項可以解壓你的JavaScript程式碼。
Chrome和Safari中，簡單地選擇指令碼選項卡，通過下拉選單選擇相關的指令碼，然後點選底部皮膚的”{}”（pretty print）圖示：
在 IE9 中，點選選中指令碼旁邊的工具圖示來格式化JavaScript程式碼：
監視變數
所有瀏覽器 – .NET開發中的一個常用工具，“監視”允許通過指令碼選項卡右上欄的方便的區域來觀察一組變數。要觀察一個變數很簡單，只要輸入它的名字，“監視”將保持它最新的值。
實時編輯和執行JavaScript程式碼
Chrome – 在Chrome中，你可以直接在頁面中進行編輯，並不需要使用單獨的編輯器或者重新載入頁面。簡單地雙擊你想要改變程式碼，然後輸入新的程式碼！按Ctrl + S （Mac，Cmd + S）儲存。
當錯誤發生時建立一個斷點
所有瀏覽器 – 當第一個指令碼錯誤發生時，簡單地點選指令碼選項卡中的暫停圖示，出錯行將會高亮以便檢視。
當DOM改變時建立一個斷點
Chrome, Firefox – 如果你知道當某個特定部分的DOM改變時頁面崩潰了，或者你僅僅想找出是哪段指令碼改變了某個元素的屬性，Chrome和Firefox都提供了有效設定斷點的方式來找出這個元凶。簡單地選中你要監視的元素，右鍵點選它，選擇中斷條件：
（感謝Jason Wilson提供此項資訊）
元素選項卡
Firefox中叫做“HTML”選項卡，Opera中叫做“文件”（Documents）選項卡。元素（Elements）選項卡顯示的是當前狀態的DOM。在IE中，你需要點選“重新整理”按鈕才能檢視當前的DOM。
獲取一個容器尺寸的簡易辦法
Chrome, Safari – 我是個在包含浮動元素的容器上使用 overflow:auto 樣式的大粉絲——舊版本的IE這樣做會引起麻煩，除非你給元素指定了實際寬度（auto 和 100% 都不夠）。雖然元素的實際尺寸可以在元素選項卡右上角的“Computed Style”欄看到，但仍然需要點選好幾次。在Chrome 或 Safari中更好辦法是，滑鼠懸停到元素選項卡里HTML原始碼的特定元素上，或者點選底部工具欄上的放大鏡後再懸停到頁面特定元素上：
Firebug, Internet Explorer, Opera – 你需要選擇開發工具右手側皮膚中的“佈局”（Layout）選項卡，或在右側邊欄中的“計算樣式”（computed styles）中檢視。
（感謝Masklinn分享此項資訊）
展開所有元素檢視
Firefox, Opera – 在Firebug的HTML選項卡中，按下小鍵盤上的星號（*）鍵就可以展開選定的所有元素。預設不會展開指令碼標記和樣式標記，除非你同時按下 Shift + * 鍵。
Opera – Opera“文件”（Documents）選項卡下邊直接有個按鈕可以做這件事：
增加邊距、間距、高度、寬度、邊框——甚至是顏色
所有瀏覽器 – 如果你想改變某元素的邊距、間距、高度或者，你可以用游標鍵（即方向鍵）來增加/減小大小：
- 按上（↑）或下（↓）鍵將增加或減小單位1。
- 在Chrome, Firebug 和 Safari中，按住Shift鍵的同時，再按上或下鍵將增加或減小單位10。（* 譯註：Page-Up 和 Page-Down 鍵有同樣的效果）
- 在Chrome 和 Safari中，按住 Alt 鍵的同時，再按上或下鍵將增加或減小單位0. 1。
- 在Chrome 和 Safari中，按住 Shift 鍵的同時，再按 Page-Up 或 Page-Down 鍵將增加或減小單位100。
這些快捷鍵在你不確定用哪種使用的尺寸做樣式時特別有用。另外，Chrome, Firebug 和 Opera 中，你同時可以用這些快捷鍵來修改顏色值。
* 譯註：需要雙擊元素選項卡右側的具體樣式，使其進入編輯狀態。
（感謝mikkelrom分享此項資訊）
為 :active, :hover, :focus, :visited 狀態設定樣式
Chrome, Firefox, Opera – 在控制檯操作樣式真的很棒，但測試懸停樣式就麻煩了。慶幸的是，有個解決辦法。
Chrome 有個內建按鈕用來做這件事。在元素選項卡右側有個帶虛線框和游標的圖示，它就是用來編輯狀態樣式的：
Firebug中，點選右側的Style選項卡旁邊的帶箭頭選單，然後選擇你想要編輯的狀態。
在Opera中，樣式選項卡下面有個看起來像列表的圖示。
輪換顏色定義型別
Chrome, Safari – Web頁面中的顏色能用多個方式定義——通過名稱、16進位制數字（3位或6位）、rgb或hsl（都有帶alpha透明的版本）。在Chrome 或 Safari中，你可以通過點選顏色值旁邊的方形圖示來在這幾個型別定義之間切換。
（感謝Masklinn分享此項資訊 ）
* 譯註：增加了這個截圖，以前我僅僅以為那個方塊是用來展示顏色的，囧，根本不知道它還能點選——又多了一個能省略掉計算器的功能。
顏色拾取器
Opera – 在 Opera 中，和上面一樣，點選顏色值右邊的方塊圖示可以彈出一個方便的拾取器：
* 譯註：這裡又有了個HSV顏色自動轉換RGB顏色的工具。
資源選項卡
資源（resources）選項卡列表你的頁面使用的所有樣式表、JavaScript檔案和圖片。不幸的是，IE和Firebug中不存在這個選項卡，儘管在它們的其他選項卡中整合了這項功能的一些特徵。
儲存你的更改
Chrome, Internet Explorer, Safari – 在工具中即時編輯樣式或JavaScript很爽。但當你高高興興地做了修改，然後又要在原始碼中重新實現一遍就不那麼爽了。
在IE中，每個選項卡提供了一個“儲存”圖示，它的功能就是儲存修改到一個檔案當中。
同時，Chrome 和 Safari的資源選項卡中提供了一項貼心的功能：它儲存了你每次修改的版本（按 Ctrl + S 之後），還允許你往前或往後檢視每個版本的變化。你修改過的檔名旁邊會出現一個箭頭圖示，表示它可以 展開/收起 以檢視修改過的版本列表。在Chrome中，右鍵點選檔名可以選擇儲存這個檔案。不過在Safari中你只能悲劇地複製和貼上了。
Cookie 和 儲存
Chrome, Opera, Safari –資源選項卡下半部分的資源列表表示了各種不同的資料儲存選項。Opera 有一個單獨的儲存選項卡。
網路選項卡
網路（Network）選項卡顯示你頁面載入的所有檔案資源。大多數情況，你開啟它之後，要重新整理一下頁面才能顯示出你想看的資訊。在Firebug中，選項卡的名稱是“Net”。對於IE，直到版本 9 以後才有它。
禁用瀏覽器快取
所有瀏覽器 – 每個瀏覽器都可以禁用快取，但禁用的方式不一致。
在Chrome中，點選開發工具右下角的齒輪圖示進行設定。在Firebug中，設定位於網路選項卡旁邊的箭頭下拉選單中。在IE中，設定位於選單欄的存選單項。
在Opera中，要清除快取的話，點選網路選項卡，選擇網路選項中的第二個選項卡，選擇其中的第一個選項。在Safari中，在選單欄中的“開發”選單中禁用快取。
Windows中，在瀏覽器中可以按下 Ctrl + Shift + Delete 鍵呼叫消除快取對話方塊。
（感謝 Steven 和 karl 分享此項資訊 ）
* 譯註：Opera 中我根本沒找到，只有 設定/歷史 選項卡可供設定。
延遲
所有瀏覽器 – 網路選項卡允許你檢視伺服器響應一個請求花了多長時間。每個資源對應的淺色填充部分表示請求是何時傳送，並且何時返回的。深色填充部分表示資源是何時下載的。在Chrome中，你可以用懸停在每條時間線上以獲得消耗時間的具體資訊。
在Opera中延遲表示的原則是一樣的，除了它用的是灰色的線條，而Chrome是淺色填充。
在IE中，延遲被標記成黃色，並且懸停到時間線上也會取得更多資訊。
在Firebug中，延遲被標記為紫色，並且用的術語是“Waiting”。懸停到時間線上同樣能獲得各方面時間消耗的詳細資訊。
DOMContentLoaded 和 load 事件觸發
Chrome, Safari – Chrome和Safari中網路選項還展示了兩項額外的資訊，DOMContentLoaded 事件觸發的時間用藍線表示，load 事件觸發的時間用紅線表示。
DOMContentLoaded 代表的那條線表示當瀏覽器已經完成解析文件（但其他資源比如圖片和樣式表可以還沒下載完成），而 load 事件代表的線表示所有資源都已經載入完成了。
如果這兩個事件同時發生，這條線會顯示為紫色。
（感謝Steven 和 Joey提供此項資訊）
其他
崩潰
所有瀏覽器 – 有時我發現開發者工具會崩潰，或滑鼠點選時會失去響應。我也經常發現使用鍵盤快捷鍵關閉再重新開啟開發工具可以修復這個問題，而不需要去關閉整個瀏覽器再重新開啟。
我希望這些特性和祕密對你有所幫助。我故意沒有在這個列表中包含效能分析和遠端除錯的內容，那將是我後續文章要講到的了。請自在地在下面反饋、挑錯，或留下你的技巧。