在做前端開發(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)目都是對IE有較好的支持的咱圆，所以這里也順帶提一下IE其實(shí)也是有對應(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)頁是否能正常展現(xiàn)，這時(shí)就需要IETest幫我們模擬網(wǎng)頁在IE5.5皇帮、IE6匈睁、IE7监透、IE8、IE9以及IE10等瀏覽器中的兼容性软舌，讓我們看一下辛苦做好的CSS樣式或網(wǎng)站版面是否可以在各個(gè)主要瀏覽器正常顯示才漆。

5、Emmet

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

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

JSON的使用越來越平凡，對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)對JS文件的壓縮和解壓縮

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

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

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

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

打開調(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 樹、資源占用情況埋酬、頁面相關(guān)的腳本等哨啃。通過 Ctrl+[ 和 Ctrl+] 鍵烧栋，可以在這些項(xiàng)之間進(jìn)行切換。每個(gè)模塊及其主要功能為：

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

一.Elements：

在元素（Elements）面板中闸盔，可以看到整個(gè)頁面的 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)黃色三角形感嘆號，說明你的屬性語法書寫有誤桦他，需要更改蔫巩，這樣便于你及時(shí)發(fā)現(xiàn)錯(cuò)誤。

1.Styles

• 查看HTML：在工具窗口左側(cè)是html代碼快压，點(diǎn)擊左上角箭頭按鈕（或者快捷鍵“Ctrl Shift C”）圆仔，選擇頁面中的元素，直接定位到元素的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í)頁面實(shí)時(shí)變化意推。

