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

來源:互聯網
上載者:User

  目前我正在研究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

相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。