Плагин Instrumentum VK для браузера Google Chrome

На рынке расширений огромный выбор интеллектуального продукта на любой вкус и цвет. Так что у пользователей разбегаются глаза, как тут найти нужный экземпляр. К счастью, сегодня мы рассмотрим расширение Instrumentum VK для Google Chrome, также разберемся, актуально ли оно еще.

Проблемный вопрос

Instrumentum VK – это специальная утилита для социальной сети ВКонтакте. С ее помощью легко настроить список друзей, управлять личными сообщениями, подчищать историю переписок в сообществах и беседах. В общем, полезная вещь.

Дело в том, что нам не удалось найти дистрибутив утилиты в закромах официального магазинов Хрома и Оперы. На официальной страничке разработчиков написано, что они готовят свежую версию продукта, с полностью обновленным алгоритмом и приятной графической оболочкой.

Думаете, что проблема нерешаема? Ошибаетесь. Мы приготовили достойную замену, о которой и пойдет речь дальше.

Альтернатива

Встречайте, барабанная дробь… ViKey Zen. Для начала кратенько рассмотрим процесс установки расширения, а после поговорим о его возможностях.

Для добавления во ВК новый функционал, достаточно воспользоваться следующей пошаговой инструкцией:

1. Открываем браузер и переходим на страницу https://chrome.google.com/webstore/detail/vikey-zen/mpfejdpmfgcomleigigpfdlkneimnioj?hl=ru.
2. Кликаем на кнопку «Установить».
3. Подтверждаем серьезность намерений и ждем конца скачивания и добавления в тело поисковика.

Функционал

Для вызова плагина кликните на появившуюся правее адресной строки иконку.Тогда отобразится основное его окошко. Оно включает в себя четыре ключевые вкладки:

• Друзья
• Сообщения
• Сообщества
• Другое

«Друзья»

Здесь все нововведения касаются работы с учетными записями пользователей:

• убрать из списка заблокированных или удаленных друзей;
• программно устранить лиц, которые не проявляли активность заданный временной промежуток;
• удалить учетки без аватарок;
• избавиться от товарищей, которые находятся в списках;
• автоматическая очистка исходящих заявок;
• статистическая информация о продолжительности общения с определенным человеком;
• перетасовать друзей в общем списке;
• убрать «айдишники», с которыми так и не была организована переписка.

Аналогичные действия справедливы и для подписчиков, для экономии времени не будем заново их перечислять. Двигаемся дальше!

«Сообщения»

Разработчики здесь постарались над:

• Защитой персональных чатов.
• Восстановлением бесед, из которых человек ранее вышел.
• Автоматическим прочтением всех диалогов.
• Правдивой статистикой бесед.
• Возможностью скачивать голосовые сообщения.
• Исключением лиц, покинувших площадку для общения.
• Удалением вложенных фотографий и других файлов.

«Сообщества»

Этот раздел будет полезен администраторам крупных платформ. Среди прочего:

• автоматизированное удаление «мертвых» участников;
• устранением лиц, не проявляющих активность в сообществе заданный промежуток времени;
• выделение лучших публикаторов;
• удаление учетных записей на основе анализа «айдишников».

«Другое»

Сюда вошел функционал, который прямо не относится к какой-то категории, тем не менее незаменим в определенных ситуациях. Пользователь получает возможность:

• Очищать ЧС.
• Восстанавливать ранее скрытые фотографии.
• Удобно и быстро удалять записи с личной стены.
• Добавлять в подписчики людей, сделавших репост какой-то записи.

ViKey Zen мало чем отличается от плагина, которому посвящалась наша статья. Его разработчики заверяли еще в прошлом году, что ведется активная работа, а воз и ныне там.

Да, время уходит, а на рынке появляются новые проекты, ничуть не хуже «старожил». Это и называется словосочетанием «здоровая конкуренция».

Полезные расширения Google Chrome в 2019 году / Wrike corporate blog / Habr

В моем браузере установлено около 30 расширений, которые упрощают жизнь и работу в интернете. В этой статье я хочу поделиться 10 актуальными расширениями Google Chrome для верстальщика, которые постоянно использую при разработке сайтов.

1. PerfectPixel

Пример использования PerfetPixel при разработке новых блоков на www.wrike.com

Верстка сайта пиксель-в-пиксель вызывает трудности как у новичков, так и у опытных специалистов. PerfectPixel накладывает изображение макета поверх верстки в браузере. В настройках расширения можно отрегулировать прозрачность и расположение макета, что позволяет учесть все необходимые размеры и отступы. Использование этого плагина упростит работу верстальщика и сократит количество правок при сдаче проекта. В моем наборе расширений PerfectPixel занимает первое место за счет своей функциональности и удобства использования.

Ссылка на установку расширения

2. Wappalyzer

Пример использования Wappalyzer на сайте collaborate.wrike.com/2019/london

Всегда интересно какие инструменты и технологии используются на сайтах. Wappalyzer предоставляет информацию о CMS, JS фреймворках, CSS библиотеках, инструментах аналитики и многом другом. Представьте, что анимация на сайте – это бесплатная CSS библиотека, которую вы можете использовать у себя в проекте. Это позволит сократить время поиска необходимого инструмента и быть в курсе технологий, которые использует сайт.

Ссылка на установку расширения

3. HTML5 Outliner

Иерархия заголовков на странице habr.com/ru/company/wrike

HTML 5 Outliner отображает список заголовков на странице сайта. Расширение помогает структурировать заголовки и определять нарушения в иерархии. Например, в теге section HTML 5 Outliner выводит предупреждение об отсутствии тега h3. Это один из быстрых и удобных способов, чтобы определить правильность использования заголовков в верстке.

Ссылка на установку расширения

4. Wireframify

Пример использования Wireframify на сайте www.wrike.com

Дизайнеры проектируют сайты с помощью wireframe — это набор линий, блоков и подписей. Такой подход позволяет создавать архитектуру проекта с учетом отступов, размеров и расположения блоков на странице. Wireframify включает альтернативный вид сайта в виде wireframe, что позволит избежать ошибочного использования:

