頁面制作之調(diào)試工具

轉(zhuǎn)載于http://www.cnblogs.com/jingwhale/p/4509160.html

網(wǎng)易云課堂筆記

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

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 請(qǐng)求的詳細(xì)信息，如請(qǐng)求頭、響應(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)前頁面所請(qǐng)求的資源文件，如 HTML，CSS 樣式文件等。
Audits 標(biāo)簽頁：分析頁面加載的過程，進(jìn)而提供減少頁面加載時(shí)間、提升響應(yīng)速度的方案，用于優(yōu)化前端頁面，加速網(wǎng)頁加載速度等。
Console 標(biāo)簽頁：用于顯示腳本中所輸出的調(diào)試信息，或運(yùn)行測(cè)試腳本等。

學(xué)習(xí)這個(gè)章節(jié)，最主要的是多動(dòng)手點(diǎn)點(diǎn)，左擊/右擊，先點(diǎn)看看，進(jìn)而深入學(xué)習(xí)。

一.Elements：

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

1.Styles

-點(diǎn)擊，點(diǎn)擊頁面上的元素，顯示選中元素的HTML代碼和樣式；

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

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

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

+DOM Breakpoints

這個(gè)后面再細(xì)講。

+Properties

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

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 文檔中查找信息的語言。XPath 用于在 XML 文檔中通過元素和屬性進(jìn)行導(dǎo)航。比如，

<a href="https://github.com/NUKnightLab/TimelineJS">這里</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)容源，打開對(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è)圖是 resize 時(shí)中斷, 因?yàn)閹於即砹? 還需要在斷點(diǎn)處一步一步跟下去才能走到業(yè)務(wù)代碼中.

//@ sourceURL 給 eval 出來的代碼命名

有時(shí)候一些非常動(dòng)態(tài)的代碼是以字符串的形式通過 eval() 函數(shù)在當(dāng)前 Javascript context 中創(chuàng)建出來，而不是作為一個(gè)獨(dú)立的 js 文件加載的。這樣你在左邊的內(nèi)容區(qū)就找不到這個(gè)文件，因此很難調(diào)試。其實(shí)我們只要在 eval 創(chuàng)建的代碼末尾添加一行 “//@ sourceURL=name“ 就可以給這段代碼命名（瀏覽器會(huì)特殊對(duì)待這種特殊形式的注釋），這樣它就會(huì)出現(xiàn)在左側(cè)的內(nèi)容區(qū)了，就好像你加載了一個(gè)指定名字的 js 文件一樣，可以設(shè)置斷點(diǎn)和調(diào)試了。下圖中，我們通過 eval 執(zhí)行了一段代碼，并利用 sourceURL 將它命名為 dynamicScript.js ，執(zhí)行后左側(cè)內(nèi)容區(qū)就出現(xiàn)了這個(gè)“文件”，而它的內(nèi)容就是 eval 的中的內(nèi)容。

還可以看看這個(gè)給動(dòng)態(tài)編譯出來的 CoffeeScript 代碼命名的示例：

var coffee = CoffeeScript.compile(code.value)+ "//@ sourceURL=" + (evalName.value || "Coffeeeeeeee!"); eval(coffee);

實(shí)際上，//@ sourceURL 不僅僅可以用在 eval 的代碼中，任何 js 文件、甚至是 Javascript Console 輸入的代碼都可以用，效果一樣！

幾個(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ì)開始記錄。一般多記錄幾次（約三次）然后取了平均值。

頁面制作之調(diào)試工具

五.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)都可能對(duì)性能造成巨大的影響。快速靈活的網(wǎng)站和可怕的“無響應(yīng)腳本”對(duì)話框可能只有幾行代碼的差別。這篇文章告訴你如何通過用Chrome開發(fā)者工具（Chrome Developer Tools）找到這幾行關(guān)鍵的代碼。

