瀏覽器開發工具的秘密
目錄
- 常規
- Console 控制台
- 檢查
- 編輯
- 調試
- 性能
- 移動端
- 擴展
常規
找到開發工具
快捷方式：
- “F12”（Windows）
- “Cmd”⌘ +“Option” +“I”（Mac）
- 右鍵選擇“Inspect Element 檢查元素”
- Safari 需要在 首選項 > 高級 > 顯示開發菜單，啟用開發工具
- Firebug 是 Firefox 擴展，需要在此安裝
用最新的開發版
開發工具會不斷完善，在開發版可以體驗。 Chrome Canary 是 Chrome 實驗版，Canary 和 Chrome 可以同時安裝。 你可以通過 chrome://flags 進一步加強你的 Chrome 開發工具 ，啟用“Enable Developer Tools experiments （啟用開發工具實驗）”。不要忘了點擊頁面底部的“現在重啟”按鈕。
Firefox Aurora 提供 Firefox 最新特性預覽。不幸的是，Aurora 不能和 Firefox 同時打開。
Webkit Nightly 是 Safari 測試版，因此有些不穩定。Webkit Nightly 可以和 Safari 同時運行。
Opera Next 是 Opera 最新改良版，會提供一些新的功能和特性。
現在瀏覽器的發布周期為12周，瀏覽器自動更新，變化是增量的。
移動開發工具位置
有時候不想讓我們的工具在屏幕底部，大部分的開發工具提供了配置選項。
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
|
|
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 |
|
結果如下：
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 文件底部添加映射文件的名字（sourceMappingURL）：
1
|
|
然后，你需要啟用“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 |
|
代碼訪問以下閉包變量： closure.%variable 以上例子，你將用這個表達式訪問 name： someone.introduce.%name // ==> “Arthur” 注意你也可以改變值：
1
|
|
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
|
|
在壓縮后的 JS 文件底部加上映射文件的名字： sourceMappingURL
1
|
|
在 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 頁試試。
如果您覺得本文的內容對您的學習有所幫助：