1、你充分發(fā)揮了這些工具的潛力嗎?開發(fā)工具最大的特點就是很容易使用，但結(jié)果就是開發(fā)者們常常錯過了它們所提供的大部分功能。本文列出了一個有關(guān)瀏覽器開發(fā)控制臺“秘密”的列表。AD： 開發(fā)過去幾年來，瀏瀏覽器開發(fā)工工具一直是WWeb開發(fā)者者最得力的工工具。它能夠夠與Web瀏瀏覽器和諧相相處，允許我我們在當(dāng)前窗窗口中實時地地操作DOMM元素、CSSS樣式和JJavaSccript，以以及獲取一些些其他的有用用信息。以前開發(fā)者使用用Fireffox的一個個名叫Firrebug的的擴展，來開開發(fā)和調(diào)試他他們的網(wǎng)站。但但是最近，各各個瀏覽器都都開發(fā)了一套套它們自己的的工具，并且且每一個都有有自己的優(yōu)勢勢和劣勢。

2、如如今很難想像像沒有這些方方便的工具，如如何來構(gòu)建一一個網(wǎng)站。激活開發(fā)工具通通常是按下“FF12”鍵(Mac系統(tǒng)統(tǒng)為 Cmdd + Opption + I )，或通過右右鍵點擊頁面面，選擇彈出出菜單中的“審審查元素”。瀏覽器開發(fā)工具集類型文檔ChromeDevelopper Toools集成 HYPERLINK /chrome/devtools/docs/overview.html DocumenntatioonFirefoxxFirebugg HYPERLINK / 擴展 HYPERLINK /wiki/index.php/Main_Page DocumenntatioonInterneet

