2016年6月20日 星期一

網頁設計人員必備技能:Chrome 開發人員工具 使用教學

Google覽器對開發人員很友善,提供了非常好用的工具,如果你會用,那對於工作上的能力是有顯著的提升的。
我在設計網頁時,常用到的幾項功能介紹給大家。



什麼是開發人員工具?

就是這個↓














要叫出這個介面,
1.可以直接按F12
2.選畫面上空白處按右鍵→選檢查
3.Ctrl + Shift + i
4.到右上角→更多工具→開發人員工具






總共有這幾項功能
Elements、Network、Sources 、Timeline、Profiles 、Audits、Resources、Security、Console



----------------------------------------------------------------------------------------------------

Elements:通常我應用在畫面美觀的調整Css,與除錯時確認節點的位置與附加屬性是否有添加上去。


應用1:點箭頭 ,選畫面上的按鈕,可以得知這是一個input標籤,他有什麼html屬性,並做修改Edit as Html  可以改成一張圖片  或是一個連結通通都可以,假設這是廣告可以選擇Delete Element ,你就會發現廣告不見了。



應用2:即時設定html屬性,與Css 樣式,達到快速修改版面的效果,只要修改好之後複製到程式裡面,就好了。不必一直重新編譯。



應用3:假裝成手機瀏覽網頁,可以選手機樣式,與直向橫向,頁面大小。






----------------------------------------------------------------------------------------------------


Network:通常在解析Request 與 Response ,尋找目前發出的請求,下載影片!!!


應用1:查看Http 請求,通常是想了解這個網站如何做資料的傳輸,或是除錯用的。




應用2:模擬網路速度,
例如
我想看看在3G 情況下,我的網頁要載入多久,就可以用這個測試,
、我今天下載一個檔案,我設定成4G 要下載多久,前提是你的網路速度有達到4G
或是直接關閉網路,玩Chrome的恐龍遊戲......。




應用3:下載影片.....Copy link address 你就有下載網址了,可以去下載了。



----------------------------------------------------------------------------------------------------

Sources :可以看到網頁原始碼,下中斷點除錯。


在程式碼行號的地方按一下滑鼠的左鍵,就會有藍藍的,這樣程式跑到那一行就會停下來。
F10 :單步追蹤(不進入涵式)
F11:單步追蹤(進入涵式)
F8:繼續執行到中斷點



----------------------------------------------------------------------------------------------------

Timeline:觀看網頁速度到底是誰花了最多的時間,做效能的改善。







----------------------------------------------------------------------------------------------------

Profiles :可以錄製操作過程所經歷過得程式碼區塊,搭配Sources 除錯很方便,(尤其框架很複雜時,我只要某個區塊的資訊,我不要看所有程式碼時,非常方便)。


 按下Start 會開始錄製,再按下Stop 會產生出一個檔案在左邊
可以選 Tree 或是 Heavy 顯示模式
如果你知道要查的是哪一個Function 可以按下Ctrl +F
輸入你要的function ,找到之後按右邊的程式行號,即可在Source 裡面看到那段原始碼。進行除錯。




----------------------------------------------------------------------------------------------------

Audits:可以觀看網頁哪邊寫得不好,可加強的部分





----------------------------------------------------------------------------------------------------

Resources:可以觀看LocalStorage ,SessionStorage ,Cookie....等,確認一些資料不錯用。或是想要手動增加或修改資料直接點選欄位即可。


----------------------------------------------------------------------------------------------------

Security:觀看憑證,沒什麼機會用到。


----------------------------------------------------------------------------------------------------

Console:即時下指令查看資料,通常是在"除錯用"或是"執行某段指令"。
















沒有留言:

張貼留言