• отрицательных margin;
• выравнивания элементов с помощью padding;
• добавления отступов с помощью CSS свойств left, right;

Ссылка на установку расширения

5. PageLiner

Пример использования PageLiner на сайте www.wrike.com/apps

В графическом редакторе выровнять элементы или отобразить сетку сайта можно с помощью направляющих линий. Верстальщик может включить этот функционал в браузере используя PageLiner. Расширение отображает похожие направляющие, как в том же Adobe Photoshop. С PageLiner выравнивать элементы становится намного проще.

Ссылка на установку расширения

6. Web Developer

Список возможностей web developer

Web Developer добавляет в браузер дополнительную панель с инструментами. Внутри нее находится 10 вкладок: Disable, Cookies, CSS, Forms, Images, Information, Miscellaneous, Outline, Resize и Tools. Функционал расширения позволяет:

• отключать CSS, JS и изображения;
• проверять валидность HTML, CSS;
• манипулировать CSS стилями;
• тестировать HTML формы;
• отображать необходимую информацию мета тегов;
• изменять размер окна браузера;
• очищать кэш;

Web Developer остается популярным расширением среди разработчиков. Его можно сравнить с мультитулом в реальной жизни: всегда под рукой необходимый набор инструментов.

Ссылка на установку расширения

7. User CSS

Пример использования User CSS на сайте www.wrike.com/customers

Представим, что вы захотели поправить CSS прямо в браузере, но после этого пришлось перезапустить страницу. Все ваши наработки пропали, и приходится вносить изменения заново. Используйте User CSS, который будет сохранять ваши стили. Больше не нужно переживать по поводу того, что CSS исчезнет. Функциональность расширения позволит тестировать написанный CSS при переходе на другие страницы.

Ссылка на установку расширения

8. StyleURL

Пример использования StyleURL на сайте Wrike www.wrike.com/customers

User CSS не заменит панель разработчика браузера. Если вы привыкли работать в devtools и при этом не хотите потерять изменения после обновления браузера – установите StyleURL. Расширение запомнит ваши изменения и предоставит возможность сохранить наработки в отдельном файле или загрузить в github gist.

Ссылка на установку расширения

9. Siteimprove Accessibility Checker

Пример использования Siteimprove Accessibility Checker на сайте www.wrike.com/newsroom

Siteimprove Accessibility Checker — это инструмент, который проверяет HTML на соответствие стандартам доступности, чтобы обеспечить доступ к контенту для всех. Расширение отображает ошибки с подробной информацией. В описании к ним вы можете найти сноски с WCAG 2 и прямые ссылки на подробные статьи о доступности.

Ссылка на установку расширения

10. Tabsbook

Пример использования Tabsbook

Каждый работает с закладками по-своему. Есть те, кто сохраняет ссылки для быстрого доступа к сайтам, и те, кто используют закладки, чтобы хранить полезную информацию. С помощью Tabsbook можно превратить ваши закладки в базу знаний. Интерфейс расширения отображает древовидную структуру папок для удобной навигации по вашим закладкам. Все данные хранятся в облаке, что позволяет иметь доступ к ним с любого устройства.

Ссылка на установку расширения

Расширения будут полезны всем новичкам и опытным специалистам, которые о них не знали. Напишите в комментарии, какие расширения вы используете.

Больше полезных расширений для браузера можно найти по ссылкам Toп-10 плагинов Chrome для дизайнеров и Полезные расширения Google Chrome для программиста.

популярные расширения для разработчиков / Habr

Рекомендуемые расширения инструментов разработчика Chrome для бОльшего удовольствия от процесса отладки и разработки.

Это расширение добавляет инструменты для поиска проблем в производительности, визуализации и отладки приложения.

DevTools Terminal — расширение инструментов разработчика Chrome, добавляющее возможности терминала вашему браузеру.

Ember Inspector — расширение инструментов разработчика Chrome, которое упрощает понимание и отладку приложений на Ember.js.

Добавляет вкладку в инструменты разработчика Chrome, на которой, в режиме реального времени, отображаются представления, модели, коллекции и маршруты.

Marionette Inspector предлагает инструменты для визуализации компонентов, поиска данных, а также изучения активности в режиме реального времени.

React Developer Tools является расширением инструментов разработчика Chrome для работы с открытой JavaScript библиотеки React.js

Добавляет в инспектор поддержку Thorax, библиотеки основанной на Backbone и Handlebars, для создания крупных веб приложений.

Расширяет инструменты разработчика добавляя инструменты для Grunt! Полноценный графический интерфейс для Grunt. Поддержка фоновых задач, таких как «слежение». Позволяет запускать задачи для нескольких проектов в одном окне.

Перехватывает и перенаправляет ресурсы с любого домена на любые ресурсы расположенные локально или на удаленном сервере.

Расширение для отладки Knockoutjs. Добавляет боковую панель на вкладку Elements инструментов разработчика с соответствующим knockout описанием выбранного элемента.

Если вы работаете с Batman.js, то это расширение станет для вас бесценным инструментом. Оно содержит множество инструментов, полезных для разработки Batman.js прямо в браузере.

В отличие от других аналогичных инструментов, LiveStyle не изменяет CSS файл в браузере (или файловой системе), чтобы отобразить изменения, он выполняет структурный анализ в процессе набора и карту изменений от одного источника CSS к другому.

SnappySnippet — расширение инструментов разработчика позволяющее получить CSS и HTML выбранной ветки DOM (последнего проинспектированного элемента). Всего в один клик вы можете перенести выбранный код в CodePen, jsFiddle или JS Bin.

Дополнительная панель в инструментах разработчика Chrome, позволяющая изучить rAppid:js приложение.

RailsPanel — Chrome расширение для разработки Rails приложений, которое будет обрабатывать лог файл. Получите доступ ко всей информации о запросах вашего Rails приложения прямо в консоли.