我們來看一個(gè)簡(jiǎn)單的“顏色排序器”應(yīng)用，這個(gè)應(yīng)用展示了一個(gè)由各種顏色構(gòu)成的網(wǎng)格，你可以拖拽這些顏色進(jìn)行混合。每一個(gè)點(diǎn)都是一個(gè)div標(biāo)簽加上一些讓它看起來是圓的的CSS。

頁面載入的很快，但還是花費(fèi)了一些時(shí)間，在渲染之前還閃了一下。是時(shí)候?qū)@個(gè)頁面進(jìn)行性能分析讓它更快了。

+設(shè)置一個(gè)基線

在開始做性能優(yōu)化的時(shí)候要設(shè)置一個(gè)基線，來明確這個(gè)頁面的速度到底怎樣。這個(gè)基線可以讓你知道自己是否做了優(yōu)化并幫助你權(quán)衡利弊。
性能分析器(profiler)是chrome開發(fā)者工具的一部分，點(diǎn)擊小扳手下面的工具菜單就可以打開它。Firebug也有一些性能評(píng)測(cè)工具，但是webkit內(nèi)核的瀏覽器（chrome和safari）在對(duì)代碼進(jìn)行性能分析和展示時(shí)間線方面是最棒的。Chrome還提供一種很棒的事件跟蹤工具，叫做 speed tracer。
在時(shí)間線(timeline)標(biāo)簽下開始記錄，載入頁面然后停止記錄，這樣就設(shè)置了一個(gè)基線。（打開chrome開發(fā)者工具，點(diǎn)擊“時(shí)間線”標(biāo)簽，然后點(diǎn)擊窗口底部圓形的黑色“記錄”圖標(biāo)開始記錄）。我記錄了三次然后取了平均值，以防我的電腦在第一次測(cè)試的時(shí)候運(yùn)行的很慢。

我的平均基線，也就是從第一個(gè)請(qǐng)求到頁面全部渲染結(jié)束所花費(fèi)的時(shí)間是1.25秒。這個(gè)時(shí)間不是太長(zhǎng)，但是對(duì)于這樣一個(gè)小的頁面來說也不算好。我想讓代碼執(zhí)行的更快，但是我并不知道是什么讓它慢下來的。性能分析器(profiler)幫助我找到原因。

+創(chuàng)建一個(gè)Profile

時(shí)間線(timeline)告訴我們代碼運(yùn)行花費(fèi)的時(shí)間，但是并沒有幫助我們知道代碼運(yùn)行的時(shí)候發(fā)生了什么。profiler告訴我們哪些函數(shù)的執(zhí)行占用了大部分時(shí)間。讓我們切換到chrome開發(fā)者工具的“Profiles”標(biāo)簽頁開始性能測(cè)試，這里一共提供了三種類型的性能測(cè)試。

1、javascript cpu 性能測(cè)試
顯示javascript占用了多少CPU

2、css選擇器性能測(cè)試
顯示處理CSS選擇器占用的CPU

3、堆棧快照
顯示javascript對(duì)象的內(nèi)存占用情況

我們想要javascript代碼執(zhí)行的更快，所以我們進(jìn)行CPU性能測(cè)試。我們開始性能測(cè)試，刷新頁面然后停止。

通過性能分析首先知道很多函數(shù)在執(zhí)行。我發(fā)現(xiàn)列表最頂端的是decimalToHex和makeColorSorter兩個(gè)函數(shù)。這兩個(gè)函數(shù)占用了CPU13.2%的時(shí)間，這是做優(yōu)化的好地方。

我們可以點(diǎn)擊函數(shù)調(diào)用旁邊的“下一個(gè)”箭頭來查看完整的函數(shù)調(diào)用堆棧。展開后，可以看到decimalToHex是被makeColorSorter調(diào)用的，makeColorSorter是通過$(document).ready調(diào)用的。

$(document).ready(function() {makeColorSorter(.05, .05, .05, 0, 2, 4, 128, 127, 121);makeSortable(); });

弄清楚這兩個(gè)函數(shù)是哪里調(diào)用的，也就弄清楚了讓顏色可以排序并不是最大的性能問題。通常情況下性能問題都是由多余的排序操作造成的，但是在我的代碼中相比與排序增加DOM元素花費(fèi)了更多時(shí)間。

