在做前端開發(fā)時(shí)，我們需要用到一些調(diào)試工具用來調(diào)試我們的HTML、CSS或者JS代碼，俗話說預(yù)先善其事必先利其器，這里我給大家推薦幾款比較常用的前端調(diào)試工具。

1、Chrome的開發(fā)者工具

這是我現(xiàn)在用的最多的一個(gè)瀏覽器調(diào)試工具，在經(jīng)過了幾個(gè)版本的更新，其調(diào)試功能也日漸強(qiáng)大。在打開Chrome后可以通過點(diǎn)擊“F12”功能鍵、“Ctrl Shift I”或者“Ctrl Shift J”打開開發(fā)者工具。也可以通過工具 - 開發(fā)者工具 打開。

2、firefox插件Firebug

這是我在Chrome瀏覽器出現(xiàn)之前常用的調(diào)試工具，在Chrome出來之后就很少使用了，可以在firefox瀏覽器 - 添加附件 - 搜索firebug - 安裝，然后在firefox瀏覽器的右上角會(huì)有個(gè)蟲子的圖標(biāo)，那個(gè)就是firebug了。除此之外，firefox也內(nèi)置了開發(fā)者的工具，可以從設(shè)置按鈕打開開發(fā)者工具。

3、IE的開發(fā)者工具

某些內(nèi)部應(yīng)用的項(xiàng)目都是對(duì)IE有較好的支持的，所以這里也順帶提一下IE其實(shí)也是有對(duì)應(yīng)的調(diào)試工具的，在之前的IE版本中內(nèi)置的調(diào)試工具是相當(dāng)?shù)某舐模ㄎ矣浀檬沁@樣的），那目前IE11的調(diào)試工具功能也是比較強(qiáng)大，同樣可以通過F12打開

4、IETest，IE瀏覽器版本切換工具

在開發(fā)Web項(xiàng)目的時(shí)候，經(jīng)常會(huì)碰到需要在不同的IE版本中檢查完成的網(wǎng)頁(yè)是否能正常展現(xiàn)，這時(shí)就需要IETest幫我們模擬網(wǎng)頁(yè)在IE5.5、IE6、IE7、IE8、IE9以及IE10等瀏覽器中的兼容性，讓我們看一下辛苦做好的CSS樣式或網(wǎng)站版面是否可以在各個(gè)主要瀏覽器正常顯示。

5、Emmet

emmet算是HTML/CSS開發(fā)中的神器，如果做前端開發(fā)肯定會(huì)被emmet強(qiáng)大的功能吸引，他使用了仿CSS選擇器的語(yǔ)法來生成代碼，大大提高了HTML/CSS代碼編寫的速度，對(duì)多種文本編輯器都有較好的支持，下載地址：http://www.emmet.io

6、JSON格式校驗(yàn)工具

JSON的使用越來越平凡，對(duì)JSON格式的校驗(yàn)也是很常見的，推薦2個(gè)比較方便的JSON校驗(yàn)工具，一個(gè)是在線的網(wǎng)站

https://jsonformatter.curiousconcept.com/

另外一個(gè)是Notepad 的Json Viewer插件

7、JS壓縮和解壓縮工具

現(xiàn)在的很多JS插件都是采用min壓縮格式提供的，以提高其網(wǎng)絡(luò)傳輸速度，但問題來了，我們有時(shí)需要查看被壓縮的js文件的源碼，而另一些時(shí)候我們又需要將我們寫的js文件進(jìn)行壓縮，這里提供幾種方式：

在線的壓縮解壓縮工具：

http://tool.oschina.net/jscompress

http://tool.css-js.com/

本地的，我一直是使用notepad 的一個(gè)JSTool工具來實(shí)現(xiàn)的，該工具能很容易的實(shí)現(xiàn)對(duì)JS文件的壓縮和解壓縮

調(diào)試工具的使用

常用的調(diào)試工具有Chrome瀏覽器的調(diào)試工具，火狐瀏覽器的Firebug插件調(diào)試工具，IE的開發(fā)人員工具等。它們的功能與使用方法大致相似。Chrome瀏覽器簡(jiǎn)潔快速，功能強(qiáng)大這里主要介紹Chrome瀏覽器的調(diào)試工具。

打開 Google Chrome 瀏覽器，通過下面任何一種方式進(jìn)入開發(fā)人員工具：

