Subscribe to RSS feed Abonneren op RSS-feed or of follow me follow me on Twitter? op Twitter?
Bookmarklets are bookmarks containing snippets of JavaScript code. Bookmarklets zijn bladwijzers met daarin stukjes JavaScript-code. They can be used to accomplish specific tasks. Ze kunnen gebruikt worden om specifieke taken. Web developers can quicken several common operations by using bookmarklets. Webontwikkelaars kunnen versnellen verscheidene gemeenschappelijke operaties met behulp van bookmarklets. Best of all, bookmarklets do not slow down your web browser like extensions do. Het beste van alles, doe bookmarklets niet vertragen uw web browser zoals uitbreidingen doen. For example, some of these bookmarklets together can effectively substitute the Web Developer Firefox addon (if you crave for them in other browsers). Zo kunnen sommige van deze bookmarklets effectief samen te vervangen door de Web Developer Firefox addon (als je hunkert voor hen in andere browsers).
To save these bookmarklets, just right click on the link to the bookmark and save it into your bookmark folder OR drag the bookmarklets to your Bookmarks toolbar. Exception: The first three bookmarklets (first two list elements) are links to pages containing the bookmarklets, as I found them difficult to embed here. Om deze bookmarklets opslaan, klik met de rechtermuisknop op de link naar de bookmark en bewaar het in uw bladwijzermap of sleep de bookmarklets aan uw bookmarks toolbar. Uitzondering: De eerste drie bookmarklets (eerste twee lijst-elementen) zijn links naar pagina's met de bookmarklets, zoals ik vond ze moeilijk te verankeren hier.
To use a bookmarklet, simply right-click on it and choose “Bookmark Link”. Als u een bookmarklet, gewoon klik met de rechtermuisknop op en kies "Bookmark Link". I would recommend placing them into a folder in the toolbar, so that any bookmarklet can be accessed with 2 clicks. Ik zou aanraden brengen ze in een map in de werkbalk, zodat eventuele bookmarklet kan worden benaderd met 2 klikken. I find that to be the least-cluttered and easiest-to-use arrangement. Ik vind dat als de minst rommelig en eenvoudigst te gebruiken regeling. Onto the bookmarklets then. Op de bookmarklets dan.
- Updated 07 July 2008: Bijgewerkt op 07 juli 2008:
XRAY XRAY : :
See the box model for any element on web pages. Zie de box model voor elk element op webpagina's. - Test Styles Test Styles and en Edit Styles Edit Styles : :
Test Styles gives you a new tab/window to type CSS rules for the original webpage. Test Styles geeft u een nieuw tabblad / venster te typen CSS-regels voor de oorspronkelijke webpagina. The styles are applied to the webpage immediately. De stijlen worden direct toegepast op de webpagina. Edit Styles is similar, except that you start with the CSS styles for the page. Edit Styles is vergelijkbaar, behalve dat u beginnen met de CSS-stijlen voor de pagina. [thanks, [Thanks, Nick Nick ] ] - W3C HTML Validator W3C HTML Validator : :
Validate the document that you are currently viewing. Bevestig het document dat u momenteel bekijkt. Great for on-the-fly validation checks while coding pages. Groot voor on-the-fly geldigheidscontroles terwijl codering pagina's. - W3C CSS Validator W3C CSS Validator : :
Validate the CSS of the webpage that you are currently viewing. Valideer de CSS van de webpagina die u momenteel bekijkt. Useful for quick checks during CSS coding. Handig voor snelle controles tijdens de CSS-codering. - Resize Viewport: Resize Viewport: 800×600 800 × 600 , , 1024×768 1024 × 768 , , 1280×1024 1280 × 1024 and en 1600×1200 1600 × 1200 : :
See how your web page looks like, in different resolutions. Zie hoe je webpagina eruit ziet, in verschillende resoluties. Quickly switch between 800×600 to 1600×1200, the two extreme resolutions normally considered in web design. Snel schakelen tussen 800 × 600 tot 1600 × 1200, de twee extreme resoluties regel als in web design. - View Cookies View Cookies and en Toss Cookies Toss Cookies : :
View the cookies stored by the current page (using the first link). Bekijk de cookies worden opgeslagen door de huidige pagina (via de eerste link). Then toss the cookies that you wish to, by using the second link. Dan gooien de cookies die u wilt, met behulp van de tweede link. - NetCraft Netcraft : :
Tells you server details of a site and displays uptime graph. Vertelt u de details van de server van een site en geeft uptime grafiek. - Replace with Alternate Text Vervangen door Alternatieve tekst : :
Useful to check for images that do not have alt tags. Nuttig om te controleren op beelden die geen alt tags. The downside is that it removes only <img> tags, leaving intact buttons and images created using CSS or sprites. Het nadeel is dat het verwijdert alleen <img> tags, waardoor intact knoppen en afbeeldingen die met behulp van CSS of sprites. - Alexa Snapshot Lookup Alexa Snapshot Lookup : :
Look up your website details and snapshot at Alexa, a popular web metrics website. Kijk uw website gegevens en momentopname op Alexa, een populaire web metrics website. - Whois Lookup Whois Lookup : :
Lookup the WhoIs of the domain you are on. Lookup de Whois van het domein u op. - Edit current website Edit huidige website : :
Edit the current page – add text, delete text, move web elements around etc. – all without the need for any other extension. Bewerk de huidige pagina - tekst toevoegen, tekst verwijderen, verplaatsen web elementen rond enz. - dit alles zonder de noodzaak voor een andere extensie. - Search selected text in Google Zoeken geselecteerde tekst in Google : :
Although not strictly related to web design/development, Google searches can be useful to look up various terms and techniques in presentation and scripting languages. Hoewel niet strikt gerelateerd aan web ontwerp / ontwikkeling, Google-zoekopdrachten kan nuttig zijn te zoeken verschillende termen en technieken in de presentatie en scripting talen. - Image Drag Afbeelding Drag : :
Drag and rearrange images seamlessly from within a page. Sleep en afbeeldingen te herschikken naadloos binnen een pagina. - Grab screenshot Grab screenshot : :
Grab a screenshot of the page that you are viewing, without using any other installed application. Pak een screenshot van de pagina die u bekijkt, zonder gebruik van een andere geïnstalleerde toepassing. - Color List Kleur Lijst ( ( use this Gebruik deze instead for IE): in plaats daarvan voor IE):
Lists colors used in the current webpage. Lijsten kleuren gebruikt in de huidige webpagina.
Further Bookmarklet resources Verdere Bookmarklet middelen
You might also want to read through these collections of bookmarklets: U kunt ook te lezen via deze collecties van bookmarklets:
- WebDev at Squarefree WebDev op squarefree : :
A large collection of bookmarklets useful for web designers and developers. Een grote verzameling van bookmarklets nuttig zijn voor webdesigners en ontwikkelaars. Maintained by Jesse Ruderman. Beheerd door Jesse Ruderman. - Useful bookmarklets for casual web users Handige bookmarklets voor casual webgebruikers : :
A guest post that I wrote on DailyApps.net. Een gast post die ik schreef op DailyApps.net. It lists useful bookmarklets for everyone. Het bevat nuttige bookmarklets voor iedereen. Most of them speed up or automate commonly used tasks, which no doubt helps designers and devs too. De meeste van hen versnellen of automatiseren van veelgebruikte taken, die ongetwijfeld helpt ontwerpers en ontwikkelaars ook.
As is usual with my resource posts, this list will be continuously updated as recommendations come in. Zoals gebruikelijk bij mijn bron posten, zal deze lijst voortdurend worden bijgewerkt als aanbevelingen komen inch Contact us Contacteer ons to recommend bookmarklets. te bookmarklets te bevelen. Tell us what are your favorite bookmarklets – for web development or otherwise – I'm sure we can all benefit from new bookmarklets shared by others. Vertel ons wat zijn je favoriete bookmarklets - voor web development of anderszins - ik weet zeker dat we kunnen allemaal profiteren van de nieuwe bookmarklets gedeeld door anderen.
Hello buddy!! Hallo buddy! i want to say that short but sweet link,you should also add differ browser list in which one can test his/her website by the way its good that you share it with us.Have a good day. Ik wil zeggen dat de korte maar zoete link, moet je ook toevoegen verschillen browser lijst waarin men kan testen zijn / haar website door de manier waarop haar goed dat u deze delen met us.Have een goede dag.
God bless you. God zegene je. Punne4e Punne4e
I find Ik https://www.squarefree.com/bookmarklets/webdevel.html#test_styles https: / / www.squarefree.com / bookmarklets / webdevel.html # test_styles invaluable – I'll create a HTML document, and then using that bookmarklet I can shape the stylesheet in realtime. onschatbare waarde - Ik maak een HTML-document en vervolgens met dat bookmarklet kan ik de vorm van de stylesheet in realtime. It's also very handy for writing user stylesheets. Het is ook erg handig voor het schrijven van gebruiker stylesheets.
This is pretty good, for those who are forced to do some work on the fly Dit is vrij goed, voor diegenen die worden gedwongen om wat werk te doen op de vlieg
@Nick Z: Excellent suggestion about style testing bookmarklet, will update the post soon. Z @ Nick: Uitstekend suggestie over stijl testen bookmarklet, zal de post updaten binnenkort.
Hi Sumesh, I just came across your blog. Hallo Sumesh, Ik kwam enkel over uw blog. Good work. Goed werk. Keep it up. Keep it up. Will try to read all your future posts. Zal proberen te lezen al uw toekomstige berichten.
Just saw how useful these shortcuts can be in a post by QQT, bookmarked for future uses Net zag hoe nuttig deze snelkoppelingen kunnen worden in een post door QQT, gebookmarkte voor toekomstige toepassingen
The “Edit current website” is a nice bookmarklet, but lacks what the “Live Website Editor” bookmarklet has to offer. De "Edit huidige website" is een mooie bookmarklet, maar mist wat de "Live Website Editor" bookmarklet te bieden heeft.
Among other things, it can persist the modifications made to any webpages (at least it's its purpose). Onder andere kan het nog steeds de wijzigingen aan elke webpagina's (tenminste het is het doel).
You can find it here: U kunt hier vinden: http://code.google.com/p/lwe/ http://code.google.com/p/lwe/
It's still in an early version but it works on most of the websites. Het is nog in een vroege versie, maar het werkt op de meeste van de websites.
Cheers Sante
@Arnaud L: @ Arnaud L:
That's a useful bookmarklet, and being persistent would likely be useful for many more web users. Dat is een handige bookmarklet, en dat aanhoudende waarschijnlijk nuttig zijn voor veel meer webgebruikers. I will post the bookmarklet in a future post rounding up more useful bookmarklets – so thanks for the recommendation. Ik zal na de bookmarklet in een toekomstige functie afronding meer nuttige bookmarklets - dus bedankt voor de aanbeveling.