Chrome開發者工具不完全指南（一、基礎功能篇）
就算你不是一名前端開發工程師，相信你也不會對Chrome瀏覽器感到陌生。根據最新的一份（2015/06）的瀏覽器市場佔有率報告，Chrome近乎佔有瀏覽器天下的半壁江山。簡單、快捷使它成為了新時代人們的新寵。如果你是一名web開發人員，我推薦你使用Chrome。作為前端開發的"IDE"，你只需要搭配一個編輯器就能完成幾乎所有的開發任務了。關於它的使用和功能分析要麼都是大而不全，要麼是鉅細糜煩。本系會比較詳細地分享滷煮的一些Chrome（F12開發者功能）使用經驗，從一些基礎的功能開始到它的一些高階效能分析器（Timeline、Profiles）,在最後，將會推薦幾款好的外掛，希望對您的開發工作有些許的作用。如果你對一些面板模組功能已經很瞭解可以直接跳過去閱讀你感興趣的部分。
一、Elements
在Element中主要分兩塊大的部分
A：HTML結構面板
B：操作dom樣式、結構、時間的顯示面板
1.在A中，每當你的滑鼠移動到任何一個元素上，對應的html檢視中會給該元素藍色的背景。
2.如果你單擊選中一個元素，在A部分的底部，會顯示該元素在html結構中的位置關係
3.然後你可以在B部分的styles選項中編輯該元素的樣式，並且看到html結構的實時更新（大大的福利）
4.你可以在B介面中切換到Event Listeners選項，觀察該元素繫結的事件。
click 是事件名稱
.div1 事件是索引名稱（也就是通過什麼繫結的）
attachment 事件來源
handler裡面包含事件的毀掉主體內容
useCapture表示該事件是否向上冒泡
5.選中一個元素，右擊滑鼠，你會看到有一個彈出窗口出現，裡面有若干選項
Add attribut : 為該元素新增屬性
Edit attribute：修改該元素的屬性
Force element state： 為元素啟用某種狀態（主要用在可以幾乎的元素比如a、input、button等）
Edit as HTML：編輯該元素（你可以重寫它的整個content）甚至修改它的標籤名稱
中間簡單的掠過.......
Break on：為該元素新增dom操作事件監聽。包含三個選項（樹結構改變、屬性改變、節點移除）。這個選項的作用是幫助我們監控和定位操作元素的程式碼。請參看下圖事例：
6.在A介面的彈出選項視窗中選擇node removal，在B介面切換到DOM Breakpoints 選項，可以看到有註冊資訊。然後我們點選click me按鈕觸發刪除div3的事件，可以看到瀏覽器自動為我們定位刪除該元素的程式碼部分，並且停止執行js程式碼：
7.在B介面中切換到Properties選項，可以看到選中元素的各種資訊（英文單詞裡面的介紹比較簡單，就不一一介紹了）。
8.點選A介面的任意地方，按快捷鍵ctrl+F可以看到底部有輸入框，在輸入框中輸入你想要查詢的任何內容，如果匹配到了，都回在A面板中高亮顯示
9.或者你可以點選左上角的問號圖示，然後把滑鼠移動到檢視介面中，對準元素按下滑鼠左鍵，對應的A介面會定位到選擇的元素。
二、Network
1.Network是一個監控當前網頁所有的http請求的面版，它主體部分展示的是每個http請求，每個欄位表示著該請求的不同屬性和狀態
Name：請求檔名稱
Method：方法（常見的是get post）
Status：請求完成的狀態
Type：請求的型別
Initiator：請求源也就是說該連結通過什麼傳送（常見的是Parser、Script）
Size：下載檔案或者請求佔的資源大小
Time：請求或下載的時間
Timeline：該連結在傳送過程中的時間狀態軸（我們可以把滑鼠移動到這些紅紅綠綠的時間軸上，對應的會有它的詳細資訊：開始下載時間，等待載入時間，自身下載耗時）
2.單擊面板中的任意一條http資訊，會在底部彈出一個新的面板，其中記錄了該條http請求的詳細引數header（表頭資訊、返回資訊、請求基本狀態---請參看http1.1協議內容對號入座）、Preview（返回的格式化轉移後文本資訊）、response（轉移之前的原始資訊）、Cookies（該請求帶的cookies）、Timing（請求時間變化）
3.在主面板的頂部，有一些按鈕從左到右它們的功能分別是：是否啟用繼續http監控（預設高亮選中過）、清空主面板中的http資訊、是否啟用過濾資訊選項（啟用後可以對http資訊進行篩選）、列出多種屬性、只列出name和time屬性、preserve log（目前不清楚啥用）、Dishable cahe（禁用快取，所有的304返回會和fromm cahe都回變成正常的請求忽視cache conctrol 設定）；
4.最後在主面板的底部有記錄了整體網路請求狀態的一些基本資訊
三、Resources
Resources部分較簡單，他主要向我們展示了本介面所載入的資源列表。還有cookie和local storage 、SESSION 等本地儲存資訊，在這裡，我們可以自由地修改、增加、刪除本地儲存。
至於webSql，我知道的並不多，在開發中很少用到。如果你想了解這方面的資訊，我推薦你去閱讀這篇部落格
http://www.cnblogs.com/chuncn/archive/2010/11/22/1884783.html
相關推薦
Chrome開發者工具不完全指南（一、基礎功能篇）
就算你不是一名前端開發工程師，相信你也不會對Chrome瀏覽器感到陌生。根據最新的一份（2015/06）的瀏覽器市場佔有率報告，Chrome近乎佔有瀏覽器天下的半壁江山。簡單、快捷使它成為了新時代人們的新寵。如果你是一名web開發人員，我推薦你使用Chrome。作為前端開發的"IDE"，你只需要搭配一個編
Chrome開發者工具不完全指南（二、進階篇）
function a () { b(); } function b() { c(); } function c() { //在該處斷點，檢視call stack } a->b->c. call stack 從上到下的順序就是 c
Chrome開發者工具不完全指南（四、效能進階篇）
前言 Profiles面板功能的作用主要是監控網頁中各種方法執行時間和記憶體的變化，簡單來說它就是Timeline的數字化版本。它的功能選項卡不是很多（只有三個），操作起來比較前面的幾塊功能版本來說簡單，但是裡面的資料確很多，很雜，要弄懂它們需要花費一些時間。尤其是在記憶體快照中的各種龐雜的資料。在這篇
Chrome開發者工具不完全指南（五、移動篇）
前面介紹了Chrome開發者工具的大部分內容工具，現在介紹最後兩塊功能Audits和Console面板。一、Audits Audits面板會針對目前網頁提出若干條優化的建議，這些建議分為兩大類，一類是網路載入效能，另一類是介面效能。首先開下它的主介面。 Audits面板的網路優化建議參照的是雅虎前端工
Chrome開發者工具不完全指南：（三、效能篇）
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> div{ height: 20px; widows: 20p
從零開始學USB（一、基礎知識1）
1.什麼是USB? USB是Universal Serial Bus的縮寫，中文譯為通用序列匯流排。 正如USB的第一個單詞表述的那樣，為了通用。 那麼我們看一下，還有哪些匯流排不是序列的，哪些是不通用的序列匯流排 下表來自《USB Complete》裡面對一些常見匯流排所總結的
RK3288 平臺（Android 5.1）+ PN548 除錯流水賬（一、前期編譯篇）
一、獲取原始碼 客戶向瑞芯微技術視窗申請SDK 二、SDK 編譯 1.JDK 安裝 Android5.1 系統編譯依賴於 JDK7。 編譯之前需安裝 JDK7，並配置 JAVA 環境變數。例如， 安裝路徑為/usr/lib/jvm/java
使用 Jenkins 自動部署 Docker 服務（一、Jenkins 搭建篇）
直接使用 Jenkins 官方的映象一般會有兩個問題導致不能正常自動部署基於 Docker 的服務。 存在的問題 官方的映象預設不是使用 root 賬號，雖然 Jenkins 可以正常啟動，但是因為沒有許可權導致不能向宿主機寫檔案 Jenkins 基於
ctf工具不完全指南
最近接連趕上了ssctf和hctf，對我來說算是一償夙願，總算從在網站上做做以前的題，到參加比賽，正式邁入圈內了。雖然學校內的氛圍不濃厚，但總算也能拉起一支能參賽的隊伍，第一次正式參賽的結果算是讓我挺滿意的。戰後是時候來個總結了。 經驗上的差距讓一些本來可以做的題目也
angular6開發不完全筆記（一）
ref 檢查 ack webp interface -- dir wiki lint 新建項目 請在終端/控制臺窗口中運行 ng -v 命令。 確定您已安裝@angular/cli if沒有執行 npm install -g @angular/cli 全局安裝 Angula
更效率、更優雅 | 阿里巴巴開發者工具不完全盤點
從人工到自動化，從重複到創新，技術演進的歷程中，伴隨著開發者工具類產品的發展。 阿里巴巴將自身在各類業務場景下的技術積澱，通過開
Spring Data REST不完全指南（二）
上一篇文章介紹了Spring Data REST的功能及特徵，以及演示瞭如何在專案中引入Spring Data REST並簡單地啟動演示了Spring Data REST專案。在本文中，我們將深入瞭解Spring Data REST的特性，以此來滿足我們日常api開發工作的要求。 如果僅僅是上一篇文章中對Sp
Spring Data REST不完全指南（三）
上一篇我們介紹了使用Spring Data REST時的一些高階特性，以及使用程式碼演示瞭如何使用這些高階的特性。本文將繼續講解前面我們列出來的七個高階特性中的後四個。至此，這些特效能滿足我們大部分的介面開發場景。 需要滿足的一些要求： 1.針對欄位級別，方法級別，類級別進行限制（禁止某些欄位，方法，介面的
富文字編輯器UEditor自定義工具欄（一、基礎配置與字型、背景色、行間距、超連結實現）
導讀：UEditor 是由百度「FEX前端研發團隊」開發的所見即所得富文字web編輯器，功能強大，可定製，是一款優秀的國產線上富文字編輯器，編輯器內可插入圖片、音訊、視訊等。 一、UEditor自定義工具欄效果圖如下： 二、UEditor富文字編輯器環境搭建及專案引用 環境搭建不再贅述，請自行查閱或者參考以
Hadoop不完全分佈（單機、偽分佈）模式搭建
一，配置一臺普通的虛擬機器 二、解壓安裝Hadoop 三、配置Java與Hadoop的環境變數 鍵入命令： vim /etc/profile 按i進入插入狀態 ，開始使用vim編輯器編輯： 在末尾插入下列這段程式碼： export JAVA_HOME='
Java編程思想（一、對象導論）
java源碼 簡單的 java java語言 綁定 收集 無法訪問 學習 內存池 記錄學習中的思考。主要為了幫助自己鞏固所學知識，也希望能通過自己的總結，為java初學者提供一些啟發。痛並快樂著，堅持就好。 一開始在各種大牛的網上博客上看到推薦《Java編程
一個線上音樂軟體的故事（一、故事的由來）
這篇文章是講一款線上音樂播放軟體的開發過程，是我寫完這個軟體後的一些總結，我把它寫成了一則小故事，故事把開發過程中的重點部分寫了出來，有些細節的內容還是需要看原始碼。希望這則故事對已經有一些程式設計基礎，想繼續深入學習Python的童鞋起到拋磚引玉的作用。 很久很久以前，故事的由來
雲伺服器linux系統啟動web專案環境配置_（一、jdk下載安裝）
官網下載jdk（linux） 檢視linux 多少位 命令：getconf LONG_BIT 下載對應jdk 1.上傳壓縮包 cd ..回
linux指令（一、目錄與檔案）
一、文件與目錄 1.Linux檔案屬性 第一個字元代表這個檔案是『目錄、檔案或連結檔等等』： 當為[ d ]則是目錄； 當為[ - ]則是檔案； 若是[ l ]則表示為連結檔(
spring cloud（一、新建微服務）
一、新建spring Cloud專案 選擇cloud discovery->eureka server建立新專案 二、新建一個服務註冊中心（eureka-client） 在啟動類上加上@EnableEurekaServer @EnableEurekaServer @Spring