開發(fā)

過去幾年來，瀏覽器開發(fā)工具一直是Web開發(fā)者最得力的工具。它能夠與Web瀏覽器和諧相處，允許我們?cè)诋?dāng)前窗口中實(shí)時(shí)地操作DOM元素、CSS樣式和JavaScript，以及獲取一些其他的有用信息。

以前開發(fā)者使用Firefox的一個(gè)名叫Firebug的擴(kuò)展，來開發(fā)和調(diào)試他們的網(wǎng)站。但是最近，各個(gè)瀏覽器都開發(fā)了一套它們自己的工具，并且每一個(gè)都有自己的優(yōu)勢(shì)和劣勢(shì)。如今很難想像沒有這些方便的工具，如何來構(gòu)建一個(gè)網(wǎng)站。

激活開發(fā)工具通常是按下“F12”鍵(Mac系統(tǒng)為 Cmd + Option + I )，或通過右鍵點(diǎn)擊頁面，選擇彈出菜單中的“審查元素”。

瀏覽器	開發(fā)工具集	類型	文檔
Chrome	Developer Tools	集成	Documentation
Firefox	Firebug	擴(kuò)展	Documentation
Internet Explorer	Developer Toolbar	集成	Documentation
Opera	Dragonfly	集成	Documentation
Safari	Developer Tools	集成 (默認(rèn)關(guān)閉)	Overview

你充分發(fā)揮了這些工具的潛力嗎?開發(fā)工具最大的特點(diǎn)就是很容易使用，但結(jié)果就是開發(fā)者們常常錯(cuò)過了它們所提供的大部分功能。受到Paul Irish 和 Pavel Feldman 視頻談話的啟發(fā)，我列出了一個(gè)有關(guān)開發(fā)控制臺(tái)“秘密”的列表。我不指望它們中的每一個(gè)都對(duì)你來說是未知的，只希望它們中的某一些能夠有助你成為一個(gè)更好的Web開發(fā)者。

如果你有更多的“秘密”，請(qǐng)自在地在文章末尾留言——一旦我確認(rèn)了，我會(huì)及時(shí)更新這篇文章。我也很想知道你哪個(gè)開發(fā)控制臺(tái)是你首要的開發(fā)工具，也可以直接在下面留言。

控制臺(tái)選項(xiàng)卡

引用當(dāng)前元素

Chrome, Firefox, Opera, Safari – 如果在“元素”選項(xiàng)卡中，你有一個(gè)元素正被選中的話，你可以通過引用“$0”來你的代碼中調(diào)用它。比如，為了看到你選中元素的內(nèi)容，你可以輸入 “$0.innerHTML”。在Chrome和Safari中，你可以通過按下“Esc”鍵，立即從其他選項(xiàng)卡切換到控制臺(tái)(開發(fā)工具打開了的情況下)。在Firebug中，控制臺(tái)通過點(diǎn)擊選項(xiàng)卡左側(cè)的圖標(biāo)，或按下Ctrl + Shift + L 來切換(Mac 下是 Cmd + Shift + L )。

 

 

在Opera中，你可以用“$1”往前引用元素。在Chrome和Safari中，你可以用“$1~$4”往前引用元素。

使用console.log同時(shí)輸出多個(gè)值和對(duì)象

所有瀏覽器–我們都知道，console.log()方法用來輸出調(diào)試信息到控制臺(tái)時(shí)非常有用，尤其是與alert相比。但是當(dāng)你想要輸出一個(gè)字符串緊跟著一個(gè)對(duì)象時(shí)，它輸出的形式會(huì)讓人生煩。比如使用console.log('message:' + $('#message'))將僅僅告訴你消息是一個(gè)對(duì)象(*譯注：可能輸出結(jié)果是“message:[object Object]”)，并且如果這個(gè)過程在一個(gè)循環(huán)體中的話，對(duì)象的表示讓人困惑。

