本篇轉載自 賣燒烤夫斯基 ,并做了小部分的修改。
原文地址: Chrome開發者工具不完全指南(一、基礎功能篇)
原作者:賣燒烤夫斯基
就算你不是一名前端開發工程師,相信你也不會對Chrome瀏覽器感到陌生。根據最新的一份(2015/06)的瀏覽器市場占有率報告,Chrome近乎占有瀏覽器天下的半壁江山。簡單、快捷使它成為了新時代人們的新寵。如果你是一名web開發人員,我推薦你使用Chrome。作為前端開發的"IDE",你只需要搭配一個編輯器就能完成幾乎所有的開發任務了。關于它的使用和功能分析要么都是大而不全,要么是巨細糜煩。本系會比較詳細地分享鹵煮的一些Chrome(F12開發者功能)使用經驗,從一些基礎的功能開始到它的一些高級性能分析器(Timeline、Profiles),在最后,將會推薦幾款好的插件,希望對您的開發工作有些許的作用。如果你對一些面板模塊功能已經很了解可以直接跳過去閱讀你感興趣的部分。
Elements
在Elements中主要分兩塊大的部分:
A. HTML結構面板
B. 操作DOM樣式、結構、時間的顯示面板
-
在A中,每當你的鼠標移動到任何一個元素上,對應的HTML視圖中會給該元素藍色的背景。
-
如果你單擊選中一個元素,在A部分的底部,會顯示該元素在HTML結構中的位置關系。
-
然后你可以在B部分的styles選項中編輯該元素的樣式,并且看到HTML結構的實時更新,無需刷新。
-
你可以在B界面中切換到Event Listener選項,觀察該元素綁定的事件。
-
click
是事件名稱
-
.div1
事件是索引名稱(也就是通過什么進行綁定)
-
attachment
事件來源
-
handler
事件回調的詳細內容
-
useCapture
事件是否為向上冒泡
-
-
選中一個元素,右擊鼠標,你會看到有一個彈出窗口出現,里面有若干選項。
-
在A界面的彈出選項窗口中選擇node removal,在B界面切換到DOM Breakpoints選項,可以看到有注冊信息。然后我們點擊click me按鈕觸發刪除div3的事件,可以看到瀏覽器自動為我們定位刪除該元素的代碼部分,并且停止執行js代碼:
-
在B界面中切換到Properties選項,可以看到選中元素的各種信息(英文單詞里面的介紹比較簡單,就不一一介紹了)。
-
點擊A界面的任意地方,按搜索的快捷鍵,可以在輸入框中查找任何內容,若匹配到都會在A面板中高亮顯示。
-
或者你可以點擊左上角的問號圖標,然后把鼠標移入到網頁內,點擊想要查看的元素,會在A面板中顯示相應的元素。
Network
-
Network是一個監控當前網頁所有的http請求的面板,它主體部分展示了每個http請求相應的信息。
-
單擊面板中的任意一條http信息,會在底部彈出一個新的面板,其中記錄了該條Http請求的詳細參數Header(表頭信息、返回信息、請求基本狀態)、Preview(返回的格式化轉移后的文本信息)、Response(轉移之前原始信息)、Cookies(該請求所帶的cookies)、Timing(請求時間變化)
-
在主面板的頂部,有一些按鈕從左到右它們的功能分別是:
-
是否啟用持續Http監控(默認高亮啟用)
-
清空主面板中的http信息
-
是否啟用過濾信息選項(默認啟用,可以對Http信息進行篩選過濾)
-
列出多重屬性
-
只列出name和time屬性
-
preserve log
當新加載頁面時不清除面板的請求信息
-
disable cache
禁用緩存
-
是否啟用持續Http監控(默認高亮啟用)
-
最后在主面板的底部有記錄了整體網絡請求狀態的一些基本信息
Resources
Resources部分比較簡單,它向我們展示了本頁面所加載的資源列表。還有Cookies和Local Storage、Session Storaged等本地儲存信息。在這里,我們可以自由地增刪改本地存儲信息。
至于webSql,我知道的并不多,在開發中很少用到。如果你想了解這方面的信息,我推薦你去閱讀 這篇博客 。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