Расширение инструментов разработчика Google Chrome для отладки Sencha приложений.

Новая вкладка инспектора селекторов для удобства проверки ваших jQuery селекторов, и просмотра результатов на любом сайте. Дополнение разработано, чтобы помочь вам понять даже самые сложные селекторы.

Расширение браузера, доступное для Chrome и Firefox, которое позволит оценить производительность ваших страниц и получить рекомендации по их улучшению.

Django Debug Panel для инструментов разработчика WebKit. Показало хорошую работу с фоновыми AJAX запросами и не HTML запросами. Замечательно подходит для одностраничных приложений и других, использующих AJAX, веб приложений.

14 расширений для браузера, которые решат кучу ваших проблем

1. Noisli

Если звуки окружения мешают вам работать, это расширение поможет их не замечать. Noisli генерирует шумы, которые не отвлекают, а, наоборот, помогают расслабиться и сконцентрироваться на рабочих задачах. Вы можете создать несколько миксов из звуков природы (шум ветра, реки, костра и не только) на сайте Noisli, а затем управлять аудиопотоком в окне расширения.

Скачать для Google Chrome, «Яндекс.Браузера» или Opera (требуется установка Install Chrome Extensions):

2. HTTPS Everywhere

Кража финансовых и других личных данных может иметь серьёзные последствия для пострадавшего. Чтобы снизить вероятность подобных проблем, установите расширение HTTPS Everywhere. Оно автоматически включает защищённый протокол передачи данных на сайтах, которые по разным причинам его не используют. Возможно, когда-нибудь это спасёт ваш аккаунт от взлома.

Скачать для Google Chrome или «Яндекс.Браузера»:

Скачать для Firefox:

Разработчик: Разработчик

Цена: Бесплатно

Скачать для Opera:

Разработчик: efforg

Цена: Бесплатно

3. FoxClocks

Если вы часто путешествуете или много общаетесь с людьми из других часовых зон, то знаете, как легко запутаться во времени. В таком случае вам может пригодиться расширение FoxClocks. Оно отображает точное время в выбранных пользователем городах. Часы небольшие и располагаются в нижней части открытых вкладок, поэтому не отвлекают, но вместе с тем всегда находятся на виду.

Скачать для Google Chrome, «Яндекс.Браузера» или Opera (требуется установка Install Chrome Extensions):

Скачать для Firefox:

Разработчик: Разработчик

Цена: Бесплатно

4. The Great Suspender

Аппетиты браузеров превращают слабый компьютер в черепаху. К счастью, у нас есть расширение The Great Suspender, которое уменьшает нагрузку на систему во время веб-сёрфинга. Эта программа автоматически выгружает из памяти неиспользуемые вкладки и тем самым ускоряет компьютер. Причём вы можете выбирать, через какое время и какие типы вкладок нужно закрывать. Сами вкладки никуда не исчезают — их можно быстро восстанавливать.

Скачать для Google Chrome, «Яндекс.Браузера» или Opera (требуется установка Install Chrome Extensions):

5. PushBullet

Бывают ситуации, когда нужно скопировать текст, длинный номер или ссылку со смартфона на компьютер или наоборот. Набирать всё это вручную неудобно, гораздо проще использовать расширение PushBullet. С его помощью можно быстро передавать ссылки, текст и небольшие файлы между компьютером и мобильными устройствами. Нужно только привязать все гаджеты к аккаунту PushBullet.

Скачать для Google Chrome или «Яндекс.Браузера»:

Скачать для Firefox:

Разработчик: Разработчик

Цена: Бесплатно

Скачать для Opera:

Цена: Бесплатно

6. Marinara: Pomodoro

Если вы недовольны своей продуктивностью, возможно, проблему решит правильно подобранный рабочий ритм. Расширение Marinara — это таймер, которые помогает работать по известной методике Pomodoro. Программа напоминает делать перерывы и садиться за дела через чётко отмеренные промежутки времени. Поклонники Pomodoro считают, что такой подход помогает им больше делать и меньше уставать.

Скачать для Google Chrome, «Яндекс.Браузера» или Opera (требуется установка Install Chrome Extensions):

Скачать похожее расширение для Firefox:

Разработчик: Разработчик

Цена: Бесплатно

7. Tabli

Количеством открытых вкладок лучше не злоупотреблять. Но бывают ситуации, когда просто необходимо держать на экране множество сервисов и источников информации. Расширение Tabli поможет взять их под контроль. Оно отображает вкладки на вертикальной панели. Их названия не сокращаются, поэтому вы можете легко переключаться между открытыми сайтами, как бы много их ни было.

Скачать для Google Chrome, «Яндекс.Браузера» или Opera (требуется установка Install Chrome Extensions):

Скачать похожее расширение для Firefox:

Разработчик: Разработчик

Цена: Бесплатно

8. Mercury Reader

Надоедливая реклама, самовоспроизводящиеся видео, мелкий шрифт — эти и другие проблемы могут затруднять чтение текстов на веб-страницах. Расширение Mercury Reader позволяет в один клик убрать из статьи всё лишнее, включая баннеры и мешающие элементы вёрстки. Ещё вы можете выбирать размер и тип шрифта, а также включать тёмный фон для удобного чтения в ночное время суток.

Скачать для Google Chrome:

Скачать похожее расширение для Opera:

Разработчик: rneomy

Цена: Бесплатно

В «Яндекс.Браузере» и Firefox аналогичные функции доступны без расширений.

10. Grammarly

Grammarly пригодится всем, кто испытывает трудности с письменным английским. Это расширение автоматически проверяет текст, который пользователь набирает на любых сайтах, и проверяет его грамматику и пунктуацию. Grammarly указывает на ошибки и предлагает варианты исправления. Вы также можете вставить любой текст на сайте сервиса для детальной проверки и прочитать пояснения к большинству ошибок.

Бесплатно сервис указывает только на самые распространённые ошибки. Убрать ограничение можно, оформив подписку — от 11,6 доллара в месяц при оплате на год вперёд.