• 點(diǎn)擊位于瀏覽器用戶界面右上角的“頁(yè)面”下拉菜單，“更多工具”→“開發(fā)人員工具”。
• 右鍵點(diǎn)擊網(wǎng)頁(yè)上的任一元素，在彈出菜單中選擇“審查元素”。
• 在 Windows操作系統(tǒng)上，使用 F12或Ctrl+Shift+I 快捷鍵打開開發(fā)人員工具（或使用 Ctrl+Shift+J 直接進(jìn)入 JavaScript 控制臺(tái)）。

打開調(diào)試工具后，可以通過dock side更換調(diào)試工具顯示的位置，位于調(diào)試工具的右上角，關(guān)閉按鈕的左邊，有豎著三個(gè)點(diǎn)的按鈕，選擇自己喜歡的位置就可以啦。

Chrome一共有8個(gè)功能子集。每一個(gè)圖標(biāo)點(diǎn)擊后都會(huì)打開相應(yīng)的調(diào)試面板，幫助您獲取各種不同的信息，如 DOM 樹、資源占用情況、頁(yè)面相關(guān)的腳本等。通過 Ctrl+[ 和 Ctrl+] 鍵，可以在這些項(xiàng)之間進(jìn)行切換。每個(gè)模塊及其主要功能為：

Element 標(biāo)簽頁(yè)： 用于查看和編輯當(dāng)前頁(yè)面中的 HTML 和 CSS 元素。
Network 標(biāo)簽頁(yè)：用于查看 HTTP 請(qǐng)求的詳細(xì)信息，如請(qǐng)求頭、響應(yīng)頭及返回內(nèi)容等。
Source 標(biāo)簽頁(yè)：用于查看和調(diào)試當(dāng)前頁(yè)面所加載的腳本的源文件。
TimeLine 標(biāo)簽頁(yè)： 用于查看腳本的執(zhí)行時(shí)間、頁(yè)面元素渲染時(shí)間等信息。
Profiles 標(biāo)簽頁(yè)：用于查看 CPU 執(zhí)行時(shí)間與內(nèi)存占用等信息。
Resource 標(biāo)簽頁(yè)：用于查看當(dāng)前頁(yè)面所請(qǐng)求的資源文件，如 HTML，CSS 樣式文件等。
Audits 標(biāo)簽頁(yè)：分析頁(yè)面加載的過程，進(jìn)而提供減少頁(yè)面加載時(shí)間、提升響應(yīng)速度的方案，用于優(yōu)化前端頁(yè)面，加速網(wǎng)頁(yè)加載速度等。
Console 標(biāo)簽頁(yè)：用于顯示腳本中所輸出的調(diào)試信息，或運(yùn)行測(cè)試腳本等。

一.Elements：

在元素（Elements）面板中，可以看到整個(gè)頁(yè)面的 DOM 樹結(jié)構(gòu)和每個(gè)元素的所有屬性（即html和css），同時(shí)也可以實(shí)時(shí)地修改這些元素及其屬性，并可以實(shí)時(shí)看到修改后的效果。

小技巧：
1. ctrl+滾輪 可以 放大開發(fā)者工具代碼大小。
2. 左邊是HTML元素結(jié)構(gòu) 右邊是CSS樣式。
3. 右邊CSS樣式可以改動(dòng)數(shù)值和顏色查看更改后效果。
4.右邊CSS樣式出現(xiàn)黃色三角形感嘆號(hào)，說明你的屬性語(yǔ)法書寫有誤，需要更改，這樣便于你及時(shí)發(fā)現(xiàn)錯(cuò)誤。

1.Styles

• 查看HTML：在工具窗口左側(cè)是html代碼，點(diǎn)擊左上角箭頭按鈕（或者快捷鍵“Ctrl Shift C”），選擇頁(yè)面中的元素，直接定位到元素的HTML位置。

• 編輯HTML：在工具窗口左側(cè)是html代碼，可通過雙擊修改現(xiàn)有標(biāo)簽的屬性值，也可選中html代碼片段右擊選擇“Edit as HTML”進(jìn)行html代碼的修改；

• 隱藏HTML：Chrome 開發(fā)者工具已支持在選中的元素上按下 h 鍵快速隱藏該元素（如果你不想按 Del 鍵直接刪除該元素的話）。

• 編輯屬性：在工具窗口右側(cè)顯示的是被選元素的樣式信息，可以通過雙擊現(xiàn)有屬性來修改該元素的 style 屬性或應(yīng)用的某個(gè)選擇器中的屬性值，也可以通過取消勾選的方式去掉一些屬性，同時(shí)頁(yè)面實(shí)時(shí)變化。

