6 Useful Bookmarklets to Boost Web Development

Bookmarklets are JavaScript-based bookmarks that can be added to a web browser. This article will show you some powerful browser tips to help you improve your web development workflow and how to convert these tips into time-saving bookmark widgets.

1. Activate the design mode
2. Apply background for all elements
3. Simulate events
4. Set Cookies
5. Switch class
6. Color selector bookmark
7. What other bookmark gadgets can you think of?

Activate the design mode

Design Pattern (style with designMode since it is a JavaScript property) is suitable for people who like to experiment with different copy changes on real-time websites. For example, a copywriter who likes to observe the effect of reading content in a website design process, or a designer who wants to make sure the text is comfortable to fit in a specific space at a specific font size.

JavaScript has a very simple feature that makes the entire HTML document editable. It works exactly the same as the HTML's contenteditable="true" name value attribute (or contentEditable="true" in JavaScript), but works throughout the document. If you want to understand how it works, first use the relevant keyboard shortcuts to open the browser's console:

• Chrome: Option ⌘ J / Shift CTRL J
• Firefox: Option ⌘ K / Shift CTRL K
• Safari: Option ⌘ C / Shift CTRL C

Next, type document.designMode="on" in the console, press Return , and then click any text element. You will see that you can edit these text elements (and all other text elements) by simply clicking on them. This way of editing text on a live website is much faster and much less effort than opening DevTools, right-clicking and selecting the Edit Text option.

While I'm not sure if "Design Pattern" is the most accurate description of the feature, it's still very useful and, surprisingly, it's been around for a long time.

So, what is the faster way to enable it? Of course it's a bookmark gadget! Create a bookmark using javascript: document.designMode="on";void 0; as a URL.

Apply background for all elements

When HTML elements have no background, it is difficult to visualize their boundaries and/or accurately measure their distance from other elements. Developers may need to better visualize boundaries when dealing with visual imbalances (i.e., even if something "looks wrong" but isn't actually the case), margin folding (ignoring certain margins), various display:/float:/position: issues, etc.

Applying background means applying a translucent background for all HTML elements to better visualize their boundaries and spacing. Many of us usually do this by opening DevTools and typing a CSS statement like selector { background: rgb(0 0 0 / 10%); } in the Style box. However, this is still very laborious and repetitive – we can use the bookmark widget to simplify it.

Again, to create a bookmark, we will create a URL. Here is what we can use for this:

 javascript: document.querySelectorAll("*").forEach(element => element.style.background="rgb(0 0 0 / 10%)");

We use a translucent background because transparency overlays, which ensures that each nested element is distinguishable and that the distance between them can be measured.

Simulate events

Have you ever needed to test a web event that first requires a series of interactions or meets certain conditions? Testing or debugging these types of features is time-consuming. This event simulation bookmark widget can be used to trigger specific events immediately, making testing a breeze.

Simulating events means writing a "temporary" button to trigger JavaScript events, making it easier to test events quickly and repeatedly without meeting any common user interface conditions, such as login required.

Assuming you have set up a JavaScript event listener, create a bookmark for each event you want to trigger/mock and submit the following URL:

 javascript: document.querySelector("SELECTOR").click();

Replace "SELECTOR" with your only selector, replace "click" with "focus" or "blur" (if necessary), or extend the code snippet to make it trigger more complex events such as scrolling.

Set Cookies

A cookie is a token stored on the website visitor's computer by a website visitor. Cookies contain data that can be read by the website where they are created until they exceed their expiration date or have been deleted. The existence of a cookie itself determines whether the visitor is logged in, while the data itself can store user information.

An example scenario where you might want to set cookies using the bookmark widget is when you want to force login during a website testing period. Websites usually look very different when logged in and not logged in, but logging in and logging out can end up being very cumbersome, so this bookmark widget can save a lot of time.

Writing expires= dates for cookies manually is very troublesome, but luckily this creates your own settings Cookie Bookmarks widget application can generate bookmarks widgets for specific cookies if you know its exact name.

Switch class

You may want to add or delete classes to HTML elements to trigger a new state or appearance change, also known as a toggle class. Class switches occur behind the scenes of most live websites, but it can also be used to skip satisfying certain user interface conditions during testing.

Class toggles can be used to trigger appearance changes (such as alternate themes or states) or even animations, but using developer tools can be a little tricky when it is only for testing purposes (i.e. the website isn't actually running for users in this way). Similar to other bookmark widgets, this bookmark widget can quickly switch classes and save time.

Create the following bookmark widget to locate all elements that match the SELECTOR of your choice, which in turn will toggle 'CLASS'.

 javascript: document.querySelectorAll("SELECTOR").forEach(element => element.classList.toggle("CLASS"));

Color selector bookmark

While it is not a "bookmarking gadget" technically, this bookmarkable data URI by Scott Jehl opens a new tab:

So, here is my new color picker app! It's just an HTML color input included in the data URI, so I can bookmark it. (You can add it yourself):

data:text/html;charset=utf-8, <title>Color Picker</title> <input type="color">

Why is this cool? Well, how many times do you need to get the color value from the page, only to find yourself opening DevTools, clicking on a bunch of elements, and double-checking the CSS properties to find that value? It's better to run this gadget, click on the element, and get the color right away!

What other bookmark gadgets can you think of?

Are there any overly duplicate web development workflows that require sometimes cumbersome developer tools that you use your web browser? If so, it's very easy to create your own time-saving bookmark widget. Just remember to start with javascript:

If you have created a bookmark widget to simplify your workflow, I would love to see it! Please share them in the comments and let's create a nice collection.

The above is the detailed content of 6 Useful Bookmarklets to Boost Web Development. For more information, please follow other related articles on the PHP Chinese website!