console.log()實(shí)際上可以接收多個(gè)參數(shù)，所以你可以同時(shí)輸出字符串和對(duì)象：console.log('message:',$('#message'));或者其他你能想到的JavaScript類型組合。

 

 

你可以用console.warn()輸出警告消息;用console.error()輸出錯(cuò)誤消息;用console.info()輸出信息消息。你也可以使用console.assert()來檢測(cè)表達(dá)式為true或false。

(感謝Masklinn提供了此項(xiàng)信息)

重用JavaScript命令

所有瀏覽器–如果你輸入過一條命令到JavaScript控制臺(tái)，并且你又想重新運(yùn)行它，只要簡(jiǎn)單地按下方向鍵“↑”來回滾你調(diào)用過的命令就可以了。

保持

Chrome，F(xiàn)irefox–Firebug 控制臺(tái)上方有一個(gè)很明顯的“保持”(Persist)按鈕，但Chrome中被稍微隱藏掉了——需要右鍵點(diǎn)擊控制臺(tái)，在彈出的右鍵菜單中選擇“Preserve Log upon Navigation”選項(xiàng)。

*譯注：保持的作用是讓控制臺(tái)在刷新頁面后仍然保留已輸出的控制臺(tái)信息。

查看對(duì)象源

Firefox–Firefox支持toSource()方法，這意味著在Firebug中可以直接調(diào)用這個(gè)方法來打印一個(gè)對(duì)象的字符串表示。

 

 

改變frame

Firefox–從控制臺(tái)直接運(yùn)行JavaScript命令是很有用的，但是如果你頁面用了iframe內(nèi)容的話，就變得麻煩了。幸運(yùn)的是，用下面的“cd”命令能夠進(jìn)入到指定的iframe環(huán)境，得以重新運(yùn)行你的命令：

cd(window.frames['frameName']);

*譯注：比如cd(window.frames[0])，它會(huì)進(jìn)入第一個(gè)iframe的執(zhí)行環(huán)境，并顯示一條info消息：["Current window:", Window sample.com];同時(shí)，返回上層可以使用：cd(parent)

Chrome–Chrome允許你用一個(gè)不同的方式來改變frame，點(diǎn)擊控制臺(tái)底部的下拉菜單進(jìn)行切換：

 

 

Opera–Opera中，控制臺(tái)和文檔選項(xiàng)卡都存在一個(gè)用來切換frame的下拉菜單——控制臺(tái)中的那個(gè)下拉菜單僅在有frame可供選擇時(shí)才顯示：

 

 

(感謝Paul Irish和Daniel提供此項(xiàng)信息)

直接復(fù)制你的代碼到剪貼板

Chrome，F(xiàn)irefox，Safari–在控制臺(tái)中使用copy()命令，以內(nèi)容作參數(shù)，將直接復(fù)制內(nèi)容到剪貼板。

讓瀏覽器做計(jì)算

所有瀏覽器–這個(gè)技巧很有意義，但令人驚訝的是會(huì)有多少人不這么去用它。當(dāng)你想快速知道一個(gè)數(shù)學(xué)計(jì)算的答案(比如，一個(gè)456像素寬度的容器分三欄，每欄有多寬?)，你不需要打開一個(gè)計(jì)算器，直接在控制臺(tái)輸入就能立即返回答案。順便說一下，答案是152。

*譯注：這又不是Bot，O_O作者應(yīng)該是指直接在控制臺(tái)輸入表達(dá)式：456/3

腳本選項(xiàng)卡

頁面所有運(yùn)行腳本安身的地方，這個(gè)選項(xiàng)卡包含了一個(gè)下拉菜單，讓你可以選擇你想要調(diào)試的腳本。

處理壓縮過的腳本

