開發

過去幾年來，瀏覽器開發工具一直是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提供此項信息)

#p#

元素選項卡

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)中查看。

展開所有元素視圖

Firefox，Opera –在Firebug的HTML選項卡中，按下小鍵盤上的星號(*)鍵就可以展開選定的所有元素。默認不會展開腳本標記和樣式標記，除非你同時按下Shift + * 鍵。

Opera – Opera“文檔”(Documents)選項卡下邊直接有個按鈕可以做這件事：

 

 

增加邊距、間距、高度、寬度、邊框——甚至是顏色

所有瀏覽器–如果你想改變某元素的邊距、間距、高度或者，你可以用光標鍵(即方向鍵)來增加/減小大?。?/p>

◆ 按上(↑)或下(↓)鍵將增加或減小單位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中，你同時可以用這些快捷鍵來修改顏色值。

*譯注：需要雙擊元素選項卡右側的具體樣式，使其進入編輯狀態。

為:active, :hover, :focus, :visited狀態設置樣式

Chrome，Firefox，Opera –在控制臺操作樣式真的很棒，但測試懸停樣式就麻煩了。慶幸的是，有個解決辦法。

Chrome有個內置按鈕用來做這件事。在元素選項卡右側有個帶虛線框和光標的圖標，它就是用來編輯狀態樣式的：

 

 

Firebug中，點擊右側的Style選項卡旁邊的帶箭頭菜單，然后選擇你想要編輯的狀態。

在Opera中，樣式選項卡下面有個看起來像列表的圖標。

輪換顏色定義類型

Chrome，Safari –Web頁面中的顏色能用多個方式定義——通過名稱、16進制數字(3位或6位)、rgb或hsl(都有帶alpha透明的版本)。在Chrome 或 Safari中，你可以通過點擊顏色值旁邊的方形圖標來在這幾個類型定義之間切換。

 

 

*譯注：增加了這個截圖，以前我僅僅以為那個方塊是用來展示顏色的，囧，根本不知道它還能點擊——又多了一個能省略掉計算器的功能。

顏色拾取器

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鍵調用消除緩存對話框。

*譯注：Opera中我根本沒找到，只有設置/歷史選項卡可供設置。

延遲

所有瀏覽器–網絡選項卡允許你查看服務器響應一個請求花了多長時間。每個資源對應的淺色填充部分表示請求是何時發送，并且何時返回的。深色填充部分表示資源是何時下載的。在Chrome中，你可以用懸停在每條時間線上以獲得消耗時間的具體信息。

在Opera中延遲表示的原則是一樣的，除了它用的是灰色的線條，而Chrome是淺色填充。

 

 

在IE中，延遲被標記成黃色，并且懸停到時間線上也會取得更多信息。

在Firebug中，延遲被標記為紫色，并且用的術語是“Waiting”。懸停到時間線上同樣能獲得各方面時間消耗的詳細信息。

DOMContentLoaded 和load事件觸發

Chrome，Safari – Chrome和Safari中網絡選項還展示了兩項額外的信息，DOMContentLoaded事件觸發的時間用藍線表示，load事件觸發的時間用紅線表示。

 

 

DOMContentLoaded代表的那條線表示當瀏覽器已經完成解析文檔(但其他資源比如圖片和樣式表可以還沒下載完成)，而load事件代表的線表示所有資源都已經加載完成了。

如果這兩個事件同時發生，這條線會顯示為紫色。

其他

崩潰

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

我希望這些特性和秘密對你有所幫助。我故意沒有在這個列表中包含性能分析和遠程調試的內容，那將是我后續文章要講到的了。歡迎您在評論中反饋、挑錯，或留下你的技巧。

網友ygcc459補充：

1、opera可以直接編輯Html源代碼，甚至可以添加新的html標簽（chrome、ie9能修改但不能添加標簽，firefox不知道），并且所有編輯都是即時預覽的。
2、opera、chrome的css窗口可以定位到css所在原文件的行號，ie9不顯示行號，firefox不知道

原文：http://www.cnblogs.com/ambar/archive/2011/11/09/25-secrets-of-the-browser-developer-tools-in-chinese.html