Скачать для Google Chrome, «Яндекс.Браузера» или Opera (требуется установка Install Chrome Extensions):

Скачать для Firefox:

Разработчик: Разработчик

Цена: Бесплатно

11. BehindTheOverlay

Некоторые сайты докучают посетителям всплывающими окнами с рекламой или просьбами подписки и других действий. Хорошо, если при этом отображается крестик, быстро закрывающий такое окно. Но часто разработчики намеренно усложняют закрытие или заставляют ждать, чтобы пользователь совершил нужное действие. BehindTheOverlay принудительно закрывает такие окна. Достаточно кликнуть по специальной кнопке.

Скачать для Google Chrome, «Яндекс.Браузера» или Opera (требуется установка Install Chrome Extensions):

12. StayFocusd

Из-за обилия отвлекающих факторов в Сети порой бывает очень сложно концентрироваться на работе. Чтобы не прокрастинировать на Facebook, YouTube и других подобных ресурсах, вы можете ограничить их доступность с помощью StayFocusd. Расширение позволяет настроить максимальное количество времени, которое вы готовы тратить на выбранные сайты в сутки. Если вы превышаете лимит, StayFocusd блокирует эти сайты до следующего дня.

Скачать для Google Chrome, «Яндекс.Браузера» или Opera (требуется установка Install Chrome Extensions):

13. Web of Trust

Интернет полон вредоносных сайтов, способных заразить ваш компьютер вирусами или украсть личные данные. Поэтому пользователи Web of Trust отмечают опасные ресурсы Сети, с которыми им не повезло столкнуться. Установив это расширение, вы будете видеть рейтинг сообщества Web of Trust возле каждой ссылки. Опасные и подозрительные сайты отмечаются красным. Избегайте их — и это избавит вас от многих проблем.

Скачать для Google Chrome или «Яндекс.Браузера»:

Скачать для Opera:

Цена: Бесплатно

Скачать для Firefox:

Разработчик: Разработчик

Цена: Бесплатно

14. Mailtrack

Когда вы отправляете электронное письмо, всегда есть риск, что оно затеряется в спаме и не будет открыто получателем. В таких ситуациях выручает Mailtrack. Это расширение показывает, прочитано отправленное через службы Gmail и Inbox сообщение или нет, что может сэкономить вам кучу нервов.

Скачать для Google Chrome, «Яндекс.Браузера» или Opera (требуется установка Install Chrome Extensions):

Скачать для Opera:

Приложение не найдено

15. ImTranslator

Когда нужно перевести слово или отрывок текста с веб-страницы, приходится открывать новую вкладку с переводчиком и вставлять выбранный фрагмент. Гораздо удобнее использовать ImTranslator. Это расширение выполняет перевод во всплывающем окне прямо на текущей вкладке. ImTranslator использует технологии Google и Microsoft — лидеров в машинном переводе.

Скачать для Google Chrome или «Яндекс.Браузера»:

Скачать для Opera:

Цена: Бесплатно

Скачать для Firefox:

Разработчик: Разработчик

Цена: Бесплатно

Читайте также

10 малоизвестных возможностей инструментов разработчика Chrome / RUVDS.com corporate blog / Habr

Автор заметки, перевод которой мы публикуем, пользуется инструментами разработчика Chrome почти каждый день. Здесь он хочет рассказать о малоизвестных возможностях этих инструментов. Он говорит, что если бы знал о них раньше, то ему они точно бы пригодились.

1. Простой способ получения ссылки на любой исследуемый элемент

Инструменты разработчика Chrome позволяют получить в консоли ссылку на любой исследуемый элемент. Для этого нужно, работая в панели Elements, щёлкнуть правой кнопкой мыши по элементу и выбрать в выпадающем меню пункт Store as global variable.
Простой способ получения ссылки на любой исследуемый элемент

2. Создание интерактивных выражений, прикреплённых к консоли

В инструментах разработчика можно создавать интерактивные выражения, прикреплённые к верхней части консоли, значения которых постоянно поддерживаются в актуальном состоянии. Порядок создания таких выражений показан на следующем рисунке. Если вы знаете о том, что некие элементы на странице должны обновляться, эта возможность может оказаться очень полезной для наблюдения за ними.
Интерактивные выражения в Chrome

3. Имитация медленных интернет-соединений

Вкладка Network инструментов разработчика Chrome позволяет имитировать подключение браузера к различным сетям. Эта возможность способна оказаться крайне полезной для того, чтобы оценить поведение страницы в ситуации, когда на её загрузку требуется несколько секунд.
Исследование страницы с имитацией различных способов подключения к интернету

4. Отключение кэша, сохранение логов при переходе между страницами

Мне приходилось встречаться с множеством проблем, которые, как оказалось, не были ошибками. Их причиной была неправильная загрузка кэшированного кода. Для того чтобы избавиться от подобных неприятностей, можно полностью отключить кэширование, воспользовавшись возможностями вкладки Network. Речь идёт о флажке Disable cache. Обратите внимание на то, что кэш не работает только при открытой панели инструментов разработчика.

Сохранение логов — это ещё одна полезная возможность, благодаря которой консоль не очищается при перезагрузке исследуемой страницы. Включает эту возможность флажок Preserve log на вкладке Network.

Отключение кэша и сохранение логов

5. Создание копий экрана

Инструменты разработчика Chrome включают в себя встроенное средство для создания скриншотов. Для того чтобы им воспользоваться, нужно, при открытом окне инструментов, применить комбинацию клавиш Ctrl+Shift+P, а затем ввести в появившемся поле ключевое слово screenshot и выбрать необходимый способ создания скриншота.
Создание скриншота из панели инструментов разработчика

6. Команда console.log() — это далеко не единственный способ что-то логировать в консоль

Все пользуются командой console.log() для логирования отладочных данных. Однако этой командой возможности по логированию не исчерпываются. В частности, в распоряжении разработчика имеются команды console.warn() и console.error().

