Subscribe to RSS feed Підписатися на RSS-канал or або follow me Follow Me on Twitter? на Twitter?
Bookmarklets are bookmarks containing snippets of JavaScript code. Bookmarklets таке закладку містять фрагменти коду JavaScript. They can be used to accomplish specific tasks. Вони можуть бути використані для виконання конкретних завдань. Web developers can quicken several common operations by using bookmarklets. Веб-розробники можуть прискорити кілька спільних операцій за допомогою букмарклет. Best of all, bookmarklets do not slow down your web browser like extensions do. Краще за все, букмарклет не уповільнює ваш браузер як розширення. For example, some of these bookmarklets together can effectively substitute the Web Developer Firefox addon (if you crave for them in other browsers). Наприклад, деякі з цих букмарклет разом може ефективно замінити веб-розробників Firefox Addon (якщо ви прагнете для них в інших браузерах).
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. Щоб зберегти ці букмарклет, просто клацніть правою кнопкою мишки на посилання для закладки та збережіть його в папку з закладками або перетягнути букмарклет на панель інструментів "Закладки". Виняток: перші три букмарклет (перших двох елементів списку) є посиланнями на сторінки, що містять букмарклет, як я знайшов їх важко вставляти тут.
To use a bookmarklet, simply right-click on it and choose “Bookmark Link”. Щоб використовувати закладку, просто натисніть правою кнопкою миші і виберіть "Закладка зв'язок". I would recommend placing them into a folder in the toolbar, so that any bookmarklet can be accessed with 2 clicks. Я б рекомендував розміщуючи їх в папку на панелі інструментів, так що будь-який закладці можна ознайомитися з 2 кліка. I find that to be the least-cluttered and easiest-to-use arrangement. Я вважаю, що для найменш метушню і простий у використанні механізму. Onto the bookmarklets then. На букмарклет тоді.
- Updated 07 July 2008: Оновлено 07 липня 2008 року:
XRAY XRAY : :
See the box model for any element on web pages. Див поле модель для будь-якого елемента на веб-сторінках. - Test Styles Випробування Стилі and і Edit Styles Змінити Стилі : :
Test Styles gives you a new tab/window to type CSS rules for the original webpage. Випробування Стилі дає новій вкладці / вікні ввести правила CSS для оригінальної веб-сторінки. The styles are applied to the webpage immediately. Стилі застосовуються на веб-сторінку відразу. Edit Styles is similar, except that you start with the CSS styles for the page. Змінити стилі схожі, крім того, що ви починаєте з стилів CSS для сторінки. [thanks, [Thanks, Nick Nick ] ] - W3C HTML Validator W3C HTML Validator : :
Validate the document that you are currently viewing. Перевірка документів, які ви зараз переглядаєте. Great for on-the-fly validation checks while coding pages. Більше для на-літа перевірки достовірності при кодуванні сторінок. - W3C CSS Validator W3C CSS Validator : :
Validate the CSS of the webpage that you are currently viewing. Перевірка CSS, веб-сторінки, що ви зараз переглядаєте. Useful for quick checks during CSS coding. Корисно для швидкої перевірки при кодуванні CSS. - Resize Viewport: Resize Viewport: 800×600 800 × 600 , , 1024×768 1024 × 768 , , 1280×1024 1280 × 1024 and і 1600×1200 1600 × 1200 : :
See how your web page looks like, in different resolutions. Подивіться, як ваша веб-сторінка виглядає в різних дозволах. Quickly switch between 800×600 to 1600×1200, the two extreme resolutions normally considered in web design. Швидке перемикання між 800 × 600 до 1600 × 1200, два крайніх резолюції, які зазвичай вважаються у веб-дизайні. - View Cookies View Cookies and і Toss Cookies Тосса Печиво : :
View the cookies stored by the current page (using the first link). Відкрити кукі зберігаються на поточній сторінці (за допомогою першого посиланням). Then toss the cookies that you wish to, by using the second link. Потім кинути печиво, яке ви хочете, використовуючи друге посилання. - NetCraft NetCraft : :
Tells you server details of a site and displays uptime graph. Пояснює сервер Докладна інформація про сайт і відображає Uptime графа. - Replace with Alternate Text Замінити Альтернативний текст : :
Useful to check for images that do not have alt tags. Корисно для перевірки зображення, які не мають Alt позначки. The downside is that it removes only <img> tags, leaving intact buttons and images created using CSS or sprites. Недоліком є те, що вона видаляє тільки <img> мітки, залишаючи незайманим кнопки і зображення, створені за допомогою CSS або спрайт. - Alexa Snapshot Lookup Alexa Знімок Lookup : :
Look up your website details and snapshot at Alexa, a popular web metrics website. Подивіться подробиці Вашого сайту і фото на Алекса, метрики популярних веб сайт. - Whois Lookup Whois Lookup : :
Lookup the WhoIs of the domain you are on. Пошук WhoIs області ви знаходитесь. - Edit current website Змінити поточний сайт : :
Edit the current page – add text, delete text, move web elements around etc. – all without the need for any other extension. Змінити поточну сторінку - додавання тексту, видалення тексту, переміщення веб елементи навколо т.д. - все це без необхідності будь-якого іншого розширення. - Search selected text in Google Пошук виділеного тексту в 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. Хоча це і не пов'язані безпосередньо з веб-дизайн / Розробка, Google пошук може бути корисна для пошуку різних термінів і методи їх подання та Мови сценаріїв. - Image Drag Image Drag : :
Drag and rearrange images seamlessly from within a page. Перетягніть і змінити зображення плавно всередині сторінки. - Grab screenshot Grab скріншот : :
Grab a screenshot of the page that you are viewing, without using any other installed application. Створення скріншота на цій сторінці, що ви читаєте, без використання інших встановлених додатків. - Color List Список квітів ( ( use this використовувати instead for IE): а для IE):
Lists colors used in the current webpage. Списки кольорів, що використовуються в поточній веб-сторінки.
Further Bookmarklet resources Додаткові ресурси Bookmarklet
You might also want to read through these collections of bookmarklets: Крім того, можна читати за допомогою цих колекцій букмарклет:
- WebDev at Squarefree WebDev на Бесквадратное : :
A large collection of bookmarklets useful for web designers and developers. Велика колекція букмарклет корисна для веб-дизайнерів і розробників. Maintained by Jesse Ruderman. Котуються Джесс Рудерман. - Useful bookmarklets for casual web users Корисна букмарклет для рядових користувачів Мережі : :
A guest post that I wrote on DailyApps.net. Гість пост, який я написав на DailyApps.net. It lists useful bookmarklets for everyone. У ньому перераховані букмарклет корисно для всіх. Most of them speed up or automate commonly used tasks, which no doubt helps designers and devs too. Більшість з них прискорити або автоматизувати часто використовуваних завдань, які, безсумнівно, допомагає дизайнерам і розробникам теж.
As is usual with my resource posts, this list will be continuously updated as recommendations come in. Як завжди, з моєї посади ресурсу, цей список буде постійно оновлюватися у міру Увійдіть рекомендаціях Contact us Зв'язатися з нами to recommend 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. Розкажіть нам, що ваш коханий букмарклет - для розробки веб-небудь ще - я впевнений, ми всі можемо виграти від нових букмарклет поділяють інші.
Hello 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. Я хочу сказати, що коротка, але солодка посиланню, ви також повинні додати відрізняються браузера список, в якому можна перевіряти свій сайт, а її добре, що ви поділяєте його us.Have гарний день.
God bless you. Хай благословить вас Бог. Punne4e Punne4e
I find Я знаходжу https://www.squarefree.com/bookmarklets/webdevel.html#test_styles HTTPS: / / www.squarefree.com / букмарклет / webdevel.html # test_styles invaluable – I'll create a HTML document, and then using that bookmarklet I can shape the stylesheet in realtime. безцінний - Я створю документ HTML, а потім використовуючи цей букмарклет я можу формі таблиці стилів в реальному часі. It's also very handy for writing user stylesheets. Це також дуже зручно для написання призначених для користувача стилів.
This is pretty good, for those who are forced to do some work on the fly Це дуже добра, для тих, хто змушений виконати певну роботу на літо
@Nick Z: Excellent suggestion about style testing bookmarklet, will update the post soon. Nick @ Z: Відмінна пропозиція про стиль закладка випробувань, буде оновлення пост найближчим часом.
Hi Sumesh, I just came across your blog. Привіт Sumesh, я натрапив на ваш блог. Good work. Гарна робота. Keep it up. Тримайте його вгору. Will try to read all your future posts. Спробує читати всі ваші майбутні посади.
Just saw how useful these shortcuts can be in a post by QQT, bookmarked for future uses Просто побачив, наскільки корисні ці ярлики можуть бути в повідомлення QQT, обраних для майбутнього використання
The “Edit current website” is a nice bookmarklet, but lacks what the “Live Website Editor” bookmarklet has to offer. "Змінити поточний сайт" є Nice інструментом, але йому не вистачає, що на "живому редактор сайту" закладка може запропонувати.
Among other things, it can persist the modifications made to any webpages (at least it's its purpose). Серед іншого, вона може зберігатися зміни, внесені в будь-якій веб-сторінки (по крайней мере, це його мета).
You can find it here: Ви можете побачити тут: 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. Він все ще в ранній версії, але вона працює на більшості сайтів.
Cheers Ура
@Arnaud L: Арно @ L:
That's a useful bookmarklet, and being persistent would likely be useful for many more web users. Це корисно інструментом, і бути стійкими, ймовірно, буде корисним для багатьох інших користувачів Інтернету. I will post the bookmarklet in a future post rounding up more useful bookmarklets – so thanks for the recommendation. Я буду після букмарклет в майбутньому пост округленням до більш корисним букмарклет - так Спасибі за рекомендацію.