Chrome，Internet Explorer, Safari–放置一個(gè)斷點(diǎn)在代碼中會(huì)讓調(diào)試更簡(jiǎn)單。如果腳本是已經(jīng)投入生產(chǎn)環(huán)境了的話，它就很可能已經(jīng)被壓縮過了。這時(shí)怎么你怎么調(diào)試壓縮過的代碼呢?幸好，部分瀏覽器有個(gè)選項(xiàng)可以解壓你的JavaScript代碼。

Chrome和Safari中，簡(jiǎn)單地選擇腳本選項(xiàng)卡，通過下拉菜單選擇相關(guān)的腳本，然后點(diǎn)擊底部面板的”{}”(pretty print)圖標(biāo)：

 

 

在IE9中，點(diǎn)擊選中腳本旁邊的工具圖標(biāo)來格式化JavaScript代碼：

 

 

監(jiān)視變量

所有瀏覽器–.NET開發(fā)中的一個(gè)常用工具，“監(jiān)視”允許通過腳本選項(xiàng)卡右上欄的方便的區(qū)域來觀察一組變量。要觀察一個(gè)變量很簡(jiǎn)單，只要輸入它的名字，“監(jiān)視”將保持它最新的值。

 

 

實(shí)時(shí)編輯和執(zhí)行JavaScript代碼

Chrome–在Chrome中，你可以直接在頁面中進(jìn)行編輯，并不需要使用單獨(dú)的編輯器或者重新加載頁面。簡(jiǎn)單地雙擊你想要改變代碼，然后輸入新的代碼!按Ctrl + S (Mac，Cmd+S)保存。

當(dāng)錯(cuò)誤發(fā)生時(shí)創(chuàng)建一個(gè)斷點(diǎn)

所有瀏覽器–當(dāng)?shù)谝粋€(gè)腳本錯(cuò)誤發(fā)生時(shí)，簡(jiǎn)單地點(diǎn)擊腳本選項(xiàng)卡中的暫停圖標(biāo)，出錯(cuò)行將會(huì)高亮以便查看。

當(dāng)DOM改變時(shí)創(chuàng)建一個(gè)斷點(diǎn)

 

 

Chrome，F(xiàn)irefox–如果你知道當(dāng)某個(gè)特定部分的DOM改變時(shí)頁面崩潰了，或者你僅僅想找出是哪段腳本改變了某個(gè)元素的屬性，Chrome和Firefox都提供了有效設(shè)置斷點(diǎn)的方式來找出這個(gè)元兇。簡(jiǎn)單地選中你要監(jiān)視的元素，右鍵點(diǎn)擊它，選擇中斷條件：

 

 

(感謝Jason Wilson提供此項(xiàng)信息)

#p#

元素選項(xiàng)卡

Firefox中叫做“HTML”選項(xiàng)卡，Opera中叫做“文檔”(Documents)選項(xiàng)卡。元素(Elements)選項(xiàng)卡顯示的是當(dāng)前狀態(tài)的DOM。在IE中，你需要點(diǎn)擊“刷新”按鈕才能查看當(dāng)前的DOM。

獲取一個(gè)容器尺寸的簡(jiǎn)易辦法

Chrome，Safari–我是個(gè)在包含浮動(dòng)元素的容器上使用overflow:auto樣式的大粉絲——舊版本的IE這樣做會(huì)引起麻煩，除非你給元素指定了實(shí)際寬度(auto和100%都不夠)。雖然元素的實(shí)際尺寸可以在元素選項(xiàng)卡右上角的“Computed Style”欄看到，但仍然需要點(diǎn)擊好幾次。在Chrome或Safari中更好辦法是，鼠標(biāo)懸停到元素選項(xiàng)卡里HTML源代碼的特定元素上，或者點(diǎn)擊底部工具欄上的放大鏡后再懸停到頁面特定元素上：

 

 

Firebug, Internet Explorer, Opera – 你需要選擇開發(fā)工具右手側(cè)面板中的“布局”(Layout)選項(xiàng)卡，或在右側(cè)邊欄中的“計(jì)算樣式”(computed styles)中查看。

