A Bookmarklet is a bookmark for your browser that will not simply take you to a new site or page, but will perform JavaScript within the context of the current page. This opens up the potential for a LOT of powerful tools, tailored to your needs. To install a bookmarklet, simply drag the link below into your bookmarks bar.
As a web developer currently focused on WordPress, I have several in my browsers which I use on a daily basis:
- To Dev
- When I have a development server at DEV.___.com and the live site at WWW.___.com, this inspects the current page and brings you to the DEV version of it.
<a href="javascript:(function()%7Bvar url %3D window.location.toString()%3Bwindow.location %3D url.replace(%2Fwww.%2F%2C 'dev.')%7D)()">To Dev</a> - To WWW
- When I have a development server at DEV.___.com and the live site at WWW.___.com, this inspects the current page and brings you to the WWW version of it.
- WordPress Dashboard
- Append /wp-admin to the base URL to open the WordPress Dashboard for the current site.
<a href="javascript:(function()%7Bconst adminUrl %3D '%2F%2F' %2B window.location.href.split('%2F')%5B2%5D %2B '%2Fwp-admin'%3Bwindow.location.href%3DadminUrl%7D)()">WordPress Dashboard</a> - WordPress Dashboard New Tab
- Same as above, but it opens in a new tab instead of the current one.
- WCAG Sanity Check AI Generated
- A simple summary of WCAG accessibility issues on your page. This does not perform a thorough audit, but acts as a starting point.
- Design Mode
- Toggles Design Mode, allowing you to edit the text of the current page in memory.
Coding these by hand gets tricky to get the proper encoding for special characters. To create your own using either vanilla JavaScript or jQuery, visit https://mrcoles.com/bookmarklet/