Activating design mode<\/h3>\n\n\n
Design mode (styled as JavaScript has a mightily simple feature that can render an entire HTML document editable. It works exactly<\/em> like HTML\u2019s Next, type While I\u2019m not sure that \u201cdesign mode\u201d is the most accurate description of the feature, it\u2019s super useful nonetheless and it\u2019s actually been around for a really long time, surprisingly.<\/p>\n\n\n\n And what\u2019s even an even faster way to enable it? A bookmarklet, of course! Create a bookmark using When HTML elements don\u2019t have backgrounds, it can be difficult to visualize their bounds and\/or accurately measure the distance between them and other elements. Developers might want to better visualize bounds when dealing with optical imbalance<\/a> (i.e. when something \u201clooks off\u201d even though it\u2019s not), margin collapse<\/a> (when certain margins are ignored), various issues with Applying backgrounds means applying a semi-transparent background to all HTML elements in order to better visualize their bounds and spacings. It\u2019s something many of us commonly do by opening up DevTools then typing a CSS declaration like Once again, to create a bookmark, we\u2019re going to make a URL. Here\u2019s what we can use for this one:<\/p>\n\n\n\n We\u2019re using a semi-transparent background because the transparency stacks, which ensures that every nested element is distinguishable and the distances between them can be measured.<\/p>\n\n\n\n Have you ever had to test a web event that first requires a series of interactions, or certain conditions to be met? It\u2019s super time-consuming to have to test or debug these kinds of functionalities. This event simulation bookmarklet can be used to instantly trigger specific events, making testing a breeze.<\/p>\n\n\n\n Simulating an event means coding a \u201cthrowaway\u201d button that triggers a JavaScript event, making it much easier to quickly and repeatedly test the event without having to meet any usual user-facing conditions, like needing to be logged in.<\/p>\n\n\n\n Assuming that you have your JavaScript event listeners<\/a> set up, create a bookmark for each event that you\u2019d like to trigger\/simulate and submit the following URL:<\/p>\n\n\n\n Replace \u201cSELECTOR\u201d with your unique selector, replace \u201cclick\u201d with \u201cfocus\u201d or \u201cblur\u201d (when necessary), or extend the snippet to make it trigger more complex events, like scroll<\/a>.<\/p>\n\n\n Cookies are tokens that are stored on a website visitor\u2019s computer by the website that they\u2019re visiting. Cookies contain data that can be read by the website that created them until they\u2019ve exceeded their expiration date or have been deleted. The mere existence of a cookie can determine whether or not a visitor is logged in, whereas the data itself can store user information.<\/p>\n\n\n\n An example of a scenario where you might want to set a cookie using a bookmarklet is when you want to force a logged-in state during website testing. Websites often look very different for users that are logged in, however, logging in and out eventually becomes very tedious, so this bookmarklet can save quite a bit of time.<\/p>\n\n\n\n Manually writing You may want to add or remove a class from an HTML element in order to trigger a fresh state or a change in appearance, otherwise known as toggling classes. Class toggling happens behind the scenes of most live websites, but it can also be used during testing to skip having to meet certain user-facing conditions.<\/p>\n\n\n\n Class toggling can be used to trigger changes in appearance (e.g. alternative themes or states) and even animations, but it can be a little fiddly when doing it with developer tools when it\u2019s only for testing reasons (i.e. the website doesn\u2019t actually function that way for users). Similar to the other bookmarklets, use this one to rapidly toggle classes and save yourself time.<\/p>\n\n\n\n Create the following bookmarklet to target all elements that match your chosen \u201cSELECTOR\u201d, which, in turn, toggles the \u201cCLASS.\u201d<\/p>\n\n\n\n While not technically a \u201cbookmarklet,\u201d this bookmarkable data URI<\/a> by Scott Jehl opens up an So hey here’s my new color picker app! designMode<\/code> since it\u2019s a JavaScript property<\/em>) is for who like to experiment with variations of copy on a live website. For example, copywriters who like to observe how content reads within the flow of the website\u2019s design, or, say, designers who want to ensure that text fits comfortably within a certain space at a certain font size.<\/p>\n\n\n\ncontenteditable=\"true\"<\/code> name-value attribute (or contentEditable=\"true\"<\/code> in JavaScript) but for the whole document. If you\u2019d like to see how it works, start by entering the browser\u2019s console using the relevant keyboard shortcut:<\/p>\n\n\n\ndocument.designMode=\"on\"<\/code> into the console, hit Return<\/kbd><\/strong>, and then click on any text element. You\u2019ll see that this text element (and all other text elements) are now editable simply by clicking on them. This method of editing text on a live website is much<\/em> faster than having to open DevTools, then right-clicking and selecting the \u201cEdit Text\u201d option\u2026 and much<\/em> less tiresome.<\/p>\n\n\n\n![\"Showing](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/s_AD0F2C835CD10D108AFDFB2358D3DFA61BF124F97B3700E8E7CBFF36E9EAA31B_1644463898776_1.png?resize=2880%2C1800&ssl=1\")
javascript: document.designMode=\"on\";void 0;<\/code> as the URL.<\/p>\n\n\n\n![\"Showing](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/s_AD0F2C835CD10D108AFDFB2358D3DFA61BF124F97B3700E8E7CBFF36E9EAA31B_1644463919258_2.png?resize=2880%2C1800&ssl=1\")
<\/figure>\n\n\nApplying a background to everything<\/h3>\n\n\n
display:<\/code>\/float:<\/code>\/position:<\/code>, and more.<\/p>\n\n\n\nselector { background: rgb(0 0 0 \/ 10%); }<\/code> into the \u201cStyles\u201d box. But again, it\u2019s really<\/em> tiresome and repetitive \u2014 and something we can simplify with a bookmarklet.<\/p>\n\n\n\njavascript: document.querySelectorAll(\"*\").forEach(element => element.style.background=\"rgb(0 0 0 \/ 10%)\");<\/code><\/pre>\n\n\n\n![\"Showing](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/s_AD0F2C835CD10D108AFDFB2358D3DFA61BF124F97B3700E8E7CBFF36E9EAA31B_1644463956113_3.png?resize=2880%2C1800&ssl=1\")
Simulating events<\/h3>\n\n\n
javascript: document.querySelector(\"SELECTOR\").click();<\/code><\/pre>\n\n\n\nSetting cookies<\/h3>\n\n\n
expires=<\/code> dates for cookies is awkward as heck, but luckily this create-your-own-set-cookie-bookmarklet app<\/a> can generate a bookmarklet for a specific cookie, if you know its exact name.<\/p>\n\n\nToggling classes<\/h3>\n\n\n
javascript: document.querySelectorAll(\"SELECTOR\").forEach(element => element.classList.toggle(\"CLASS\"));<\/code><\/pre>\n\n\nColor widget bookmark<\/h3>\n\n\n
<input type=\"color\"><\/code> in a new tab:<\/p>\n\n\n\n
It’s um, just an HTML color input wrapped in a data URI so I can bookmark it. (Feel free to do so yourself):
data:text\/html;charset=utf-8,%3Chtml%3E%3Ctitle%3EColor Picker%3C%2Ftitle%3E%3Cinput type%3D”color”%3E%3C%2Fhtml%3E pic.twitter.com\/0QyFqAsUSq<\/a><\/p>\u2014 Scott Jehl (@scottjehl) August 19, 2021<\/a><\/blockquote>