7 nagyszerű eszköz az adaptív webtervek teszteléséhez

Minden modern webdesignernek ismernie kell a reszponzív webdesign alapelveit - hogyan lehet elérni, hogy webhelyei tökéletesen megjelenjenek bármilyen eszközön vagy képernyőn, amelyen megjelenik. (Ha frissítésre van szüksége, nézze meg a mi oldalunkat a profi web-tervezés útmutatója ).

De az elmélet egy dolog, a gyakorlat pedig egy másik. Annak érdekében, hogy webhelye teljes körűen reagáljon, valójában különböző eszközökön kell tesztelnie.

A legtöbben azonban nem rendelkeznek a költségvetéssel ahhoz, hogy megszerezzük a fizikai eszközök százait, amelyekre a valós teszt elvégzéséhez szükség lenne. De ne félj! Ezek az eszközök egy félúton állnak rendelkezésre, lehetővé téve az érzékeny tervek tesztelését egy virtuális környezetben.

menő dolgokat rajzolni a csuklójára

01. Responsinator

A Responsinator segítségével megnézheti, hogyan néz ki webhelye a különböző nézetablakokban

A Responsinator segítségével megnézheti, hogyan néz ki webhelye a különböző nézetablakokban

A Responsinator szépsége az egyszerűségében rejlik. Csak írja be a weboldal URL-jét, és ez az ingyenes, böngészőalapú eszköz megmutatja, hogyan jelenik meg a weblapja a legnépszerűbb képernyőformákban és -méretekben.

Kiváló módon ezután kölcsönhatásba léphet az oldalával, rákattinthat a linkekre, beírhatja a keresési mezőket és így tovább. Ne feledje, hogy ezek általános eszközök, bár nem specifikusak.

02. Screenfly

A Screenfly segítségével ellenőrizze, hogyan jelenik meg webhelye különböző eszközökön, beleértve a tévéket is

A Screenfly segítségével ellenőrizze, hogyan jelenik meg webhelye különböző eszközökön, beleértve a tévéket is

A Screenfly egy ingyenes eszköz egy webhely tesztelésére különböző képernyőméretekben és különböző eszközökön. Néhány éve létezik, de még mindig népszerű és rendkívül jól végzi a dolgát.

Csak írja be az URL-t, válassza ki az eszközt és a képernyő méretét a menükből, és láthatja, hogy a webhelye mennyire működik rajta. A kiemelt eszközök közé tartoznak az asztali számítógépek, táblagépek, televíziók és okostelefonok.

hogyan rajzoljuk meg a női alakot

03. Google DevTools eszköz mód

A DevTools Device Mode különböző eszközöket emulál a Chrome-on belül

A DevTools Device Mode különböző eszközöket emulál a Chrome-on belül

A DevTools Eszközmódja egyszerű módot kínál a fejlesztők számára a mobileszközök szimulálására a Chrome böngészőben. Használja, hogy megtudja, hogyan jelenik meg webhelye különböző méretű és felbontású képernyőkön, beleértve a Retina képernyőket is.

Szimulálhatja az eszközbemeneteket is az érintéshez, a földrajzi helymeghatározáshoz és az eszköz orientációjához az emulátoron belül.

04. Google Resizer

Az Átméretező segít meghatározni az anyagtervezés töréspontjait az érzékeny webhely számára

Az Átméretező segít meghatározni az anyagtervezés töréspontjait az érzékeny webhely számára

A Google Anyagtervezési irányelvei tanácsokat tartalmaznak a töréspontok, az adaptív rácsok, a felületi viselkedés és a felhasználói felület mintáinak használatáról. Tavaly pedig elindított egy ingyenes eszközt, így láthatja, hogyan néz ki ez az útmutató a valós eszközökön.

A Google Resizer lehetővé teszi egyéni URL megadását és egy webhely megtekintését az Material Design töréspontjain keresztül asztali és mobil eszközökön. Ha először bemutatót szeretne látni, kattintson a címsávra, és válassza a Pesto Vagy „ Ereklyetartó ’Legördülő menüből.

05. Ghostlab

A Ghostlab összpontosít egyidejű tesztelésre egy csomó eszközön és böngészőben

A Ghostlab összpontosít egyidejű tesztelésre egy csomó eszközön és böngészőben

A fizetett webhelytesztelő alkalmazás, a Ghostlab lehetővé teszi, hogy webhelyét egyszerre több böngészőn és mobil eszközön tesztelje. Kezdje el a tesztelést egy böngészőben vagy eszközön, és az összes többi tükrözi a műveleteit, legyen szó linkekre kattintásról, gombok kijelöléséről, űrlapok kitöltéséről vagy az oldal újratöltéséről.

Könnyen kivihet egy screengrab-ot bármilyen eszközről, megjegyzést fűzhet hozzá, és áthúzhatja a hibakeresőhöz. Lásd működés közben ez a videó .

06. Böngészőverem

A Browser Stack egy fizetős, vállalati célú tesztelő eszköz

A Browser Stack egy fizetős, vállalati célú tesztelő eszköz

A Browser Stack az egyik legfejlettebb, teljes funkcionalitású tesztelő eszköz. A fizetős alkalmazás több mint 1000 mobil és asztali böngészőhöz nyújt hozzáférést tesztelés céljából. Ezt a listát folyamatosan frissítjük, a piaci trendek és a Browser Stack 36 000 ügyfelére épülő használati statisztikák alapján.

A felhasználók, köztük a Twitter, a Microsoft, az AirBnB és a Mastercard, nyilvánvalóan valamit jól csinálnak.

minden művésznek rendelkeznie kell művészeti kellékekkel

07. CrossBrowserTesting

A CrossBrowserTesting rengeteg valós eszközt és tesztelési funkciót kínál

A CrossBrowserTesting rengeteg valós eszközt és tesztelési funkciót kínál

A Browser Stack legnagyobb vetélytársa a tesztelési térben a CrossBrowserTesting, amely több mint 1500 böngészőt és eszközt kínál az érzékeny webhely teszteléséhez.

Az all-in-one platform lehetővé teszi párhuzamos automatizált tesztek futtatását, a képernyőképek vizuális összehasonlítását, a valós eszközökön történő ellopást és interakciót a webhelyével, valamint távoli hibakeresést a kóddal, ahogy megy.