Данные команды выводят в консоль сообщения разных уровней логирования — это, соответственно, предупреждения и сообщения об ошибках. Они выделены разным цветом и значками. Сообщения, выведенные в консоль разными командами, можно фильтровать.

Команды console.warn() и console.error()

Для вывода в консоль неких структурированных данных, удобно оформленных в виде таблицы, можно воспользоваться командой console.table().

Команда console.table()

Возможности по работе с консолью этими командами не ограничиваются. Например, существуют ещё такие команды, как console.assert() и console.group(). Здесь можно найти подробный рассказ о подобных командах.

7. Конструкция $_ возвращает самое свежее вычисленное выражение

Конструкцию $_ можно использовать для возврата значения предыдущей операции, выполненной в консоли.
Использование конструкции $_

8. Команда $() — это сокращение для document.querySelector()

Команду $() можно использовать в консоли для быстрого выбора элемента. Возможности jQuery тут, кстати, не применяются, хотя на первый взгляд может показаться, что это не так.

Аналогично, команда $$() — это сокращение для document.querySelectorAll().

Использование $()

9. Включение состояний элементов, таких, как hover или focus, в панели Styles

Если в ходе исследования элемента нужно изучить его поведение в состоянии hover, это может оказаться непростой задачей, так как для перевода элемент в это состояние нужно, чтобы над ним находился бы указатель мыши. Решение этой задачи можно облегчить, воспользовавшись возможностями панели Styles. Тут можно принудительно переводить элементы в такие состояния, как hover или focus.
Принудительный перевод элемента в заданное состояние

10. Сочетание нажатия на клавишу Ctrl и щелчка мыши помогает найти определение CSS-правила

Вам когда-нибудь нужно было узнать о том, где описано некое CSS-правило? Эту задачу очень легко решить, нажав на клавишу Ctrl и щёлкнув мышью по интересующему вас правилу. В macOS вместо Ctrl используется Cmd.
Ctrl+щелчок мышью — поиск места определения CSS-правила

Уважаемые читатели! Что бы вы добавили в приведённый здесь список малоизвестных возможностей инструментов разработчика Chrome?

Двенадцать полезных Chrome DevTools Tips / Инфопульс Украина corporate blog / Habr

В данной статье мы рассмотрим некоторые функции инструментов разработчика Chrome. Конкретно я использую Chrome Canary и вам советую. И не потому, что это отсылка на маленьких милых птиц, которые пожертвовали своими жизнями чтобы мы могли добывать свежий уголь.

Некоторые из DevTools функций вы возможно не знали. Я буду очень счастлив, если хотя бы одну из них вы найдете для себя полезной.

(В статье ниже присутствуют анимированные гифги, которые начинают раздражать после первого цикла. Поэтому я советую открыть dev tools и удалить DOM ноды, которые отвечают за изображения.)

Итак, поехали:

Копируем переменную в буфер обмена

Об этой возможности я узнал из комментариев, и считаю ее достаточно полезной чтобы быть описанной в начале. Иногда бывает нужно скопировать содержимое переменной в буфер обмена. Например html код или json объект. Для этого можно использовать copy функцию.

copy (someVariable)

Теперь текстовое представление переменной скопировано в буфер обмена.

1. Инспектируем анимацию

Анимации прекрасны. Они радуют пользователей, и что более важно, они радуют меня. Меню анимаций в DevTools позволит вам замедлить все анимации на странице до 25% или до 10% (увидеть мир глазами кролика), или подвигать конкретную анимацию.

2. Удобные скриншоты

Когда вы находитесь в режиме эмуляции устройств, вы можете включить device frame и когда вы нажмете на capture screenshot то получите снимок экрана вместе с рамкой устройства.
Полученное изображение будет выглядеть примерно так:

3. $0 в консоли

Напечатав $0 в консоли, вы получите ссылку на текущую выделенную в панели элементов DOM ноду.

Это реальная ссылка на элемент, и как пример, вы можете сделать $0.classList.add(‘touch-of’) или $0.getBoundingClientRect() чтобы узнать размер, или если вы используете jQuery на странице, вы можете напечатать что-то такое $($0).data() чтобы получить данные элемента.

По умолчанию Chrome просто покажет вам объект в виде DOM элемента. Если вы хотите увидеть элемент как JavaScript объект, можете напечатать console.dir($0)

Вот разница:

Если вы достаточно круты, и используете React и React dev tools, то $r покажет вам ссылку на react компонент. Чтобы увидеть proprs компонента, просто введите $r.props.
Бонус: вы можете ввести ID элемента в консоли и также получить ссылку на элемент, хотя он и не является реальной глобальной переменной.

4. Стрелочные функции в консоли

Это не совсем DevTools Tip, но я уверен что вы их полюбите. С появлением стрелочных функций стало удобно использовать их в одной строке. Например выражение performance.getEntries().filter(entry => entry.name.includes(‘static’)) выведет некоторую информацию о моих запросах с доменов содержащих “static” в имени.

Конечно, если вам нужно написать более одной строки, вы можете нажать shift+enter чтобы перейти на новую строку без выполнения кода.

5. Поиск по селектору

Поле поиска в панели элементов ищет не только текст (вот это поворот, что же еще он оно ищет?!), но и совпадающие селекторы. Это может быть особенно удобно для не-веб-разработчиков, которым нужно подобрать селекторы, например, для автотестов.

Здесь я ищу совпадения по .section-inner p:nth-of-type(2)

6. Экспериментируем с цветами

Когда вы экспериментируете с цветами, вы можете использовать пипетку, чтобы выбрать любой элемент на странице или выбрать из палитры цветов, которые уже используются на странице. Или выбрать один из цветов material design.

7. Просмотр отрендеренных шрифтов

Иногда очень сложно сказать, какой шрифт на самом деле был отрендерен. В нижней части Computed вкладки панели инструментов, вы можете увидеть какой шрифт используется, даже если его названия нет в списке font-family.

8. Редактируем любой текст на странице

Если у вас есть меню фиксированной ширины и вы хотите узнать, насколько длинный текст туда поместится и увидеть переносы слов. Переключите документ в режим дизайна! (document.designMode = ‘on’)

После этого вы сможете редактировать все элементы имеющие текстовый контент.

Если вы тот человек, который решил использовать on/off вместо true/false, я бы хотел поговорить с вами в моем офисе.

9. Диафильм

Очень хорошим инструментом настройки производительности является режим диафильма на вкладке Network. Он позволит вам сосредоточить внимание на визуальной составляющей а не на неясных событиях вроде domContentLoaded.

Или вы можете просто с иронией посмотреть как грузятся шрифты на странице Adobe.

Я смотрю на это каждый раз, когда мне грустно. Моя любимая часть, когда весь текст исчезает.

10. Фильтры на вкладке Network

Какую бы работу по производительности вы не делали, вам нужно знать что приходит к вам в браузер. Если вы размещаете рекламу на сайте, то приходит много чего. Для сокращения списка, вы можете отфильтровать ресурсы по типам (удерживайте cmd/ctrl для мультивыбора) и также по доменам.

11. Темная тема

Потому что темная тема.
Включить можно вначале страницы настроек

12. Chrome сниппеты

Я люблю сниппеты. (жаль, что они не синхронизируются между браузерами с другими моими Chrome настройками).
Круто что они выполняются в контексте страницы. В отношении доступа к DOM, относительным ссылкам, кукам, и другим вещам, ваши сниппеты будут иметь такое же поведение как и обычный код.

…

Конец

Узнать больше информации о возможностях панели разработчика вы можете посетив документацию. Не пожалейте немного времени для ее изучения, чтобы повысить эффективность своей работы. Поделится своими полезными находками можно в комментариях.

…

И еще одно. При установке Chrome Canary, войдите и синхронизируйте ваш Google аккаунт, но в дополнительных настройках синхронизации уберите галочку с “Extensions”. Так вы получите вашу историю, закладки и все остальные вещи, кроме расширений, которые засоряют ваше рабочее пространство своим кодом.

40+ супер-полезных расширений Chrome для тестировщиков

Автор: Амандип Сингх (Amandeep Singh)

Оригинал статьи: http://quicksoftwaretesting.com/useful-google-chrome-extensions-testing-software/

Перевод: Ольга Алифанова.

Такие браузеры, как Mozilla Firefox и Google Chrome сильно облегчают жизнь тестировщика. Я использую оба, но Chrome лидирует по количеству полезных расширений, которые я могу применять в работе.

Большинство читателей нашего сайта используют Chrome (примерно 70%). Чем не доказательство, как мы, тестировщики, любим этот браузер? Он очень облегчает наш труд. Он облегчает конкретно мой труд, и поэтому я его так люблю. Firefox, я помню о тебе!

Ранее я составлял список важных дополнений Firefox, полезных для тестировщиков, и аналогичный список для Chrome был вполне логичным продолжением. Представляю вам список потрясающих расширений Chrome для тестировщиков! Это вам не просто список случайных расширений — это наиболее полное перечисление тех расширений, которые пригодятся при тестировании ПО.

Расширения Chrome для тестировщиков

Google Chrome — это самый мощный и самый известный браузер в мире (источник). У него удобный интерфейс, он мало весит, и его можно дополнительно улучшать различными расширениями.

Это основная причина его популярности как среди разработчиков, так и среди тестировщиков.

Большинство расширений из списка ниже я применяю в работе постоянно, и они просто чудо. Дочитайте до конца, и вы согласитесь со мной!

Если вы используете расширение Chrome, которого нет в этом списке — сообщите мне об этом, и я добавлю его.

Итак, хватит предисловий, стартуем!

 

Расширения Chrome для тестировщиков: тестирование веб-интерфейсов

1. Screen Ruler — простенькое расширение, название которого полностью отражает содержание. Оно помогает измерять высоту, ширину и поля у объектов, просто накладывая поверх них линейку и перетаскивая ее в нужном направлении. Screen Ruler — очень полезное расширение для тестирования веб-интерфейса, так как помогает найти невидимые глазу дефекты и удостовериться, что ваше приложение прекрасно до последнего пикселя.

2. WhatFont — тестировщикам часто приходится проверять косметические дефекты вроде типа и размера шрифта на страничке. WhatFont — небольшое расширение, позволяющее легко искать шрифты. Просто наведите курсор на любой шрифт, и оно покажет вам, какой именно шрифт тут применен. Если вам нужна дополнительная информация о сервисах, поддерживающих веб-шрифты, WhatFont ее предоставит.

3. ColorZilla — это расширение с колор-пикером, которое позволяет определить прямо из браузера, какой конкретно цвет используется на вашей страничке. ColorZilla — очень полезная штука, когда вам нужно сверить реально используемые цвета со спецификацией.

4. PerfectPixel — если вы похожи на меня и ожидаете, что приложение пиксель в пиксель соответствует дизайну, то это расширение — то, что вам нужно! PerfectPixel помогает удостовериться именно в этом. Вы можете наложить полупрозрачное изображение поверх вашей странички и провести попиксельный анализ.

5. IE Tab — один из самых популярных IE-эмуляторов. С помощью этого расширения вы можете тестировать ваш сайт в разных версиях IE, не покидая ваш ненаглядный Chrome.

6. Spell Checker — расширение для проверки орфографии. Проверяет, правильно ли написаны слова на странице, и предлагает внести правки для слов с опечатками. Это простенькое расширение поддерживает 12 языков, и вы можете добавлять свои слова в его словарь.

7. Grammarly — если вы еще не работаете с этим замечательным инструментом, то сейчас я вам все про него расскажу. Это крутое приложение помогает с вычиткой текста, когда вы пишете онлайн — неважно, почта это, комментарий или пост в блоге. В процессе вашей писанины Grammarly проверяет орфографию и грамматику и подсвечивает ошибки прямо в браузере.

