用IE 10觸控事件模型調試響應式Web設計

　　目前我正在研究IE 10觸控事件。雖然我已經十分幸運地擁有了一台Windows 8平板電腦，但是我仍在尋找一種更加簡便的方法，即無需每次切換至平板電腦，便可直接在經典筆記本上執行基本測試的方法。在尋找該方法的過程中，我發現了一些技巧和竅門，有了這些經驗，您就可以在不使用觸控裝置的情況下，對代碼中的IE 10觸控事件進行調試了。正面效應：這種方法還可協助您測試、調試響應式Web設計!

　　先決條件：在學習本教程之前，首先需要執行下列步驟：

　　IE 10觸控事件模型

　　如果您對觸控執行方式還不甚瞭解，可以先閱讀下列三篇文章：

　　1.IE10瀏覽器及Metro Style應用程式的觸控輸入

　　2.所有瀏覽器中的多點觸控及滑鼠輸入處理

　　3.使用Gesture事件實現超出Pan、Zoom及Tap範圍之外的其他功能

　　您可以參考作為補充資源的Pointer.JS庫，該庫類比了面向其他瀏覽器的IE 10模型。

　　Windows 8 模擬器類比觸控

　　Windows模擬器安裝了多種開發工具，一般用於測試、調試Metro Style應用程式。您可以通過閱讀下面的文章瞭解更多詳細資料：初識Windows模擬器。

　　然而，我們完全可以使用模擬器來調試在IE10中啟動並執行Web應用程式。下面我向大家介紹一下具體的實現方法。

　　1.運行“Program Files (x86)Common FilesMicrosoft SharedWindows Simulator11.0”檔案夾下的Microsoft.Windows.Simulator.exe，啟動模擬器，然後再單擊案頭表徵圖。

　　2.啟動IE10瀏覽器，轉向“Internet選項”——>“進階” 標籤。檢查“禁止指令碼調試(Internet Explorer)”、“禁止指令碼調試(其他)”是否未選中：

　　3.轉向需要測試與/或調試的URL。例如，測試下列測試案例：IE Test Drive下的Finger Painting。藉助該模擬器，我們可以使用下列兩個按鈕來類比經典的滑鼠輸入與/或觸控切換模式。

　　起初，您肯定會認為這樣可以得到相同的結果：

　　但是，單擊下列按鈕後：

　　您會發現得到了縮放和旋轉雙重觸控類比效果：

　　雙重觸控功能在下列測試案例的應用中會變得更加有趣：Browser Surface

　　藉助模擬器，您可以通過觸摸手勢來類比縮放及旋轉效果。

　　使用Visual Studio 2012調試JavaScript代碼

　　如果您想更深入的測試與調試您的觸控體驗，您可能需要調試JavaScript代碼。第一個顯而易見的方法是按F12鍵，使用IE10開發人員工具。但是，如果在模擬器狹小的視窗中使用F12鍵，會讓人感到很不舒服。

　　另外一個比較好的解決方案就是使用Visual Studio 2012中的調試器。下面就是具體的實現步驟：

　　1.在主會話(模擬器外部)上，啟動Visual Studio 2012 RC Express，轉到“調試”->“載入進程…”

　　2.定位“iexplorer.exe”進程(“x86，Script”)，載入：

　　3.如果一切正常，使用Browser Surface測試案例得到的結果應如下圖所示：

　　如果不是這樣，或許是因為您載入了錯誤的iexplore.exe進程或忘記去掉“禁用script調試”選項前的對勾。

　　如果您選擇了正確的進程，可以看到 “Script檔案”節點下“方案總管”右嵌條中的JavaScript檔案。

　　4.然後，我們將重點放在JavaScript的調試經驗上。比如，開啟“demo.js”檔案，在第136行添加斷點：

　　if (Options.inertiaBounce()) { ：

　　5.拍攝映像，並使用觸控類比處理映像，映像應能自動打斷Visual Studio：

　　然後，逐步執行代碼，查看JavaScript控制台輸出，按右鍵函數，直接跳轉至函數定義。這樣，您就可以獲得進階調試體驗了。

　　總之，您無需藉助任何觸控裝置，完全可以調試支援IE10瀏覽器的JavaScript觸控邏輯。當然，您需要在真正的觸控裝置上測試最終代碼及Web應用，從而真正瞭解代碼在實際條件下是如何啟動並執行。但是，該方法確實可以為您提供協助，節省您的時間。

　　響應式設計的測試與調試

　　模擬器及VS 2012也可以協助您測試、調試響應式設計。首先讓我們回顧一下模擬器必須提供的內容。

　　我在網路上尋找了執行響應式設計原則的最佳網站，並使用http://garretkeizer.com/網站上的下列截圖。您可以找到在 http://mediaqueri.es上測試的其他比較酷的網站。

　　下面是使用模擬器的預設設定在Internet Explorer 10瀏覽器中執行的網站設計。

　　下面讓我們回顧一下促使模擬器進一步執行的某些比較酷的選項：

　　1.通過單擊下列按鈕，測試portrait或landscape模式下的設計改動。

　　下圖是所選網站的結果：

　　2.通過單擊下列按鈕，還可以類比各種形狀係數及解析度顯示結果。

　　3.下圖是解析度2560x1440下該網站的顯示結果(對比之前預設解析度為1366 x768時的截圖)：

　　4.如果您想繼續執行，可以使用VS 2012中的出色的DOM Explorer工具，協助您檢查及現場編輯CSS。例如，在載入調試器後，我們可以看到名為“DOM Explorer”的視窗。雖然您的滑鼠放在HTML節點上，仍會看到模擬器中以亮色顯示的各個地區。

　　當然，您可以在Visual Studio中檢查、編輯及追溯樣式，修補潛在的CSS設計問題。我希望這些小技巧能夠對您有所協助，並節省您的時間。希望經常關注這些免費工具!

　　文：CSDN