我想要讓這些函數(shù)執(zhí)行的更快，但是首先我想要將我的改動(dòng)區(qū)隔開。在頁面載入過程中會(huì)發(fā)生很多事情，我不想要這些影響到我的性能分析。

+區(qū)隔問題

我做了第二個(gè)版本，這個(gè)版本中“顏色排序器”在我點(diǎn)擊按鈕之后才載入，而不是在document ready的時(shí)候載入。這就把文檔載入的過程分離出去，讓我可以只對(duì)顏色分類進(jìn)行性能測(cè)試。調(diào)完性能之后我可以立刻改回去。讓我們調(diào)用新的函數(shù)testColorSorter并把它綁定到一個(gè)可點(diǎn)擊的按鈕上。

function testColorSorter() {makeColorSorter(.05, .05, .05, 0, 2, 4, 128, 127, 121);makeSortable(); } 1 <button id="clickMe" οnclick="testColorSorter();">Click me</button>

在我們進(jìn)行性能分析之前改變應(yīng)用可能導(dǎo)致意外的結(jié)果。這個(gè)改動(dòng)看起來很安全，但是我還是要重新運(yùn)行性能檢測(cè)器來看看我是不是無意中改變了什么。我會(huì)開始一次新的性能分析，點(diǎn)擊應(yīng)用中的按鈕然后停止。

我首先注意到decimalToHex函數(shù)的載入只占用了4.23%的時(shí)間。這是代碼執(zhí)行花費(fèi)時(shí)間最多的地方。我們創(chuàng)建一個(gè)新的基線來看看這個(gè)方案對(duì)代碼有多大的優(yōu)化。

有些事件在我點(diǎn)擊按鈕之前有觸發(fā)了，但是我只關(guān)注從我點(diǎn)擊鼠標(biāo)到瀏覽器渲染“顏色排序器”花費(fèi)的時(shí)間。鼠標(biāo)在390毫秒時(shí)點(diǎn)擊，渲染事件在726毫秒處被觸發(fā)。726減去390得到我的基線336毫秒。和第一個(gè)基線一樣我重復(fù)了3次來取平均值。

這時(shí)，我知道如何獲得并且得到了代碼確切的運(yùn)行時(shí)間，我們已經(jīng)準(zhǔn)備好開始解決問題了。

+讓代碼更高效

性能分析器只告訴我們哪個(gè)函數(shù)造成的問題，所以我們要查看下函數(shù)的源碼來了解函數(shù)做了些什么。

function decimalToHex(d) {var hex = Number(d).toString(16);hex = "00".substr(0, 2 - hex.length) + hex; console.log('converting ' + d + ' to ' + hex);return hex; }

“顏色排序器”中的每一個(gè)顏色點(diǎn)都有一個(gè)16進(jìn)制的色彩值，例如#86F01B和#2345FE.這些值表示一種顏色中紅，綠，藍(lán)三原色各自的數(shù)值。例如的背景色是#2456FE,代表紅色的值是36，綠色的值是86，藍(lán)色的是254，每一個(gè)數(shù)值必須是0到255之間的。

decimalToHex函數(shù)把這用RGB值表示的顏色轉(zhuǎn)化為頁面中我們使用的16進(jìn)制顏色。這個(gè)函數(shù)十分的簡(jiǎn)單，但是我還是留下了一個(gè)可以去掉的調(diào)試代碼console.log在那里。

decimalToHex 函數(shù)還在數(shù)字之前加上了補(bǔ)位。這是很重要的一點(diǎn)，因?yàn)橛行?0進(jìn)制數(shù)字對(duì)應(yīng)的是1個(gè)16進(jìn)制數(shù)字。比如十進(jìn)制中的10對(duì)應(yīng)著16進(jìn)制中的C，但是在CSS中需要一個(gè)兩位數(shù)。為了讓這個(gè)進(jìn)制換算更快速，我們讓這段代碼不是那么泛化。我知道每個(gè)需要補(bǔ)位的數(shù)字長(zhǎng)度都為1，所以我們可以這樣重寫這個(gè)函數(shù)。

