詳解 Firefox 17 開發者工具的改進[多圖]

隨著每一個版本的火狐更新，開發者工具也會隨之增強，蚊仔也每次都會更新相應的改進內容。這次我們來看看Firefox17給開發者帶來了哪些新的便利（順便提一句蚊仔盼望的隨意修改復制HTML代碼來了=w=）。

 

HTML編輯

在Firefox的開發者工具中，元素查看器應該是最重要的工具了。利用查看器中的“樣式”面板，你可以很容易地操作頁面上的樣式。但你有時需要操縱DOM的頁面的話，新的“標記面板”可以讓你做到這一點。

新的標記面板

標記面板的快捷鍵還是原來的Alt+M（Mac上按Ctrl+M），或者鼠標點擊上圖中第三個按鈕。（說白了就是標準的Html代碼面板）

以前的話，你通過點擊選擇“標記面板“的元素“可以查看”樣式面板“中的css樣式。也可以右鍵單擊標記面板中的某一元素，進行一些便捷操作（快速復制、刪除HTML節點）。（如圖）

那么Firefox 17的“標記面板”有什么新的改變呢？在此之前，你只能可以雙擊屬性值更改該值。現在，你可以在幾乎任何地方雙擊，進行任何修改。比如雙擊來改變文本的內 容。同樣，對于標簽本身也可以修改，比如雙擊關閉的標簽“>”之前的空間，你可以添加新的屬性。

你還會發現新版中，可以使用Tab鍵和方向鍵在標簽和節點之間移動。鍵盤導航可以是編輯DOM的工作跟快捷。

Web控制臺

一個小改進，就是用于網頁的放大、縮小功能，現在在Web控制臺中也同樣適用了。鼠標選中控制臺后，是哦也能夠快捷鍵CTRL++、CTRL+-和CTRL+重置（Windows / Linux），CMD++，CMD+-和CMD+（Mac）。

注：Web控制臺還有一些改進，因為有點難翻譯，詳細看這里。

元素查看器視覺效果改變

在元素查看器里選中元素的視覺效果做了修改。

在目前的版本中，選擇元素的視覺效果是，背景變為暗色，以突出選擇部分。（如圖）

在Firefox17后，背景不會發生變化，而是給選中部分加上一個虛線邊框。這樣的好處不會影響Web整體的設計感覺，對Web設計者來說是一個不錯的改進。（如圖）

調試器的改進

1、快速跨腳本搜索。在調試器的搜索框中輸入“!”+“要搜索的內容”，可以快速的跨腳本搜索所有相關的腳本內容。（如圖）

2、得到更多查看空間。如果你想要更多的空間來看看你的代碼，在左側增加了一個新的工具欄按鈕（上圖第二個按鈕），點擊后將關閉兩個側面板，讓你的代碼得到整個寬度的空間。

3、新增了更多的鍵盤快捷鍵。讓使用調試器比以往任何時候都便捷、更快：

• ALT+SHIFT+P（Windows），CTRL+SHIFT+P（Mac）焦點定位到搜索框
• ALT+SHIFT+T（Windows），CTRL+SHIFT+T（Mac）字符串（token）搜索
• F6 繼續
• F7 跨過
• F8 進入
• F8 跳出

注：在Firefox15中“在頁面重載后，調試器斷點不捕捉的問題（783393）；”的問題在Firefox16中已經被修復。

另外隨便說一句15開始Android版“干脆面”也開始好用了。下面這張圖太萌了=w=

 文/蚊仔部屋