瀏覽器開發者工具在網頁UI設計上的應用

瀏覽器開發者工具

每個瀏覽器都擁有一個叫做開發者工具的工具選項，前端開發者們通常利用它來調試網頁，但是作為一名UI設計師，我們也可以使用它更好更快捷的完成我們的網頁或其它相關設計。

1

首先我們通過F12鍵打開開發者工具，進入如上樣式頁面。

2

接下來我們通過紅色箭頭所指的選擇工具來對網頁內容進行選擇，進而輔助我們進行網頁的數據採用及尺寸測量。

3

我們可以將選擇工具所呈現的箭頭移動到所需測量的圖片或其它小物件及其它大型布局內容內，選擇工具將為我們快速顯示當前內容的尺寸等相關數據。

使用選擇工具或者取色器工具可以用來獲取頁面中元素的相關顏色。

4

如果我們將選擇箭頭移動至頁面內的文字上，開發者工具中將會顯示該文字所使用的字體，從而幫助我們獲取想要採取的文字字體。

5

我們按照同樣的方法也可以獲取頁面中小圖標的尺寸，甚至找到小圖標的圖片文件。

6

我們還可以使用響應式設計模式來模擬網頁在其它規模尺寸下顯示模式，以此快速閱覽響應式網頁在其它多媒體設備下的顯示樣式。

文案咕嘟

圖片咕嘟

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！