[轉貼]Google Chrome F12 開發者工具

轉載 http://fundesigner.net/chrome-dev-tool/

每次當要寫網頁時,不外乎就是時常打開瀏覽器來看顯示是否正常,看看是不是哪邊語法錯誤等等。而如果發現錯誤,我第一個不是回去看程式碼有沒有問題,而是使用Google Chrome開發者工具(Developer Tools),這個工具相當方便,不但在開發時能夠讓CSS快速完成,並且能夠即刻查看效果,沒錯,我平常都是這樣用的。
什麼是「Google Chrome Developer Tools 開發者工具」?
有些讀者可能沒使用過這個工具,其實這個工具在Google Chrome中就已經內建了,只要用Chrome開啟任一網頁按下「Ctrl+Shift+I」就會開始這個開發者工具。
另法:直接用滑鼠,按右鍵點「檢查元素」。
1
如上圖,會跳出一個Developer Tools開發者工具。這時候我們就可以來好好利用這個工具囉!
另外,也可以讓他固定在瀏覽器的下方,不獨立出一個視窗。只要點開發者工具視窗的左下角,第一個按鈕,就可以了。
3
然後就可以固定住了。
4

選取某區塊、段落

當我們要開始使用之前,當然要先選到要修改的地方,不需要再一直從開發者工具去打開層疊樹找指定區塊。
所以,我們先把滑鼠移到某區塊上面,並點選「檢查元素」:
2
這樣一來開發者工具就會自動固定到該區塊,然後看到下圖的右邊,出現了可以修改的樣式!
5

CSS 調較樣式、新增樣式功能

這個功能是我最常用的一項功能,因為用他來開發 CSS 樣式真的非常快。
承上一節,我們看到右方的樣式部分:
6
從上圖可以看到,怎麼會出現兩個font-size?因為我在開發的時候不小心前面打過了後面又再打一次,所以,前面的15px會自動被後面的16px覆蓋掉,而15px會被劃刪除線,意思就是這句已經被覆蓋掉不會生效。

修改顏色

在開發過程中常常會修改顏色,到最好看的地方。承上圖,我們可以看到在background: 右邊有一個正方形的顏色塊,我們可以點一下。
點一下之後我們就可以選其他顏色,而且這個調色盤的功能相當完整,是用漸層來讓你選顏色,而且還有透明度的調整。
7
另外你還可以發現點了之後,在網頁中的該區塊顏色會立即被更改成你選擇的顏色,方便立即查看效果。
(當然,這邊的修改在重新整理之後就會恢復原本的樣子)

修改值

很簡單,在每一個樣式上按一下就會自動變成編輯狀態,然後就可以修改成你要的樣子。
如下圖,我將留白改為左右各60px。
8
小技巧:將數值反白後,可利用鍵盤的↑↓鍵來調整數值,一次單位為1。

自動完成功能

此外開發者工具也很貼心的有自動完成的功能,只要輸入字頭,就會自動跳出自動完成的字了,這時候只要按下TAB鍵就可以自動完成拼字了。
9

取消樣式

當然,也可以把不需要用到的樣式,或不要用的樣式讓他不生效,很簡單,在屬性的左邊有一個打勾勾的地方,把他勾掉就不會套用該行樣式。
10

新增樣式

新增樣式的方法也很簡單,只要在旁邊的空白處按一下左鍵,就會出現新增屬性的框框了。
11
把自動完成發揮到極致,如下圖,選擇border,按下Enter,再按下TAB輸入值即可。
12
然後就可以整個把他輸入完囉,最後再按一下Enter就可以完成編輯。
13

HTML 新增、刪除、更名元素

Google當然也有想到這一點,所以在開發者工具裡面也可以把元素做一些調整,如刪除、新增和修改。
而要做這一些步驟,只要在開發者工具左方的元素上按下右鍵即可。
14
這邊可以做很多項調整,像是可以刪除該元素,如上圖。
如果你想要改class屬性的值,就在那上面快點兩下,就會變成編輯的狀態,就能修改。
15

偵錯功能

當然,開發者工具一定要有偵錯功能才稱的上是開發者工具嘛,要看目前的網頁有沒有錯誤,就點一下Console標籤即可。
16
這時候就可以知道哪邊有問題、想辦法要如何解決了。像是第二行的錯誤很明顯就是找不到檔案,這時候就可以去想是不是檔案名稱打錯了之類的解決方式。

務必記得

請注意,在這個開發者工具內做的所有動作都是暫時的,所以當你使用開發者工具修改了某元素之後,請務必也將原始檔案做更改的動作,才會生效。否則重新整理之後還是會恢復原來的樣子。
使用開發者工具的好處就是可以馬上添加某樣式下去看效果,修改樣式。Yuxin都是使用這個將覺得不好看的樣式先用開發者工具做修改,然後再將修改後的樣式程式碼複製,再貼回原始檔。
就這樣,真的能讓網頁設計開發的速度變得更快,時間是很寶貴的,能省時間,當然就要盡量去省。如果你也是Chrome的愛好者並且常常開發網頁,您不妨也用用看這個開發者工具的功能吧!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *