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
consoleIE < 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.
-
Online Audit
consoleChecks the nesting level of headings in your source code and warns you of any issues in the browser console.
-
HTML Codesniffer
A very in-depth accessibility audit of a webpage. Goes into high levels of detail but has a handy UI.
-
Gremlins
Set the gremlins loose on your page! Clicks links, scrolls the page, fills in forms. Generally attempts to break things.
-
tota11y
A nice accessibility audit for your HTML page. Simple and easy to use with plenty of information.
-
Perfmap
See how long each section/element on your page takes to load. The perfmap too shows performance results from the current page.
-
Debug CSS
A handy tool to see which selectors affect which elements and whether there are any issues.
-
Word Count
Select some text and click the button. Simply tells you how many words there are.
-
Highlight Sentence Size
Quickly and easily get the size of the currently active window/document.
-
Add OptimusTime Button
Adds an OptimusTime button to the list of cards on the Trello board.
-
BugHerd Auto-Archive
BugHerdAutomatically runs through the list of bugs in the Done column and archives them.