Feilsøke og samhandle med webapper via Opera Dragonfly

Jeg har vært en stor fan av Firebug i ganske lang tid, men jeg har raskt forelsket meg i Opera-alternativet Dragonfly. Det omfattende settet med webutviklingsverktøy er endelig ute av beta og klare for prime time. Denne artikkelen gir en introduksjon og oversikt over verktøyet med fokus på spesifikke funksjoner i fremtidige artikler.

La oss gå til Operaen

Jeg likte Opera, men jeg sluttet å bruke nettleseren da de begynte å lade for den. Denne strategien ble raskt droppet, og den gratis Opera-nettleseren sitter for øyeblikket i versjon 11.51 og er tilgjengelig for Windows, Mac og Linux, så vel som mobil- og nettbrettplattformer.

Selv om det bare kommandoer en liten prosentandel av nettlesermarkedet, tilbyr Opera en lett nettleser med et glatt brukergrensesnitt. I tillegg til utviklerverktøysettet, gir det maskinvareakselerasjon, stablede faner og musebevegelser; den fungerer også bra på mobile plattformer og hevder den raskeste JavaScript-motoren kalt Carakan. Den siste versjonen er nå min foretrukne nettleser på både Windows og Mac bærbare datamaskiner.

Hva mer trenger du?

Opera Dragonfly er installert med nettleseren; den er tilgjengelig fra Verktøy | Avansert nedtrekksmeny, en hurtigtast (på Windows er det Ctrl Shift I), eller ved å høyreklikke på et element på en webside og velge Inspect Element fra popup-menyen.

Figur A

Opera Dragonfly-verktøysettet er tilgjengelig via rullegardinmenyen Opera Tools. (Klikk på bildet for å forstørre.)
En rask oversikt over Opera Dragonflys funksjoner får deg til å lure på hva annet en webutvikler kan trenge for å utvikle, teste og feilsøke nettapplikasjoner grundig. Den følgende listen gir en prøve på disse funksjonene, som er tilgjengelige via hovedverktøylinjen i Opera Dragonfly-grensesnittet ( figur B ). Figur B

Opera Dragonfly hovedverktøylinje gir tilgang til hovedfunksjonene. (Klikk på bildet for å forstørre.)
Du ser alle funksjonene som er omtalt nedenfor i figur C.
  • DOM Inspector: Funksjonen er tilgjengelig via Documents-panelet på verktøylinjen. DOM Inspector viser DOM-treet for det gjeldende dokumentet som tolket av Opera-nettleseren. Operasiden har en flott beskrivelse av denne funksjonen, som de kaller "Vis kilde på steroider." Alternativets Style Inspector-funksjon, som vises i nedre høyre vindu, viser den tilsvarende stilen for et element valgt i det venstre vinduet (DOM Inspector).
  • JavaScript Debugger: Den fullstendige debuggeren er tilgjengelig via Scripts-panelet. Den gir tilgang til JavaScript for den gjeldende websiden og lar deg kontrollere flyt via brytepunkter og så videre. Kildekoden vises i venstre del av vinduet; høyre side gir funksjoner som brytepunkter, tilstand (klokker, anropsstabel osv.) og lar deg enkelt søke i koden.
  • Network Inspector: Network-panelet åpner denne funksjonen, som er beskrevet som et HTTP-dashbord. Network Inspector lar deg se og inspisere alle HTTP-forespørsler tilknyttet siden, samt en visualisering av nedlastingstider / varighet for alle ressursene som brukes av siden; du kan se alt dette via fanen Nettverkslogg. En fin funksjon er muligheten til å sende dine egne HTTP-forespørsler via fanen Lag forespørsel.
  • Ressursinspektør: Ressurspanelvalget gir tilgang til denne funksjonen. Resources Inspector viser alle ressursforespørsler initiert av websiden. Den viser verten for ressursen og full URI sammen med type og størrelse. Dette kan brukes sammen med Network Inspector for å se de store ressursene og de tilhørende nedlastningstidene, slik at du kan finne problemer.
  • Lagringsinspektør: Denne funksjonen gir en oversikt over lagringssiden på klienten som brukes av siden. Dette inkluderer informasjonskapsler og HTML 5 nettlagring.
  • Feillogg: Feil-panelet gir tilgang til feilloggen, som er en av de viktigste funksjonene for å jobbe med dine egne webapplikasjoner. Paneloverskriften inneholder et antall av det totale antall feil som returneres. Den viser feilen og kilden. Du kan konfigurere feilloggen via Innstillinger for ikke å vise visse CSS-feil, og filterboksen kan brukes til å avgrense feillisten.
  • Konsoll: Konsollen lar deg evaluere JavaScript-utsagn mens du er på farten og inspisere objekter og egenskaper.
  • Fjernfeilsetting: Denne kule funksjonen lar deg feilsøke separate forekomster av Opera på samme eller andre datamaskiner, mobile enheter eller et fjernsyn. Når den brukes, lytter ekstern feilsøking etter tilkoblinger til en spesifisert IP-adresse og port, og kobler til og sender informasjon om feilsøking på tvers av tilkoblingen. Den avluser eksternt akkurat som en lokal forekomst.
Figur C

DOM-inspektøren åpnet for hjemmesiden til TechRepublic. (Klikk på bildet for å forstørre.)

Denne listen klør bare på overflaten på det som er inkludert i Opera Dragonfly verktøysett. Hver funksjon har sitt eget sett med funksjonalitet. Opera Dragonfly er helt åpen kildekode, og det er mye god dokumentasjon for verktøyene som er tilgjengelige på nettet.

Overbelastning av funksjonen

Opera Dragonfly ser ut til å tilby alle verktøyene som er nødvendige for å feilsøke og samhandle med webapplikasjoner på riktig måte. Den følger stien som brennes av Firebug og tilbyr enda flere funksjoner, og det er grunnen til at Opera Dragonfly har blitt mitt foretrukne verktøy. I fremtidige innlegg vil jeg dekke spesifikke funksjoner ved Opera Dragonfly mer detaljert. I mellomtiden, hvis du ikke allerede har gjort det, oppfordrer jeg deg til å installere Opera og prøve Dragonfly.

Hvilke nettutviklingsverktøy bruker du hver dag? Hvilke verktøy anser du som uunnværlig? Bruker du for øyeblikket Opera Dragonfly eller Firebug? Del tankene og opplevelsene dine med samfunnet.

© Copyright 2021 | pepebotifarra.com