Browser testing er et varmt og frustrerende problem blant webdesignere og utviklere. I de fleste tilfeller utvikler designere for en målleser, og når de er ferdige, begynner de å tilpasse designet slik at de blir kompatible med andre nettlesere.

Det er mange måter å teste et nettsted på før det startes, og disse inkluderer å ha flere nettlesere og operativsystemer installert, kjører virtuelle maskiner med forskjellige konfigurasjoner eller ved hjelp av en hosted image service hvor et skjermbilde er produsert for en gitt nettleserversjon og operativsystem som skal brukes til sammenligningsformål.

Fra og med i dag er det en ny måte å teste nettleserkompatibilitet utviklet av Microsoft, og det kalles SuperPreview . I denne artikkelen vil jeg gi deg en kort gjennomgang av SuperPreview, samt å sammenligne og notere alternative systemer for testing av webdesignene dine.

Oversikt

SuperPreview er et nytt gratis frittstående program fra Microsoft (fortsatt i beta) som gjør at du kan se hvordan nettstedene dine vil se på forskjellige versjoner av Internet Explorer, noe som gjør migrering fra IE6 til 7 og 8 mye enklere enn før, uten å starte en Virtual Maskin for å kjøre IE6, eller ha en egen datamaskin dedikert til å kjøre IE6. De vil også slippe ut en betalt versjon som håndterer ikke-IE-nettleserne. I denne anmeldelsen diskuterer jeg bare den gratis versjonen. Jeg bør nevne at dette er en veldig tidlig forhåndsvisning, så flere funksjoner og reparasjoner bør komme fremover.

Tilgjengelighet

Betaversjonen av SuperPreview vil bli annonsert i dag på Mix09 konferansen og vil bli tilgjengelig for gratis nedlasting til allmennheten kort tid etter det. [UPDATE] Programvaren ble utgitt i dag før MIX09, og tidligere enn opprinnelig forventet, og er nå tilgjengelig: Last ned Microsoft SuperPreview

Jeg ble nærmet av Microsoft for å teste en tidlig beta-versjon, og jeg har jobbet med utviklingslaget de siste dagene ved å gi dem tilbakemelding og forslag.

Utgivelsesversjonen av SuperPreview for Internet Explorer vil være tilgjengelig sommeren 2009.

Det er også en fullversjon som inkluderer støtte for Firefox og Safari. Dette er en BETALT versjon som vil være en del av Expression Web 3 . Du vil ha muligheten til å aktivere det fra Expression Web eller som en frittstående. Estimert utgivelsesdato er også sommeren 2009.

Superpreview

SuperPreview er en ganske kul ide, og det er første gang jeg har sett denne typen nettlesertestfunksjonalitet tilgjengelig som en frittstående applikasjon i motsetning til en hosted tjeneste. Du skriver i utgangspunktet URL-adressen (eller lokal fil) du vil teste, og den viser forhåndsvisningen i to versjoner av IE samtidig, i et delt vindu. Den leveres med IE6-gjengemotoren innebygd og krever at du har IE7 eller IE8 for å sammenligne dem .

En stor ulempe er at de i det minste ikke har noen konkrete planer om å frigjøre en Mac-versjon , selv om dette kan legges til i fremtiden. Jeg måtte teste dette på min Mac ved hjelp av Parallels som produserte noen få feil, som for eksempel langsom svartid og flimring på noen av lasteskjermer. Brukergrensesnittet er også ganske unattractive og ikke veldig brukervennlig etter min mening, selv om de hevder å være å fikse dette for den endelige utgivelsen.

Dessuten er det ikke ledig løsning tilgjengelig ennå , noe som vil være spesielt nyttig for de av oss på Mac-maskiner som ikke kan installere IE for testformål.

Nøkkelegenskaper:

  • Pointer Modes: Lar deg klikke på individuelle sidedeler for sammenligning. Seksjonens HTML-kodenavn, navn på klasse eller ID, størrelse og posisjon vises i statuslinjen.
  • Bildevisning: Sammenlign Photoshop comp mot grensesnittleseren for å sikre at alt kommer opp i nettleseren for å matche ditt originale design.
  • Dom Markering: Du kan markere bestemte DOM-elementer for å se hvilke steder det er justeringsforskjeller mellom nettleserne. Den viser posisjonene til de gjengitte elementene og deres CSS egenskaper.
  • Posisjonsveiledninger / Linjaler: Bruk linjaler til å måle layoutforskjellene mellom nettleserne. Når du plasserer en linjal i et nettleservindu, flytter linjalen i den andre nettleseren med den.
  • Layoutvisninger: Se side om side, enten horisontalt eller vertikalt, eller overleggsmodus.
  • Zoom: For å velge forstørrelsesnivået.
  • Flere oppløsninger: Ikke tilgjengelig i denne betaversjonen, men vil bli inkludert i fremtidige utgivelser.
  • Miniatyrbilde: Forhåndsviser en miniatyrbilde nederst på hvert panel med et miniatyrkart som visning av hele nettstedet slik at du raskt kan klikke på et annet område på siden.

eksempler:

Verktøylinjen viser de forskjellige guider og linjaler

toolbar


Guider og linjaler med DOM-markering viser forskjellene i gjengivelse i IE6 og IE7

overlay


Velge lokale nettlesere, eksterne nettlesere eller bilder (skjermbilde av full versjon med ikke-IE nettleser)

multiplebrowsers


Pros:

  • Ingen grunn til å installere IE6.
  • Side ved side sammenligning og valg av layout visninger.
  • Kan sammenligne Photoshop comp mot baseline nettleser.
  • Guider og linjaler for å måle posisjoneringsforskjeller mellom nettlesere.
  • Overleggsmodus vil vise om det er mange uoverensstemmelser.
  • DOM-utheving er nyttig for å finne og identifisere forskjeller raskt.
  • Zoom-funksjon.
  • Gratis for IE-nettleser forhåndsvisninger.
  • Viser PHP og ASPX sider (forutsatt at du har PHP installert på systemet ditt).
  • Støtter hva den opprinnelige nettleseren støtter, inkludert Ajax og JavaScript.

      Ulemper:

      • For tiden fungerer det med IE8 i IE7 emuleringsmodus, som tilsynelatende er ca 90% bra. De jobber med å lage sanne innebygde IE7- og IE8-gjengivelser.
      • Ingen versjon for Mac ennå.
      • Oppløsningsalternativ som ikke er tilgjengelig i beta-versjonen.
      • Den frie versjonen sammenlignes bare mellom forskjellige versjoner av Internet Explorer, og betalte versjoner sammenlignes bare mellom nettlesere du har installert.
      • Unattractive brukergrensesnitt og ikoner (i hvert fall i beta-versjonen).
      • Overleggsmodus er forvirrende for å identifisere hvilken nettleser som er.
      • Ingen hosted løsning tilgjengelig ennå.
      • Ingen støtte for ActiveX (inkludert Flash).
      • Kan ikke sammenlignes med Mac-nettlesere.
      • Kan ikke klikke på linker for å navigere på nettstedet.
      • Langsom oppdatering / ladetid (minst kjører XP i Mac med Parallels).
      • Forhåndsvisning av miniatyrbilde er ubrukelig for svært lange nettsider.

      Andre testmetoder

      En vanlig metode for å teste et nettsted (i tillegg til å installere en rekke nettlesere og operativsystemer), er å bruke en hosted tjeneste som tar skjermbilder av websiden din som vist i forskjellige nettlesere og operativsystemer. Her er noen av de mest populære:

      Browsershots

      Støtter flere nettlesere, Java, Flash, Javascript og skjermoppløsninger. Enkel å bruke og gratis.

      browsershots


      Nettleserfoto

      Støtter flere nettlesere og versjoner, samt Windows, Mac og Linux. Fra 800 × 600 opp til 1024 × 768. Pris: $ 15 for en gangs bruk, eller $ 150 per domene / år for ubegrenset bruk

      browserphopto1


      CrossBrowserTesting

      Støtter flere nettlesere og operativsystemer. Du betaler per minutt bruk. Krever Java. Gratis prøveperiode.

      crossbrowsertesting


      Browsercam

      Støtter enhver nettleser, hvilket operativsystem som helst. Inkluderer JavaScript, DHTML skjemaer og mer dynamisk funksjonalitet. Mulighet for ekstern tilgang og utvikling av mobil side. Fra $ 19,95 for en dag bruk for nettleser fange.

      browsercam


      BrowsrCamp

      Mac OS X-nettleser testing med skjermbilder. Fra 800 px oppløsning opp til 1600. Gratis for Safari 3.1.2 skjermbilder. Betalt tjeneste fra $ 3 per dag.

      browsrcamp


      NetRendered

      Kontrollerer hvordan et nettsted gjengis av Internet Explorer 7, 6 eller 5.5. Gratis.
      netrednered


      lakmus

      Kontrollerer hver nettleser og hvilken som helst plattform og inneholder feilsporing. 50 test en måned er gratis, men bare for IE7 og Firefox 2. 23 Nettleserstøtte starter på $ 24 per dag.
      litmus

      Til slutt kan du installere flere nettlesere, eller bruke virtuelle maskiner til videre testing.

      Virtuell programvare:

      Lar deg installere flere operativsystemer på samme datamaskin

      Videre lesning:

      http://www.thesitewizard.com/webdesign/multiplebrowsers.shtml
      http://css-discuss.incutio.com/?page=BrowserTesting


      Ansvarsfraskrivelse fra WDDs redaktør: Dette innlegget er en personlig gjennomgang av SuperPreview. Jeg ble ikke kompensert på noen måte av Microsoft eller noe annet firma for å gjennomgå dette produktet eller de andre. Meningene som er uttrykt her er bare min egen.


      Vennligst legg inn under hvilke andre systemer du bruker til å teste nettsteddesignene dine på forskjellige nettlesere og i forskjellige versjoner.