一、前言

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

二、瀏覽器模塊介紹

?由于chrome瀏覽器一直在不斷的進(jìn)行更新迭代，會(huì)不斷的新增功能，有一些老的功能會(huì)被摒棄掉，所以我們介紹這個(gè)功能的時(shí)候是以這個(gè)系列文章發(fā)布時(shí)候的最新版為主（2018-01-05 ）

1. 用來選擇所需要的HTML元素，通過HTML元素定位到Elements中的對(duì)應(yīng)代碼

2. 用來在手機(jī)模式和電腦模式之間做切換的

?3-11分別代表的就是chrome中的主要功能模塊

3- Elements主要用來查看最終渲染情況，CSS樣式的修改和綁定事件的定位

4- Console調(diào)試臺(tái)，主要是用來打印輸出內(nèi)容，獲取報(bào)錯(cuò)信息，頁面調(diào)試內(nèi)容（僅用于對(duì)在window對(duì)象中存在的對(duì)象或者變量，函數(shù)才可以使用）

5- Source源碼界面，里面呈現(xiàn)的代碼都是原文件的代碼，主要的用途是用來對(duì)代碼進(jìn)行斷點(diǎn)調(diào)試和代碼測(cè)試

6- netWork 主要是查看網(wǎng)絡(luò)環(huán)境包括報(bào)頭和返回?cái)?shù)據(jù)等參數(shù)

7- Performance 主要是用來查看JS計(jì)算性能相關(guān)的，一般如果是單純的頁面不包含canvas，大數(shù)據(jù)渲染等等的，一般是不需要使用到的

8- Memory 記錄內(nèi)存的情況

9- Application 記錄本地存儲(chǔ)的相關(guān)信息（cookie,sessionStorage,LocalStorage等）的存儲(chǔ)信息

10- 頁面安全方面的信息

11- 由于“中國(guó)特殊國(guó)情的問題”，需要使用FQ才可以使用，具體是用來做手機(jī)web app優(yōu)化的

?2.1 基礎(chǔ)模塊介紹說明

這里面我們會(huì)一一的講解每個(gè)模塊的大致用法，至于怎樣在項(xiàng)目中實(shí)際使用會(huì)在最后一篇系列文章中說明。

2.1.1 Elements模塊

?

在這個(gè)模塊中主要可以分成A,B兩部分，A部分顯示的是渲染出來頁面的最終代碼，包括JS渲染在內(nèi)，B部分就是對(duì)審查節(jié)點(diǎn)元素的CSS，或者綁定的JS進(jìn)行查看

B部分各個(gè)功能分別是：

1- 添加樣式和添加類，模擬元素的hover等屬性的操作

2- 模型最后的計(jì)算情況與應(yīng)用到的樣式，在上面可以很容易直觀修改盒子模型的參數(shù)

3- 獲取選擇元素的對(duì)應(yīng)綁定事件的執(zhí)行為之和觸發(fā)的事件情況

4- 斷點(diǎn)審查情況,這個(gè)屬性不常用

5- 對(duì)應(yīng)選中的元素調(diào)用到JS底層的對(duì)象情況，這個(gè)屬性基本沒有使用

?2.1.2 Console模塊

下面我們對(duì)Console中常見的命令進(jìn)行分析。

常用的打印命令：

Console.log 用于打印普通信息

Console.error 用于打印錯(cuò)誤信息

Console.warn 用于打印警示信息

Console.info 同于打印提示信息

Console.log還有其他的一些用法，可以給console.log添加多個(gè)參數(shù)，類似的格式是這樣的。

console.log(string,CSS style string,append string,append string,…………)

?其中我們必須在console.log中的第一個(gè)參數(shù)里面加上%c，這個(gè)插入的符號(hào)表示的是第二個(gè)參數(shù)的樣式作用在%c的后面。

示例代碼：

console.log("%c這是一個(gè)測(cè)試","font-size:18px;color:red;","english ","this is a test","this is param2");

?

運(yùn)行結(jié)果如下：

其他常用的console命令

console.dir 用戶輸出節(jié)點(diǎn)對(duì)象

console.time&console.timeEnd 用于計(jì)算兩端代碼段計(jì)算的時(shí)間，主要是在用于性能計(jì)算方面的

更多的console的用法詳見

?

?2.1.3 Source模塊

source模塊中主要可以分成三個(gè)部分：

A部分主要的作用就是用來選擇查看文件和添加一些測(cè)試腳本功能

B部分，相當(dāng)于是一個(gè)視圖的功能，用來審查代碼用的，

C部分就是用來打印和跟蹤元素

?

A-1 查看當(dāng)前域名下面的文件情況，top表示的就是最頂層，下面的文件夾依次代表的是主域相同，域名不同的各個(gè)站點(diǎn)，再下面就是各個(gè)站點(diǎn)的詳細(xì)的目錄結(jié)構(gòu)

A-2 Content Scripts主要是用來查看本地瀏覽器上面安裝的chrome插件的目錄結(jié)構(gòu)等情況與斷點(diǎn)調(diào)試的

A-3 用來插入調(diào)試腳本的

C-1 表示的是運(yùn)行到下一個(gè)斷點(diǎn)，如果就只有一個(gè)斷點(diǎn)或者不存在下一個(gè)斷點(diǎn)的情況，那么程序直接運(yùn)行

C-2 運(yùn)行下一句，不運(yùn)行到函數(shù)的內(nèi)部，相當(dāng)于是F10的作用

C-3 運(yùn)行到函數(shù)里面 相當(dāng)于是F11?

C-4 跳出函數(shù)運(yùn)行，相當(dāng)于是F11+Ctrl

C-5 用戶取消和開啟全部的斷點(diǎn)功能

C-6 功能不明確，但是很少使用

?

2.1.4 Application模塊

?

?主要是用來通過查看存儲(chǔ)的內(nèi)容的，里面比較常用的localStorage，sessionStorage，cookies

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

localStorage使用總結(jié)

cookie學(xué)習(xí)指南

其他的內(nèi)容就請(qǐng)自行百度，這里就不多做介紹

?

基礎(chǔ)的模塊內(nèi)容已經(jīng)講解完成了，因?yàn)檫@是一個(gè)系列的文章，所以接下來的文章如下

?chrome調(diào)試工具高級(jí)不完整使用指南（基礎(chǔ)篇）

?chrome調(diào)試工具高級(jí)不完整使用指南（優(yōu)化篇）

?chrome調(diào)試工具高級(jí)不完整使用指南（實(shí)戰(zhàn)一）

?chrome調(diào)試工具高級(jí)不完整使用指南（實(shí)戰(zhàn)二）

?chrome調(diào)試工具高級(jí)不完整使用指南（實(shí)戰(zhàn)三）

?

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

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的chrome调试工具高级不完整使用指南（基础篇）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。