Subscribe to RSS feed Abonnez-vous aux flux RSS or ou follow me suivez-moi on Twitter? sur Twitter?
Bookmarklets are bookmarks containing snippets of JavaScript code. Bookmarklets sont des marque-pages contenant des extraits de code JavaScript. They can be used to accomplish specific tasks. Ils peuvent être utilisés pour accomplir des tâches spécifiques. Web developers can quicken several common operations by using bookmarklets. Les développeurs Web peuvent Quicken plusieurs opérations courantes à l'aide bookmarklets. Best of all, bookmarklets do not slow down your web browser like extensions do. Le meilleur de tous, bookmarklets ne ralentit pas votre navigateur Web comme des extensions faire. For example, some of these bookmarklets together can effectively substitute the Web Developer Firefox addon (if you crave for them in other browsers). Par exemple, certains de ces bookmarklets, ensemble, peuvent se substituer efficacement sur le Web Developer addon Firefox (si vous avez envie pour eux dans d'autres navigateurs).
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. Pour sauvegarder ces bookmarklets, il suffit de cliquer droit sur le lien vers le signet et l'enregistrer dans votre dossier de signets ou faites glisser le bookmarklets à votre barre des signets. Exception: Les trois premiers bookmarklets (les deux premiers éléments de la liste) sont des liens vers des pages contenant les bookmarklets, comme je trouve qu'ils sont difficiles à intégrer ici.
To use a bookmarklet, simply right-click on it and choose “Bookmark Link”. Pour utiliser un bookmarklet, simplement un clic droit dessus et choisissez "Lien vers un signet". I would recommend placing them into a folder in the toolbar, so that any bookmarklet can be accessed with 2 clicks. Je recommande de les placer dans un dossier dans la barre d'outils, de sorte que toute bookmarklet peut être consulté en 2 clics. I find that to be the least-cluttered and easiest-to-use arrangement. Je trouve que, pour être les moins encombré et facile-à-accord d'utilisation. Onto the bookmarklets then. Sur le bookmarklets alors.
- Updated 07 July 2008: Mise à jour 07 Juillet 2008:
XRAY XRAY : :
See the box model for any element on web pages. Voir le modèle de boîte pour tout élément sur les pages web. - Test Styles Tester de nouveaux styles and et Edit Styles Modifier les styles : :
Test Styles gives you a new tab/window to type CSS rules for the original webpage. Tester de nouveaux styles vous donne un nouvel onglet / fenêtre pour taper des règles CSS de la page Web d'origine. The styles are applied to the webpage immediately. Les styles sont appliqués à la page immédiatement. Edit Styles is similar, except that you start with the CSS styles for the page. Modifier des styles est similaire, sauf que vous commencez avec les styles CSS pour la page. [thanks, [merci, Nick Nick ] ] - W3C HTML Validator Le validateur HTML du W3C : :
Validate the document that you are currently viewing. Valider le document que vous consultez actuellement. Great for on-the-fly validation checks while coding pages. Great for on-the-fly contrôles de validation pour le codage pages. - W3C CSS Validator W3C CSS Validator : :
Validate the CSS of the webpage that you are currently viewing. Valider le CSS de la page Web que vous consultez actuellement. Useful for quick checks during CSS coding. Utile pour les contrôles rapides durant le codage CSS. - Resize Viewport: Redimensionner Viewport: 800×600 800 × 600 , , 1024×768 1024 × 768 , , 1280×1024 1280 × 1024 and et 1600×1200 1600 × 1200 : :
See how your web page looks like, in different resolutions. Voyez comment votre page Web ressemble, dans différentes résolutions. Quickly switch between 800×600 to 1600×1200, the two extreme resolutions normally considered in web design. Basculer rapidement entre 800 × 600 à 1600 × 1200, les deux résolutions extrêmes normalement pris en compte dans la conception Web. - View Cookies View Cookies and et Toss Cookies Toss Cookies : :
View the cookies stored by the current page (using the first link). Voir les cookies stockés par la page en cours (en utilisant le premier lien). Then toss the cookies that you wish to, by using the second link. Puis de jeter les cookies que vous désirez, en utilisant le deuxième lien. - NetCraft NetCraft : :
Tells you server details of a site and displays uptime graph. Vous indique les détails du serveur d'un site et affiche le graphique uptime. - Replace with Alternate Text Remplacer par Texte alternatif : :
Useful to check for images that do not have alt tags. Utile pour vérifier s'il ya des images qui n'ont pas les balises alt. The downside is that it removes only <img> tags, leaving intact buttons and images created using CSS or sprites. L'inconvénient est qu'il ne supprime que les <img>, laissant intactes les boutons et les images créées à l'aide CSS ou sprites. - Alexa Snapshot Lookup Alexa Snapshot Lookup : :
Look up your website details and snapshot at Alexa, a popular web metrics website. Regardez les détails de votre site Web et instantané à Alexa, un site web metrics populaires. - Whois Lookup Recherche Whois : :
Lookup the WhoIs of the domain you are on. Lookup le Whois du domaine vous vous trouvez. - Edit current website Modifier site web actuel : :
Edit the current page – add text, delete text, move web elements around etc. – all without the need for any other extension. Éditer la page courante - ajouter du texte, supprimer du texte, déplacer des éléments de toile tout autour, etc - tout cela sans la nécessité d'une toute autre extension. - Search selected text in Google Recherche texte sélectionné dans 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. Bien que n'étant pas strictement liés à la conception de sites Web / développement, les recherches Google peut être utile de rechercher des termes différents et des techniques de présentation et de langages de script. - Image Drag Faites glisser l'image : :
Drag and rearrange images seamlessly from within a page. Faites glisser et réorganiser des images de manière transparente à partir d'une page. - Grab screenshot Grab screenshot : :
Grab a screenshot of the page that you are viewing, without using any other installed application. Prenez un screenshot de la page que vous voyez, sans utiliser n'importe quelle application installée autre. - Color List Color list ( ( use this utiliser cette instead for IE): plutôt que pour IE):
Lists colors used in the current webpage. Listes de couleurs utilisées dans la page Web en cours.
Further Bookmarklet resources D'autres ressources Bookmarklet
You might also want to read through these collections of bookmarklets: Vous pouvez aussi lire ces collections de bookmarklets:
- WebDev at Squarefree WebDev à squarefree : :
A large collection of bookmarklets useful for web designers and developers. Une grande collection de bookmarklets utile pour les concepteurs et les développeurs Web. Maintained by Jesse Ruderman. Maintenu par Jesse Ruderman. - Useful bookmarklets for casual web users Bookmarklets utiles pour les internautes occasionnels : :
A guest post that I wrote on DailyApps.net. Un poste de l'utilisateur que j'ai écrit sur DailyApps.net. It lists useful bookmarklets for everyone. Il énumère bookmarklets utile pour tout le monde. Most of them speed up or automate commonly used tasks, which no doubt helps designers and devs too. La plupart d'entre elles accélérer ou automatiser des tâches fréquemment utilisées, ce qui contribue sans aucun doute les concepteurs et les développeurs aussi.
As is usual with my resource posts, this list will be continuously updated as recommendations come in. Comme c'est habituel avec mes posts de ressources, cette liste sera continuellement mis à jour en tant que recommandations entrent en jeu. Contact us Contactez-nous to recommend bookmarklets. de recommander bookmarklets. 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. Dites-nous quels sont vos bookmarklets préférés - pour le développement web ou autre - je suis sûr que nous pouvons tous bénéficier de bookmarklets nouveau partagé par d'autres.
Hello buddy!! Bonjour copain! 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. Je tiens à dire que le lien court mais sympathique, vous devriez également ajouter diffèrent navigateur liste dans laquelle on peut tester son site web par la façon dont bon que vous le partagez avec us.Have une bonne journée.
God bless you. Que Dieu vous bénisse. Punne4e Punne4e
I find Je trouve 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. précieux - je vais créer un document HTML, puis en utilisant cette bookmarklet je peux façonner la feuille de style en temps réel. It's also very handy for writing user stylesheets. C'est aussi très pratique pour écrire des feuilles de styles utilisateur.
This is pretty good, for those who are forced to do some work on the fly This is pretty good, pour ceux qui sont obligés de travailler un peu à la volée
@Nick Z: Excellent suggestion about style testing bookmarklet, will update the post soon. Nick @ Z: Excellent suggestion à propos bookmarklet essais de style, mettra à jour le poste bientôt.
Hi Sumesh, I just came across your blog. Sumesh Salut, je viens de tombé sur votre blog. Good work. Bon travail. Keep it up. Keep it up. Will try to read all your future posts. Essaiera de lire tous vos messages à venir.
Just saw how useful these shortcuts can be in a post by QQT, bookmarked for future uses Juste vu l'utilité de ces raccourcis peuvent être dans un message par QQT, mise en signet pour des utilisations futures
The “Edit current website” is a nice bookmarklet, but lacks what the “Live Website Editor” bookmarklet has to offer. Le «Modifier site actuel" est un bookmarklet gentil, mais il lui manque ce que le "Live Site Web Editor" bookmarklet a à offrir.
Among other things, it can persist the modifications made to any webpages (at least it's its purpose). Entre autres choses, il peut persister les modifications apportées à toute les pages Web (au moins c'est son but).
You can find it here: Vous pouvez le trouver ici: 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. Il est toujours dans une première version mais il fonctionne sur la plupart des sites web.
Cheers À la vôtre
@Arnaud L: Arnaud @ L:
That's a useful bookmarklet, and being persistent would likely be useful for many more web users. C'est un bookmarklet utile, et étant persistante serait probablement utile pour de nombreux utilisateurs du web plus. I will post the bookmarklet in a future post rounding up more useful bookmarklets – so thanks for the recommendation. Je vais poster le bookmarklet dans un futur post rafles bookmarklets plus utile - et vous remercions de la recommandation.