我在設計網頁時,常用到的幾項功能介紹給大家。
什麼是開發人員工具?
就是這個↓
要叫出這個介面,
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 除錯很方便,(尤其框架很複雜時,我只要某個區塊的資訊,我不要看所有程式碼時,非常方便)。
可以選 Tree 或是 Heavy 顯示模式
如果你知道要查的是哪一個Function 可以按下Ctrl +F
輸入你要的function ,找到之後按右邊的程式行號,即可在Source 裡面看到那段原始碼。進行除錯。
----------------------------------------------------------------------------------------------------
Audits:可以觀看網頁哪邊寫得不好,可加強的部分
----------------------------------------------------------------------------------------------------
Resources:可以觀看LocalStorage ,SessionStorage ,Cookie....等,確認一些資料不錯用。或是想要手動增加或修改資料直接點選欄位即可。
----------------------------------------------------------------------------------------------------
Security:觀看憑證,沒什麼機會用到。
----------------------------------------------------------------------------------------------------
沒有留言:
張貼留言