Entries tagged as debug

2008-11-19 LogFocus - handy Bookmarklet for Keyboard Accessibility testing

[deutsche Version dieses Beitrags anzeigen]

Offering usability for Users without Mouse is one of the biggest and most important Steps when building accessible Websites. While testing for Keyboard Accessibility you might find yourself very often in Situations like "Where is my Cursor?" or "What Element has the Focus right now?". Especially when Elements get moved offscreen things might end up confusing.

A Script, I've been using for a while to solve situations like this, I have now converted into a handy Bookmarklet.

LogFocus works in all Browsers that offer a Console. In Firefox you need Firebug. In Safari/WebKit you need to activate the "develop" Menue. For Internet Explorer I recommend using Companion.JS. In Opera the build in Console in Dragonfly is used.

To install the Bookmarklet simply drag the following Link into your Bookmarks.

LogFocus

From there you can run it on every Page by simply clicking on it.

2008-11-19 LogFocus - hilfreiches Bookmarklet beim Testen von Keyboard Accessibility

[switch to english Version of this Post]

Zugänglichkeit für Nutzer ohne Maus zu ermöglichen ist einer der größten und wichtigsten Schritte beim Aufbau einer barrierefreien Webseite. Beim Testen von Keyboard Accessibility findet man sich immer wieder nach dem Drücken der Tabtaste in der Situation: "Wo ist mein Cursor?" bzw. "welches Element hat eigentlich gerade den Focus?". Gerade bei Elementen die Offscreen verschoben wurden tappt/tabt man dann gerne und lang im dunkeln.

Ein Script, daß ich seit langen nutze um Licht in diese Situationen zu kriegen, habe ich nun in ein handliches Bookmarklet gekapselt.

LogFocus arbeitet in allen Browsern die eine Konsole zur Verfügung stellen. Im Firefox ist hierfür Firebug notwendig. Im Safari, bzw. WebKit, muss das "Develop" Menü aktiviert sein. Für Internet Explorer empfehle ich das Plugin Companion.JS. In Opera wird die eingebaute Konsole in Dragonfly genutzt.

Um das Bookmarklet zu installieren zieht man einfach den folgenden Link in die eigenen Bookmarks.

LogFocus

Von dort aus kann es dann einfach per Klick in jeder Seite ausgeführt werden.

2008-04-04 Artikel zu JavaScript Debugging Techniken

[switch to english Version of this Post]]

In seinem Artikel Advanced JavaScript Debugging Techniques bei sitepen listet Mike Wilcox eine grosse und interessante Menge von Methoden und Tools zum erfolgreichen Debuggen von Javascript in verschiedenen Browsern.

Zu den generellen Tipps gehört natürlich die Verwendung von JSLint zum checken der Syntax (hier kann ich übrigends das Javascript Tools Textmate Bundle von Herzen empfehlen, dass JSLint zusammen mit JSMin direkt in das wundervolle TextMate integriert). Ebenfalls ein wirkungsvoller Klassiker ist das Einfügen von nummerierten log bzw. alert Zeilen um Fehler einzukreisen.

Die Auflistung von Debugging Tools enthält, neben dem unentbehrlichen Firebug, auch einige Plugins für den Internet Explorer. Darunter auch ein Plugin dass ich noch nicht kannte, direkt installiert habe und fuer ausgesprochen hilfreich halte. Web Development Helper hat einen ähnlichen Funktionsumfang wie das bekanntere Debug Bar ist aber im Gegensatz dazu kostenfrei und nicht nur darum zu empfehlen.

2008-04-04 Article about advanced JavaScript Debugging Techniques

[deutsche Version dieses Beitrags anzeigen]

In his Article Advanced JavaScript Debugging Techniques at sitepen, Mike Wilcox lists a large amount of interesting Methods and Tools for successful Javascript Debugging in several Browsers.

A Part of the general Tips is of course the usage of JSLint for Syntax checking (BTW I highly recommend the Javascript Tools Textmate Bundle that seamlessly integrates JSLint as well as JSMin into the wonderful TextMate). A also very effective classic technique is the insertion of numbered log or alert commands to find the Line the Bug is hidden.

The Listing of Debugging Tools contains, besides the indispensable Firebug, also some Plugins for Internet Explorer. Among them there's also a Plugin I haven't heard about before, installed instantly and now think it's very useful. Web Development Helper has very similar Features as the better known Debug Bar but comes for free instead and is, not only therefore, absolutely recommendable.