# Three web development bookmarklets

DevFeed: [Three web development bookmarklets](<https://devfeed.tech/articles/three-web-development-bookmarklets-37364.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/three-web-development-bookmarklets/>)

Author: Stanko

Published: 2019-08-17T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [Development](<https://devfeed.tech/topics/development.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [Snippet](<https://devfeed.tech/topics/snippet.md>), [dev-tools](<https://devfeed.tech/topics/dev-tools.md>), [browser](<https://devfeed.tech/topics/browser.md>), [Code](<https://devfeed.tech/topics/code.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [console](<https://devfeed.tech/topics/console.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [code](<https://devfeed.tech/tags/code.md>), [console](<https://devfeed.tech/tags/console.md>), [developer-tools](<https://devfeed.tech/tags/developer-tools.md>), [development](<https://devfeed.tech/tags/development.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [snippet](<https://devfeed.tech/tags/snippet.md>), [web-development](<https://devfeed.tech/tags/web-development.md>)

## AI overview

A developer shares three browser bookmarklets for web development: identifying elements that cause horizontal scrolling, making page text editable, and toggling between right-to-left and left-to-right layout directions.

## Source excerpt

Today I want to share three bookmarklets I love to use in development. You can add them to your browser, by creating a new bookmark and entering bookmarklet code instead of URL. Clicking on a bookmarkletI usually keep them in the bookmarks bar to make them easier to find. , will run the code snippet on the page you are currently on. For each bookmarklet I added a button to try it on this page. Find elements causing horizontal scroll # I found this one long time ago, and I have been copy-pasting it to every new machine since. It is super practical and it will highlight and log all elements that are causing pesky horizontal page scroll. javascript:void(function () { var documentWidth = document.documentElement.offsetWidth; var treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT); while (treeWalker.nextNode()) { var rect = treeWalker.currentNode.getBoundingClientRect(); if (rect.right > documentWidth || rect.left < 0) { treeWalker.currentNode.style.setProperty('outline', '1px dotted red', 'important'); console.log(treeWalker.currentNode); } }; }()); One line version: javascript:void(function () { var documentWidth = document.documentElement.offsetWidth; var treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT); while (treeWalker.nextNode()) { var rect = treeWalker.currentNode.getBoundingClientRect(); if (rect.right > documentWidth || rect.left < 0) { treeWalker.currentNode.style.setProperty('outline', '1px dotted red', 'important'); console.log(treeWalker.currentNode); } }; }()); Horizontal scroll detection Please note that my site has overflow-x: hidden on the content area. Make page editable # This will set contenteditable to true, allowing you to edit any text on the page. You can do the same thing using developer tools, but this one is just a little bit faster (and easier for non-developers). javascript:void(function () { document.body.contentEditable = 'true'; document.designMode = 'on'; }()); One line version: ja