展開所有元素視圖

Firefox，Opera –在Firebug的HTML選項(xiàng)卡中，按下小鍵盤上的星號(hào)(*)鍵就可以展開選定的所有元素。默認(rèn)不會(huì)展開腳本標(biāo)記和樣式標(biāo)記，除非你同時(shí)按下Shift + * 鍵。

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

 

 

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

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

◆ 按上(↑)或下(↓)鍵將增加或減小單位1。

◆ 在Chrome，F(xiàn)irebug和Safari中，按住Shift鍵的同時(shí)，再按上或下鍵將增加或減小單位10。(*譯注：Page-Up和Page-Down鍵有同樣的效果)

◆ 在Chrome和Safari中，按住Alt鍵的同時(shí)，再按上或下鍵將增加或減小單位0. 1。

◆ 在Chrome和Safari中，按住Shift鍵的同時(shí)，再按Page-Up或Page-Down鍵將增加或減小單位100。

這些快捷鍵在你不確定用哪種使用的尺寸做樣式時(shí)特別有用。另外，Chrome，F(xiàn)irebug和Opera中，你同時(shí)可以用這些快捷鍵來修改顏色值。

*譯注：需要雙擊元素選項(xiàng)卡右側(cè)的具體樣式，使其進(jìn)入編輯狀態(tài)。

為:active, :hover, :focus, :visited狀態(tài)設(shè)置樣式

Chrome，F(xiàn)irefox，Opera –在控制臺(tái)操作樣式真的很棒，但測(cè)試懸停樣式就麻煩了。慶幸的是，有個(gè)解決辦法。

Chrome有個(gè)內(nèi)置按鈕用來做這件事。在元素選項(xiàng)卡右側(cè)有個(gè)帶虛線框和光標(biāo)的圖標(biāo)，它就是用來編輯狀態(tài)樣式的：

 

 

Firebug中，點(diǎn)擊右側(cè)的Style選項(xiàng)卡旁邊的帶箭頭菜單，然后選擇你想要編輯的狀態(tài)。

在Opera中，樣式選項(xiàng)卡下面有個(gè)看起來像列表的圖標(biāo)。

輪換顏色定義類型

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

 

 

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

顏色拾取器

Opera – 在 Opera中，和上面一樣，點(diǎn)擊顏色值右邊的方塊圖標(biāo)可以彈出一個(gè)方便的拾取器：

 

 

*譯注：這里又有了個(gè)HSV顏色自動(dòng)轉(zhuǎn)換RGB顏色的工具。

資源選項(xiàng)卡

資源(resources)選項(xiàng)卡列表你的頁面使用的所有樣式表、JavaScript文件和圖片。不幸的是，IE和Firebug中不存在這個(gè)選項(xiàng)卡，盡管在它們的其他選項(xiàng)卡中集成了這項(xiàng)功能的一些特征。

保存你的更改

Chrome，Internet Explorer, Safari——在工具中即時(shí)編輯樣式或JavaScript很爽。但當(dāng)你高高興興地做了修改，然后又要在源代碼中重新實(shí)現(xiàn)一遍就不那么爽了。

在IE中，每個(gè)選項(xiàng)卡提供了一個(gè)“保存”圖標(biāo)，它的功能就是保存修改到一個(gè)文件當(dāng)中。

同時(shí)，Chrome和Safari的資源選項(xiàng)卡中提供了一項(xiàng)貼心的功能：它保存了你每次修改的版本(按Ctrl + S之后)，還允許你往前或往后查看每個(gè)版本的變化。你修改過的文件名旁邊會(huì)出現(xiàn)一個(gè)箭頭圖標(biāo)，表示它可以展開/收起以查看修改過的版本列表。在Chrome中，右鍵點(diǎn)擊文件名可以選擇保存這個(gè)文件。不過在Safari中你只能悲劇地復(fù)制和粘貼了。

 

 

