源網站：Secrets of the Browser Developer Tools 譯者：塗鴉碼農html
目錄
- 常規
- Console 控制檯
- 檢查
- 編輯
- 調試
- 性能
- 移動端
- 擴展
常規
找到開發工具
快捷方式：html5
- 「F12」（Windows）
- 「Cmd」⌘ +「Option」 +「I」（Mac）
- 右鍵選擇「Inspect Element 檢查元素」
- Safari 須要在 首選項 > 高級 > 顯示開發菜單，啓用開發工具
- Firebug 是 Firefox 擴展，須要在此安裝
用最新的開發版
開發工具會不斷完善，在開發版能夠體驗。 Chrome Canary 是 Chrome 實驗版，Canary 和 Chrome 能夠同時安裝。 你能夠經過 chrome://flags 進一步增強你的 Chrome 開發工具 ，啓用「Enable Developer Tools experiments （啓用開發工具實驗）」。不要忘了點擊頁面底部的「如今重啓」按鈕。java
Firefox Aurora 提供 Firefox 最新特性預覽。不幸的是，Aurora 不能和 Firefox 同時打開。git
Webkit Nightly 是 Safari 測試版，所以有些不穩定。Webkit Nightly 能夠和 Safari 同時運行。github
Opera Next 是 Opera 最新改良版，會提供一些新的功能和特性。web
如今瀏覽器的發佈週期爲12周，瀏覽器自動更新，變化是增量的。chrome
移動開發工具位置
有時候不想讓咱們的工具在屏幕底部，大部分的開發工具提供了配置選項。canvas
Chrome 開發工具，左下角圖標容許改變停靠設置。快速點擊它，會在底部和右側切換。長按能夠選擇停靠選項（獨立窗口打開），你也能夠點擊並拖拽移動開發工具。設計模式
Firefox 和 Safari 開發工具，停靠選項在右上角臨近關閉按鈕的位置，能夠新窗口打開。
要改變停靠位置，可點擊左上角小蟲子，選擇 Firebug 界面位置（上/下/左/右）。Firebug 右上角能夠快速選擇：最小化，新窗口，關閉。
開發工具調試響應式設計
當調試移動站點的時候，停靠在右側可充分利用空間，而且能夠快速調整瀏覽器視口和開發工具的寬度，調試不一樣網頁寬度。
在 Chrome 開發工具左下角，點擊按鈕可切換下側或右側停靠位置。
在 Chrome 開發工具右下角，點擊並選擇「General」標籤，你能夠改變工具的外觀，停靠右側時能夠垂直顯示面板。
學習快捷鍵
Chrome 的快捷鍵列在設置菜單裏，點擊右下「齒輪」圖標，能夠看到「Shortcuts」標籤。
IE 的快捷鍵是在線的.aspx) 。
Opera 的快捷鍵也在設置按鈕裏。
Console 控制檯
Log, Info, Debug, Warn, Error
沒必要用 alert 時，console.log() 是個極其有用的輸出調試工具；
console.log() 是 printf 風格，所以你能夠這麼作：console.log("%s is %d years old.", "Bob", 42)。
能夠用 console.info() 輸出提示信息；console.debug() 輸出調試信息；console.warn() 輸出警示信息；console.error() 輸出錯誤信息。
你還能夠用 %c 模式，把第二個變量做爲樣式格式參數。例如：
1
|
console.log("%cThis is green text on a yellow background.", "color:green; background-color:yellow"); |
Firebug 只不過顯示的圖標不一樣，消息的背景色是一致的。
根據 MDN 的消息，他們不同意使用 console.debug() ，所以沒有圖標標識，同意用 console.log() 代替。
Chrome 和 Safari（nightly）用 info 時不顯示圖標，用 debug 時顯示藍圖標；用 warn 時顯示黃圖標；用 error 時顯示紅圖標。
你能夠輸出多個值，用逗號隔開便可，方便在同一行輸出對象和數組，例如：console.log('Kings: ', kings);
輸出數據表格
console.table() 能夠用來輸出數組或者對象列表，以一種合適的表格形式顯示。
例如：console.table([[10, true, "blue"],[5, false]]) 將輸出如下格式：
若是元素的數量不匹配，表格將顯示 undefined 表示沒有數據。
自定義列名，屬性名必須在對象中指定元素。自定義（index）的值，能夠給每一個屬性命名。
第二個可選的變量容許你明確指定哪一列要輸出。
1 2 3 4 |
console.table({ "London":{population:8173194, country:"UK", elevation:"24m"}, "New York":{population:8336697, country:"USA", elevation:"10m"}}, ["population", "country"]) |
結果以下：
Assert
console.assert() 用於測試表達式的真假。
它有兩個參數：表達式和顯示信息。若是表達式是 FALSE 時，信息將會顯示。
例如：console.assert(!true, 'This is not true'); 輸出」This is not true」。console.assert(true, 'This is not true'); 什麼也不輸出。
使用控制檯定時器
使用 console.time(label)，定時器在控制檯啓動。字符串 label 是必須的，咱們想中止它時，有個定時器引用。調用 console.timeEnd(label) 定時器中止，控制檯輸出定時器執行的毫秒數（經過 label 識別）。
持久控制檯
有時頁面加載時，你須要保留控制檯信息。有時在點擊或離開頁面時，咱們須要這個做爲參考或者用來查看日誌。
在 Chrome 裏，右鍵點擊控制檯，顯示菜單裏有「Preserve Log upon Navigation」，選擇它將保存你的控制檯內容。
Firefox 默認會保存控制檯信息。你能夠點擊右上角「清除」按鈕清除控制檯日誌，或者打開/關閉工具。
在 Firebug 裏，有個顯著的按鈕用來保持控制檯內容，就在控制檯的上部。
Opera 默認保存控制檯內容，你能夠右鍵選擇「clear console」清除控制檯日誌或者重開工具。
從新運行命令
若是已經在 JavaScript 控制檯輸入過命令，你想從新運行它，簡單點一下「上」箭頭便可翻看原先的命令列表。
任意 Tab 打開控制檯
在 Chrome ，儘管控制檯有本身的 tab ，在任意 tab 按下「ESC」鍵便可打開控制檯，所以沒必要切換 tab 了。
Safari 控制檯在開發工具的底部，「ESC」鍵用來切換控制檯日誌的可見性。在命令行執行一個命令也將打開控制檯日誌。
在 Firefox ，快速切換到控制檯：「Ctrl + Shift + K 」（Windows），「Cmd ⌘ + Option ⌥ + K 」（Mac）。
改變框架焦點
用命令行運行 JavaScript 很是實用，可是若是頁面有 iframe ，你又不知道如何定位框架，就很差辦了。
在 Firebug ，你能夠用下面的命令聚焦框架： cd(window.frames[‘frameName’]);
Chrome 能夠在控制檯底部的下拉列表中改變框架。
Opera 在「Console 控制檯」和「Documents 文檔」 有個改變框架的下拉菜單。
你能夠經過 document.getElementsByTagName("iframe"); 得到 iframe 列表。
引用當前和前一個元素
若是你的「Elements」標籤選擇了一個元素，你能夠用 $0 調用它。輸入 $0.innerHTML 試試看。
在 Firebug 和 Opera，你能夠用 $1 選擇前一個元素。
在 Chrome 和 Safari，你能夠經過 $1 - $4 選擇更靠前的元素。
在 Firebug ，你能夠經過 $n(2) - $n(5) 選擇更靠前的元素。
最終求值表達式
若是你須要先前表達式的結果用於後面的求值，你可使用便利 $_ ，最終表達式結果自動展現給你。
Firebug 1.12 開始支持。
檢查
經過麪包屑導航 DOM
當你檢查 DOM 樹的節點時，節點的 DOM 路徑麪包屑列表顯示在開發工具裏。
Chrome 和 Opera，顯示在 DOM 檢查器的底部。
Firebug，Firefox 和 Safari，顯示在 DOM 檢查器的頂部。
你能夠直接點擊節點，或者按箭頭鍵導航麪包屑。按左箭頭是父節點，按右箭頭是第一個子項。上下箭頭導航到下一個或前一個子節點。沒有更多子節點，上下箭頭導航回到 DOM 樹。
在 Firefox ，你能夠右擊麪包屑看兄弟節點列表，能夠快速導航到兄弟節點。
在 Safari，你能夠左擊麪包屑看兄弟節點。
搜索 DOM 節點
在 Firefox ，你能夠在「檢查器」面板搜索特別的節點。麪包屑右邊有個小的搜索框有一樣做用。
聚焦時搜索框變大。
輸入一個匹配的選擇器， DOM 樹將自動高亮它。
在 Chrome ，你能夠按 Ctrl-F 打開對話框，CSS 選擇器如期工做。
檢查字體
Firefox 有個字體檢查器，能夠查看當前元素使用的字體。
你能夠修改默認的「Abc」文字，在字體列表底部有個按鈕，能夠顯示頁面全部字體。
瀏覽你的響應式網站
在響應式設計時代，最重要的是如何在任意尺寸的設備查看咱們的網站。儘管咱們能夠調整瀏覽器大小，開發工具裏仍是有一些其它的工具可用。
在 Chrome 開發工具的「設置」面板（工具右下角點擊齒輪），在「Overrides」標籤，你會發現「Device Metrics 設備指標」選項，你能夠指定寬度和高度，以及字體縮放尺寸。你能夠把開發工具停靠在右側，而後調整頁面大小測試。
Firefox 開發工具內置一個‘響應式設計模式’工具，此工具在開發工具的右上角。它包含一些預設的尺寸，你能夠添加須要的尺寸。Firefox 也提供旋轉的選項，你能夠測試 landscape 和 portrait 模式。
3D 視圖
Firefox 開發工具能夠 3D 視圖查看你的網站，能夠方便地查看元素嵌套關係，點擊開發工具右上角立方體圖標能夠啓動它。
編輯
改變 CSS 值
若是有個元素須要修改 margin，padding，width 或者 height，可使用方向鍵增長/減小尺寸。簡單使用上下方向鍵增長/減小1個單位。
「Shift」 + 上下方向鍵，能夠增長/減小10個單位；「Alt」 + 上下方向鍵，能夠增長/減小0.1個單位。
「Shift」 + Page-Up / Page-Down，能夠增長/減小100個單位。
當你矯正尺寸時，這些快捷鍵很是實用。
改變 :active， :hover， :focus， :visited 狀態樣式
在開發工具裏修改 CSS 很是爽，可是碰到 hover 之類的僞類就有點撓頭了。剛好有解決方案。
Chrome 有個按鈕是幹這用的，在「Elements」標籤右手邊看到一個虛線框和光標在一塊兒的圖標，它能夠切換其它狀態。
Firebug 的 HTML 標籤右側，點擊樣式小箭頭，能夠選擇想要的狀態。Firebug 並沒提供 :visited 狀態選項。
Firefox 爲你選擇的 DOM 元素提供一個下拉菜單，右鍵選擇「查看元素」能夠看到它，Firefox 一樣沒提供 :visited 狀態選項。
在 Opera，「樣式」標籤有個像列表的圖標，Opera 提供了 :link 和 ::selection 選項。在新版 Opera ，位置跟 Chrome 一致了。
在 Safari，DOM 上右擊一個元素，顯示一個菜單，裏面有「Force Psuedo-Classes」選項。
拖拽重排元素
在 Chrome 和 Safari 裏，，「Elements」標籤下，能夠拖拽重排元素順序。簡單點擊拖動元素便可，目標位置會出現一條線。
使用 SASS Source Maps
使用 CSS 預處理器有許多優點，可是在瀏覽器開發工具中修改比較困難。例如，當你再次運行 SASS 時， 在開發工具中保存的編譯後CSS 可能被覆蓋，不太理想。SASS 3.3 以上（能夠安裝使用‘sass gem install sass –pre’），爲 SASS 文件建立映射很容易，你能夠很容易的保存修改。
首先，爲 SASS watch 命令增長 --sourcemap ，像這樣：
1
|
sass --watch scss/devtoolsecrets.scss:css/devtoolsecrets.min.css --style compressed --sourcemap |
而後在 SASS 文件底部添加映射文件的名字（sourceMappingURL）：
1
|
/*@ sourceMappingURL=devtoolsecrets.css.map */ |
而後，你須要啓用「Experiments 實驗」。地址欄輸入 chrome://flags 啓用「啓用開發者工具實驗」選項，點擊頁面底部「立刻重啓」按鈕應用改變。在 Chrome 開發工具的右下角，點擊齒輪按鈕打開「設置」面板。
點擊「General 常規」標籤，激活「Enable Source Maps 啓用 Source Maps」。點擊「Experiments 實驗」標籤，檢查「Support for SASS 支持 SASS 」選項。
重啓瀏覽器，你能夠直接查看 SASS 文件的行號了。
調試
用 debugger; 調試
添加此行代碼：debugger; 能夠自動建立斷點，當開發工具打開時運行，斷點會自動建立。
儘管快速添加斷點很方便，不用在開發工具一行一行找，當心不要把 debugger; 提交到線上環境。
條件斷點
沒必要每次生效時，條件斷點頗有用。例如，你知道你的代碼在最後一項有 bug，你能夠用條件判斷在最後一項時激活 debugger。條件知足，斷點觸發。
在 Chrome 中建立條件斷點，先建立個正常的斷點，而後右擊斷點選擇「編輯斷點」添加條件。
在 Firebug ，先建立常規斷點，而後右擊出現輸入框，能夠添加條件。
在 Firefox ，右擊想建立斷點的行，選擇「增長條件斷點」。
在 IE，先建立常規斷點，而後右擊斷點，選擇「條件…」。
在 Opera，先建立常規斷點，而後右擊斷點，選擇「添加條件」。
在 Safari，確保腳本和「調試器」面板都打開，建立一個斷點，而後在「調試器」面板右擊一樣的斷點，選擇「編輯斷點」。
DOM 斷點
若是特定的 DOM 改變，你的頁面會被破壞，或者你只想找出元素屬性或子元素改變，哪些代碼生效，Chrome 和 Firebug 都可以在 DOM 修改時設置斷點，你能夠找到代碼問題的根源。簡單點擊你想監控的元素，右擊選擇「break on」選項。
XHR 斷點
在 Chrome ，能夠爲 XmlHttpRequest 設置斷點，你能夠調試 AJAX 請求。到「Sources」標籤選擇「XHR 斷點」，點擊右側加號圖標，輸入部分或全部你想添加斷點的 URL 。一旦請求返回，斷點將生效，你能夠看到返回的數據，並可單步調試後續操做。
取消勾選能夠關掉斷點，右鍵選擇「Delete Breakpoint 刪除斷點」刪除斷點。
在 Firebug ，到網絡標籤選擇「在 XHR 時中斷」按鈕，或者右鍵選擇「在 XHR 時中斷」，你也能夠隨意選擇中斷條件。
檢查斷點的做用域
在 Chrome ，Javascript 在斷點處暫停時，你能夠查看當前做用域的全部變量和對象，既能夠懸浮查看，也能夠經過控制檯查看。
Firebug 有一樣的選項，可是須要在 DOM 菜單選擇「show closures」。 若是斷點設置恰當，這個強大的屬性讓你很容易查看閉包裏的變量。
Firebug 有額外的功能，無需在斷點中止，便可訪問隱藏的閉包變量。看此例：
1 2 3 4 5 6 7 8 |
function Person(name) { this.introduce = function() { console.log("Hello, my name is %s", name); } } // create an instance of Person: var someone = new Person("Arthur"); // we call a closure! someone.introduce(); // prints "Hello, my name is Arthur" |
代碼訪問如下閉包變量： closure.%variable 以上例子，你將用這個表達式訪問 name： someone.introduce.%name // ==> 「Arthur」 注意你也能夠改變值：
1
|
someone.introduce.%name = "Trillian"; someone.introduce(); // prints "Hello, my name is Trillian" |
Firebug 中，須要 JavaScript 的地方，一樣的語法都會生效，例如監控面板和條件斷點。
監控值
在「腳本」標籤的右上角，監控變量至關容易，只有輸入變量名，「監控」將讓它的值保持更新。
調試壓縮後的 JavaScript
下斷點讓 JavaScript 調試更容易，可是若是代碼已經放到生成環境，極可能已被壓縮。如何調試最小化的代碼呢？慶幸的是一些瀏覽器已經支持解壓你的 JavaScript 。
在 Chrome 和 Safari ，選擇「腳本」標籤，找到相應的文件，而後點擊「{}」圖標（pretty print，在面板底部）。
在 IE ，點擊工具圖標選擇下拉菜單，找到格式化 JavaScript 選項。
Opera 自動格式化壓縮的 JavaScript 。
使用 JavaScript Source Maps
當咱們部署代碼到生產環境時，比較明智的是壓縮代碼減小加載時間。壓縮去除了無用的字符（好比註釋），空行和空格。但是壓縮後很難調試，沒法單步調試，代碼不易讀。JavaScript source maps 調試壓縮後 JavaScript 文件很是有用，它提供一個映射關聯到未壓縮文件。
建立 JavaScript source maps ，下載 Google Closure Compiler ，它幫你生成 .map 文件。
運行帶 Source Map 屬性的 Closure Compiler ：
1
|
java -jar compiler.jar --js common.js --create_source_map ./common.js.map --source_map_format=V3 --js_output_file common.min.js |
在壓縮後的 JS 文件底部加上映射文件的名字： sourceMappingURL
1
|
//@ sourceMappingURL=common.js.map |
在 Chrome 開發工具，，「Settings 設置」菜單 -> 「General 常規」標籤，激活「Enable Source Maps 啓用 Source Maps 」。
如今，當你調試 JavaScript 時，能夠用未壓縮的版本查找問題所在。
模擬User Agent
有時假裝成不一樣的瀏覽器或設備用於調試，特別是某個網站用到了設備探測。
在 Chrome ，打開設置菜單（右下角齒輪圖標），選擇「Overrides」選項，找到 「User Agent」選項。你能夠選擇內置的選項，也能夠選擇「Other」本身添加。若是你選擇移動或平板設備， Chrome 將調整瀏覽器尺寸 - 取消勾選「Device Metrics」，很容易關掉此功能。
在 Opera ，點擊瀏覽器左下「面板」箭頭（開發工具以上），選擇 + ，而後選擇「自定義」，到「按鈕」標籤選擇「首選項」，而後拖住「識別爲 Opera 」下拉框，拖到瀏覽器工具欄。
模擬觸控設備
Chrome 能夠假裝成支持觸控的設備，直接在瀏覽器模擬 touch 事件。在設置面板（Chrome 開發工具右下角齒輪圖標），選擇「Overrides」選項，選擇「Emulate Touch Events 模擬觸控事件」。
在 Chrome Canary ，用個圓形代替了光標，能夠用於區分處於哪一種模式。
覆蓋地理位置
若是你的應用用到了 Geolocation ，模擬不一樣的位置會很是有用。在 Chrome ，「設置」菜單，選擇「Overrides」標籤，這裏能夠模擬不一樣的經度緯度，也能夠模擬不可用的位置。
在 Google Maps Labs 啓用了座標提示，你就能夠從 Google Maps 得到位置的經緯度。
重寫設備方向
設備方向改變能夠在 Chrome 中模擬。「Settings 」-> 「Overrides」，選擇「Override Device Orientation」，在輸入框輸入新值。
Alpha 表明沿 z 軸 0-360 度。 Beta 表明沿 x 軸 -180 到 180 度 - 前到後運動 Gamma 表明沿 y 軸 -90 到 90 度 - 左到右運動
改變值將觸發 deviceorientation 事件。
調試 Canvas 元素
Chrome 能夠用開發工具調試 canvas 元素，可用於 2D 和 WebGL canvas 項目。
首先啓用「Experiments」標籤，地址欄輸入 chrome://flags ，啓用「Enable Developer Tools experiments」，按下「Relaunch Now」按鈕應用改變。到設置面板，找到「Experiments」標籤，選擇「Canvas inspection」選項。
如今訪問「Profile」標籤，你能夠看到「Capture Canvas Frame 捕獲 Canvas 幀」選項。使用期間可能須要重載頁面。按下「Start 開始」捕獲 canvas 應用的單個幀。你也能夠點擊下面的框，切換到「Consecutive Frames 連續幀」，你能夠捕獲多幀。
每次訪問 canvas Chrome 會建立日誌，提供每次訪問上下文的列表以及快照。你能夠點擊一個日誌項重播那幀，看看哪些命令被調用，及它們在哪一行。
運行代碼片斷
若是你發現一樣的代碼須要重複的運行，Chrome Canary（Chrome 29 已有此功能） 提供了便捷的「Snippets 片斷」區域，你能夠保存代碼。
在「Source」標籤，「Sources」和「Content scripts」後面有個「Snippets 」標籤，右鍵點擊空區域，點「New」建立新的片斷，寫入一些代碼，不管什麼時候再想運行它時，右鍵點擊選擇「Run 運行」便可。
Firefox 6 + 的代碼片斷速記器（開發工具右上角小本子圖標）跟這很相似。
性能
禁用瀏覽器緩存
每一個瀏覽器均可以禁用網頁的緩存，確保資源每次都從服務器加載。
Chrome ，設置小齒輪裏找，「General」-> 「Disable cache」。
IE 菜單欄的「Cache 緩存」下面。
Opera，點擊網絡標籤清除緩存，選擇「網絡選項」-> 「禁用全部緩存」
Firebug，網絡標籤 -> 下拉菜單「禁用瀏覽器緩存」
在任何瀏覽器呼出清除緩存對話框，Ctrl + Shift + Delete（Windows），Shift + Cmd + Backspace（Mac）。
排序網絡請求找到瓶頸
在網絡標籤按順序顯示每一個請求的資源，點擊每列的標題能夠從新排序。
大部分的瀏覽器在網絡標籤共享公共字段，你能夠經過文件名；域名；資源類型；HTTP 狀態；方法和資源大小這些字段排序。
在 IE 中，文件名和域名字段合併了。
Chrome 更進一步，點擊「Timeline」字段顯示額外的排序選項：
- Start Time 默認選項，按每一個請求開始時間排序
- Response Time 按網絡請求得到響應的時間排序
- End Time 按請求完成時間排序
- Duration 按請求完成花費時間排序
- Latency 瀏覽器初始請求到接收響應的時間總和。以等待時間排序，能夠看看哪一個資源佔用了大量時間等待響應。等待時間依賴於用戶距服務器的距離，設置 Content Delivery Networks （CDN）能夠改善此時間。合併 CSS 和 JavaScript 文件，圖像拼接能夠減小資源請求數，所以減小總延遲。
網絡時間軸導出爲 HAR 文件
HAR（HTTP 存檔）文件能夠用於各類性能分析技術和調試。測試提 bug 時能夠附上 HAR 文件 - 開發人員能夠在本地運行 HAR 數據查找問題緣由。
咱們能夠用 Chrome 開發工具導出網絡標籤時間軸，右鍵點擊網絡輸入，選擇「Save as HAR with Content」。
Firebug 須要另安裝插件 Net-export，此工具由 Firebug 開發主管和 HAR 格式創造者開發。
chromeHAR 是個在線工具，提供跟 Chrome 同樣的時間軸界面，功能相似。
檢查 DOMContentLoad 和 Load 事件
Chrome 和 Safari （以及 Firebug 網絡面板）的網絡時間軸顯示網頁加載有多快，用一條線標記 DOMContentLoaded 和 load 事件觸發的時機。
- 當瀏覽器解析文檔完畢（可是其餘資源好比圖像，樣式表可能未下載完畢）DOMContentLoaded 觸發，它用藍線標識。
- 當全部初始資源（圖像，樣式表，JavaScript）加載完畢，load 事件觸發一次，它用紅線標識。
- 當兩個事件同時觸發，標識線是紫色的。
在 Safari ，標識線是虛線。
重發送 XHR 請求
若是但願重發送 XHR 請求，但不想刷新頁面或重觸發事件，能夠右鍵點擊資源，選擇「Replay XHR」（Firebug 叫「Resend」）。
測量渲染性能和 FPS
Chrome 提供了幀率時間軸，能夠逐幀調試網站。
要建立幀時間軸，首先打開 Chrome 開發工具，選擇「Timeline」標籤，底部黑色的圓形表明「record 記錄」，按下開始時間軸記錄，按第二次中止記錄。記錄的同時，你能夠跟網頁正常交互，幀模式會記錄全部幀的行爲。
時間軸圖表每一條表明單幀動畫，不一樣的顏色表示以下： 藍色表示加載任務，黃色表示腳本任務，紫色表示渲染任務，綠色表示繪製任務，白色區域表明空閒時間。
時間軸圖表下面是網頁性能的瀑布圖，幀顯示在標題列，標題單元格還包含畫這幀花費的毫秒數；相應的動做也記錄在左側。
你能夠拖動兩個灰色的鼠標滑塊，改變你想檢查的幀的數量。
懸停在時間軸的標題行顯示幀的持續時間；FPS 數值；CPU 時間和與幀交互的合計時間。
懸停在左側的記錄上面，能夠看到每一個任務的持續時間；還有其它有用信息。若是有頁面相關的部分，則會高亮，有些任務被分組了，點擊瀑布圖的箭頭查看。
移動端
開發工具調試 IOS
把 IOS 設備鏈接到可用的 Mac，打開 Mac 和 IOS 設備的 Safari 。
找到 Safari 的「Develop 開發」菜單，第一個菜單分隔線的後面應該是你要鏈接的 IOS 設備的名字。在子菜單選擇你想調試的頁面。
Safari 的開發工具將以彈出窗口的式出現，你能夠調試移動設備的站點了。
開發工具調試 Android
你能夠用Mac 上的 Chrome Canary 開發工具調試安卓設備上的公共和本地網站，你能夠在手機上訪問 Chrome 開發工具的普遍的特性集。
首先，須要在安卓設備安裝 Chrome BETA 。
而後，須要下載 ADB 插件擴展，安裝到 Chrome Canary 上。從未在 Google Play 商店下載過的話，須要拖拽文件到擴展頁 （chrome://extensions/）。
確保已經在 chrome://flags 裏面打開「Enable Developer Tools experiments 啓用開發工具實驗」。
手機用 USB 線插到電腦上，在手機找到「設置」，選擇「開發人員選項」，確保「USB 調試」選上。若是它已經選上，而你之前從未用過 USB 調試，取消選擇，重選一次，確保它有此計算機的 MAC 地址。
如今到安卓上的 Chrome BETA ，點擊菜單圖標和「Settings 設置」，確保「Enable USB Web debugging 啓用 USB Web 調試」啓用。打開新標籤。
在 Chrome Canary ，點擊 ADB 插件圖標，點擊「Start ADB」，須要重啓瀏覽器。
訪問檢查頁（chrome://inspect ），找到設備（須要 Chrome Canary 28 +），找到要調試的標籤。點擊頁面 URL 右側的「Inspect 檢查」連接。
彈出「Settings 設置」窗口，點擊「Experiments 實驗」標籤，啓用「Reverse Port Forwarding 」，你須要關閉窗口重啓開發工具，「Port Forwarding」標籤出現以前，再點「Inspect 查看」連接。
在 Port Forwarding 標籤，輸入想轉發的端口（例如 9000），地址，應該能夠映射到本地的電腦了。如今，在移動設備輸入 localhost:端口號（如 localhost:9000），本地的站點應該加載到移動設備上了，而且能夠調試了。
擴展
覆蓋地理位置
在 Firefox ，位置 API 能夠像 Chrome 同樣覆蓋，須要 Geolocater 擴展 。
安裝後到「Tools」工具菜單，「Geolocater」，「Manage 管理」，在這你能夠經過瀏覽地圖或搜索位置，直接添加「僞造的」地理位置。你能夠覆蓋先前預設的地理位置。能夠到 html5demos for Geolocation 頁試試。