• 添加屬性：鼠標(biāo)雙擊您所想修改的元素的選擇器的空白部分，即可添加屬性珊蟀。添加任何屬性都必須以分號結(jié)束菊值。你也可以直接點(diǎn)擊+號，添加新選擇器并進(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 文件中。

• 你還可以對某個(gè)元素進(jìn)行監(jiān)聽割岛，在JS對元素的屬性或者HTML進(jìn)行修改的時(shí)候愉适，直接觸發(fā)斷點(diǎn)，跳轉(zhuǎn)到對改元素進(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

顯示的是所選元素的最終樣式（對應(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ì)有對應(yīng)的幾個(gè)屬性 handler, isAtribute, lineNumber, listenerBody, sourceName, type, useCapture

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

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

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

二.Network

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

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

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

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

響應(yīng)請求

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

我們可以按照上面任意一項(xià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í)正在記錄資源請求信息；
Clear: 清空所有的資源請求信息奖亚；
Filter: 過濾資源請求信息淳梦；
Use small resource raws: 每一行顯示更少的內(nèi)容；
Perserve Log: 再次記錄請求的信息時(shí)不擦出之前的資源信息昔字；
Disable cache: 不允許緩存的話爆袍，所有資源均重新加載。

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

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

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

此外斥季，我們還可以查看網(wǎng)絡(luò)請求的請求頭，響應(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請求以及返回中傳輸?shù)乃蠧ookies；
WebSocket messages: 通過WebSocket發(fā)送和接收到的信息躁锡；
Resource network timing: 圖形化顯示資源加載過程中各階段花費(fèi)的時(shí)間午绳。

注：

XPath 是一門在 XML 文檔中查找信息的語言。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)前頁面所加載的腳本的源文件赎败。

-通過左邊的內(nèi)容源，打開對應(yīng)的 JavaScript 文件蠢甲，鼠標(biāo)點(diǎn)擊文件的行號就可以設(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)快速定位非常方便曼追。

-對于每個(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 文件行號處設(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ì)對其做修改）拙友。那么我們可以直接在 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í)行到要對該 DOM 做相應(yīng)修改時(shí)，代碼就會(huì)在那里停下來病曾。

對上面元素上事件斷點(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 請求泰涂，輸入內(nèi)容就相當(dāng)于 URL 的過濾器鲫竞。如果什么都不填，那么就監(jiān)聽所有 XHR 請求逼蒙。一旦 XHR 調(diào)用觸發(fā)時(shí)就會(huì)在 request.send() 的地方中斷从绘。

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

devtools 還可以對事件發(fā)生時(shí)斷點(diǎn), 比如 click 發(fā)生時(shí)斷點(diǎn), 這個(gè)跟 元素上事件斷點(diǎn) 不同, 不會(huì)限定在元素上, 只要是事件發(fā)生, 并且有 handler 就斷點(diǎn); 還可以對 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í)間、頁面元素渲染時(shí)間等信息其做。

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

在開始做性能優(yōu)化的時(shí)候要設(shè)置一個(gè)基線，來明確這個(gè)頁面的速度到底怎樣妖泄。在時(shí)間線(timeline)標(biāo)簽下開始記錄驹沿，載入頁面然后停止記錄，這樣就設(shè)置了一個(gè)基線蹈胡。（打開chrome開發(fā)者工具渊季，點(diǎn)擊“時(shí)間線”標(biāo)簽，然后點(diǎn)擊窗口底部圓形的黑色“記錄”圖標(biāo)開始記錄）罚渐。chrome是智能的却汉，只有頁面開始載入的時(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)站的性能由頁面載入速度和代碼執(zhí)行效率決定谈息。一些服務(wù)可以讓你的網(wǎng)站載入更快缘屹，比如壓縮JS和CDN，但是讓代碼執(zhí)行的更快你要做的事情侠仇。代碼中很小的改動(dòng)都可能對性能造成巨大的影響轻姿。快速靈活的網(wǎng)站和可怕的“無響應(yīng)腳本”對話框可能只有幾行代碼的差別。這篇文章告訴你如何通過用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

資源面板展示了頁面中的所有資源郎笆。

1、資源面板tab忘晤；
2宛蚓、左側(cè)欄分類列出頁面資源。如“框架”设塔、“session存儲”凄吏，如果前面有箭頭點(diǎn)擊展開還可以看到更多信息。注意左側(cè)欄的大小是可以調(diào)整的闰蛔；
3竞思、頁面資源包括字體、圖片钞护、js、css和頁面本身爆办。如果頁面中有frame或iframe难咕，展開Frames會(huì)看到其對應(yīng)的frame和iframe。頁面層次結(jié)構(gòu)更清晰
4、數(shù)據(jù)庫顯示頁面相關(guān)的SQL數(shù)據(jù)庫數(shù)據(jù)信息余佃；
5暮刃、相應(yīng)IndexedDB 也展示頁面的IndexedDB 信息；
6爆土、以鍵/值 形式列表展示本地存儲的數(shù)據(jù)椭懊；
7、以鍵/值列表顯示session存儲數(shù)據(jù)步势；
8氧猬、根據(jù)域名列舉cookie；
9坏瘩、顯示通過manifest緩存的資源盅抚。包括很多信息，如js庫文件會(huì)顯示文件地址倔矾、大小和類型妄均；
10、右側(cè)用來顯示每個(gè)資源對應(yīng)的詳細(xì)信息哪自。

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

每個(gè)frame都相關(guān)的資源都在一個(gè)文件夾下，同樣點(diǎn)擊展開可以了解頁面的資源隙笆、js锌蓄、css、圖片文件和字體情況撑柔。點(diǎn)擊選中一個(gè)框架瘸爽，頁面中其對應(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]-字段所對應(yīng)的值峻凫。如“_twitter_sess”所對應(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)化前端頁面季稳，加速網(wǎng)頁加載速度等。

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

1儒飒、Chrome檢測工具

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

2包晰、檢測結(jié)果

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

檢測結(jié)果不僅列出了問題，還定位問題在哪里赫模，可以很快入手解決對應(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方法后癞揉，可以很方便地在控制臺選擇查看特定類型的信息纸肉。

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)骂澄。什么意思？在頁面右擊選擇審查元素，然后在彈出來的DOM結(jié)點(diǎn)樹上面隨便點(diǎn)選磨镶，這些被點(diǎn)過的節(jié)點(diǎn)會(huì)被記錄下來溃蔫，而4則代表了最近5個(gè)你選擇過的DOM節(jié)點(diǎn)。什么意思琳猫？在頁面右擊選擇審查元素伟叛，然后在彈出來的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 控制臺中原生支持類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è)集合钉凌，是對document.querySelectorAll() 的封裝咧最。

copy

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

copy(document.body);

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

image_thumb71_thumb

jdfw_thumb11_thumb1

移動(dòng)設(shè)備模式
現(xiàn)在很多的網(wǎng)頁都要適配移動(dòng)端席爽，Chrome的移動(dòng)設(shè)備模式對開發(fā)者來說無疑是一個(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