谷歌瀏覽器調試工具

一.總錄

1. 箭頭：用來選擇所需要的HTML元素，通過HTML元素定位到Elements中的對應代碼。
2. 切換：用來在手機模式和電腦模式之間做切換的。
3. Elements：主要用來查看最終渲染情況，CSS樣式的修改和綁定事件的定位。
   • left：結構面板。顯示的是渲染出來頁面的最終代碼，包括JS渲染在內。
   • style：添加修改樣式和類。模擬元素的hover等屬性的操作。
   • computed：模型最后的計算情況與應用到的樣式，在上面可以很容易直觀修改盒子模型的參數。
   • events：獲取選擇元素的對應綁定事件的執行為之和觸發的事件情況。
   • dom：斷點審查情況,這個屬性不常用。
   • properties：對應選中的元素調用到JS底層的對象情況，這個屬性基本沒有使用。
4. Console調試台：主要是用來打印輸出內容，獲取報錯信息，頁面調試內容（僅用於對在window對象中存在的對象或者變量，函數才可以使用）。
   • 打印輸出內容
   • 獲取報錯信息
   • 頁面調試內容

     //利用console中刪除在百度推廣廣告
     //刪除iframe廣告內容
     var iframecount=document.getElementsByTagName("iframe").length;
     for(var i=iframecount;i>=0;i--){
         var do1=document.getElementsByTagName("iframe")[i];
         if(do1 == null){
         }else{
             //do1.style.display="none";
             do1.parentNode.removeChild(do1);
         }
     }
     //刪除內嵌的廣告占位，有的用上面的去除iframe后還有占位，需要再執行下
     var inscount=document.getElementsByTagName("ins").length;
     for(var i=inscount;i>=0;i--){
         var do1=document.getElementsByTagName("ins")[i];
         if(do1 == null){
         }else{
             //do1.style.display="none";
             do1.parentNode.removeChild(do1);
         }
     }

      

5. Source源碼界面：里面呈現的代碼都是原文件的代碼，主要的用途是用來對代碼進行斷點調試和代碼測試。
   • 主要的作用就是用來選擇查看文件和添加一些測試腳本功能。
   • 相當於是一個視圖的功能，用來審查代碼用的。
   • 用來打印和跟蹤元素。
6. netWork：主要是查看網絡環境包括報頭和返回數據等參數。
   • 請求的展示快照
   • 過濾請求的類型
   • 查看各個請求的發送時間，完成時間的一個總的概況，主要是用來全局分析用的
   • 各個請求的詳情
7. Performance：主要是用來查看JS計算性能相關的，一般如果是單純的頁面不包含canvas，大數據渲染等等的，一般是不需要使用到的。
   • 性能分析火焰圖
8. Memory：記錄內存的情況。
   • 內存堆棧快照：查看當前的各項資源的占用情況與內存的一個比例
   • 動態監控從start啟動之后內存的一個占用情況
   • 通過一個時間軸圖來動態監控占用情況
9. Application：記錄本地存儲的相關信息（cookie,sessionStorage,LocalStorage等）的存儲信息。
   • 查看存儲的內容的，里面比較常用的localStorage，sessionStorage
10. security：頁面安全方面的信息。
    • 判斷當前頁面中是否使用了有效的HTTPS證書。
11. audits：FQ，具體是用來做手機web app優化的。直接在瀏覽器地址欄輸入chrome://inspect進入遠程調試模式