前端開發神同樣的工具chrome調試技巧

前端開發神同樣的工具chrome調試技巧

文章來自  Colin-UED // 與您分享前端開發知識javascript

 

Chrome瀏覽器不只能夠調試頁面、JS、請求、資源、cookie,還能夠模擬手機進行調試。自從使用了Chrome,我就離不開它了。
下面整理一下如何使用Chrome進行調試。php

怎樣打開Chrome的開發者工具?

直接在頁面上點擊右鍵,而後選擇審查元素:
前端

或者在Chrome的工具中找到:

或者,你直接記住這個快捷方式: Ctrl+Shift+I (或者Ctrl+Shift+J直接打開控制檯),或者直接按F12
打開的開發者工具就長下面的樣子:
java

不過我通常習慣與點右上角的那個按鈕,將開發者工具彈出做爲一個獨立的窗口
node

Elements標籤頁

Elements標籤頁的左側就是對頁面HTML結構的查看與編輯,你能夠直接在某個元素上雙擊修改元素的屬性。
web

  1. Edit as HTML直接對元素的HTML進行編輯,或者刪除某個元素,全部的修改都會即時在頁面上獲得呈現。
  2. Copy能夠將HTML代碼直接複製下來,在拷貝別人網站上面的HTML代碼的時候灰常方便,你懂的~~
  3. Delete node刪掉一個HTML Node
  4. Break on能夠對某個元素進行監聽,在JS對元素的屬性或者HTML進行修改的時候,直接觸發斷點,跳轉到對改元素進行修改的JS代碼處

Elements標籤頁的右側能夠對元素的CSS進行查看與編輯修改:
chrome

  1. Style看HTML元素的樣式
  2. Computed能夠看元素的盒子模型
  3. Properties看到元素具備的方法與屬性,比查API手冊要方便得多

Network標籤頁

Network標籤頁對於分析網站請求的網絡狀況、查看某一請求的請求頭和響應頭還有響應內容頗有用。注意是在你打開Chrome開發者工具後發起的請求,纔會在這裏顯示的哦。

點擊左側某一個具體請求URL,能夠看到該請求的詳細HTTP請求狀況:

咱們能夠在這裏看到HTTP請求頭、HTTP響應頭、HTTP返回的內容等信息。瀏覽器

  1. Headers請求頭信息和響應頭信息
  2. Preview預覽結果,若是是文件能夠查看這個文件;若是是圖片能夠預覽這個圖片;若是是從服務器返回來的JSON數據,能夠查看格式話後的JSON
  3. Response從服務器返回的響應結果
  4. Cookies請求和響應的Cookie
  5. Timing具體的響應時間


Resources標籤頁

Resources標籤頁能夠查看到請求的資源狀況,包括CSS、JS、圖片等的內容。也能夠設置各類斷點。對存儲的內容進行編輯而後保存也會實時的反應到頁面上。

性能優化

Timeline標籤頁

注意這個Timeline的標籤頁不是指網絡請求的時間響應狀況,這個Timeline指的JS執行時間、頁面元素渲染時間(每一個信息都怎麼看,我沒弄懂..)
服務器

Profiles標籤頁

主要是作性能優化的,包括查看CPU執行時間與內存佔用(這個也沒弄懂)

Audits標籤頁

這個對於優化前端頁面、加速網頁加載速度頗有用哦(至關與Yslow)

點擊run按鈕,就能夠開始分析頁面,分析完了就能夠看到分析結果了

Console標籤頁

就是Javascript控制檯了:

在這個面板能夠查看錯誤信息、打印調試信息(console.log())、寫一些測試腳本,還能夠看成Javascript API查看用。

移動端開發調試

如今新版chrome彈出控制檯後以下圖,其中的工具對移動端調試很是方便。

在控制檯中能夠直接模擬手機、調整UA、修改網絡鏈接狀態

 

 
Sign in to leave a comment.
No Leanote account? Sign up now.
0 comments
     
    Themed by roomcar | Proudly powered by Leanote | | 站長統計
    相關文章
    相關標籤/搜索