Some bookmarklets that I use for front end web development. Unless otherwise noted, I wrote these.
- Breakpoint Backgrounds: Adds body background colors to indicate tablet (teal), mobile (magenta) and widescreen (orange) browser widths.
- View Source: Prepends
view-source:to current URL to view source code delivered to client (browser).
- Viewport Resizer: Adds a toolbar to top of viewport which demonstrates content in common mobile viewports and reports current viewport size. By Malte Wassermann
- What Font: Displays font styles when hovered. By Chengyin Liu.
- Show Anchors: Finds all elements with IDs, and gives you a copyable in-page link for them. Originally by Senseful Solutions, but I've added an autosensing protocol for jQuery import.
Create a new bookmark in your browser and give it a name. Paste any bookmarklet's source code into the location field. Load the URL that you want to use the bookmarklet on, and then click the bookmarklet to run it.