亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

Chrome開發者工具不完全指南(一、基礎功能篇)

系統 1663 0

本篇轉載自 賣燒烤夫斯基 ,并做了小部分的修改。

原文地址: Chrome開發者工具不完全指南(一、基礎功能篇)

原作者:賣燒烤夫斯基


就算你不是一名前端開發工程師,相信你也不會對Chrome瀏覽器感到陌生。根據最新的一份(2015/06)的瀏覽器市場占有率報告,Chrome近乎占有瀏覽器天下的半壁江山。簡單、快捷使它成為了新時代人們的新寵。如果你是一名web開發人員,我推薦你使用Chrome。作為前端開發的"IDE",你只需要搭配一個編輯器就能完成幾乎所有的開發任務了。關于它的使用和功能分析要么都是大而不全,要么是巨細糜煩。本系會比較詳細地分享鹵煮的一些Chrome(F12開發者功能)使用經驗,從一些基礎的功能開始到它的一些高級性能分析器(Timeline、Profiles),在最后,將會推薦幾款好的插件,希望對您的開發工作有些許的作用。如果你對一些面板模塊功能已經很了解可以直接跳過去閱讀你感興趣的部分。

Elements


Chrome開發者工具不完全指南(一、基礎功能篇)_第1張圖片

在Elements中主要分兩塊大的部分:

A. HTML結構面板
B. 操作DOM樣式、結構、時間的顯示面板

  1. 在A中,每當你的鼠標移動到任何一個元素上,對應的HTML視圖中會給該元素藍色的背景。

    Chrome開發者工具不完全指南(一、基礎功能篇)_第2張圖片

  2. 如果你單擊選中一個元素,在A部分的底部,會顯示該元素在HTML結構中的位置關系。

    Chrome開發者工具不完全指南(一、基礎功能篇)_第3張圖片

  3. 然后你可以在B部分的styles選項中編輯該元素的樣式,并且看到HTML結構的實時更新,無需刷新。

    Chrome開發者工具不完全指南(一、基礎功能篇)_第4張圖片

  4. 你可以在B界面中切換到Event Listener選項,觀察該元素綁定的事件。

    Chrome開發者工具不完全指南(一、基礎功能篇)_第5張圖片

    • click 是事件名稱
    • .div1 事件是索引名稱(也就是通過什么進行綁定)
    • attachment 事件來源
    • handler 事件回調的詳細內容
    • useCapture 事件是否為向上冒泡
  5. 選中一個元素,右擊鼠標,你會看到有一個彈出窗口出現,里面有若干選項。

    Chrome開發者工具不完全指南(一、基礎功能篇)_第6張圖片

    • Add attribute 為元素添加屬性
    • Edit attribute 修改元素屬性
    • Force element state 為元素激活某種狀態, :hover , :focus
    • Edit as HTML 編輯該元素(可以重寫整個content)甚至修改它的標簽名稱
    • 略過一些 cut、copy......
    • Break on 為元素添加dom操作事件監聽。包含三個選項(樹結構改變、屬性改變、節點移除)。這個選項是幫助我們監控和定位操作元素的代碼。請參看下圖事例:
      Chrome開發者工具不完全指南(一、基礎功能篇)_第7張圖片
  6. 在A界面的彈出選項窗口中選擇node removal,在B界面切換到DOM Breakpoints選項,可以看到有注冊信息。然后我們點擊click me按鈕觸發刪除div3的事件,可以看到瀏覽器自動為我們定位刪除該元素的代碼部分,并且停止執行js代碼:

    Chrome開發者工具不完全指南(一、基礎功能篇)_第8張圖片

  7. 在B界面中切換到Properties選項,可以看到選中元素的各種信息(英文單詞里面的介紹比較簡單,就不一一介紹了)。

    Chrome開發者工具不完全指南(一、基礎功能篇)_第9張圖片

  8. 點擊A界面的任意地方,按搜索的快捷鍵,可以在輸入框中查找任何內容,若匹配到都會在A面板中高亮顯示。

    Chrome開發者工具不完全指南(一、基礎功能篇)_第10張圖片

  9. 或者你可以點擊左上角的問號圖標,然后把鼠標移入到網頁內,點擊想要查看的元素,會在A面板中顯示相應的元素。

    Chrome開發者工具不完全指南(一、基礎功能篇)_第11張圖片

