軟件工程師-25個(gè)瀏覽器開發(fā)工具的小秘密(編輯修改稿)
2025-07-27 11:35 本頁面
【文章內(nèi)容簡(jiǎn)介】 拉菜單，讓你可以選擇你想要調(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)擊它，選擇中斷條件：元素選項(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ì)算樣式”(puted styles)中查看。展開所有元素視圖Firefox，Opera –在Firebug的HTML選項(xiàng)卡中，按下小鍵盤上的星號(hào)(*)鍵就可以展開選定的所有元素。默認(rèn)不會(huì)展開腳本標(biāo)記和樣式標(biāo)記，除非你同時(shí)按下Shift + * 鍵。Opera – Opera“文檔”(
公司管理相關(guān)推薦
鄂ICP備17016276號(hào)-1