function decimalToHex(d) {var hex = Number(d).toString(16);return hex.length === 1 ? '0' + hex : hex; }

第三個(gè)版本的“顏色排序器”只有在需要補(bǔ)位的時(shí)候才改變字符串，并且不用調(diào)用substr函數(shù)。有了這個(gè)新函數(shù)，運(yùn)行時(shí)間是137毫秒。再次對(duì)代碼進(jìn)行性能測(cè)試，可以發(fā)現(xiàn)decimalToHex函數(shù)只占用了總時(shí)間的%0.04,到了列表的下部。

我們還可以發(fā)現(xiàn)占用CPU最多的函數(shù)是 jQuery的e.extend.merge。我不知道這個(gè)函數(shù)的作用，因?yàn)榇a是壓縮過的。我可以使用開發(fā)版本的jQuery，但是我發(fā)現(xiàn)這個(gè)函數(shù)是被makeColorSorter調(diào)用的。所以下一步我們先讓這個(gè)函數(shù)執(zhí)行的更快。

+減小改動(dòng)

“顏色排序器”中的多彩顏色是用過正弦曲線生成的。在光譜中設(shè)置一個(gè)中心點(diǎn)，然后以一定的偏移來創(chuàng)建這個(gè)曲線。這就把顏色變成了一個(gè)“彩虹模型”。我們還可以通過改變紅綠藍(lán)三原色的使用頻率來改變顏色。

function makeColorSorter(frequency1, frequency2, frequency3,phase1, phase2, phase3,center, width, len) {for (var i = 0; i < len; ++i){var red = Math.floor(Math.sin(frequency1 * i + phase1) * width + center);var green = Math.floor(Math.sin(frequency2 * i + phase2) * width + center);var blue = Math.floor(Math.sin(frequency3 * i + phase3) * width + center);console.log('red: ' + decimalToHex(red));console.log('green: ' + decimalToHex(green));console.log('blue: ' + decimalToHex(blue));var div = $('<div class="colorBlock"></div>');div.css('background-color', '#' + decimalToHex(red) + decimalToHex(green) + decimalToHex(blue));$('#colors').append(div);} }

我們要去掉console.log函數(shù)。這些調(diào)用非常的糟糕，因?yàn)槊看螆?zhí)行都會(huì)調(diào)用decimalToHex函數(shù)，這意味著decimalToHex函數(shù)會(huì)被多調(diào)用2倍的次數(shù)。這個(gè)函數(shù)大幅度的改變了DOM結(jié)構(gòu)。每次循環(huán)，都向id為colors的div中添加一個(gè)新的div。這就讓我懷疑這就是e.extend.mergefunction做的事情。用性能分析器做一個(gè)小實(shí)驗(yàn)就可以搞清楚。

我想要一次把所有的div添加進(jìn)去，而不是在每個(gè)循環(huán)中添加一個(gè)新的div。創(chuàng)建一個(gè)變量來存儲(chǔ)數(shù)據(jù)，然后在最后一次性添加進(jìn)去。

