由於chrome瀏覽器一直在不斷的進行更新迭代，會不斷的新增功能，有一些老的功能會被摒棄掉，所以我們介紹這個功能的時候是以這個系列文章發布時候的最新版為主（2018-01-05 ）
1. 用來選擇所需要的html元素，通過html元素定位到elements中的對應**
2. 用來在手機模式和電腦模式之間做切換的
3-11分別代表的就是chrome中的主要功能模組
3- elements主要用來檢視最終渲染情況，css樣式的修改和繫結事件的定位
4- console除錯臺，主要是用來列印輸出內容，獲取報錯資訊，頁面除錯內容（僅用於對在window物件中存在的物件或者變數，函式才可以使用）
5- source原始碼介面，裡面呈現的**都是原檔案的**，主要的用途是用來對**進行斷點除錯和**測試
6- network 主要是檢視網路環境包括報頭和返回資料等引數
7- performance 主要是用來檢視js計算效能相關的，一般如果是單純的頁面不包含canvas，大資料渲染等等的，一般是不需要使用到的
8- memory 記錄記憶體的情況
10- 頁面安全方面的資訊
這裡面我們會一一的講解每個模組的大致用法，至於怎樣在專案中實際使用會在最後一篇系列文章中說明。
在這個模組中主要可以分成a,b兩部分，a部分顯示的是渲染出來頁面的最終**，包括js渲染在內，b部分就是對審查節點元素的css，或者繫結的js進行檢視
b部分各個功能分別是：
1- 新增樣式和新增類，模擬元素的hover等屬性的操作
2- 模型最後的計算情況與應用到的樣式，在上面可以很容易直觀修改盒子模型的引數
3- 獲取選擇元素的對應繫結事件的執行為之和觸發的事件情況
4- 斷點審查情況,這個屬性不常用
5- 對應選中的元素呼叫到js底層的物件情況，這個屬性基本沒有使用
下面我們對console中常見的命令進行分析。
常用的列印命令：
console.log 用於列印普通資訊
console.error 用於列印錯誤資訊
console.warn 用於列印警示資訊
console.info 同於列印提示資訊
console.log還有其他的一些用法，可以給console.log新增多個引數，類似的格式是這樣的。
其中我們必須在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的用法詳見
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 功能不明確，但是很少使用
主要是用來通過檢視儲存的內容的，裡面比較常用的localstorage，sessionstorage，cookies
具體的使用可以參照我寫的文章：
localstorage使用總結
cookie學習指南
基礎的模組內容已經講解完成了，因為這是乙個系列的文章，所以接下來的文章如下
chrome除錯工具高階不完整使用指南（基礎篇）
chrome除錯工具高階不完整使用指南（優化篇）
chrome除錯工具高階不完整使用指南（實戰一）
chrome除錯工具高階不完整使用指南（實戰二）
chrome除錯工具高階不完整使用指南（優化篇）
在network模組中，大致上可以分成四塊模組，1 這個模組相當於是乙個功能選單，左邊的四個按鈕 依次表示的是 1 1 停止捕獲請求 1 2 清除所有的請求 1 3 對請求進行快照 1 4 是否開啟過濾選項，也就是是否開啟圖中的2 除此之外裡面的disable cache是用來請求請求快取，pres...
chrome除錯工具
今天在除錯bug的時候有乙個需求，我需要知道我的 中有哪些地方在修改body的style，然後我想到了dom節點監聽。為body新增斷點然後開始除錯，但是現在的前端技術棧太複雜，即使打了斷點也會跳進第三方包裡。呼叫棧裡有太多無關的js 妨礙除錯。所以你可以選中檔案右擊後，選擇blackbox scr...
chrome 除錯工具的使用
elements chrome devtools 中 elements panel 是審查 dom 元素和 css 的,可以實時修改 dom css.節點右鍵,如下圖,可以 除了右鍵,還可以 ctrl z 撤銷修改 在呼叫堆疊這裡可以切換到堆疊中的任何地方重新執行 右鍵restart frame 如...