• 添加屬性：鼠標(biāo)雙擊您所想修改的元素的選擇器的空白部分，即可添加屬性。添加任何屬性都必須以分號(hào)結(jié)束。你也可以直接點(diǎn)擊+號(hào)，添加新選擇器并進(jìn)行屬性操作。

• 可以直接在盒模型上更改margin和padding。

• 搜索功能：當(dāng)工具面板獲得焦點(diǎn)后，快捷鍵ctrl+f會(huì)打開搜索框，鍵入元素關(guān)鍵字進(jìn)行搜索。

• 導(dǎo)航到定義該樣式屬性的 CSS 文件：審查元素并切換到 Styles 面板中，按住 Ctrl 鍵，移到某個(gè)樣式屬性的值（出現(xiàn)下劃線），然后點(diǎn)擊即可導(dǎo)航到定義該樣式屬性的 CSS 文件中。

• 你還可以對(duì)某個(gè)元素進(jìn)行監(jiān)聽，在JS對(duì)元素的屬性或者HTML進(jìn)行修改的時(shí)候，直接觸發(fā)斷點(diǎn)，跳轉(zhuǎn)到對(duì)改元素進(jìn)行修改的JS代碼處：

• 拖拽節(jié)點(diǎn), 調(diào)整順序。拖拽節(jié)點(diǎn)到編輯器

注：像素大小，可以通過鼠標(biāo)的滾輪調(diào)整，調(diào)整單位1px（百分比調(diào)整單位1%）；按住ALt，調(diào)整單位0.1px；同時(shí)按住Shift+ALt，調(diào)整單位10px。

總之，把可以點(diǎn)的都點(diǎn)一遍。

2.Computed

顯示的是所選元素的最終樣式（對(duì)應(yīng)JS中的getComputedStyle()方法），Computed Style中的屬性是只讀的，不能實(shí)時(shí)修改，所以主要用來查看元素的最終屬性值。

+Event Listeners

顯示了綁定到當(dāng)前元素的事件監(jiān)聽函數(shù)，而且會(huì)顯示事件冒泡或捕獲（即能夠響應(yīng)此事件的所有元素）。

右擊標(biāo)簽，審查元素；出現(xiàn)工具欄-》菜單 Elements，查看右側(cè)菜單-》EventListeners，查看元素上綁定了哪些事件：

默認(rèn)會(huì)列出 All Nodes, 這些包括代理綁定在該節(jié)點(diǎn)的父/祖父節(jié)點(diǎn)上的事件, 因?yàn)樵谠诿芭莼虿东@階段會(huì)經(jīng)過該節(jié)點(diǎn)
Selected Node Only 只會(huì)列出當(dāng)前節(jié)點(diǎn)上綁定的事件
每個(gè)事件會(huì)有對(duì)應(yīng)的幾個(gè)屬性 handler, isAtribute, lineNumber, listenerBody, sourceName, type, useCapture

-handler是處理函數(shù), 右鍵可以看到這個(gè)函數(shù)定義的位置, 一般 js 庫(kù)綁定事件會(huì)包一層, 所以這里很難找到對(duì)應(yīng)handler
-isAtribute 表明事件是否通過 html 屬性(類似onClick)形式綁定的
-useCapture 是 addEventListener 的第三個(gè)參數(shù), 說明事件是以冒泡還是捕 順序執(zhí)行
-右擊handler選擇“Show function definition”可以進(jìn)入Sources里js文件中。

Properties：顯示當(dāng)前元素的DOM屬性，按照類的繼承層級(jí)排列，越靠下層級(jí)越高。最上面是一個(gè)HTMLDivElement的實(shí)例，第二個(gè)是HTMLDivElement的類。第三個(gè)，是HTMLElement類，HTMLDivElement類繼承自HTMLDivElement類。接著分別是Element類，Node類，和Object類。如果選擇不同的節(jié)點(diǎn)類型，就會(huì)出現(xiàn)不同的繼承關(guān)系。

這個(gè)很有用，可以讓你看到元素具有的方法與屬性，比查API手冊(cè)要方便，但要注意某些方法和屬性在IE、FireFox等其他瀏覽器下面的支持情況。

二.Network

請(qǐng)求的每個(gè)資源在Network表格中顯示為一行，每個(gè)資源都有許多列的內(nèi)容(如紅色區(qū)塊1)，不過默認(rèn)情況下不是所有列都顯示出來。

