軟件工程師-25個瀏覽器開發(fā)工具的小秘密_第1頁
軟件工程師-25個瀏覽器開發(fā)工具的小秘密_第2頁
軟件工程師-25個瀏覽器開發(fā)工具的小秘密_第3頁
軟件工程師-25個瀏覽器開發(fā)工具的小秘密_第4頁
軟件工程師-25個瀏覽器開發(fā)工具的小秘密_第5頁
已閱讀5頁,還剩8頁未讀, 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)

文檔簡介

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

2、自自己的工具具,并且每每一個都有有自己的優(yōu)優(yōu)勢和劣勢勢。如今很很難想像沒沒有這些方方便的工具具,如何來來構(gòu)建一個個網(wǎng)站。激活開發(fā)工工具通常是是按下“FF12”鍵鍵(Macc系統(tǒng)為 Cmd + Opptionn + II ),或或通過右鍵鍵點擊頁面面,選擇彈彈出菜單中中的“審查查元素”。瀏覽器開發(fā)工具集集類型文檔ChrommeDevelloperr Toools集成 HYPERLINK /chrome/devtools/docs/overview.html DocummentaationnFireffoxFirebbug HYPERLINK / 擴展 HYPERLINK /wiki/index.

3、php/Main_Page DocummentaationnInterrnet ExpllorerrDevelloperr Tooolbarr集成 HYPERLINK /en-us/library/gg589507(v=VS.85).aspx DocummentaationnOperaaDraggonflly集成 HYPERLINK /dragonfly/documentation/ DocummentaationnSafarriDevelloperr Toools集成 ( HYPERLINK /library/safari/#documentation/appleapplications/C

4、onceptual/Safari_Developer_Guide/2SafariDeveloperTools/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 默默認關(guān)閉) HYPERLINK /library/s

5、afari/#documentation/appleapplications/Conceptual/Safari_Developer_Guide/2SafariDeveloperTools/SafariDeveloperTools.html l documentation/appleapplications/Conceptual/Safari_Developer_Guide/2SafariDeveloperTools/SafariDeveloperTools.html Overvview你充分發(fā)揮揮了這些工工具的潛力力嗎?開發(fā)發(fā)工具最大大的特點就就是很容易易使用,但但結(jié)果就是是開發(fā)者們們常常錯

6、過過了它們所所提供的大大部分功能能。受到 HYPERLINK /2011/a-re-introduction-to-the-chrome-developer-tools/ PPaul Irissh 和 Paveel Feeldmaan 視頻頻談話的啟啟發(fā),我列列出了一個個有關(guān)開發(fā)發(fā)控制臺“秘密”的的列表。我我不指望它它們中的每每一個都對對你來說是是未知的,只只希望它們們中的某一一些能夠有有助你成為為一個更好好的Webb開發(fā)者。如果你有更更多的“秘秘密”,請請自在地在在文章末尾尾留言一旦我確確認了,我我會及時更更新這篇文文章。我也也很想知道道你哪個開開發(fā)控制臺臺是你首要要的開發(fā)工工具,也可可以直

