用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