function makeColorSorter(frequency1, frequency2, frequency3,phase1, phase2, phase3,center, width, len) {var colors = "";for (var i = 0; i < len; ++i){var red = Math.floor(Math.sin(frequency1 * i + phase1) * width + center);var green = Math.floor(Math.sin(frequency2 * i + phase2) * width + center);var blue = Math.floor(Math.sin(frequency3 * i + phase3) * width + center);colors += '<div class="colorBlock" style=" padding: 0px; line-height: 1.5 !important;"> decimalToHex(red) + decimalToHex(green) + decimalToHex(blue) + '"></div>';}$('#colors').append(colors); }

這個(gè)小改動(dòng)意味著DOM只在添加所有div的時(shí)候做一次改變。用時(shí)間線進(jìn)行測(cè)試，我們發(fā)現(xiàn)從點(diǎn)擊到渲染花費(fèi)了31毫秒。這個(gè)dom變動(dòng)，使得第四個(gè)版本的運(yùn)行時(shí)間降低了86%。我可以再次打開性能分析器(profiler)，發(fā)現(xiàn)e.extend.merge函數(shù)占用了很少的時(shí)間，在列表中已經(jīng)看不到它了。

我們還可以完全移除decimalToHex函數(shù)讓代碼更快一點(diǎn)。因?yàn)镃SS支持RGB顏色，所以我們不需要把他們轉(zhuǎn)換到16進(jìn)制。現(xiàn)在我們可以這樣寫makeColorSorter函數(shù)。

function makeColorSorter(frequency1, frequency2, frequency3,phase1, phase2, phase3,center, width, len) {var colors = "";for (var i = 0; i < len; ++i){var red = Math.floor(Math.sin(frequency1 * i + phase1) * width + center);var green = Math.floor(Math.sin(frequency2 * i + phase2) * width + center);var blue = Math.floor(Math.sin(frequency3 * i + phase3) * width + center);colors += '<div class="colorBlock" style=" padding: 0px; line-height: 1.5 !important;"> red + ',' + green + ',' + blue + ')"></div>';}$('#colors').append(colors); }

第五個(gè)版本的執(zhí)行只用了26毫秒而且代碼行數(shù)從28行減少到18行。

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

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

+每個(gè)frame都相關(guān)的資源都在一個(gè)文件夾下，同樣點(diǎn)擊展開可以了解頁面的資源、js、css、圖片文件和字體情況。點(diǎn)擊選中一個(gè)框架，頁面中其對(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)化前端頁面，加速網(wǎng)頁加載速度等。

使用Chrome瀏覽器對(duì)頁面性能進(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)了如下界面，選中重載頁面開始檢測(cè)按鈕，然后點(diǎn)擊Run按鈕，之后就是等待結(jié)果。

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

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

檢測(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）

4）啟用gzip壓縮：Enable gzip compression
5）Compressing the following resources with gzip could reduce their transfer size by about two thirds (~715?B).啟用gzip壓縮降低傳輸大小。

6）

7）瀏覽器緩存：Leverage browser caching?
8）The following resources are missing a cache expiration. Resources that do not specify an expiration may not be cached by browsers。資源沒有指定過期時(shí)間，瀏覽器可能不會(huì)緩存。

網(wǎng)頁性能部分
1）優(yōu)化樣式和腳本的順序：Optimize the order of styles and scripts (4)

2）把CSS放到head中：Put CSS in the document head (3)
CSS in the document body adversely impacts rendering performance.

3）刪除沒用的CSS：Remove unused CSS rules (44)
44 rules (19%) of CSS not used by the current page.

4）Use normal CSS property names instead of vendor-prefixed ones (3)

應(yīng)用：自己Css代碼的審核；下載復(fù)制別人代碼，去除無用的Css樣式。可以使用FireFox的Dust-Me selectors去除無用的Css樣式。

八.Console

1.console.log

大家都會(huì)用log，但鮮有人很好地利用console.error , console.warn 等將輸出到控制臺(tái)的信息進(jìn)行分類整理。
他們功能區(qū)別不大，意義在于將輸出到控制臺(tái)的信息進(jìn)行歸類，或者說讓它們更語義化。
各個(gè)所代表的語義如下：

console.log：普通信息
console.info：提示類信息
console.error：錯(cuò)誤信息
console.warn：警示信息

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

如果再配合console.group 與console.groupEnd，可以將這種分類管理的思想發(fā)揮到極致。這適合于在開發(fā)一個(gè)規(guī)模很大模塊很多很復(fù)雜的Web APP時(shí)，將各自的log信息分組到以各自命名空間為名稱的組里面。

console.log第一個(gè)參數(shù)可以包含一些格式化的指令比如%c，給hello word加了很炫的樣式（全是純CSS用來控制樣式的）：

如果還不夠過癮，那咱們來log一些圖片:

除此，console.table 更是直接以表格的形式將數(shù)據(jù)輸出，不能贊得太多！

var data = [{'品名': 'X', '數(shù)量': 4}, {'品名': 'Y', '數(shù)量': 3}];
console.table(data);

2.console.assert

當(dāng)你想代碼滿足某些條件時(shí)才輸出信息到控制臺(tái)，那么你大可不必寫if或者三元表達(dá)式來達(dá)到目的，cosole.assert便是這樣場(chǎng)景下一種很好的工具，它會(huì)先對(duì)傳入的表達(dá)式進(jìn)行斷言，只有表達(dá)式為假時(shí)才輸出相應(yīng)信息到控制臺(tái)。

3.console.count

除了條件輸出的場(chǎng)景，還有常見的場(chǎng)景是計(jì)數(shù)。
當(dāng)你想統(tǒng)計(jì)某段代碼執(zhí)行了多少次時(shí)也大可不必自己去寫相關(guān)邏輯，內(nèi)置的console.count可以很地勝任這樣的任務(wù)。

4.console.dir

將DOM結(jié)點(diǎn)以JavaScript對(duì)象的形式輸出到控制臺(tái)
而console.log是直接將該DOM結(jié)點(diǎn)以DOM樹的結(jié)構(gòu)進(jìn)行輸出，與在元素審查時(shí)看到的結(jié)構(gòu)是一致的。不同的展現(xiàn)形式，同樣的優(yōu)雅，各種體位任君選擇反正就是方便與體貼。

5.console.time & console.timeEnd

輸出一些調(diào)試信息是控制臺(tái)最常用的功能，當(dāng)然，它的功能遠(yuǎn)不止于此。當(dāng)做一些性能測(cè)試時(shí)，同樣可以在這里很方便地進(jìn)行。
比如需要考量一段代碼執(zhí)行的耗時(shí)情況時(shí)，可以用console.time與 console.timeEnd來做此事。

這里借用官方文檔的例子：

當(dāng)然，我們也可以選擇自己寫代碼來計(jì)時(shí)：

6.console.profile & console.timeLime

當(dāng)想要查看CPU使用相關(guān)的信息時(shí)，可以使用console.profile配合 console.profileEnd來完成這個(gè)需求。
這一功能可以通過UI界面來完成，Chrome 開發(fā)者工具里面有個(gè)tab便是Profile。

與此類似的功能還有console.timeLine配合 console.timeLineEnd,它的作用是開始記錄一段時(shí)間軸，同樣可以通過Chrome開發(fā)者工具里的Timeline 標(biāo)簽來進(jìn)行相應(yīng)操作。

所以在我看來這兩個(gè)方法有點(diǎn)雞肋，因?yàn)槎伎梢酝ㄟ^操作界面來完成。但至少他提供了一種命令行方式的交互，還是多了種姿勢(shì)供選擇吧。

7.console.trace

堆棧跟蹤相關(guān)的調(diào)試可以使用console.trace。這個(gè)同樣可以通過UI界面完成。當(dāng)代碼被打斷點(diǎn)后，可以在Call Stack面板中查看相關(guān)堆棧信息。

上面介紹的都是掛在window.console這個(gè)對(duì)象下面的方法，統(tǒng)稱為Console API，接下來的這些方法確切地說應(yīng)該叫命令，是Chrome內(nèi)置提供，在控制臺(tái)中使用的，他們統(tǒng)稱為Command Line API。

$

似乎美刀總是被程序員及各種編程語言所青睞「你看看PHP代碼就知道PHPer有多愛錢了」，在Chrome的控制臺(tái)里，用處還真是蠻多且方便的。_命令返回最近一次表達(dá)式執(zhí)行的結(jié)果，功能跟按向上的方向鍵再回車是一樣的，但它可以做為一個(gè)變量使用在你接下來的表達(dá)式中：

上面的需要領(lǐng)悟其奧義才能使用得當(dāng)，而0~4則代表了最近5個(gè)你選擇過的DOM節(jié)點(diǎn)。什么意思？在頁面右擊選擇審查元素，然后在彈出來的DOM結(jié)點(diǎn)樹上面隨便點(diǎn)選，這些被點(diǎn)過的節(jié)點(diǎn)會(huì)被記錄下來，而45DOMDOM0會(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元素。剝去她偽善的外衣，其實(shí)selectorDOM(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)看下面的例子：

monitor & unmonitor

monitor(function)，它接收一個(gè)函數(shù)名作為參數(shù)，比如function a,每次a被執(zhí)行了，都會(huì)在控制臺(tái)輸出一條信息，里面包含了函數(shù)的名稱a及執(zhí)行時(shí)所傳入的參數(shù)。

而unmonitor(function)便是用來停止這一監(jiān)聽。

debug & undebug

debug同樣也是接收一個(gè)函數(shù)名作為參數(shù)。當(dāng)該函數(shù)執(zhí)行時(shí)自動(dòng)斷下來以供調(diào)試，類似于在該函數(shù)的入口處打了個(gè)斷點(diǎn)，可以通過debugger來做到，同時(shí)也可以通過在Chrome開發(fā)者工具里找到相應(yīng)源碼然后手動(dòng)打斷點(diǎn)。
而undebug 則是解除該斷點(diǎn)。

而其他還有好些命令則讓人沒有說的欲望，因?yàn)楹眯┒伎梢酝ㄟ^Chrome開發(fā)者工具的UI界面來操作并且比用在控制臺(tái)輸入要方便。

移動(dòng)設(shè)備模式

現(xiàn)在很多的網(wǎng)頁都要適配移動(dòng)端，Chrome的移動(dòng)設(shè)備模式對(duì)開發(fā)者來說無疑是一個(gè)很大的驚喜。

點(diǎn)擊，可以模擬各種各樣的移動(dòng)設(shè)備

拖動(dòng)模擬屏幕的標(biāo)記的兩塊東西能任意調(diào)節(jié)設(shè)備屏幕大小

頂部橙色部分的選項(xiàng)，這個(gè)是選擇各種要模擬的設(shè)備

下面的是當(dāng)前設(shè)備的顯示屏像素

去掉前面的勾，或者點(diǎn)擊這個(gè)刪除的按鈕，網(wǎng)頁將會(huì)回到你現(xiàn)在的瀏覽器顯示大小

點(diǎn)這個(gè)還能快速切換橫屏豎屏

這個(gè)是當(dāng)前模擬的設(shè)備的像素比，例如：iPhone3GS是1、iphone4是2、iPhone6是3....

如果你在操作的時(shí)候遇到這個(gè)警告，那么你需要刷新下網(wǎng)頁才能看到實(shí)際的顯示效果

這里的這個(gè)Fit是如果你選擇的模擬設(shè)備像素的顯示范圍超過了你的瀏覽器框框，那么就會(huì)根據(jù)你當(dāng)前的顯示器高度和寬度自適應(yīng)的縮放顯示比例。去掉勾選就是實(shí)際像素的顯示了。

然后我們來看看右邊藍(lán)色的部分 第一個(gè)Network是用來模擬網(wǎng)絡(luò)環(huán)境的。你可以模擬各種網(wǎng)絡(luò)環(huán)境以測(cè)試網(wǎng)頁的加載速度，甚至可以模擬斷網(wǎng)的狀態(tài)...

移動(dòng)設(shè)備模式暫時(shí)就介紹到這里。

---------------------------------------------------

就像開始說的，最主要的是自己多打開調(diào)試工具多點(diǎn)點(diǎn)，相信用多了就會(huì)熟悉。

轉(zhuǎn)載需注明轉(zhuǎn)載字樣，標(biāo)注原作者和原博文地址。

轉(zhuǎn)載于:https://www.cnblogs.com/huangshan-huangshan/p/5723630.html

總結(jié)

以上是生活随笔為你收集整理的页面制作之调试工具的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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