7、接在在下面留言言??刂婆_選項項卡引用當前元元素Chromme, FFireffox, Operra, SSafarri 如果在“元素”選選項卡中,你你有一個元元素正被選選中的話,你你可以通過過引用“$0”來你你的代碼中中調(diào)用它。比如,為為了看到你你選中元素素的內(nèi)容,你你可以輸入入 “$00.innnerHTTML”。在Chrrome和和Safaari中,你你可以通過過按下“EEsc”鍵鍵,立即從從其他選項項卡切換到到控制臺(開發(fā)工具具打開了的的情況下)。在Fiirebuug中,控控制臺通過過點擊選項項卡左側(cè)的的圖標,或或按下Cttrl + Shiift + L 來來切換(MMac 下下是 Cm

8、md + Shifft + L )。在Operra中,你你可以用“$1”往往前引用元元素。在CChromme和Saafarii中,你可可以用“$1$44”往前引引用元素。使用connsolee.logg同時輸出出多個值和和對象所有瀏覽器器我們都都知道,cconsoole.llog()方法用來來輸出調(diào)試試信息到控控制臺時非非常有用,尤尤其是與aalertt相比。但但是當你想想要輸出一一個字符串串緊跟著一一個對象時時,它輸出出的形式會會讓人生煩煩。比如使使用connsolee.logg(meessagge: + $(#meessagge)將僅僅告告訴你消息息是一個對對象(*譯譯注:可能能輸出結(jié)果果

9、是“meessagge:oobjecct Obbjectt”),并并且如果這這個過程在在一個循環(huán)環(huán)體中的話話,對象的的表示讓人人困惑。consoole.llog()實際上可可以接收多多個參數(shù),所所以你可以以同時輸出出字符串和和對象:cconsoole.llog(messsage:,$(#meessagge);或者其其他你能想想到的JaavaSccriptt類型組合合。你可以用cconsoole.wwarn()輸出警警告消息;用connsolee.errror()輸出錯誤誤消息;用用o()輸出出信息消息息。你也可可以使用cconsoole.aasserrt()來來檢測表達達式為trrue或ffa

10、lsee。(感謝Maaskliinn提供供了此項信信息)重用JavvaScrript命命令所有瀏覽器器如果你你輸入過一一條命令到到JavaaScriipt控制制臺,并且且你又想重重新運行它它,只要簡簡單地按下下方向鍵“”來回回滾你調(diào)用用過的命令令就可以了了。保持Chromme,F(xiàn)iirefooxFiirebuug 控制制臺上方有有一個很明明顯的“保保持”(PPersiist)按按鈕,但CChromme中被稍稍微隱藏掉掉了需需要右鍵點點擊控制臺臺,在彈出出的右鍵菜菜單中選擇擇“Preeservve Loog uppon NNaviggatioon”選項項。*譯注:保保持的作用用是讓控制制臺在刷新

11、新頁面后仍仍然保留已已輸出的控控制臺信息息。查看對象源源FireffoxFFireffox支持持toSoourcee()方法法,這意味味著在Fiirebuug中可以以直接調(diào)用用這個方法法來打印一一個對象的的字符串表表示。改變fraameFireffox從從控制臺直直接運行JJavaSScrippt命令是是很有用的的,但是如如果你頁面面用了ifframee內(nèi)容的話話,就變得得麻煩了。幸運的是是,用下面面的“cdd”命令能能夠進入到到指定的iiframme環(huán)境,得得以重新運運行你的命命令:cd(wiindoww.fraamesfraameNaame);*譯注:比比如cd(winddow.ffram

12、ees0),它會會進入第一一個ifrrame的的執(zhí)行環(huán)境境,并顯示示一條innfo消息息:CCurreent wwindoow:, Winndow sampple.ccom;同時,返返回上層可可以使用:cd(pparennt)ChrommeChhromee允許你用用一個不同同的方式來來改變frrame,點點擊控制臺臺底部的下下拉菜單進進行切換:OperaaOpeera中,控控制臺和文文檔選項卡卡都存在一一個用來切切換fraame的下下拉菜單控制臺臺中的那個個下拉菜單單僅在有fframee可供選擇擇時才顯示示:(感謝Paaul IIrishh和Danniel提提供此項信信息)直接復制你你的代碼到

13、到剪貼板Chromme,F(xiàn)iirefoox,Saafarii在控制制臺中使用用copyy()命令令,以內(nèi)容容作參數(shù),將將直接復制制內(nèi)容到剪剪貼板。讓瀏覽器做做計算所有瀏覽器器這個技技巧很有意意義,但令令人驚訝的的是會有多多少人不這這么去用它它。當你想想快速知道道一個數(shù)學學計算的答答案(比如如,一個4456像素素寬度的容容器分三欄欄,每欄有有多寬?),你不需需要打開一一個計算器器,直接在在控制臺輸輸入就能立立即返回答答案。順便便說一下,答答案是1552。*譯注:這這又不是BBot,OO_O作者者應該是指指直接在控控制臺輸入入表達式:456/3腳本選項卡卡頁面所有運運行腳本安安身的地方方,這個選選

14、項卡包含含了一個下下拉菜單,讓讓你可以選選擇你想要要調(diào)試的腳腳本。處理壓縮過過的腳本Chromme,Innternnet EExploorer, Saffari放置一個個斷點在代代碼中會讓讓調(diào)試更簡簡單。如果果腳本是已已經(jīng)投入生生產(chǎn)環(huán)境了了的話,它它就很可能能已經(jīng)被壓壓縮過了。這時怎么么你怎么調(diào)調(diào)試壓縮過過的代碼呢呢?幸好,部部分瀏覽器器有個選項項可以解壓壓你的JaavaSccriptt代碼。Chromme和Saafarii中,簡單單地選擇腳腳本選項卡卡,通過下下拉菜單選選擇相關(guān)的的腳本,然然后點擊底底部面板的的”(preetty prinnt)圖標標:在IE9中中,點擊選選中腳本旁旁邊的工具

15、具圖標來格格式化JaavaSccriptt代碼:監(jiān)視變量所有瀏覽器器.NEET開發(fā)中中的一個常常用工具,“監(jiān)視”允允許通過腳腳本選項卡卡右上欄的的方便的區(qū)區(qū)域來觀察察一組變量量。要觀察察一個變量量很簡單,只只要輸入它它的名字,“監(jiān)視”將將保持它最最新的值。實時編輯和和執(zhí)行JaavaSccriptt代碼Chromme在CChromme中,你你可以直接接在頁面中中進行編輯輯,并不需需要使用單單獨的編輯輯器或者重重新加載頁頁面。簡單單地雙擊你你想要改變變代碼,然然后輸入新新的代碼!按Ctrrl + S (MMac,CCmd+SS)保存。當錯誤發(fā)生生時創(chuàng)建一一個斷點所有瀏覽器器當?shù)谝灰粋€腳本錯錯誤發(fā)生

16、時時,簡單地地點擊腳本本選項卡中中的暫停圖圖標,出錯錯行將會高高亮以便查查看。當DOM改改變時創(chuàng)建建一個斷點點Chromme,F(xiàn)iirefoox如果果你知道當當某個特定定部分的DDOM改變變時頁面崩崩潰了,或或者你僅僅僅想找出是是哪段腳本本改變了某某個元素的的屬性,CChromme和Fiirefoox都提供供了有效設設置斷點的的方式來找找出這個元元兇。簡單單地選中你你要監(jiān)視的的元素,右右鍵點擊它它,選擇中中斷條件:元素選項卡卡Fireffox中叫叫做“HTTML”選選項卡,OOperaa中叫做“文檔”(Docuumentts)選項項卡。元素素(Eleementts)選項項卡顯示的的是當前狀狀態(tài)

17、的DOOM。在IIE中,你你需要點擊擊“刷新”按鈕才能能查看當前前的DOMM。獲取一個容容器尺寸的的簡易辦法法Chromme,Saafarii我是個個在包含浮浮動元素的的容器上使使用oveerfloow:auuto樣式式的大粉絲絲舊版版本的IEE這樣做會會引起麻煩煩,除非你你給元素指指定了實際際寬度(aauto和和100%都不夠)。雖然元元素的實際際尺寸可以以在元素選選項卡右上上角的“CCompuuted Stylle”欄看看到,但仍仍然需要點點擊好幾次次。在Chhromee或Saffari中中更好辦法法是,鼠標標懸停到元元素選項卡卡里HTMML源代碼碼的特定元元素上,或或者點擊底底部工具欄欄

18、上的放大大鏡后再懸懸停到頁面面特定元素素上:Firebbug, Inteernett Expploreer, OOperaa 你你需要選擇擇開發(fā)工具具右手側(cè)面面板中的“布局”(Layoout)選選項卡,或或在右側(cè)邊邊欄中的“計算樣式式”(coomputted sstylees)中查查看。展開所有元元素視圖Fireffox,OOperaa 在FFirebbug的HHTML選選項卡中,按按下小鍵盤盤上的星號號(*)鍵鍵就可以展展開選定的的所有元素素。默認不不會展開腳腳本標記和和樣式標記記,除非你你同時按下下Shifft + * 鍵。Operaa OOperaa“文檔”(Doccumennts)選選

19、項卡下邊邊直接有個個按鈕可以以做這件事事:增加邊距、間距、高高度、寬度度、邊框甚至是是顏色所有瀏覽器器如果你你想改變某某元素的邊邊距、間距距、高度或或者,你可可以用光標標鍵(即方方向鍵)來來增加/減減小大?。?按上()或下下()鍵鍵將增加或或減小單位位1。 在Chhromee,F(xiàn)irrebugg和Saffari中中,按住SShiftt鍵的同時時,再按上上或下鍵將將增加或減減小單位110。(*譯注:PUp和PDownn鍵有同樣樣的效果) 在Chhromee和Saffari中中,按住AAlt鍵的的同時,再再按上或下下鍵將增加加或減小單單位0. 1。 在Chhromee和Saffari中中,按住SS

20、hiftt鍵的同時時,再按PUp或PDownn鍵將增加加或減小單單位1000。這些快捷鍵鍵在你不確確定用哪種種使用的尺尺寸做樣式式時特別有有用。另外外,Chrrome,F(xiàn)Firebbug和OOperaa中,你同同時可以用用這些快捷捷鍵來修改改顏色值。*譯注:需需要雙擊元元素選項卡卡右側(cè)的具具體樣式,使使其進入編編輯狀態(tài)。為:acttive, :hoover, :foocus, :viisiteed狀態(tài)設設置樣式Chromme,F(xiàn)iirefoox,Oppera 在控制制臺操作樣樣式真的很很棒,但測測試懸停樣樣式就麻煩煩了。慶幸幸的是,有有個解決辦辦法。Chromme有個內(nèi)內(nèi)置按鈕用用來做這件件事

21、。在元元素選項卡卡右側(cè)有個個帶虛線框框和光標的的圖標,它它就是用來來編輯狀態(tài)態(tài)樣式的:Firebbug中,點點擊右側(cè)的的Stylle選項卡卡旁邊的帶帶箭頭菜單單,然后選選擇你想要要編輯的狀狀態(tài)。在Operra中,樣樣式選項卡卡下面有個個看起來像像列表的圖圖標。輪換顏色定定義類型Chromme,Saafarii Weeb頁面中中的顏色能能用多個方方式定義通過名名稱、166進制數(shù)字字(3位或或6位)、rgb或或hsl(都有帶aalphaa透明的版版本)。在在Chroome 或或 Saffari中中,你可以以通過點擊擊顏色值旁旁邊的方形形圖標來在在這幾個類類型定義之之間切換。*譯注:增增加了這個個截

22、圖,以以前我僅僅僅以為那個個方塊是用用來展示顏顏色的,囧囧,根本不不知道它還還能點擊又多了了一個能省省略掉計算算器的功能能。顏色拾取器器Operaa 在在 Opeera中,和和上面一樣樣,點擊顏顏色值右邊邊的方塊圖圖標可以彈彈出一個方方便的拾取取器:*譯注:這這里又有了了個HSVV顏色自動動轉(zhuǎn)換RGGB顏色的的工具。資源選項卡卡資源(reesourrces)選項卡列列表你的頁頁面使用的的所有樣式式表、JaavaSccriptt文件和圖圖片。不幸幸的是,IIE和Fiirebuug中不存存在這個選選項卡,盡盡管在它們們的其他選選項卡中集集成了這項項功能的一一些特征。保存你的更更改Chromme,I

23、nnternnet EExploorer, Saffari在工具具中即時編編輯樣式或或JavaaScriipt很爽爽。但當你你高高興興興地做了修修改,然后后又要在源源代碼中重重新實現(xiàn)一一遍就不那那么爽了。在IE中,每每個選項卡卡提供了一一個“保存存”圖標,它它的功能就就是保存修修改到一個個文件當中中。同時,Chhromee和Saffari的的資源選項項卡中提供供了一項貼貼心的功能能:它保存存了你每次次修改的版版本(按CCtrl + S之之后),還還允許你往往前或往后后查看每個個版本的變變化。你修修改過的文文件名旁邊邊會出現(xiàn)一一個箭頭圖圖標,表示示它可以展展開/收起起以查看修修改過的版版本列表。

24、在Chrrome中中,右鍵點點擊文件名名可以選擇擇保存這個個文件。不不過在Saafarii中你只能能悲劇地復復制和粘貼貼了。Cookiie和存儲儲Chromme,Oppera, Saffari資源選項項卡下半部部分的資源源列表表示示了各種不不同的數(shù)據(jù)據(jù)存儲選項項。Opeera有一一個單獨的的存儲選項項卡。網(wǎng)絡選項卡卡網(wǎng)絡(Neetworrk)選項項卡顯示你你頁面加載載的所有文文件資源。大多數(shù)情情況,你打打開它之后后,要刷新新一下頁面面才能顯示示出你想看看的信息。在Firrebugg中,選項項卡的名稱稱是“Neet”。對對于IE,直直到版本99以后才有有它。禁用瀏覽器器緩存所有瀏覽器器每個瀏瀏覽器都可可以禁用緩緩存,但禁禁用的方式式不一致。在Chroome中,點點擊開發(fā)工工具右下角角的齒輪圖圖標進行設設置。在FFirebbug中,設設置位于網(wǎng)網(wǎng)絡選項卡卡旁邊的箭箭頭下拉菜菜單中。在在IE中,設設置位于菜菜單欄的存存菜單項。在Operra中,要要清除緩存存的話,點點擊網(wǎng)絡選選項卡,選選擇網(wǎng)絡選選項中的第第二個選項項卡,選擇擇其中的第第一個選項項。在Saafarii中,在菜菜單欄中的的“開發(fā)”菜單中禁禁用緩存。Windoows中,在在瀏覽器中中可以按下下Ctrll + SShiftt + DDelette鍵調(diào)用用消除緩存存對話

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論