題外話開篇
作為本blog的第一篇文章，博主的內心是激動的，所以忍不住在放送知識的時候抒一小段情。首先說明博主還是乙隻前端的小白，既然已經深思熟慮跳入了前端的坑，那就準備頭也不回的學到底。希望可以在csdn社群跟大神學習，勞煩各位小夥伴們指點一二，大家一起學習。
好的題外話到此結束，等以後再發博好好抒情，哈哈。
下圖是工具欄介面
第乙個查詢按鈕，可以直接在頁面上選擇元素，方便快速定位所需除錯的元素。
第二個手機圖示按鈕，可以調整寬度和高度，適應更多的裝置。
需要檢視修改哪些地方，就在上圖中對應的視窗即可，所有修改都會在頁面上顯示。
network：可檢視**請求的網路情況、某一請求的請求頭、響應頭和響應內容。特別在檢視ajax類請求 時非常有幫助。[注：必須開啟chrome開發者工具後發起的請求才能顯示]
sources:左側可以選擇要除錯的js檔案，在右側可以除錯js**。
timeline:檢視js執行時間、頁面元素渲染時間。
profiles:檢視cpu執行時間與記憶體占用情況，主要用於效能優化。
audits:對優化前端頁面、提高網頁載入速度有很大幫助。
console:js控制台。可檢視js錯誤資訊、列印除錯資訊等。
是不是超級多，其實大概了解一下方便後面使用，用的次數多就知道每個標籤的作用了。
大家正在學習前端的可以互粉哦，我們一起來交流~
Chrome開發者工具使用
elements 元素 允許我們從瀏覽器的角度看頁面，也就是說我們可以看到chrome渲染頁面所需要的的html css和dom document object model 物件。此外，還可以編輯這些內容更改頁面顯示效果。console 控制台 顯示各種警告與錯誤資訊，並且提供了shell用來和文件...
巧用chrome開發者工具
說明 截圖中的chrome版本為52，不同版本可能略有區別。開發時消除靜態資源快取不能立刻更新的困擾，勾選disable cache即可 切換顏色顯示格式 修改預設顏色顯示格式，在settings 控制台按f1 preferences elements color format 快速選中dom節點，...
Chrome開發者工具面板
network面板可以記錄頁面上的網路請求的詳情資訊，從發起網頁頁面請求request後分析http請求後得到的各個請求資源資訊 包括狀態 資源型別 大小 所用時間 request和response等 可以根據這個進行網路效能優化。我把google官方 上介紹network面板的圖貼到這裡，該面板主...