Name/Path: 資源名稱以及URL路徑；
Method: HTTP請(qǐng)求方法；
Status/Text: HTTP狀態(tài)碼/文字解釋；
Type: 請(qǐng)求資源的MIME類型；

Initiator解釋請(qǐng)求是怎么發(fā)起的，有四種可能的值：

Parser：請(qǐng)求是由頁(yè)面的HTML解析時(shí)發(fā)送的；
Redirect：請(qǐng)求是由頁(yè)面重定向發(fā)送的；
Script：請(qǐng)求是由script腳本處理發(fā)送的；
Other：請(qǐng)求是由其他過程發(fā)送的，比如頁(yè)面里的link鏈接點(diǎn)擊，在地址欄輸入U(xiǎn)RL地址。

響應(yīng)請(qǐng)求

Size/Content: Size是響應(yīng)頭部和響應(yīng)體結(jié)合起來的大小，Content是請(qǐng)求內(nèi)容解碼后的大小。進(jìn)一步了解可以看這里Chrome Dev Tools - “Size” vs “Content”；
Time/Latency: Time是從請(qǐng)求開始到接收到最后一個(gè)字節(jié)的總時(shí)長(zhǎng)，Latency是從請(qǐng)求開始到接收到第一個(gè)字節(jié)的時(shí)間；
Timeline: 顯示網(wǎng)絡(luò)請(qǐng)求的可視化瀑布流，鼠標(biāo)懸停在某一個(gè)時(shí)間線上，可以顯示整個(gè)請(qǐng)求各部分花費(fèi)的時(shí)間。
以上是默認(rèn)顯示的列，不過我們可以在瀑布流的頂部右鍵，這樣就可以選擇顯示或者隱藏更多的列，比如Cache-Control, Connection, Cookies, Domain等。

我們可以按照上面任意一項(xiàng)來給資源請(qǐng)求排序，只需要單擊相應(yīng)的名字即可。Timeline排序比較復(fù)雜，單擊Timeline后，需要選擇根據(jù)Start Time、Response Time、End Time、Duration、Latency中的一項(xiàng)來排序。

紅色區(qū)塊2中，一共有6個(gè)小功能：

Record Network Log: 紅色表示此時(shí)正在記錄資源請(qǐng)求信息；
Clear: 清空所有的資源請(qǐng)求信息；
Filter: 過濾資源請(qǐng)求信息；
Use small resource raws: 每一行顯示更少的內(nèi)容；
Perserve Log: 再次記錄請(qǐng)求的信息時(shí)不擦出之前的資源信息；
Disable cache: 不允許緩存的話，所有資源均重新加載。

選擇Filter后，就會(huì)出現(xiàn)如紅色區(qū)塊3所顯示的過濾條件，當(dāng)我們點(diǎn)擊某一內(nèi)容類型(可以是Documents, Stylesheets, Images, Scripts, XHR, Fonts, WebSockets, Other)后，只顯示該特定類型的資源。在XHR請(qǐng)求中，可以在一個(gè)請(qǐng)求上右鍵選擇“Replay XHR”來重新運(yùn)行一個(gè)XHR請(qǐng)求。

有時(shí)候我們需要把Network里面內(nèi)容傳給別人，這時(shí)候可以在資源請(qǐng)求行的空白處右鍵然后選擇Save as HAR with Content保存為一個(gè)HAR文件。然后可以在一些第三方工具網(wǎng)站，比如這里重現(xiàn)網(wǎng)絡(luò)請(qǐng)求信息。

選定某一資源后，我們還可以Copy as cURL，也就是復(fù)制網(wǎng)絡(luò)請(qǐng)求作為curl命令的參數(shù)，詳細(xì)內(nèi)容看 Copying requests as cURL commands

此外，我們還可以查看網(wǎng)絡(luò)請(qǐng)求的請(qǐng)求頭，響應(yīng)頭，已經(jīng)返回的內(nèi)容等信息

資源的詳細(xì)內(nèi)容有以下幾個(gè)：

HTTP request and response headers
Resource preview: 可行時(shí)進(jìn)行資源預(yù)覽；
HTTP response: 未處理過的資源內(nèi)容；
Cookie names and values: HTTP請(qǐng)求以及返回中傳輸?shù)乃蠧ookies；
WebSocket messages: 通過WebSocket發(fā)送和接收到的信息；
Resource network timing: 圖形化顯示資源加載過程中各階段花費(fèi)的時(shí)間。

注：

