Skip to content

Instantly share code, notes, and snippets.

@magalhini

magalhini/web-bookmarklets.md

Last active April 2, 2017 22:41
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save magalhini/8f8a824e9496b2305b3d to your computer and use it in GitHub Desktop.
Save magalhini/8f8a824e9496b2305b3d to your computer and use it in GitHub Desktop.
Download ZIP
Web Development Bookmarklets
Raw
web-bookmarklets.md

A collection of useful bookmarklets to aid with the web design and development pains.

CSS

  • CSSDig Analyze your CSS in a new way. Consolidate, refactor, and gawk at the 37 shades of blue your site somehow ended up with.
  • CSS Stress It indexes all the elements and their classes, and then--class by class--it removes one, and times how long it takes to scroll the page.

JS

  • Perfmap A bookmarklet and Chrome extension to create a front-end performance heatmap of resources loaded in the browser using the Resource Timing API.
  • VisualEvent Visual Event is an open source Javascript bookmarklet which provides debugging information about events that have been attached to DOM elements.
  • Monkey Testing Monkey testing library written in JavaScript, for Node.js and the browser. Use it to check the robustness of web applications by unleashing a horde of undisciplined gremlins.

Web Design & RWD Tools

  • Viewport Resizer Viewport resizer is a browser-based tool to test any website’s responsiveness. Just save the bookmarklet, go to the page you want to test, click on your created bookmarklet and check all kinds of screen resolutions of the page.

Others

Quick text editor: data:text/html, <html contenteditable style="font-family: Georgia; width: 80%; max-width: 800px; margin: 0 auto; padding-top: 3em; font-size: 1.3em; line-height: 1.5;"><script>document.querySelector('html').focus();</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment