Chrome調(diào)試工具的使用
<strong>(目前對于javascript等知識并不了解跃闹，此章節(jié)需要在今后完善 )</strong>
按F12打開調(diào)試工具捷凄，顯示如圖
樣本：觀察者網(wǎng)首頁
（用Windows自帶的畫圖編輯的截圖戳表，有些簡陋）
Elements
Elements面板是用來控制DOM結(jié)構(gòu)和CSS樣式的。
<strong>(!DOM是啥东跪？,以后要弄明白)</strong>
左側(cè)區(qū)域是html的源代碼
可以在左側(cè)區(qū)域?qū)TML內(nèi)的元素進(jìn)行編輯子眶，移動，或者刪除
可以查看元素綁定了哪些事件
在右側(cè)區(qū)域可對選中的元素的樣式進(jìn)行修改坦刀，可直觀地看到所選元素的
寬愧沟，高，內(nèi)邊距鲤遥，外邊距的值
所有的修改都會即時在頁面上得到呈現(xiàn)沐寺。-
Console
控制臺，用于調(diào)試JS和向百度投簡歷
1222.png
（需要補(bǔ)充）
Sources
這個面板用于展示源文件
（需要補(bǔ)充）-
Network
Network標(biāo)簽頁用于分析網(wǎng)站請求的網(wǎng)絡(luò)情況
按F5刷新盖奈，開始分析
3.png
在這里也可以模擬在不同網(wǎng)速（3G混坞、4G、GPRS等）情況下頁面的網(wǎng)絡(luò)響應(yīng)時間
在輸入框中輸入關(guān)鍵字搜索對應(yīng)請求的文件 Timeline
Timeline告訴我們整個代碼的運(yùn)行時間
Timeline(時間軸)不是指網(wǎng)絡(luò)請求的響應(yīng)時間（這個在Network里）
這個Timeline指的JS執(zhí)行時間钢坦、頁面元素渲染時間
點擊Timeline 按F5刷新 可查看渲染時間
- Profiles
在這里可以查看CPU執(zhí)行時間與內(nèi)存占用等信息
（需要補(bǔ)充） - Resource
Resources面板展示了各種資源文件
包括本地存儲究孕，cookies，cache等信息
（需要補(bǔ)充） - Security
不知道干啥用的爹凹，這個部分以后弄明白了要補(bǔ)上
（需要補(bǔ)充） - Audits
在這里Chrome 對開發(fā)者提供了關(guān)于此頁面的優(yōu)化建議