XPath 是一門在 XML 文檔中查找信息的語(yǔ)言。XPath 用于在 XML 文檔中通過元素和屬性進(jìn)行導(dǎo)航。比如，

<a >這里</a>

這里a標(biāo)簽的Xpath為：/html/body/div[2]/p[1]/a，解讀為：html里面body標(biāo)簽的第二個(gè)div標(biāo)簽的第一個(gè)p標(biāo)簽下的a標(biāo)簽。

三.Sources

用于查看和調(diào)試當(dāng)前頁(yè)面所加載的腳本的源文件。

-通過左邊的內(nèi)容源，打開對(duì)應(yīng)的 JavaScript 文件，鼠標(biāo)點(diǎn)擊文件的行號(hào)就可以設(shè)置和刪除斷點(diǎn)。添加的每個(gè)斷點(diǎn)都會(huì)出現(xiàn)在右側(cè)調(diào)試區(qū)的 Breakpoints 列表中，點(diǎn)擊列表中斷點(diǎn)就會(huì)定位到內(nèi)容區(qū)的斷點(diǎn)上。如果你有多個(gè)文件、多個(gè)斷點(diǎn)的話，利用 Breakpoints 列表中的斷點(diǎn)快速定位非常方便。

-對(duì)于每個(gè)已添加的斷點(diǎn)都有兩種狀態(tài)：激活和禁用。剛添加的斷點(diǎn)都是激活狀態(tài)，禁用狀態(tài)就是保留斷點(diǎn)但臨時(shí)取消該斷點(diǎn)功能。在 Breakpoints 列表中每個(gè)斷點(diǎn)前面都有一個(gè)復(fù)選框，取消選中就將禁用該斷點(diǎn)。斷點(diǎn)位置的右鍵菜單中也可以禁用斷點(diǎn)。也可以在右側(cè)功能區(qū)上面

按鈕臨時(shí)禁用所有已添加的斷點(diǎn)，再點(diǎn)一下恢復(fù)原狀態(tài)。

-條件斷點(diǎn)：在斷點(diǎn)位置的右鍵菜單中選擇“Edit Breakpoint...”可以設(shè)置觸發(fā)斷點(diǎn)的條件，就是寫一個(gè)表達(dá)式，表達(dá)式為 true 時(shí)才觸發(fā)斷點(diǎn)。

-很多代碼是壓縮/混淆過的，點(diǎn)擊“{}”可以格式化代碼，再點(diǎn)一下就取消格式化。。

-在斷點(diǎn)調(diào)試時(shí)，可以用鼠標(biāo)選擇想要查看的變量或表達(dá)式，然后右鍵菜單執(zhí)行“Evaluate in Console”，就可以看到該表達(dá)式的當(dāng)前的值了。

1.代碼斷點(diǎn)

設(shè)置斷點(diǎn)：在 Sources 面板 js 文件行號(hào)處設(shè)置斷點(diǎn), 這里除了常規(guī)斷點(diǎn)外, 還有個(gè)條件斷點(diǎn)(右鍵 conditional breakpoint), 在設(shè)置的條件為 true 時(shí)才會(huì)斷電, 在循環(huán)中需要斷點(diǎn)時(shí)比較有用.
斷點(diǎn)后可以查看 堆棧, 變量 信息:
在調(diào)用堆棧這里可以切換到堆棧中的任何地方重新執(zhí)行(右鍵restart frame), 如果想查看斷點(diǎn)前的信息時(shí)比較有用.

斷點(diǎn)后的變量保存到全局
選中變量, 右鍵 Evalute in console
在 console 中選中輸出的內(nèi)容, 右鍵 store as global variable

2.事件斷點(diǎn)

元素上事件斷點(diǎn)：某一事件/某類事件
devtools 可以查看某一個(gè)元素上綁定了哪些事件: Elements > Event Listeners

3.DOM 斷點(diǎn)

一般是 dom 結(jié)構(gòu)改變時(shí)觸發(fā)。 有時(shí)候我們需要監(jiān)聽某個(gè) DOM 被修改情況，而不關(guān)心是哪行代碼做的修改（也可能有多處都會(huì)對(duì)其做修改）。那么我們可以直接在 DOM 上設(shè)置斷點(diǎn)。

在元素審查的 Elements Panel 中在某個(gè)元素上右鍵菜單里可以設(shè)置三種不同情況的斷點(diǎn)：

子節(jié)點(diǎn)修改
自身屬性修改
自身節(jié)點(diǎn)被刪除

