軟件工程師-25個瀏覽器開發(fā)工具的小秘密(編輯修改稿)
2025-07-27 11:35 本頁面
【文章內(nèi)容簡介】 拉菜單，讓你可以選擇你想要調(diào)試的腳本。處理壓縮過的腳本Chrome，Internet Explorer, Safari–放置一個斷點在代碼中會讓調(diào)試更簡單。如果腳本是已經(jīng)投入生產(chǎn)環(huán)境了的話，它就很可能已經(jīng)被壓縮過了。這時怎么你怎么調(diào)試壓縮過的代碼呢?幸好，部分瀏覽器有個選項可以解壓你的JavaScript代碼。Chrome和Safari中，簡單地選擇腳本選項卡，通過下拉菜單選擇相關(guān)的腳本，然后點擊底部面板的”{}”(pretty print)圖標(biāo)：在IE9中，點擊選中腳本旁邊的工具圖標(biāo)來格式化JavaScript代碼：監(jiān)視變量所有瀏覽器–.NET開發(fā)中的一個常用工具，“監(jiān)視”允許通過腳本選項卡右上欄的方便的區(qū)域來觀察一組變量。要觀察一個變量很簡單，只要輸入它的名字，“監(jiān)視”將保持它最新的值。實時編輯和執(zhí)行JavaScript代碼Chrome–在Chrome中，你可以直接在頁面中進行編輯，并不需要使用單獨的編輯器或者重新加載頁面。簡單地雙擊你想要改變代碼，然后輸入新的代碼!按Ctrl + S (Mac，Cmd+S)保存。當(dāng)錯誤發(fā)生時創(chuàng)建一個斷點所有瀏覽器–當(dāng)?shù)谝粋€腳本錯誤發(fā)生時，簡單地點擊腳本選項卡中的暫停圖標(biāo)，出錯行將會高亮以便查看。當(dāng)DOM改變時創(chuàng)建一個斷點Chrome，F(xiàn)irefox–如果你知道當(dāng)某個特定部分的DOM改變時頁面崩潰了，或者你僅僅想找出是哪段腳本改變了某個元素的屬性，Chrome和Firefox都提供了有效設(shè)置斷點的方式來找出這個元兇。簡單地選中你要監(jiān)視的元素，右鍵點擊它，選擇中斷條件：元素選項卡Firefox中叫做“HTML”選項卡，Opera中叫做“文檔”(Documents)選項卡。元素(Elements)選項卡顯示的是當(dāng)前狀態(tài)的DOM。在IE中，你需要點擊“刷新”按鈕才能查看當(dāng)前的DOM。獲取一個容器尺寸的簡易辦法Chrome，Safari–我是個在包含浮動元素的容器上使用overflow:auto樣式的大粉絲——舊版本的IE這樣做會引起麻煩，除非你給元素指定了實際寬度(auto和100%都不夠)。雖然元素的實際尺寸可以在元素選項卡右上角的“Computed Style”欄看到，但仍然需要點擊好幾次。在Chrome或Safari中更好辦法是，鼠標(biāo)懸停到元素選項卡里HTML源代碼的特定元素上，或者點擊底部工具欄上的放大鏡后再懸停到頁面特定元素上：Firebug, Internet Explorer, Opera – 你需要選擇開發(fā)工具右手側(cè)面板中的“布局”(Layout)選項卡，或在右側(cè)邊欄中的“計算樣式”(puted styles)中查看。展開所有元素視圖Firefox，Opera –在Firebug的HTML選項卡中，按下小鍵盤上的星號(*)鍵就可以展開選定的所有元素。默認(rèn)不會展開腳本標(biāo)記和樣式標(biāo)記，除非你同時按下Shift + * 鍵。Opera – Opera“文檔”(
公司管理相關(guān)推薦
鄂ICP備17016276號-1