Расширения Chrome для тестировщиков: автоматизация тестирования.

8. Web Developer — Web Developer Chrome Extension, официальный дубль знаменитого дополнения Firefox, который включает в себя множество инструментов разработчика в форме дополнительной панели. Он не полностью дублирует своего собрата для Firefox , но тем не менее полезен тестировщикам. С его помощью можно заполнять формы, контролировать кэш браузера, управлять cookie-файлами, исследовать и подсвечивать веб-элементы, атрибуты заголовков, информацию о якорях на любой странице, что бережет немало времени.

9. Firebug Lite — это еще одно расширение, которое не заменяет инструменты разработчика Chrome, но отлично его дополняет. Его достоинства — хорошее визуальное представление элементов HTML, DOM, и Box Model. Подходит для исследования HTML-элементов по нажатию кнопки, что неплохо помогает при автоматизации тестирования приложений.

Расширения Chrome для тестировщиков: документальные подтверждения

Подтвердить баг вещественными доказательствами — значит сократить время на его исправление. Если у вас под рукой хороший инструмент, позволяющий быстро делать скриншоты и делать на них пометки, вы сэкономите себе кучу времени.

10. Awesome Screenshot — наиболее известный среди тестировщиков скриншотер. Позволяет захватить весь экран, отдельную его часть, видимую область веб-страницы, а также делать на нем пометки, обрезать его, и т. д. Если результат вас удовлетворил, им легко поделиться с окружающими. Его можно сохранить на жесткий диск, временно загрузить на Awesome Screenshot, или — если вам нужна постоянная ссылка — на Google Drive или Diigo.

11. Lightshot — легкий и удобный инструмент для скриншотов, тоже позволяющий их аннотировать. Прост в использовании, мало весит. Скриншоты можно сохранять на жесткий диск или загружать в облако, чтобы поделиться ссылкой с кем-то еще.

12. Screencastify — еще одно обязательное к установке расширение для тестировщиков. Оно дает возможность делать запись экрана, когда вы тестируете. В результате вы получаете видеозапись пользовательского поведения, которую можно передать разработчикам в качестве подтверждения бага. Просто нажмите «записать», и расширение начнет записывать происходящее в вашей вкладке.

Расширения Chrome для тестировщиков: тестирование cookie-файлов

Очень важно уметь управлять cookie-файлами и кэшем браузера — это позволяет убедиться, что приложение ведет себя правильно, и сервер отдает верные данные и код. Эти расширения можно использовать для тестирования cookie-файлов: они позволяют добавлять, удалять, редактировать их, а также чистить кэш браузера.

13. Edit This Cookie — очень полезно для А/В тестирования веб-приложений, а также для проверки доступности определенной функциональности разным группам пользователей. Простой, хорошо организованный интерфейс позволяет работать с файлами профессионально. Расширение показывает имеющиеся cookie-файлы и их значения. Значения можно менять, а также вы сможете добавлять, удалять, искать, защищать или блокировать cookie-файлы. Это расширение избавит вас от нудного поиска нужных файлов через настройки Chrome.

14. Cookie Editor — еще одно расширение для редактирования cookie-файлов. Название отражает содержание — оно позволяет добавлять, удалять, редактировать, защищать, блокировать и искать нужные файлы. Дополнительная опция — экспорт в JSON-формате.

15. Clear Cache — устали от долгих поисков функции очистки кэша, отрывающих вас от тестирования? Это расширение помогает вам очистить кэш одним щелчком по панели инструментов. Его можно настроить, указывая данные, которые вы хотите удалить — кэш приложений, загрузки, файловые системы, данные заполнения форм, историю браузера, локальное хранилище, пароли, и так далее.

16. Cache Killer — полезный плагин для тестировщиков, отключающий кэширование Chrome. В отличие от предыдущего расширения, это позволяет очищать кэш браузера перед загрузкой страницы. В результате вы получаете последнюю версию кода с сервера. Если вам нужно протестировать кэширование, отключите эту функцию одним щелчком.

Расширения Chrome для тестировщиков: эмуляторы размеров экрана

17. Resolution Test — поможет при тестировании веб-приложений на разных разрешениях и размерах экрана. Выбрать распространенное разрешение можно из списка, или же ввести необходимые размеры вручную. Это расширение изменяет размеры браузера и эмулирует ваше приложение в нужном разрешении экрана.

18. Window Resizer — еще одно полезное для веб-тестирования расширение. Делает в Chrome то же самое, что Firesizer для Firefox — изменяет размеры окна браузера, эмулируя различные разрешения экрана. Позволяет увидеть, как верстка сайта поведет себя при различных размерах экрана. Позволяет выбрать предустановленные разрешения и добавлять новые. Отличается от Resolution Test возможностью устанавливать горячие клавиши, а также экспортировать свои настройки и переносить их на другой компьютер.

Расширения Chrome для тестировщиков: исследовательское тестирование.

19. Bug Magnet — это расширение чрезвычайно экономит время, когда вы занимаетесь исследовательским тестированием. Просто щелкните правой кнопкой мыши на любом поле приложения и вызовите контекстное меню с предустановленными значениями для электронной почты, имен, номеров телефонов, индексов, и т. д. Выберите нужное значение, и оно подставится в активное поле. В результате вам не придется тратить время на подготовку тестовых данных для полей — это расширение уже сделало работу за вас. Дайте ему шанс — гарантирую, вам понравится.

20. Form Fuzzer — еще одно расширение, позволяющее заполнять поля различными значениями. Как и предыдущее, избавляет от подготовки данных вручную. Просто щелкните правой кнопкой мыши на нужном поле и выберите значение из готового списка.

21. Web Developer Form Filler — это расширение сделает заполнение форм детской забавой. Очень полезно для исследовательского тестирования — любую форму можно заполнить, просто нажав на горячую клавишу.

Расширения Chrome для тестирования API