選中之后，Sources Panel 中右側(cè)的 DOM Breakpoints 列表中就會(huì)出現(xiàn)該 DOM 斷點(diǎn)。一旦執(zhí)行到要對(duì)該 DOM 做相應(yīng)修改時(shí)，代碼就會(huì)在那里停下來。

對(duì)上面元素上事件斷點(diǎn)(mouseover) 后不容易找到業(yè)務(wù)代碼, 使用 mutation 斷點(diǎn), 斷點(diǎn)后配合 call stack 就可以找到業(yè)務(wù)代碼了

這種情況使用全局搜索(ctrl + shift + f) 代碼中 css classname 也能找到業(yè)務(wù)代碼, 然后直接斷點(diǎn)也可以。

4.XHR 斷點(diǎn)

右側(cè)調(diào)試區(qū)有一個(gè) XHR Breakpoints，點(diǎn)擊+ 并輸入 URL 包含的字符串即可監(jiān)聽該 URL 的 Ajax 請(qǐng)求，輸入內(nèi)容就相當(dāng)于 URL 的過濾器。如果什么都不填，那么就監(jiān)聽所有 XHR 請(qǐng)求。一旦 XHR 調(diào)用觸發(fā)時(shí)就會(huì)在 request.send() 的地方中斷。

5.全局事件斷點(diǎn)

devtools 還可以對(duì)事件發(fā)生時(shí)斷點(diǎn), 比如 click 發(fā)生時(shí)斷點(diǎn), 這個(gè)跟 元素上事件斷點(diǎn) 不同, 不會(huì)限定在元素上, 只要是事件發(fā)生, 并且有 handler 就斷點(diǎn); 還可以對(duì) resize, ajax, setTimeout/setInterval 斷點(diǎn).

幾個(gè)常用的斷點(diǎn)快捷鍵:

F8: 繼續(xù)執(zhí)行
F10: step over, 單步執(zhí)行, 不進(jìn)入函數(shù)
F11: step into, 單步執(zhí)行, 進(jìn)入函數(shù)
shift + F11: step out, 跳出函數(shù)
ctrl + o: 打開文件
ctrl + shit + o: 跳到函數(shù)定義位置
ctrl + shift + f: 所有腳本中搜索

四.TimeLine

用于查看腳本的執(zhí)行時(shí)間、頁(yè)面元素渲染時(shí)間等信息。

可結(jié)合Profiles進(jìn)行JavaScript性能分析。

在開始做性能優(yōu)化的時(shí)候要設(shè)置一個(gè)基線，來明確這個(gè)頁(yè)面的速度到底怎樣。在時(shí)間線(timeline)標(biāo)簽下開始記錄，載入頁(yè)面然后停止記錄，這樣就設(shè)置了一個(gè)基線。（打開chrome開發(fā)者工具，點(diǎn)擊“時(shí)間線”標(biāo)簽，然后點(diǎn)擊窗口底部圓形的黑色“記錄”圖標(biāo)開始記錄）。chrome是智能的，只有頁(yè)面開始載入的時(shí)候才會(huì)開始記錄。一般多記錄幾次（約三次）然后取了平均值。

五.Profiles
這個(gè)主要是做性能優(yōu)化的，包括查看CPU執(zhí)行時(shí)間與內(nèi)存占用等。
例述如下：原文地址：http://www.smashingmagazine.com/2012/06/12/javascript-profiling-chrome-developer-tools/。
你的網(wǎng)站正常運(yùn)轉(zhuǎn)。現(xiàn)在我們來讓它運(yùn)轉(zhuǎn)的更快。網(wǎng)站的性能由頁(yè)面載入速度和代碼執(zhí)行效率決定。一些服務(wù)可以讓你的網(wǎng)站載入更快，比如壓縮JS和CDN，但是讓代碼執(zhí)行的更快你要做的事情。代碼中很小的改動(dòng)都可能對(duì)性能造成巨大的影響。快速靈活的網(wǎng)站和可怕的“無(wú)響應(yīng)腳本”對(duì)話框可能只有幾行代碼的差別。這篇文章告訴你如何通過用Chrome開發(fā)者工具（Chrome Developer Tools）找到這幾行關(guān)鍵的代碼。

在你的應(yīng)用中進(jìn)行Javascript性能分析

實(shí)際工作中的應(yīng)用要比“顏色排序器”復(fù)雜的多，但是做性能分析要遵循同樣的基本原則

1、設(shè)置一個(gè)基線，這樣你就知道你是從何處開始的。

