chrome介紹與用法

1. 認識devTools

快捷鍵F12( 或在 Mac 上使用 Cmd + Opt+ I)打開Chrome的DevTools，我們就會看到如下界面：

1. 選擇工具：用來選擇頁面html元素，通過HTML元素定位到Elements中的對應代碼，包括它的HTML標籤與對應的屬性，還有對應的樣式與原型；如下圖展示

2. 電腦模式和移動設備模式切換
3. Elements 是元素面板，可以修改dom元素和樣式效果等屬性，並且可以立即看到修改後的效果
4. Console 是控制面板，主要是用來打印輸出內容，獲取報錯信息，頁面調試內容（僅用於對在window對象中存在的對象或者變量，函數纔可以使用）
5. Sources 資源面板，可以在這個面板裏面調試你的JS代碼，也可以在工作區打開本地文件。
6. Network 網絡面板，可以明確的查看到訪問Web頁面所產生的全部請求（包括應答狀態、響應時間、數據量等信息）和下載的資源文件，並可以模擬不同的網絡狀態（在線、離線、3G等）下對Web的加載情況，可以用於分析和優化網頁加載性能。
7. **Performance ** 性能面板，記錄和查看Web頁面在瀏覽器中運行時的性能表現（注意是運行時，而不是加載時），主要用於發現Web頁面運行時性能瓶頸和性能調優
8. Memory 內存面板，記錄執行JS函數對CPU和內存的使用情況，可以識別開銷大的JS函數，跟蹤內存泄露，幫助代碼優化，提高JS執行性能。
9. Application：應用面板，記錄Web頁面加載的所有資源信息，包括存儲數據、緩存數據、圖片、字體、JS腳本、CSS樣式表等。
10. Security：安全面板，查看Web頁面的安全和認證情況，確保網站上正確地實現了HTTPS。
11. Audits 審計面板，從性能（Performance）、PWA兼容性（Progressive Web App）、可訪問性（Accessibility）、最佳實踐（Best Practices）、搜索引擎優化（SEO）這五個維度給你的網站打分，並給出一份評估報告和優化建議，可以說是非常的強！
12. Adblock Plus 是一款能夠智能屏蔽chrome瀏覽器中廣告的插件(可以忽略)

Elements 面板

雙擊DOM樹視圖裏面的節點，可以實時編輯標籤屬性，修改的效果會立刻反應在瀏覽器裏面,點擊右側Style面板，可以實時修改CSS的屬性值，這裏面的所有樣式Name和Value都是可以編輯的;在每個屬性後面單擊可以添加新的樣式,如下圖展示：

點擊右側Computed面板，可以編輯左側選中的盒子模型參數，所有的值都是可以修改的;點擊不同的位置(top、bottom、left、right) 就可以修改元素的padding、border、margin屬性值。盒子模型下面可以查看元素的詳細的css樣式屬性，也可以通過filter篩選自己需要查看的樣式屬性，如下圖：

獲取選擇元素的對應綁定事件的執行爲之和觸發的事件情況
斷點審查情況
對應選中的元素調用到JS底層的對象情況

console控制面板

輸出信息命令
　console.log(‘消息內容！’); //輸出普通信息
　　console.info(‘消息內容！’); //輸出提示信息
　　console.error(‘消息內容！’);//輸出錯誤信息
　　console.warn(‘消息內容！’); //輸出警告信息
　　如下圖效果：
　　
表格形式輸出數組和對象console.table()

var obj = {
          fun: {
              name: 'lanfeng',
              age: '18'
          },
          bar: {
              name: 'qiuqiu',
              age: '19'
          }
        };

        var arr = [
            ['lanfeng2', '18'],
            ['qiuqiu2', '19']
        ];

        console.log(obj);
        console.table(obj);

        console.log(arr);
        console.table(arr);

運行效果如下圖：

3. console.time(),console.timeEnd() 統計代碼運行時間，用於計算兩端代碼段運行的時間，主要是在用於性能計算方面的, 運行效果如下圖：

4. console.count() 統計代碼執行的次數

5. console.group(), console.groupEnd()分組輸出信息

6. console.dir(),將對象以樹狀結構展示出來，可以顯示一個對象所有的屬性和方法。

7. 佔位符 console對象的上面5種方法，都可以使用printf風格的佔位符。不過，佔位符的種類比較少，只支持字符（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）四種

8. console.clear() 清空控制檯
9. console.profile()，性能分析（Profiler）就是分析程序各個部分的運行時間，找出瓶頸所在

Sources 資源面板

查看web站點的資源列表及javascript代碼調試

Page：展示當前Web頁面所包含的資源文件（圖片、CSS樣式表、JS腳本等）。在這裏對工作區中的代碼進行修改並不會保留，刷新頁面就會重置。
Filesystem：當我們的Web頁面在本地時，我們就可以通過Filesystem選項卡，將本地項目文件夾添加到DevTools的工作區，以直接將對頁面的修改保存到本地，還提供對本地文件進行管理（添加文件、刪除文件、修改文件等）。所以也就可以讓我們一邊調試，一邊修改源代碼，而無需在本地和DevTools來回切換。
Overrides：當我們的Web頁面在遠程服務器上，本地沒有項目源碼，我們也可以通過Overrides選項卡選定目錄讓DevTools創建一個文件夾來保存對遠程Web頁面的所有修改。修改完成後，用這些文件直接去覆蓋遠程服務器上的源文件就完成了頁面的修改。
Content script：用於存放的是Chrome擴展的“注入”頁面的JS腳本的獨立空間（這裏的JS腳本共享頁面DOM與消息機制，與頁面的JS腳本互相不知道對方的存在，無法訪問對方的變量和函數）。
Snippets：提供了在chrome裏保存及運行一段js代碼的功能，可以在這裏創建代碼自己的片段，並獨立運行和調試，刷新頁面不會丟失。

chrome介紹與用法