22. Postman — инструмент для тестирования API-запросов, особенно REST API. Позволяет настраивать и переключать переменные на лету, и бережет ваше время. Самообучается.

23. Advanced RESTClient — еще одно расширение для API-тестирования. Не так богато функциональностью, как Postman, зато хорошо подходит для новичков. REST Client позволяет создавать и тестировать кастомные API-запросы при помощи простого интерфейса.

24. Resteasy — еще одна возможность тестировать REST API в Chrome. Функциональность этого расширения похожа на Advanced REST Client. Попробуйте оба и выберите то, которое вам больше нравится.

25. JSONView — чтение данных JSON может превратиться в кошмар, когда вы тестируете REST API (попробуйте — поймете, о чем я). Расширение JSONView позволяет просматривать отформатированный JSON в форме дерева внутри Chrome, намного упрощая чтение и верификацию.

26. Ghostery — это расширение упрощает тестирование поведения приложения в ситуации, когда сеть падает и API прекращает работать. Оно позволяет увидеть все трекеры страницы и отключать их при необходимости.

Расширения Chrome для тестирования безопасности и проникновения.

27. XSS Rays — это полезное расширение широко используется тестировщиками безопасности. По сути это чистый Javascript XSS сканер, помогающий выявить уязвимости XSS. XSS Rays анализирует все ссылки и формы загруженной страницы и проверяет XSS по параметрам GET и POST.

28. Request Maker — основное расширение Chrome для тестирования на проникновение. Позволяет создавать новые запросы, отлавливать запросы, сделанные страницами, поиграть с URL, изменять заголовки и данные POST. Больше всего мне нравится его возможность делать закладки для запросов по щелчку мыши.

29. d3coder — еще одно расширение для тестирования на проникновение. Позволяет кодировать и декодировать выбранный текст через контекстное меню прямо из Chrome. Скопируйте текст в буфер обмена и выберите «Преобразовать» в меню. После преобразования d3coder копирует полученный текст в буфер обмена. Это классное расширение, позволяющее преобразовывать текст в разные форматы — например, base64, rot13, CRC32, UNIX-время.

30. Site Spider — расширение, сообщающее о битых ссылках на странице. Экономит массу времени — не приходится вручную проверять, все ли ссылки работают. Есть возможность ограничить работу расширения, добавляя ограничения и регулярные выражения. У расширения открытый исходный код — меняйте его в соответствии с вашими нуждами.

Расширения Chrome для тестирования доступности.

Различные принципы доступности (например, WCAG, ARIA, RGAA, Section 508) определяют, как сделать сайты и приложения доступными для людей с ограниченными возможностями. Вот какими расширениями можно воспользоваться, чтобы убедиться, что эти принципы выполняются:

31.Wave evaluation tool — очень крутой инструмент оценки доступности, тестирующий сайт на соответствие принципам WCAG. Отличное расширение, встраивающее дополнительную функциональность прямо в браузер и дающее видимую обратную связь по доступности страницы (вставляет иконки и индикаторы прямо на сайт).

32. Accessibility Developer Tools — добавляет «Оценку доступности» и боковую панель доступности в инструменты разработчика Chrome. При запуске оценки доступности расширение выводит список правил WCAG 2.0, нарушенных на странице, включая недостающие ARIA-элементы.

33. aXe- еще одно расширение, пополняющее возможности для тестирования доступности. Небольшое и легкое, оно основано на aXe Javascript-библиотеке. Сообщает об отклонениях от WCAG 2.0 (W3C Web Content Accessibility Guidelines) и Section 508 (Федеральный стандарт США).

34. ARIA validator — добавляет кнопку, по нажатию на которую проверяется внедрение ARIA в страницу. Для каждого фрейма на странице расширение покажет вкладку с ошибками и предупреждениями.

Расширения Chrome для повышения производительности

35. Session Manager — как тестировщик, вы наверняка ходите по одному и тому же набору сайтов и ссылок ежедневно. Если это про вас, обязательно установите это расширение! Оно позволяет объединять сайты и странички в группы, которые затем можно открывать по щелчку мыши. Работайте на одном дыхании! Правда, круто звучит? Расширение позволяет управлять вкладками — сохранять их, обновлять, удалять и восстанавливать наборы. Вы не пожалеете, что установили его.

36. iMacros — каждый тестировщик в общем и целом делает одно и то же ежедневно. Это расширение упрощает жизнь веб-тестировщику, позволяя записывать и проигрывать действия на странице. Конечно, для этого можно использовать Selenium WebDriver и другие средства автоматизации, однако iMacros позволит автоматизировать ваши рутинные действия — например, smoke-тестирование, которое в норме состоит из стандартного набора одинаковых кликов. Расширение можно также использовать для открытия одних и тех же наборов страниц или ссылок. Ну или просто воспользуйтесь Session Manager!

37. MindMup — отличное расширение для бесплатного создания ментальных карт. Ментальные карты — неплохой способ документировать свое понимание процессов в приложении, записи сценариев тестирования и уточнения зависимостей между различными компонентами. Расширение дает возможность заниматься всем этим, не покидая браузер. Оно позволяет создавать свои карты и работать совместно с другими пользователями, и имеет простой и понятный интерфейс. Интегрируется с Google Drive и Dropbox. Так как ваши карты хранятся в облаке, они доступны откуда угодно — неважно, пользуетесь ли вы браузером на ПК, на планшете, или на телефоне.

38. Proxy SwitchySharp — приходит на помощь, если вам необходимо часто переключаться между прокси. Позволяет легко и непринужденно управлять прокси и переключаться между ними. Больше всего мне нравится, что оно позволяет создавать правила для автоматического переключения прокси, активируя отдельные прокси для соответствующих ссылок. Также оно дает возможность скрывать IP-адреса, что делает его неплохим инструментом тестирования на проникновение.

---

Вот так.

Надеюсь, что этот список расширений Chrome для тестировщиков вам поможет — дайте мне знать, как вы его оцениваете.

Спасибо, и удачи в тестировании!

Обсудить в форуме