2、把問題從應(yīng)用的其他代碼隔離出來。

3、在一個(gè)可控的環(huán)境下進(jìn)行優(yōu)化，頻繁的使用時(shí)間線（timelines）和性能分析器（profiles）

還有一些性能優(yōu)化的準(zhǔn)則

1、從最慢的部分開始，這樣在時(shí)間優(yōu)化上可以得到最大的提升。

2、控制環(huán)境。如果你換了電腦或者做了任何大的改動(dòng)，都要設(shè)置新的基線。

3、多次分析以防你電腦的異常導(dǎo)致得到不正確的結(jié)果。

每個(gè)人都想要他的網(wǎng)站更快，你必須開發(fā)新的功能，但是新的功能通常會(huì)讓網(wǎng)站更慢。所以花費(fèi)時(shí)間來做性能優(yōu)化是有價(jià)值的。

六.Resource

資源面板展示了頁(yè)面中的所有資源。

1、資源面板tab；
2、左側(cè)欄分類列出頁(yè)面資源。如“框架”、“session存儲(chǔ)”，如果前面有箭頭點(diǎn)擊展開還可以看到更多信息。注意左側(cè)欄的大小是可以調(diào)整的；
3、頁(yè)面資源包括字體、圖片、js、css和頁(yè)面本身。如果頁(yè)面中有frame或iframe，展開Frames會(huì)看到其對(duì)應(yīng)的frame和iframe。頁(yè)面層次結(jié)構(gòu)更清晰
4、數(shù)據(jù)庫(kù)顯示頁(yè)面相關(guān)的SQL數(shù)據(jù)庫(kù)數(shù)據(jù)信息；
5、相應(yīng)IndexedDB 也展示頁(yè)面的IndexedDB 信息；
6、以鍵/值 形式列表展示本地存儲(chǔ)的數(shù)據(jù)；
7、以鍵/值列表顯示session存儲(chǔ)數(shù)據(jù)；
8、根據(jù)域名列舉cookie；
9、顯示通過manifest緩存的資源。包括很多信息，如js庫(kù)文件會(huì)顯示文件地址、大小和類型；
10、右側(cè)用來顯示每個(gè)資源對(duì)應(yīng)的詳細(xì)信息。

雖然現(xiàn)在由frame組成的頁(yè)面越來越少見了，但查看框架內(nèi)容的方法還是有必要了解的。下面截圖，是一個(gè)由frame組成的頁(yè)面。

每個(gè)frame都相關(guān)的資源都在一個(gè)文件夾下，同樣點(diǎn)擊展開可以了解頁(yè)面的資源、js、css、圖片文件和字體情況。點(diǎn)擊選中一個(gè)框架，頁(yè)面中其對(duì)應(yīng)的區(qū)域會(huì)高亮顯示。
注：不會(huì)列出系統(tǒng)已有的，如“arial”“Helvetica”等，只會(huì)列出瀏覽器需要下載安裝的

• cookies
  查看某個(gè)網(wǎng)站的cookie信息。如http://study.163.com/

[name]-字段名。如字段名為“remember_checked”,其值為1，這可能說明用戶在登陸的時(shí)候選擇了記住我；
[value]-字段所對(duì)應(yīng)的值。如“_twitter_sess”所對(duì)應(yīng)的值為一串加密了的session ID；
[domain]-cookie所在的域。上圖的“.twitter.com”表明其子域也是可以訪問該cookie的；
[path]-跟域相同，設(shè)置有效的路徑。設(shè)置為“/”表明允許所在路徑下都可以訪問cookie；
[expires]-瀏覽器可以刪除該cookie的日期；
[size]-cookie的大小，單位bytes；
[HTTP]-cookie的訪問允許HTTP協(xié)議。這可以防止跨站js獲取cookie攻擊；
[secure]]-只允許加密連接訪問cookie，如HTTPS；

• 緩存應(yīng)用

[resource]-資源的完整路徑。典型的資源包括靜態(tài)資源和html文件，manifest文件也屬于其中；
[type]-可以改變。Manifest文件的文件類型是Manifest，其他的manifest文件中定義的文件類型為explicit。Fallback類型的文件是那些需要回調(diào)資源文件的回調(diào)文件；
[size]-資源文件的大小，單位bytes；

七.Audits

用于優(yōu)化前端頁(yè)面，加速網(wǎng)頁(yè)加載速度等。

