「別再拖拽拉扯那個瀏覽器了，你快把它弄壞了！」這樣的話你聽過多少次了？好吧，可能不是特別多，但如果你在開發響應式設計的**，你就知道這意味著什麼了：每一次編輯dom和css之後，你都要拽著瀏覽器的邊緣拉拉扯扯，來測試你的編輯結果以及檢查是否有什麼東西故障了。
css 就是被這樣玩爛了！！
歸根結底，大部分的努力都是為了適應不同裝置的螢幕尺寸。
如果你給公司做開發，公司可能會給出各種各樣的裝置來測試。在我自己工作的地方，我們就用到了ipad，ipod和其他一兩個平板電腦，筆記本或者台式電腦。如果沒那麼奢侈，那就只好用手邊的裝置來測試了。
在我家裡，我們有兩個不同的筆記本，兩個不同的安卓裝置，乙個kindle和乙個nexus 7。這些都是我曾用來測試我自由開發專案的裝置，不過，這顯然不能算是乙個面面俱到的組合。首先，這裡面根本就沒有ios裝置，其次雖然我是乙個早期採用者，（譯者注：最先採用新科技的人。）我也沒打算買任何新的衝擊市場的手機或者平板裝置。
因此，作為開發者應該怎麼辦呢？幸好，現在有許多基於瀏覽器的工具能夠模擬多種裝置的螢幕尺寸，其數量還在不斷增長。當然，不同的工具有不同的特性和不同級別的功能。在此我們將會討論其中幾個。
am i responsive?是乙個如此簡單的即時檢視，它提供四種不同的裝置來顯示你的**。四種裝置都是ios系統的，開發者解釋說這正是這個**所關注的。**沒有提供控制和選擇，這只是乙個簡單、優雅的展現方式。
視區大小有：
引用一下這位開發者的所言，」這不是乙個用來測試的工具，在真實的裝置上測試是相當重要的。事實上對我來說，這是乙個用於快速抓屏，或者在使用者會議上讓人們從視覺上了解到你的意圖的工具。」
它有兩個非常好的特性：能夠抓起」裝置「並放在螢幕上的任意地方，以及能夠將你的測試**嵌入乙個可分享的鏈結中。在火狐中，至少在現在測試**的結構下，ipone上的側邊滾動欄不會顯示，而在ie和chrome中則會顯示。
deviceponsive與am i responsive?非常相似，它們都簡單明瞭的展示了你的**，而且對裝置而言，都沒有可見的控制和選項。所有裝置在一頁長網頁上同時顯示。你能夠通過改變背景顏色和嵌入你自己的logo來定製這個**的頁首，之後截圖分享出去，這十分有趣。從某種方式來說，當你向顧客分享你的截圖的時候，也就幫這個**打了廣告。
該**所提供裝置及其螢幕大小： macbook——1280×800 ipad portrait——768×1024 ipad landscape——1024×768 kindle portrait——600×1024 kindle landscape——1024×600 iphone portrait——320×480 iphone landscape——480×320 galasy portrait——240×320 * galaxy landscape——320×240
使用這些工具時，大部分情況下，滑動條會在較小的裝置上顯示。然而在實際的裝置上，滑動條不會顯示。不過為了測試試圖能在不支援觸控的裝置上也能滑動，必須要做出一些讓步。
跟deviceponsive一樣，responsive test用各種不同的裝置顯示你的網頁。不過，跟deviceponsive將所有裝置同時顯示不同，它通過頁面頂部乙個簡單的選單來讓你自己選擇要顯示的裝置。我用乙個中等大小的筆記本訪問該**，頁面縮放能夠正常工作，這能讓我們在裝置的限制框中看到整個測試**。
這兒提供了十三種不同的視區，涵蓋了從大型台式電腦顯示器到被稱為」糟糕的安卓機「（說句公道話，它們還有另外乙個名字叫」更好的安卓機「）的機型。
在這個網頁上，火狐又有些蹩腳。注意到這張截圖，在綠色的頁首和白色背景的內容中間只有藍色的條帶，那兒本來應該顯示影象拖動條的。
它與前面的例子非常相似，不過有兩點不同，responsive.js利用流暢的動畫效果來表現從一種裝置到下一種的變化，再者，他用被半透明覆蓋的方式表示網頁在視區之外的部分。
這兒，唯一可選的裝置是自動，它會填滿你的瀏覽器視窗，效果就跟真正訪問那個**一樣。台式電腦、平板電腦（水平）、平板電腦（豎直）、智慧型手機（水平）以及智慧型手機（豎直）這些顯示解析度都沒有提供。
與之前相同，一些細微的特性和選項似的screenqueries稍稍不同於之前的工具。它提供了14種手機和12種平板裝置，並且能夠單獨控制切換水平和豎直模式。它們在有編號的畫素網格上顯示，解析度就寫在右下角。顯示時，邊框是可拉動的，因此你也可以定製大小。滑鼠單機或者放在測試區域會使得背景切換為灰色，這讓你覺得看上去不那麼雜亂。
對於很多該**的裝置，都有乙個」trueview「選項，它將你的測試**用乙個指定的裝置瀏覽器視窗顯示。這是乙個非常有意思的特性。
非常不幸，火狐不能顯示這個**的影象滑動條，對此我已經習慣了。不要責怪我，事實上，火狐是我優先使用的瀏覽器，幸好我們還有其他選擇。
screenfly 實實在在提公升了可用係數。它提供九種比平板更大的裝置，從10寸的筆記本到24寸的台式電腦都有，此外還包括五種平板，九種手機，三種電視，還能夠自己定製大小。通過另乙個控制器，任何選取的裝置都能被旋轉成水平或者豎直的。你能夠選擇是否允許滾動，你還能生成乙個可用於分享的鏈結，只需要點乙個按鈕就行。
這個**顯示解析度的方式非常十分有益。每乙個在選單中的裝置都顯示了名稱和解析度，瀏覽器的實際解析度在接近右上角的地方，被選中的裝置的解析度則在展示區域的頁尾，跟測試**的url寫在一起。這乙個小細節在文件截圖和給客戶分享資訊時給人非常好的感覺。
之前提到的這些足以使它成為乙個完美的工具，但screenfly的開發者還為它公升級了**伺服器的特性，並認為非常合適。用寫**上的話來說，」screenfly能使用乙個**伺服器，在你訪問你的**時偽裝成其他裝置。**伺服器模仿你所選擇的裝置的使用者**字串，而不是該裝置的行為。」
對於其他所有工具，處理這個地方時都僅僅是利用css。screenfly是唯一乙個允許基於**字串來測試的。
我給乙個我自己寫的，提供了手機版本的網頁做了基於**字串的測試，手機版網頁的結果非常好。所有效果都跟我想的一樣，所有功能也都能通過測試。測試**字串是保守的，這一點無可否認，不過這個**就是這樣保守的風格，而且**伺服器的特性也的確給**帶來了好處。
總之，我們看過了不少這些測試響應式設計的資源。它們各有千秋，具體使用哪乙個還是取決於你自己的需求和偏好。我鼓勵你們去嘗試和體會一下這些工具。作為web開發者，我們用的工具當然是越能真正派上用場越好。
10個實用的響應式設計測試工具
響應式的設計現在越來越受設計師推崇，面對這越來越多的響應式設計頁面，我們需要找到高效的測試工具來驗證設計的合理和正確，文中所介紹的工具可以幫助你測試響應式頁面設計。viewport resizer viewport resizer是乙個基於瀏覽器的工具，它可以讓使用者測試任何 的響應特性。使用者只需...
最佳的 14 個免費的響應式 Web 設計測試工具
一旦你決定要搭建乙個 就應該已經制定了設計標準。你認為下一步該做什麼呢？測試！我使用 測試 這個詞來檢測你 對不同螢幕和瀏覽器尺寸的響應情況。測試在響應式網頁設計的過程中是很重要的一步。如果你明白我所說的那你需要讓你的 在任何型別的裝置上都可以正常顯示。在當今世界，技術進步和工具所帶來的使用者不僅僅...
11個免費的Web安全測試工具
hackchecker 黑測工作室 專注於軟體安全測試技術研究！www.automationqa.com 1.netsparker community edition windows 這個程式可以檢測sql注入和跨頁指令碼事件。當檢測完成之後它會給你提供一些解決方案。2.websecurify wi...