【翻譯】25個瀏覽器開發工具的祕密

開發

過去幾年來，瀏覽器開發工具一直是 Web 開發者最得力的工具。它可以與Web瀏覽器和諧相處，容許咱們在當前窗口中實時地操做DOM元素、CSS樣式和JavaScript，以及獲取一些其餘的有用信息。

之前開發者使用Firefox的一個名叫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提供此項信息）

其餘

崩潰

全部瀏覽器 – 有時我發現開發者工具會崩潰，或鼠標點擊時會失去響應。我也常常發現使用鍵盤快捷鍵關閉再從新打開開發工具能夠修復這個問題，而不須要去關閉整個瀏覽器再從新打開。

我但願這些特性和祕密對你有所幫助。我故意沒有在這個列表中包含性能分析和遠程調試的內容，那將是我後續文章要講到的了。請自在地在下面反饋、挑錯，或留下你的技巧。