Bookmarklets

These helper tools are to be used as bookmarks in your browser. The link is what you want to bookmark. The code underneath is the abbreviated documentation, indicating what the bookmarklet does. For each actual link, the documented code is wrapped inside additional code, to ensure the functionality is executed for the main window and every iframe on a page.

Some of the bookmarklets shown below change behaviour depending on how often you apply them. E.g., clicking a bookmarklet once modifies the page, clicking it again restores its original form. Read the description to find out how they work.

Trigger debug info

Turns George Design System debug information on.

Toggle all styles

Removes/restores all references to stylesheets and all inline styles. (Also adds/removes some smart defaults, i.e. adds table borders, highlights visually hidden text, and makes all inline SVGs 16x16 pixels in size.)

Shows/hides visually hidden text, i.e. text for assistive technology such as screen readers.

Toggle enlarged touch targets

Shows/hides touch targets, i.e. adds an outline to links and buttons that have a touch target area larger than the actual element. On focus, the outline style changes, so you can pinpoint which outline belongs to which element.

HINT Might result in false positives on complex elements.

Toggle mouse cursor

Shows/hides the mouse cursor in the current browser window. Use it to prevent cheating when testing keyboard accessibility.

Highlight BS4 DEPRECATED

Adds/removes a highlighting colour to all occurrences of .g-bootstrap.g-bs4 in George.
HINT This also works in the George Design System itself.

Please use “Trigger Debug Info” instead.