chrome調試工具高級不完整使用指南（基礎篇）

一、前言

本文記錄的是作者在工作上面對chrome的一些使用和情況的分析分享，內容僅代表個人的觀點。轉發請注明出處(http://www.cnblogs.com/st-leslie/),謝謝合作

二、瀏覽器模塊介紹

?由于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 記錄內存的情況

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

具體的使用可以參照我寫的文章：

localStorage使用總結

cookie學習指南

其他的內容就請自行百度，這里就不多做介紹

?

基礎的模塊內容已經講解完成了，因為這是一個系列的文章，所以接下來的文章如下

?chrome調試工具高級不完整使用指南（基礎篇）

?chrome調試工具高級不完整使用指南（優化篇）

?chrome調試工具高級不完整使用指南（實戰一）

?chrome調試工具高級不完整使用指南（實戰二）

?chrome調試工具高級不完整使用指南（實戰三）

?

出處：https://www.cnblogs.com/st-leslie/p/8196493.html