使用Chrome瀏覽器對(duì)頁(yè)面性能進(jìn)行檢測(cè)，根據(jù)測(cè)試的結(jié)果進(jìn)行優(yōu)化。當(dāng)然這個(gè)結(jié)果只是參考，在實(shí)際的項(xiàng)目中肯定有特殊情況存在，并不能為了滿足某項(xiàng)測(cè)試結(jié)果而忽略特定情況的存在。

1、Chrome檢測(cè)工具

點(diǎn)擊Audits然后出現(xiàn)了如下界面，選中重載頁(yè)面開始檢測(cè)按鈕，然后點(diǎn)擊Run按鈕，之后就是等待結(jié)果。

2、檢測(cè)結(jié)果

這個(gè)檢測(cè)結(jié)果分為2類，一個(gè)是網(wǎng)絡(luò)，一個(gè)是網(wǎng)頁(yè)性能；

檢測(cè)結(jié)果不僅列出了問題，還定位問題在哪里，可以很快入手解決對(duì)應(yīng)的問題。

1）合并JS文件：Combine external JavaScript（總共有29個(gè)可以壓縮的JS文件）2）There are multiple resources served from same domain. Consider combining them into as few files as possible.一個(gè)域名有多個(gè)文件，可以考慮將他們壓縮為盡可能少的文件。
3）

image_thumb26_thumb

image_thumb29_thumb

當(dāng)合理使用上述log方法后，可以很方便地在控制臺(tái)選擇查看特定類型的信息。

image_thumb33_thumb

image_thumb37_thumb

jdfw_thumb5_thumb1

image_thumb41_thumb

image_thumb45_thumb

image_thumb50_thumb

image_thumb63_thumb

image_thumb60_thumb

image_thumb59_thumb

上面的需要領(lǐng)悟其奧義才能使用得當(dāng)，而需要領(lǐng)悟其奧義才能使用得當(dāng)，而0~4則代表了最近5個(gè)你選擇過的DOM節(jié)點(diǎn)。什么意思？在頁(yè)面右擊選擇審查元素，然后在彈出來的DOM結(jié)點(diǎn)樹上面隨便點(diǎn)選，這些被點(diǎn)過的節(jié)點(diǎn)會(huì)被記錄下來，而4則代表了最近5個(gè)你選擇過的DOM節(jié)點(diǎn)。什么意思？在頁(yè)面右擊選擇審查元素，然后在彈出來的DOM結(jié)點(diǎn)樹上面隨便點(diǎn)選，這些被點(diǎn)過的節(jié)點(diǎn)會(huì)被記錄下來，而0會(huì)返回最近一次點(diǎn)選的DOM結(jié)點(diǎn)，以此類推，$1返回的是上上次點(diǎn)選的DOM節(jié)點(diǎn)，最多保存了5個(gè)，如果不夠5個(gè)，則返回undefined。

另外值得一贊的是，Chrome 控制臺(tái)中原生支持類jQuery的選擇器，也就是說你可以用$加上熟悉的css選擇器來選擇DOM節(jié)點(diǎn)

(selector)返回的是滿足選擇條件的首個(gè)DOM元素。剝?nèi)ニ齻紊频耐庖拢鋵?shí)(selector)返回的是滿足選擇條件的首個(gè)DOM元素。剝?nèi)ニ齻紊频耐庖拢鋵?shí) (selector)是原生JavaScript document.querySelector() 的封裝。
同時(shí)另一個(gè)命令$$(selector)返回的是所有滿足選擇條件的元素的一個(gè)集合，是對(duì)document.querySelectorAll() 的封裝。

copy

通過此命令可以將在控制臺(tái)獲取到的內(nèi)容復(fù)制到剪貼板。

copy(document.body);

keys & values
這是一對(duì)基友。前者返回傳入對(duì)象所有屬性名組成的數(shù)據(jù)，后者返回所有屬性值組成的數(shù)組。具體請(qǐng)看下面的例子：

image_thumb71_thumb

jdfw_thumb11_thumb1

移動(dòng)設(shè)備模式
現(xiàn)在很多的網(wǎng)頁(yè)都要適配移動(dòng)端，Chrome的移動(dòng)設(shè)備模式對(duì)開發(fā)者來說無(wú)疑是一個(gè)很大的驚喜。
點(diǎn)擊手機(jī)圖標(biāo)，可以模擬各種各樣的移動(dòng)設(shè)備

image_thumb7_thumb

image_thumb1

image_thumb2[1]

image_thumb3

image_thumb4

image_thumb6

image_thumb7[1]

image_thumb8_thumb