Handy Bookmarklets

A few bookmarklets we have used that may help you debug and check your code.

To use any of the below simply drag them to your bookmarks bar. They all run on a single page. If it doesn't appear to do anything check the console as a lot of them output to the native browser console.

  • CSS Rule Counter

    console

    IE < 10 has an issue with a lot of rules. Check that your CSS doesn't fall into this trap. Click the button and check the console.

    Count CSS Rules

  • Online Audit

    console

    Checks the nesting level of headings in your source code and warns you of any issues in the browser console.

    Online Audit

  • HTML Codesniffer

    A very in-depth accessibility audit of a webpage. Goes into high levels of detail but has a handy UI.

    HTML Codesniffer

  • Gremlins

    Set the gremlins loose on your page! Clicks links, scrolls the page, fills in forms. Generally attempts to break things.

    Gremlins

  • tota11y

    A nice accessibility audit for your HTML page. Simple and easy to use with plenty of information.

    tota11y

  • Perfmap

    See how long each section/element on your page takes to load. The perfmap too shows performance results from the current page.

    Perfmap

  • Debug CSS

    A handy tool to see which selectors affect which elements and whether there are any issues.

    DebugCSS

  • Word Count

    Select some text and click the button. Simply tells you how many words there are.

    Word Count

  • Window Size

    Quickly and easily get the size of the currently active window/document.

    Window Size

  • Critical CSS

    console

    Get the CSS that is needed to show the top of your page only.

    Critical CSS

  • Highlight Sentence Size

    Quickly and easily get the size of the currently active window/document.

    Sentence Colouriser

  • Markup Audit

    Quickly and easily get the size of the currently active window/document.

    Run Audit

  • OptimusTime & Flex

    Open a Trello card from the Flex board or CM3000 in OptimusTime.

    OptimusTime

  • Add OptimusTime Button

    Adds an OptimusTime button to the list of cards on the Trello board.

    OptimusAdd