1、前言
本文記錄的是做者在工做上面對chrome的一些使用和狀況的分析分享，內容僅表明我的的觀點。轉發請註明出處(http://www.cnblogs.com/st-leslie/),謝謝合做html
2、瀏覽器模塊介紹
因爲chrome瀏覽器一直在不斷的進行更新迭代，會不斷的新增功能，有一些老的功能會被摒棄掉，因此咱們介紹這個功能的時候是以這個系列文章發佈時候的最新版爲主（2018-01-05 ）web
1. 用來選擇所須要的HTML元素，經過HTML元素定位到Elements中的對應代碼chrome
2. 用來在手機模式和電腦模式之間作切換的canvas
3-11分別表明的就是chrome中的主要功能模塊瀏覽器
3- Elements主要用來查看最終渲染狀況，CSS樣式的修改和綁定事件的定位安全
4- Console調試臺，主要是用來打印輸出內容，獲取報錯信息，頁面調試內容（僅用於對在window對象中存在的對象或者變量，函數纔可使用）cookie
5- Source源碼界面，裏面呈現的代碼都是原文件的代碼，主要的用途是用來對代碼進行斷點調試和代碼測試網絡
6- netWork 主要是查看網絡環境包括報頭和返回數據等參數session
7- Performance 主要是用來查看JS計算性能相關的，通常若是是單純的頁面不包含canvas，大數據渲染等等的，通常是不須要使用到的app
8- Memory 記錄內存的狀況
9- Application 記錄本地存儲的相關信息（cookie,sessionStorage,LocalStorage等）的存儲信息
10- 頁面安全方面的信息
11- 因爲「中國特殊國情的問題」，須要使用FQ纔可使用，具體是用來作手機web app優化的
2.1 基礎模塊介紹說明
這裏面咱們會一一的講解每一個模塊的大體用法，至於怎樣在項目中實際使用會在最後一篇系列文章中說明。
2.1.1 Elements模塊
在這個模塊中主要能夠分紅A,B兩部分，A部分顯示的是渲染出來頁面的最終代碼，包括JS渲染在內，B部分就是對審查節點元素的CSS，或者綁定的JS進行查看
B部分各個功能分別是：
1- 添加樣式和添加類，模擬元素的hover等屬性的操做
2- 模型最後的計算狀況與應用到的樣式，在上面能夠很容易直觀修改盒子模型的參數
3- 獲取選擇元素的對應綁定事件的執行爲之和觸發的事件狀況
4- 斷點審查狀況,這個屬性不經常使用
5- 對應選中的元素調用到JS底層的對象狀況，這個屬性基本沒有使用
2.1.2 Console模塊
下面咱們對Console中常見的命令進行分析。
經常使用的打印命令：
Console.log 用於打印普通訊息
Console.error 用於打印錯誤信息
Console.warn 用於打印警示信息
Console.info 同於打印提示信息
Console.log還有其餘的一些用法，能夠給console.log添加多個參數，相似的格式是這樣的。
console.log(string,CSS style string,append string,append string,…………)
其中咱們必須在console.log中的第一個參數裏面加上%c，這個插入的符號表示的是第二個參數的樣式做用在%c的後面。
示例代碼：
console.log("%c這是一個測試","font-size:18px;color:red;","english ","this is a test","this is param2");
運行結果以下：
其餘經常使用的console命令
console.dir 用戶輸出節點對象
console.time&console.timeEnd 用於計算兩端代碼段計算的時間，主要是在用於性能計算方面的
更多的console的用法詳見
2.1.3 Source模塊
source模塊中主要能夠分紅三個部分：
A部分主要的做用就是用來選擇查看文件和添加一些測試腳本功能
B部分，至關因而一個視圖的功能，用來審查代碼用的，
C部分就是用來打印和跟蹤元素
A-1 查看當前域名下面的文件狀況，top表示的就是最頂層，下面的文件夾依次表明的是主域相同，域名不一樣的各個站點，再下面就是各個站點的詳細的目錄結構
A-2 Content Scripts主要是用來查看本地瀏覽器上面安裝的chrome插件的目錄結構等狀況與斷點調試的
A-3 用來插入調試腳本的
C-1 表示的是運行到下一個斷點，若是就只有一個斷點或者不存在下一個斷點的狀況，那麼程序直接運行
C-2 運行下一句，不運行到函數的內部，至關因而F10的做用
C-3 運行到函數裏面 至關因而F11
C-4 跳出函數運行，至關因而F11+Ctrl
C-5 用戶取消和開啓所有的斷點功能
C-6 功能不明確，可是不多使用
2.1.4 Application模塊
主要是用來經過查看存儲的內容的，裏面比較經常使用的localStorage，sessionStorage，cookies
具體的使用能夠參照我寫的文章：
其餘的內容就請自行百度，這裏就很少作介紹
基礎的模塊內容已經講解完成了，由於這是一個系列的文章，因此接下來的文章以下
chrome調試工具高級不完整使用指南（優化篇）
chrome調試工具高級不完整使用指南（實戰一）
chrome調試工具高級不完整使用指南（實戰二）
chrome調試工具高級不完整使用指南（實戰三）