萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 用IE 10觸控事件模型調試響應式Web設計

用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,啟動模擬器,然後再單擊桌面圖標。

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

  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

copyright © 萬盛學電腦網 all rights reserved