Network


Chrome開發者工具不完全指南(一、基礎功能篇)_第12張圖片

  1. Network是一個監控當前網頁所有的http請求的面板,它主體部分展示了每個http請求相應的信息。

    Chrome開發者工具不完全指南(一、基礎功能篇)_第13張圖片

    • Name 請求文件名稱
    • Method 方法(常見為get和post)
    • Status 請求的狀態
    • Type 請求的類型
    • Initiator 請求源,也就是該鏈接是通過什么發起請求的(常見位Parser、Script)
    • Size 下載文件或者請求占的資源大小
    • Time 請求或下載時間
    • Timeline 該鏈接在發送過程中的時間狀態軸(我們可以把鼠標移到這些紅紅綠綠的時間軸上,對應的會有它的詳細信息:開始下載時間,等待加載時間,自身下載耗時)
      Chrome開發者工具不完全指南(一、基礎功能篇)_第14張圖片
  2. 單擊面板中的任意一條http信息,會在底部彈出一個新的面板,其中記錄了該條Http請求的詳細參數Header(表頭信息、返回信息、請求基本狀態)、Preview(返回的格式化轉移后的文本信息)、Response(轉移之前原始信息)、Cookies(該請求所帶的cookies)、Timing(請求時間變化)

    Chrome開發者工具不完全指南(一、基礎功能篇)_第15張圖片

  3. 在主面板的頂部,有一些按鈕從左到右它們的功能分別是:

    1. 是否啟用持續Http監控(默認高亮啟用)
    2. 清空主面板中的http信息
    3. 是否啟用過濾信息選項(默認啟用,可以對Http信息進行篩選過濾)
    4. 列出多重屬性
    5. 只列出name和time屬性
    6. preserve log 當新加載頁面時不清除面板的請求信息
    7. disable cache 禁用緩存

    example

  4. 最后在主面板的底部有記錄了整體網絡請求狀態的一些基本信息

    example

Resources


Resources部分比較簡單,它向我們展示了本頁面所加載的資源列表。還有Cookies和Local Storage、Session Storaged等本地儲存信息。在這里,我們可以自由地增刪改本地存儲信息。

Chrome開發者工具不完全指南(一、基礎功能篇)_第16張圖片

至于webSql,我知道的并不多,在開發中很少用到。如果你想了解這方面的信息,我推薦你去閱讀 這篇博客

Chrome開發者工具不完全指南(一、基礎功能篇)


更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯系: 360901061

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

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦!!!

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 天天爽天天干天天操 | 在线免费亚洲 | 网红被免费网站视频在线 | 久99久热 | 超级碰碰青草免费视频92 | 奇米网狠狠干 | 色网站欧美| 成人做爰小视频 | 99精品国产三级在线观看 | 日韩欧美综合视频 | 一级特黄aaa大片大全 | 成人啪啪97丁香 | 99在线观看免费视频 | 99久久久国产精品免费牛牛四川 | 成人亚洲欧美日韩中文字幕 | 亚洲一区二区三区久久 | 狠狠做狠狠做综合日日 | 91日本视频 | 欧美日韩国产超高清免费看片 | 日韩视频在线一区 | 老头老太做爰xxx视频 | 黑人特级粗α级毛片 | 国产成人亚洲综合一区 | 91精品国产91久久久久久青草 | 澳门四虎影院 | 亚洲在线久久 | 欧美一级久久久久久久久大 | 欧美色交 | 国产欧美一区二区三区在线看 | 成人一级黄色片 | 欧美性xxxxbbbb | 久久高清精品 | 欧美亚洲国产激情一区二区 | 自拍亚洲午夜伦li片影院 | 国产国语高清在线视频二区 | 波多野结衣 一区二区 | 99久久99久久精品免费看子 | 婷婷国产天堂久久综合五月 | 99视频网站| 久久人人爽人人爽人人片av不 | 国产精品久久久久国产精品三级 |