Cookie和存儲(chǔ)

Chrome，Opera, Safari–資源選項(xiàng)卡下半部分的資源列表表示了各種不同的數(shù)據(jù)存儲(chǔ)選項(xiàng)。Opera有一個(gè)單獨(dú)的存儲(chǔ)選項(xiàng)卡。

 

 

網(wǎng)絡(luò)選項(xiàng)卡

網(wǎng)絡(luò)(Network)選項(xiàng)卡顯示你頁面加載的所有文件資源。大多數(shù)情況，你打開它之后，要刷新一下頁面才能顯示出你想看的信息。在Firebug中，選項(xiàng)卡的名稱是“Net”。對(duì)于IE，直到版本9以后才有它。

禁用瀏覽器緩存

所有瀏覽器–每個(gè)瀏覽器都可以禁用緩存，但禁用的方式不一致。

在Chrome中，點(diǎn)擊開發(fā)工具右下角的齒輪圖標(biāo)進(jìn)行設(shè)置。在Firebug中，設(shè)置位于網(wǎng)絡(luò)選項(xiàng)卡旁邊的箭頭下拉菜單中。在IE中，設(shè)置位于菜單欄的存菜單項(xiàng)。

在Opera中，要清除緩存的話，點(diǎn)擊網(wǎng)絡(luò)選項(xiàng)卡，選擇網(wǎng)絡(luò)選項(xiàng)中的第二個(gè)選項(xiàng)卡，選擇其中的第一個(gè)選項(xiàng)。在Safari中，在菜單欄中的“開發(fā)”菜單中禁用緩存。

Windows中，在瀏覽器中可以按下Ctrl + Shift + Delete鍵調(diào)用消除緩存對(duì)話框。

*譯注：Opera中我根本沒找到，只有設(shè)置/歷史選項(xiàng)卡可供設(shè)置。

延遲

所有瀏覽器–網(wǎng)絡(luò)選項(xiàng)卡允許你查看服務(wù)器響應(yīng)一個(gè)請(qǐng)求花了多長(zhǎng)時(shí)間。每個(gè)資源對(duì)應(yīng)的淺色填充部分表示請(qǐng)求是何時(shí)發(fā)送，并且何時(shí)返回的。深色填充部分表示資源是何時(shí)下載的。在Chrome中，你可以用懸停在每條時(shí)間線上以獲得消耗時(shí)間的具體信息。

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

 

 

在IE中，延遲被標(biāo)記成黃色，并且懸停到時(shí)間線上也會(huì)取得更多信息。

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

DOMContentLoaded 和load事件觸發(fā)

Chrome，Safari – Chrome和Safari中網(wǎng)絡(luò)選項(xiàng)還展示了兩項(xiàng)額外的信息，DOMContentLoaded事件觸發(fā)的時(shí)間用藍(lán)線表示，load事件觸發(fā)的時(shí)間用紅線表示。

 

 

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

如果這兩個(gè)事件同時(shí)發(fā)生，這條線會(huì)顯示為紫色。

其他

崩潰

所有瀏覽器–有時(shí)我發(fā)現(xiàn)開發(fā)者工具會(huì)崩潰，或鼠標(biāo)點(diǎn)擊時(shí)會(huì)失去響應(yīng)。我也經(jīng)常發(fā)現(xiàn)使用鍵盤快捷鍵關(guān)閉再重新打開開發(fā)工具可以修復(fù)這個(gè)問題，而不需要去關(guān)閉整個(gè)瀏覽器再重新打開。

我希望這些特性和秘密對(duì)你有所幫助。我故意沒有在這個(gè)列表中包含性能分析和遠(yuǎn)程調(diào)試的內(nèi)容，那將是我后續(xù)文章要講到的了。歡迎您在評(píng)論中反饋、挑錯(cuò)，或留下你的技巧。

網(wǎng)友ygcc459補(bǔ)充：

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

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