Både Firefox og Chrome har nyttige feilsøkingsverktøy som hjelper deg med å finne ut mer informasjon om skript relatert til atferd. Jeg skal forklare det meste i Chrome ettersom standard feilsøkingsverktøy er mer omfattende
Som en start kan du vanligvis bruke Høyreklikk->Inspect Element for å finne ut informasjon om et element raskt. Dette ser imidlertid ikke ut til å fungere på Facebooks ticker - hvis du gjør det, velger du "Ticker News" bak rullefeltet slik:
Fordi vi ikke kan se at elementet er endret, må vi gjette noen gjetninger. Tickerhistoriene i seg selv ser ikke ut til å ha noe relatert til rullefeltene. Etter å ha reist til foreldrene og brettet <div class = "tickerActivityStories" > , kan vi begynne å se ting tydelig
Ved å sveve over (og påkalle rullefeltets "vises" -kode) vi kan observere sidens DOM og merke forskjellene.
Så det ser ut til at <div class = "uiScrollableAreaTrack" > når den svarer tilsvarende når musen kommer inn / går. Navnet gir også mening (antyder at det er sporene i rullefeltet). Ved å utfolde den div , vil vi merke at det til og med er en "gripper" for rullefeltet!
For å finne ut hva Javascript er er involvert i rullefeltene, klikker du på <div class = "uiScrollableAreaGripper" , og i høyre rute bretter du ut Event Listers -fanen. Vi kan anta at det reagerer på fokus, og under delen Focus vil du legge merke til noen få referanser til Javascript-filer. Hold markøren over filnavnene, og Chrome viser koblingen til Javascript-filene.
Hvis du har flaks, kan filene ha et gjenkjennelig navn (for eksempel typeahead.min.js eller lignende, som du kan google). Dessverre ser vi sannsynligvis i de fleste tilfeller, inkludert våre, på proprietær kode eller minifisert kode. (Minifisert kode er ekstremt vanlig for å redusere filstørrelser slik at sidene lastes raskere)