3、 ExpplorerrDevelopper Tooolbarr集成 HYPERLINK /en-us/library/gg589507(v=VS.85).aspx DocumenntatioonOperaDragonnfly集成 HYPERLINK /dragonfly/documentation/ DocumenntatioonSafariDevelopper Toools集成 ( HYPERLINK /library/safari/#documentation/appleapplications/Conceptual/Safari_Developer_Guide/2SafariDevelo

4、perTools/SafariDeveloperTools.html#/apple_ref/doc/uid/TP40007874-CH3-SW7 l documentation/appleapplications/Conceptual/Safari_Developer_Guide/2SafariDeveloperTools/SafariDeveloperTools.html#/apple_ref/doc/uid/TP40007874-CH3-SW7 默認(rèn)關(guān)關(guān)閉) HYPERLINK /library/safari/#documentation/appleapplications/Concept

5、ual/Safari_Developer_Guide/2SafariDeveloperTools/SafariDeveloperTools.html l documentation/appleapplications/Conceptual/Safari_Developer_Guide/2SafariDeveloperTools/SafariDeveloperTools.html Overvieew你充分發(fā)揮了這這些工具的潛潛力嗎?開發(fā)發(fā)工具最大的的特點就是很很容易使用，但但結(jié)果就是開開發(fā)者們常常常錯過了它們們所提供的大大部分功能。受受到 HYPERLINK /2011/a-re-introdu

6、ction-to-the-chrome-developer-tools/ Paull Irissh 和 PPavel Feldmman 視頻頻談話的啟發(fā)發(fā)，我列出了了一個有關(guān)開開發(fā)控制臺“秘秘密”的列表表。我不指望望它們中的每每一個都對你你來說是未知知的，只希望望它們中的某某一些能夠有有助你成為一一個更好的WWeb開發(fā)者者。如果你有更多的的“秘密”，請請自在地在文文章末尾留言言一旦我我確認(rèn)了，我我會及時更新新這篇文章。我我也很想知道道你哪個開發(fā)發(fā)控制臺是你你首要的開發(fā)發(fā)工具，也可可以直接在下下面留言?？刂婆_選項卡引用當(dāng)前元素Chrome, Fireefox, Operaa, Saffari 如

7、果在“元元素”選項卡卡中，你有一一個元素正被被選中的話，你你可以通過引引用“$0”來來你的代碼中中調(diào)用它。比比如，為了看看到你選中元元素的內(nèi)容，你你可以輸入 “$0.iinnerHHTML”。在在Chromme和Saffari中，你你可以通過按按下“Escc”鍵，立即即從其他選項項卡切換到控控制臺(開發(fā)發(fā)工具打開了了的情況下)。在Firrebug中中，控制臺通通過點擊選項項卡左側(cè)的圖圖標(biāo)，或按下下Ctrl + Shiift + L 來切換換(Mac 下是 Cmmd + SShift + L )。在Opera中中，你可以用用“$1”往往前引用元素素。在Chrrome和SSafarii中，你可以以

8、用“$1$4”往前前引用元素。使用consoole.loog同時輸出出多個值和對對象所有瀏覽器我我們都知道，cconsolle.logg()方法用用來輸出調(diào)試試信息到控制制臺時非常有有用，尤其是是與alerrt相比。但但是當(dāng)你想要要輸出一個字字符串緊跟著著一個對象時時，它輸出的的形式會讓人人生煩。比如如使用connsole.log(messaage: + $(#messsage)將僅僅告告訴你消息是是一個對象(*譯注：可可能輸出結(jié)果果是“messsage:objeect Obbject”)，并且且如果這個過過程在一個循循環(huán)體中的話話，對象的表表示讓人困惑惑。consolee.log()實際上可

9、可以接收多個個參數(shù)，所以以你可以同時時輸出字符串串和對象：cconsolle.logg(messsage:,$(#messsage);或者其其他你能想到到的JavaaScrippt類型組合合。你可以用connsole.warn()輸出警告告消息;用cconsolle.errror()輸輸出錯誤消息息;用()輸出信息息消息。你也也可以使用cconsolle.asssert()來檢測表達(dá)達(dá)式為truue或fallse。(感謝Maskklinn提提供了此項信信息)重用JavaSScriptt命令所有瀏覽器如如果你輸入過過一條命令到到JavaSScriptt控制臺，并并且你又想重重新運行它，只只要簡單

10、地按按下方向鍵“”來回滾你你調(diào)用過的命命令就可以了了。保持Chrome，F(xiàn)FirefooxFirrebug 控制臺上方方有一個很明明顯的“保持持”(Perrsist)按鈕，但CChromee中被稍微隱隱藏掉了需要右鍵點點擊控制臺，在在彈出的右鍵鍵菜單中選擇擇“Presserve Log uupon NNavigaation”選選項。*譯注：保持的的作用是讓控控制臺在刷新新頁面后仍然然保留已輸出出的控制臺信信息。查看對象源FirefoxxFireefox支持持toSouurce()方法，這意意味著在Fiirebugg中可以直接接調(diào)用這個方方法來打印一一個對象的字字符串表示。改變frameeFir

11、efoxx從控制臺臺直接運行JJavaSccript命命令是很有用用的，但是如如果你頁面用用了ifraame內(nèi)容的的話，就變得得麻煩了。幸幸運的是，用用下面的“ccd”命令能能夠進(jìn)入到指指定的ifrrame環(huán)境境，得以重新新運行你的命命令：cd(winddow.frramesframmeNamee);*譯注：比如ccd(winndow.fframess0)，它會進(jìn)入第一個iframe的執(zhí)行環(huán)境，并顯示一條info消息：Current window:, Window ;同時，返回上層可以使用：cd(parent)ChromeChromme允許你用用一個不同的的方式來改變變framee，點擊控制制

12、臺底部的下下拉菜單進(jìn)行行切換：OperaOOpera中中，控制臺和和文檔選項卡卡都存在一個個用來切換fframe的的下拉菜單控制臺中中的那個下拉拉菜單僅在有有framee可供選擇時時才顯示：(感謝Paull Irissh和Danniel提供供此項信息)直接復(fù)制你的代代碼到剪貼板板Chrome，F(xiàn)Firefoox，Saffari在在控制臺中使使用copyy()命令，以以內(nèi)容作參數(shù)數(shù)，將直接復(fù)復(fù)制內(nèi)容到剪剪貼板。讓瀏覽器做計算算所有瀏覽器這這個技巧很有有意義，但令令人驚訝的是是會有多少人人不這么去用用它。當(dāng)你想想快速知道一一個數(shù)學(xué)計算算的答案(比比如，一個4456像素寬寬度的容器分分三欄，每欄欄有

13、多寬?)，你不需要要打開一個計計算器，直接接在控制臺輸輸入就能立即即返回答案。順順便說一下，答答案是1522。*譯注：這又不不是Bot，OO_O作者應(yīng)應(yīng)該是指直接接在控制臺輸輸入表達(dá)式：456/33腳本選項卡頁面所有運行腳腳本安身的地地方，這個選選項卡包含了了一個下拉菜菜單，讓你可可以選擇你想想要調(diào)試的腳腳本。處理壓縮過的腳腳本Chrome，IInternnet Exxploreer, Saafari放置一個斷斷點在代碼中中會讓調(diào)試更更簡單。如果果腳本是已經(jīng)經(jīng)投入生產(chǎn)環(huán)環(huán)境了的話，它它就很可能已已經(jīng)被壓縮過過了。這時怎怎么你怎么調(diào)調(diào)試壓縮過的的代碼呢?幸幸好，部分瀏瀏覽器有個選選項可以解壓壓你

14、的JavvaScriipt代碼。Chrome和和Safarri中，簡單單地選擇腳本本選項卡，通通過下拉菜單單選擇相關(guān)的的腳本，然后后點擊底部面面板的”(preetty pprint)圖標(biāo)：在IE9中，點點擊選中腳本本旁邊的工具具圖標(biāo)來格式式化JavaaScrippt代碼：監(jiān)視變量所有瀏覽器.NET開發(fā)發(fā)中的一個常常用工具，“監(jiān)監(jiān)視”允許通通過腳本選項項卡右上欄的的方便的區(qū)域域來觀察一組組變量。要觀觀察一個變量量很簡單，只只要輸入它的的名字，“監(jiān)監(jiān)視”將保持持它最新的值值。實時編輯和執(zhí)行行JavaSScriptt代碼Chrome在Chroome中，你你可以直接在在頁面中進(jìn)行行編輯，并不不需要使用

15、單單獨的編輯器器或者重新加加載頁面。簡簡單地雙擊你你想要改變代代碼，然后輸輸入新的代碼碼!按Ctrrl + SS (Macc，Cmd+S)保存。當(dāng)錯誤發(fā)生時創(chuàng)創(chuàng)建一個斷點點所有瀏覽器當(dāng)當(dāng)?shù)谝粋€腳本本錯誤發(fā)生時時，簡單地點點擊腳本選項項卡中的暫停停圖標(biāo)，出錯錯行將會高亮亮以便查看。當(dāng)DOM改變時時創(chuàng)建一個斷斷點Chrome，F(xiàn)Firefoox如果你你知道當(dāng)某個個特定部分的的DOM改變變時頁面崩潰潰了，或者你你僅僅想找出出是哪段腳本本改變了某個個元素的屬性性，Chroome和Fiirefoxx都提供了有有效設(shè)置斷點點的方式來找找出這個元兇兇。簡單地選選中你要監(jiān)視視的元素，右右鍵點擊它，選選擇中斷條

16、件件：元素選項卡Firefoxx中叫做“HHTML”選選項卡，Oppera中叫叫做“文檔”(Documments)選項卡。元元素(Eleementss)選項卡顯顯示的是當(dāng)前前狀態(tài)的DOOM。在IEE中，你需要要點擊“刷新新”按鈕才能能查看當(dāng)前的的DOM。獲取一個容器尺尺寸的簡易辦辦法Chrome，SSafarii我是個在在包含浮動元元素的容器上上使用oveerfloww:autoo樣式的大粉粉絲舊版版本的IE這這樣做會引起起麻煩，除非非你給元素指指定了實際寬寬度(autto和1000%都不夠)。雖然元素素的實際尺寸寸可以在元素素選項卡右上上角的“Coomputeed Styyle”欄看看到，但

17、仍然然需要點擊好好幾次。在CChromee或Safaari中更好好辦法是，鼠鼠標(biāo)懸停到元元素選項卡里里HTML源源代碼的特定定元素上，或或者點擊底部部工具欄上的的放大鏡后再再懸停到頁面面特定元素上上：Firebugg, Intternett Expllorer, Operra 你你需要選擇開開發(fā)工具右手手側(cè)面板中的的“布局”(Layouut)選項卡卡，或在右側(cè)側(cè)邊欄中的“計計算樣式”(compuuted sstyless)中查看。展開所有元素視視圖Firefoxx，Operra 在FFirebuug的HTMML選項卡中中，按下小鍵鍵盤上的星號號(*)鍵就就可以展開選選定的所有元元素。默認(rèn)不不會

18、展開腳本本標(biāo)記和樣式式標(biāo)記，除非非你同時按下下Shiftt + * 鍵。Opera Operra“文檔”(Documments)選項卡下邊邊直接有個按按鈕可以做這這件事：增加邊距、間距距、高度、寬寬度、邊框甚至是顏顏色所有瀏覽器如如果你想改變變某元素的邊邊距、間距、高高度或者，你你可以用光標(biāo)標(biāo)鍵(即方向向鍵)來增加加/減小大小?。?按上()或下()鍵將增加或或減小單位11。 在Chroome，F(xiàn)iirebugg和Safaari中，按按住Shifft鍵的同時時，再按上或或下鍵將增加加或減小單位位10。(*譯注：Paage-Upp和Pagee-Downn鍵有同樣的的效果) 在Chroome和Saa

19、fari中中，按住Allt鍵的同時時，再按上或或下鍵將增加加或減小單位位0. 1。 在Chroome和Saafari中中，按住Shhift鍵的的同時，再按按Up或Paage-Doown鍵將增增加或減小單單位100。這些快捷鍵在你你不確定用哪哪種使用的尺尺寸做樣式時時特別有用。另另外，Chrrome，F(xiàn)Firebuug和Opeera中，你你同時可以用用這些快捷鍵鍵來修改顏色色值。*譯注：需要雙雙擊元素選項項卡右側(cè)的具具體樣式，使使其進(jìn)入編輯輯狀態(tài)。為:activve, :hhover, :foccus, :visitted狀態(tài)設(shè)設(shè)置樣式Chrome，F(xiàn)Firefoox，Opeera 在在控制臺操

20、作作樣式真的很很棒，但測試試懸停樣式就就麻煩了。慶慶幸的是，有有個解決辦法法。Chrome有有個內(nèi)置按鈕鈕用來做這件件事。在元素素選項卡右側(cè)側(cè)有個帶虛線線框和光標(biāo)的的圖標(biāo)，它就就是用來編輯輯狀態(tài)樣式的的：Firebugg中，點擊右右側(cè)的Styyle選項卡卡旁邊的帶箭箭頭菜單，然然后選擇你想想要編輯的狀狀態(tài)。在Opera中中，樣式選項項卡下面有個個看起來像列列表的圖標(biāo)。輪換顏色定義類類型Chrome，SSafarii Webb頁面中的顏顏色能用多個個方式定義通過名稱稱、16進(jìn)制制數(shù)字(3位位或6位)、rrgb或hssl(都有帶帶alphaa透明的版本本)。在Chhrome 或 Saffari中，

21、你你可以通過點點擊顏色值旁旁邊的方形圖圖標(biāo)來在這幾幾個類型定義義之間切換。*譯注：增加了了這個截圖，以以前我僅僅以以為那個方塊塊是用來展示示顏色的，囧囧，根本不知知道它還能點點擊又多多了一個能省省略掉計算器器的功能。顏色拾取器Opera 在 Oppera中，和和上面一樣，點點擊顏色值右右邊的方塊圖圖標(biāo)可以彈出出一個方便的的拾取器：*譯注：這里又又有了個HSSV顏色自動動轉(zhuǎn)換RGBB顏色的工具具。資源選項卡資源(resoourcess)選項卡列列表你的頁面面使用的所有有樣式表、JJavaSccript文文件和圖片。不不幸的是，IIE和Firrebug中中不存在這個個選項卡，盡盡管在它們的的其他選

22、項卡卡中集成了這這項功能的一一些特征。保存你的更改Chrome，IInternnet Exxploreer, Saafari在工具中中即時編輯樣樣式或JavvaScriipt很爽。但但當(dāng)你高高興興興地做了修修改，然后又又要在源代碼碼中重新實現(xiàn)現(xiàn)一遍就不那那么爽了。在IE中，每個個選項卡提供供了一個“保保存”圖標(biāo)，它它的功能就是是保存修改到到一個文件當(dāng)當(dāng)中。同時，Chroome和Saafari的的資源選項卡卡中提供了一一項貼心的功功能：它保存存了你每次修修改的版本(按Ctrll + S之之后)，還允允許你往前或或往后查看每每個版本的變變化。你修改改過的文件名名旁邊會出現(xiàn)現(xiàn)一個箭頭圖圖標(biāo)，表示它它

23、可以展開/收起以查看看修改過的版版本列表。在在Chromme中，右鍵鍵點擊文件名名可以選擇保保存這個文件件。不過在SSafarii中你只能悲悲劇地復(fù)制和和粘貼了。Cookie和和存儲Chrome，OOpera, Safaari資源源選項卡下半半部分的資源源列表表示了了各種不同的的數(shù)據(jù)存儲選選項。Opeera有一個個單獨的存儲儲選項卡。網(wǎng)絡(luò)選項卡網(wǎng)絡(luò)(Netwwork)選選項卡顯示你你頁面加載的的所有文件資資源。大多數(shù)數(shù)情況，你打打開它之后，要要刷新一下頁頁面才能顯示示出你想看的的信息。在FFirebuug中，選項項卡的名稱是是“Net”。對對于IE，直直到版本9以以后才有它。禁用瀏覽器緩存存所有瀏覽器每每個瀏覽器都都可以禁用緩緩存，但禁用用的方式不一一致。在Chromee中，點擊開開發(fā)工具右下下角的齒輪圖圖標(biāo)進(jìn)行設(shè)置置。在Firrebug中中，設(shè)置位于于網(wǎng)絡(luò)選項卡卡旁邊的箭頭頭下拉菜單中中。在IE中中，設(shè)置位于于菜單欄的存存菜單項。在Opera中中，要清除緩緩存的話，點點擊網(wǎng)絡(luò)選項項卡，選擇網(wǎng)網(wǎng)絡(luò)選項中的的第二個選項項卡，選擇其其中的第一個個選項。在SSafarii中，在菜單單欄中的“開開發(fā)”菜單中中禁用緩存。Windowss中，在瀏覽覽器中可以按按下Ctrll + Shhift + Deleete鍵調(diào)用用消除緩