chrome调试工具高级不完整使用指南（基础篇）
一、前言
本文記錄的是作者在工作上面對chrome的一些使用和情況的分析分享，內容僅代表個人的觀點。轉發(fā)請注明出處(http://www.cnblogs.com/st-leslie/),謝謝合作
二、瀏覽器模塊介紹
?由于chrome瀏覽器一直在不斷的進行更新迭代，會不斷的新增功能，有一些老的功能會被摒棄掉，所以我們介紹這個功能的時候是以這個系列文章發(fā)布時候的最新版為主（2018-01-05 ）
1. 用來選擇所需要的HTML元素，通過HTML元素定位到Elements中的對應代碼
2. 用來在手機模式和電腦模式之間做切換的
?3-11分別代表的就是chrome中的主要功能模塊
3- Elements主要用來查看最終渲染情況，CSS樣式的修改和綁定事件的定位
4- Console調試臺，主要是用來打印輸出內容，獲取報錯信息，頁面調試內容（僅用于對在window對象中存在的對象或者變量，函數才可以使用）
5- Source源碼界面，里面呈現的代碼都是原文件的代碼，主要的用途是用來對代碼進行斷點調試和代碼測試
6- netWork 主要是查看網絡環(huán)境包括報頭和返回數據等參數
7- Performance 主要是用來查看JS計算性能相關的，一般如果是單純的頁面不包含canvas，大數據渲染等等的，一般是不需要使用到的
8- Memory 記錄內存的情況
9- Application 記錄本地存儲的相關信息（cookie,sessionStorage,LocalStorage等）的存儲信息
10- 頁面安全方面的信息
11- 由于“中國特殊國情的問題”，需要使用FQ才可以使用，具體是用來做手機web app優(yōu)化的
?2.1 基礎模塊介紹說明
這里面我們會一一的講解每個模塊的大致用法，至于怎樣在項目中實際使用會在最后一篇系列文章中說明。
2.1.1 Elements模塊
?
在這個模塊中主要可以分成A,B兩部分，A部分顯示的是渲染出來頁面的最終代碼，包括JS渲染在內，B部分就是對審查節(jié)點元素的CSS，或者綁定的JS進行查看
B部分各個功能分別是：
1- 添加樣式和添加類，模擬元素的hover等屬性的操作
2- 模型最后的計算情況與應用到的樣式，在上面可以很容易直觀修改盒子模型的參數
3- 獲取選擇元素的對應綁定事件的執(zhí)行為之和觸發(fā)的事件情況
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 用戶輸出節(jié)點對象
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調試工具高級不完整使用指南（優(yōu)化篇）
?chrome調試工具高級不完整使用指南（實戰(zhàn)一）
?chrome調試工具高級不完整使用指南（實戰(zhàn)二）
?chrome調試工具高級不完整使用指南（實戰(zhàn)三）
?
出處：https://www.cnblogs.com/st-leslie/p/8196493.html
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的chrome调试工具高级不完整使用指南（基础篇）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 从shiro源码角度学习工厂方法设计模式
- 下一篇： jquery文档加载完毕后执行的几种写法