Subscribe to RSS feed RSS-Feed abonnieren or oder follow me Follow me on Twitter? auf Twitter?
Bookmarklets are bookmarks containing snippets of JavaScript code. Bookmarklets sind Lesezeichen enthält Auszüge von JavaScript-Code. They can be used to accomplish specific tasks. Sie können verwendet werden, um bestimmte Aufgaben zu erfüllen. Web developers can quicken several common operations by using bookmarklets. Web-Entwickler können mehrere gemeinsame Operationen zu beschleunigen, indem Sie Bookmarklets. Best of all, bookmarklets do not slow down your web browser like extensions do. Best of all, don't slow down Bookmarklets nicht Ihren Web-Browser wie Erweiterungen zu tun. For example, some of these bookmarklets together can effectively substitute the Web Developer Firefox addon (if you crave for them in other browsers). Zum Beispiel können einige dieser Bookmarklets zusammen effektiv ersetzen Sie die Web Developer Firefox Addon (wenn Sie sehnen sich für sie in anderen Browsern).
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. Um diese Bookmarklets zu speichern, einfach mit der rechten Maustaste auf den Link, um das Lesezeichen und speichern Sie es in Ihren Lesezeichen-Ordner oder ziehen Sie die Bookmarklets auf Ihre Lesezeichen-Symbolleiste. Ausnahme: Die ersten drei Bookmarklets (die ersten beiden Listenelemente) sind Links zu Seiten mit den Bookmarklets, wie ich sie nur schwer zu verankern Sie hier.
To use a bookmarklet, simply right-click on it and choose “Bookmark Link”. Um ein Bookmarklet, einfach mit der rechten Maustaste darauf und wählen "Lesezeichen-Link" zu verwenden. I would recommend placing them into a folder in the toolbar, so that any bookmarklet can be accessed with 2 clicks. Ich würde empfehlen, indem sie in einen Ordner in der Symbolleiste, so dass jeder Bookmarklet können mit 2 Klicks abgerufen werden. I find that to be the least-cluttered and easiest-to-use arrangement. Ich finde, dass zu den am wenigsten überfüllt und am einfachsten zu bedienende Anordnung. Onto the bookmarklets then. Auf die Bookmarklets dann.
- Updated 07 July 2008: Aktualisiert 07 Juli 2008:
XRAY XRAY : :
See the box model for any element on web pages. Sehen Sie sich die Box-Modell für jedes Element auf Web-Seiten. - Test Styles Test Styles and und Edit Styles Stile bearbeiten : :
Test Styles gives you a new tab/window to type CSS rules for the original webpage. Test Styles gibt Ihnen einen neuen Tab / Fenster-Typ CSS-Regeln für die Original-Webseite. The styles are applied to the webpage immediately. Die Styles sind auf die Webseite sofort angewendet. Edit Styles is similar, except that you start with the CSS styles for the page. Stile bearbeiten ist ähnlich, außer dass Sie mit den CSS-Stile für die Seite zu starten. [thanks, [Dank, Nick Nick ] ] - W3C HTML Validator W3C HTML Validator : :
Validate the document that you are currently viewing. Überprüfen Sie das Dokument, das Sie momentan betrachten. Great for on-the-fly validation checks while coding pages. Great for on-the-fly während Validierungsprüfungen Codierung Seiten. - W3C CSS Validator W3C CSS-Validator : :
Validate the CSS of the webpage that you are currently viewing. CSS validieren der Webseite, die Sie momentan betrachten. Useful for quick checks during CSS coding. Nützlich für schnelle Kontrollen während der CSS-Codierung. - Resize Viewport: Resize Schauglas: 800×600 800 × 600 , , 1024×768 1024 × 768 , , 1280×1024 1280 × 1024 and und 1600×1200 1600 × 1200 : :
See how your web page looks like, in different resolutions. Sehen Sie, wie Ihre Web-Seite aussieht, in verschiedenen Auflösungen. Quickly switch between 800×600 to 1600×1200, the two extreme resolutions normally considered in web design. Schnelles Umschalten zwischen 800 × 600 bis 1600 × 1200, in der Regel die beiden extremen Auflösungen als in Web-Design. - View Cookies View Cookies and und Toss Cookies Toss Cookies : :
View the cookies stored by the current page (using the first link). Sehen Sie sich die gespeicherten Cookies von der aktuellen Seite (mit dem ersten Link). Then toss the cookies that you wish to, by using the second link. Dann werfen Sie die Cookies, die Sie wollen, indem Sie den zweiten Link. - NetCraft NetCraft : :
Tells you server details of a site and displays uptime graph. Sagt Ihnen, Server-Daten der Web-Seite und zeigt uptime graph. - Replace with Alternate Text Ersetzen durch Alternativer Text : :
Useful to check for images that do not have alt tags. Zur Prüfung auf die Bilder, die nicht alt tags. The downside is that it removes only <img> tags, leaving intact buttons and images created using CSS or sprites. Der Nachteil ist, dass es entfernt nur <img>, intakt ließ, Schaltflächen und Bilder erstellt mit Hilfe von CSS oder Sprites. - Alexa Snapshot Lookup Alexa Snapshot-Lookup : :
Look up your website details and snapshot at Alexa, a popular web metrics website. Schlagen Sie Ihre Website Details und Snapshot auf Alexa, einem beliebten Web-Metriken Website. - Whois Lookup Whois Lookup : :
Lookup the WhoIs of the domain you are on. Lookup die WhoIs der Domain Sie sich befinden. - Edit current website Bearbeiten der aktuellen Website : :
Edit the current page – add text, delete text, move web elements around etc. – all without the need for any other extension. Bearbeiten Sie die aktuelle Seite - Text hinzufügen, löschen, Text, um Web-Elemente verschieben usw. - alles ohne die Notwendigkeit einer anderen Endung. - Search selected text in Google Suche ausgewählten Text 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. Obwohl nicht unbedingt auf dem Web-Design / Entwicklung, Google-Suche kann nützlich sein, zu sehen bis verschiedenen Begriffe und Techniken, die in Aufmachung und Scripting-Sprachen. - Image Drag Image Drag : :
Drag and rearrange images seamlessly from within a page. Ziehen Sie die Bilder und ordnen sich nahtlos innerhalb einer Seite. - Grab screenshot Grab Screenshot : :
Grab a screenshot of the page that you are viewing, without using any other installed application. Schnappen Sie sich ein Screenshot der Seite, die Sie gerade sind, ohne Verwendung von anderen installierten Anwendung. - Color List Color Liste ( ( use this Mit diesem instead for IE): Statt für IE):
Lists colors used in the current webpage. Listen verwendeten Farben in der aktuellen Webseite.
Further Bookmarklet resources Weitere Ressourcen Bookmarklet
You might also want to read through these collections of bookmarklets: Vielleicht wollen Sie auch durch diese Sammlungen von Bookmarklets zu lesen:
- WebDev at Squarefree WebDev auf quadratfrei : :
A large collection of bookmarklets useful for web designers and developers. Eine große Sammlung von nützlichen Bookmarklets für Webdesigner und Entwickler. Maintained by Jesse Ruderman. Verwaltet von Jesse Ruderman. - Useful bookmarklets for casual web users Nützliche Bookmarklets für Gelegenheitsspieler Web-Benutzer : :
A guest post that I wrote on DailyApps.net. Ein Gast nach, dass ich schrieb am DailyApps.net. It lists useful bookmarklets for everyone. Es listet nützliche Bookmarklets für jedermann. Most of them speed up or automate commonly used tasks, which no doubt helps designers and devs too. Die meisten von ihnen beschleunigen oder zu automatisieren, häufig verwendete Aufgaben, die ohne Zweifel hilft Designern und Entwicklern zu.
As is usual with my resource posts, this list will be continuously updated as recommendations come in. Wie es mit meiner Ressource Beiträge üblich, wird diese Liste kontinuierlich Empfehlungen hereinkommen aktualisiert werden Contact us Kontaktieren Sie uns to recommend bookmarklets. Bookmarklets zu empfehlen. 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. Erzähl uns, was sind Ihre Lieblings-Bookmarklets - für Web-Entwicklung oder nicht - ich bin sicher, wir können alle von den neuen Bookmarklets von anderen geteilt zu profitieren.
Hello buddy!! Hallo Kumpel! 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. Ich möchte sagen, dass kurze, aber süß Link, sollte man hinzufügen, unterscheiden sich auch Browser-Liste, in der ein Test kann seine Website durch die Art und Weise gut, dass Sie es gemeinsam mit us.Have ein guter Tag.
God bless you. Gott segne Sie. Punne4e Punne4e
I find Ich finde 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. von unschätzbarem Wert - Ich werde ein HTML-Dokument erstellen und dann unter Verwendung dieses Bookmarklet Ich kann das Stylesheet in Echtzeit zu gestalten. It's also very handy for writing user stylesheets. Es ist auch sehr praktisch für das Schreiben von Benutzer-Stylesheets.
This is pretty good, for those who are forced to do some work on the fly This is pretty good, für diejenigen, die gezwungen sind, eine Arbeit tun, on the fly "
@Nick Z: Excellent suggestion about style testing bookmarklet, will update the post soon. @ Nick Z: Excellent Vorschlag über den Stil Tests Bookmarklet, wird die Post Update in Kürze.
Hi Sumesh, I just came across your blog. Sumesh Hallo, ich komme in Ihr Blog. Good work. Gute Arbeit. Keep it up. Keep it up. Will try to read all your future posts. Werden versuchen, alle Ihre zukünftigen Beiträge zu lesen.
Just saw how useful these shortcuts can be in a post by QQT, bookmarked for future uses Gerade gesehen, wie nützlich diese Verknüpfungen können in einem Beitrag von QQT werden, für künftige Nutzungen vorgemerkt
The “Edit current website” is a nice bookmarklet, but lacks what the “Live Website Editor” bookmarklet has to offer. Das "Edit aktuellen Website" ist ein nettes Bookmarklet, aber das fehlt, was die "Live-Website-Editor" Bookmarklet zu bieten hat.
Among other things, it can persist the modifications made to any webpages (at least it's its purpose). Unter anderem kann es bleiben die Änderungen an allen Seiten aus (zumindest ist es seinen Zweck).
You can find it here: Sie finden ihn hier: 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. Es ist immer noch in einer frühen Version, aber es funktioniert auf den meisten Websites.
Cheers Prost
@Arnaud L: @ Arnaud L:
That's a useful bookmarklet, and being persistent would likely be useful for many more web users. Das ist ein nützliches Bookmarklet, und sie persistent wäre wahrscheinlich für viele weitere Web-Benutzer nützlich sein. I will post the bookmarklet in a future post rounding up more useful bookmarklets – so thanks for the recommendation. Ich werde das Bookmarklet in einem künftigen Posten Aufrundung weitere nützliche Bookmarklets - und bedanken uns für die Empfehlung.