Chrome na OS X i debugowanie elementów pokazywanych przy zdarzeniu onmouseenter

Debugowanie styli CSS elementów, które pokazywane są z użyciem zdarzeń obsługiwanych przez JavaScript w Chrome jest uciążliwe, ponieważ w odróżnieniu od Firefoksa Chrome przy inspekcji elementów nie wywołuje zdarzeń do nich przypisanych.

Zupełnym przypadkiem odkryłem ostatnio ciekawą metodą debugowania takich elementów:

W skrócie:

  1. Uruchamiamy narzędzia developerskie
  2. Najeżdżamy na interesujący nas element
  3. Z użyciem skrótów klawiaturowych przełączamy się na sąsiedni ekran
  4. Przesuwamy kursor w dół tak żeby po powrocie na pierwotny ekran znajdował się on nad obszarem narzędzi developerskich
  5. Powracamy na pierwotny ekran
  6. Możemy debugować wybrany element

Całość bazuje na tym, że Chrome przy zmianie ekranów nie wywołuje zdarzeń związanych z kursorem podpiętych do elementów.

Możecie przetestować tę metodę na tym prostym demo.

P.S. Jeżeli znacie inną metodę aby rozwiązać problem debugowania tego typu elementów, dajcie znać w komentarzach – może istnieje jakaś flaga dla Chrome, która wywołuje eventy przy inspekcji elementów.

P.S.2. Powyższa metoda działa też w Safari

P.S.3. Ten sam sposób można wykorzystać do robienia screenshotów tego typu elementów np. programem Skitch, pod warunkiem, że zakończymy zaznaczanie obszaru screenshota na narzędziach developerskich.

intercooler.js – AJAX poprzez atrybuty HTML-a

intercooler.js – wykorzystanie atrybutów HTML-a do wykonywania zapytań AJAX-owych

Powyższa biblioteka prezentuje ciekawe podejście do wykonywania zapytań z użyciem AJAX-a. Informacje o typie zapytania, jego adresie oraz zachowaniu przeglądarki po wykonaniu zapytania, przechowywane są w postaci atrybutów linków. Ciekawe rozwiązanie do wykorzystania w mniejszych projektach, gdzie potrzeba w łatwy sposób zaimplementować podstawowe zapytania AJAX-owe.