Как сделать эксперимент в консоли разработчика

Добавил пользователь Евгений Кузнецов
Обновлено: 15.09.2024

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

Большинство пользователей линукса пользуются X11. Многие из них - тяжёлыми графическими окружениями вроде KDE, GNOME и XFCE.
Подумалось мне: а ежели провести эксперимент - посидеть в консоли и без иксов недельку? Это же какая польза для накопления знаний будет:

1. Ещё лучшее освоение консоли
2. Лучшее понимание, что в современных графических окружениях лишнее
3. В ряде случаев облегчение окружения в будущем

То бишь основная мысль - пользование консолью.

Условия таковы:
1. Не пользуемся иксами (ненамеренный запуск за пользование не считается) и другими графическими подсистемами - только консоль.
2. В качестве исключения разрешается фреймбуфер, так как нынче без графики картинки и видео смотреть не очень удобно, если мягко говорить. Только в целях отображения мультимедийной информации! Можно ещё и графическими возможностями консольных веб-броузеров пользоваться.
3. Длительность эксперимента - неделя. Этого времени должно быть достаточно для подбора ПО и его освоения.
4. Если по тем или иным причинам участие затруднено надобностью запуска программ, которые противоречат условиям эксперимента (по работе, например), то тогда допускается пользование ими. Но только ими, и крайне желательно - на отдельном компьютере.
5. Никаких xterm, rxvt, konsole, gnome-terminal и остальных эмуляторов терминала. Это противоречит пункту 1, что очень важно для чистоты эксперимента.
6. Разрешается наводить всяческие удобства в консоли - будь то Emacs, Screen и тому подобное.

Как открыть консоль разработчика в Google Chrome?

Для того, чтобы открыть вкладку Console вы можете:

  1. использовать хоткей Command — Option — J (Mac) или Control — Shift — J (Windows/Linux);
  2. выбрать пункт меню View > Developer > JavaScript Console.

Как открыть Dev Tools?

Открытие Chrome DevTools

Как запустить код в консоли браузера?

Консоль браузера можно открыть двумя способами:

Как открыть консоль JavaScript?

Как открыть консоль в Chrome

Консоль открывается как новое окно браузера. Чтобы открыть консоль JavaScript: Используйте сочетание клавиш Ctrl+Shift+J (для Windows / Linux) или Cmd+Opt+J (для Mac). Если DevTools уже открыт, выберите вкладку Консоль.

Как открыть консоль в Google Chrome на телефоне?

Можно ли открыть консоль инструментов разработчика в Chrome на телефоне Android?

Как вкл режим разработчика?

Для Android Oreo и выше:

Как на Android открыть для разработчиков?

Как включить режим разработчика Android

Как сохранить консоль в хроме?

Я нашел отличный и простой способ для этого.

Как сделать консоль на компьютере?

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

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

Инструменты разработчика (Dev Tools) – одна из функций браузера Chrome. Эти инструменты стали важной частью ежедневной работы как разработчиков, так и тестировщиков. Поэтому тестировщики должны знать, как пользоваться этими инструментами на полную и обеспечивать с их помощью лучшее качество тестирования.

Вообще инструменты разработчика доступны во всех основных браузерах. Но Chrome Dev Tools выделяются на их фоне, поскольку команда Google Chrome постоянно улучшает и расширяет их функционал.

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

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

Как открыть инструменты разработчика?

Прежде чем знакомиться с различными приемами работы с Dev Tools, тестировщику следует научиться хотя бы открывать их. Это можно сделать двумя способами.

1. Откройте Google Chrome. Кликните правой кнопкой мыши по экрану. В открывшемся меню выберите Inspect.

google chrome dev tools - inspect

2. Второй способ открыть инструменты разработчика – использовать сочетание клавиш. Можно нажать или Ctrl + Shift + C (Cmd + Option + C), или Ctrl + Shift + J (Cmd + Option + J).

В этой статье мы будем работать с инструментами разработчика в Google Chrome. Но аналогичный функционал есть и в других браузерах, например, в Mozilla Firefox и Safari. Открывается он примерно так же, как в Chrome: правый клик мышью и выбор Inspect Element в появившемся меню.

firefox - inspect element

Mozilla Firefox

safari - inspect element

Safari

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

1. Поиск элемента

Эта функция помогает тестировщику (или разработчику) искать в DOM-дереве нужные элементы страницы.

Откройте Chrome Dev Tools и зайдите на вкладку Elements. Собственно, ее не нужно искать: по умолчанию она открывается первой. Находясь в этом разделе, нажмите Ctrl + F (Cmd + F).

Откроется поле для ввода, где вы сможете вставить искомое слово. После ввода инструмент подсветит этот элемент в коде.

chrome dev tools - поиск элемента

2. Добавление и редактирование элементов

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

chrome dev tools - добавление элемента

chrome dev tools - редактирование элемента

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

3. Изменение расположения DOM-элементов в дереве

Вы можете изменить позиции элементов во вкладке Elements, просто перетаскивая их.

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

chrome dev tools - изменения расположения DOM-элементов в дереве

4. Поиск CSS-свойства в Sources

Тестировщику часто приходится искать в Sources свойство, определенное в Elements, для внесения каких-то изменений. Это можно быстро сделать при помощи Ctrl + Click (Cmd + Click). Затем перейдите во вкладку Sources, где нужное свойство будет подсвечено.

5. Скриншот элемента

Тестировщики могут делать скриншоты элементов. Для этого выберите элемент и нажмите Ctrl + Shift + P (Cmd + Shift + P).

Откроется палитра команд. Выберите в ней Capture Node Screenshot, чтобы сделать скриншот элемента.

chrome dev tools - скриншот элемента

6. Использование результатов предыдущей операции в консоли

chrome dev tools - использование результатов предыдущей операции

7. Многострочные скрипты

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

Консоль разработчика работает аналогично.

Но в Console в Chrome Dev Tools тестировщик может применять многострочные скрипты. Для этого в конце каждой строки нажимайте не Enter, а Shift + Enter.

Вкладка Console быстро заполняется различными логами. Чтобы очистить консоль, нажмите Ctrl + L (Cmd + K) или напишите команду clear();

8. Локаторы для автоматизированного тестирования при помощи Selenium

Для автоматизированного тестирования с использованием Selenium очень часто используются локаторы. Они нужны для поиска конкретных элементов на странице.

В Selenium есть следующие локаторы:

  1. ID
  2. Name
  3. Linktext
  4. Partial Linktext
  5. Tag Name
  6. Class Name
  7. CSS Selector
  8. Xpath

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

локаторы элементов - chrome dev tools

10. Переход к определенной строке

В инструментах разработчика можно перейти к указанной строке, введя ее номер в строке поиска. Для открытия поиска нажмите Ctrl + O (Cmd + O).

chrome dev tools - переход к определенной строке

11. Переключение между файлами в рамках проекта

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

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

Поиск по файлам открывается клавишами Ctrl + P (Cmd + P).

chrome devtools - переключение между файлами в рамках проекта

12. Watch Expression

В инструментах разработчика Chrome есть функция под названием Watch Expression. Найти ее можно во вкладке Sources, в колонке справа.

Тестировщику во время дебага нужно постоянно следить за переменными и выражениями. Искать их снова и снова очень затратно по времени. Watch Expression может делать это за вас.

Тестировщик просто вводит выражение или переменную в этот раздел, и они будут обновляться при каждом изменении.

13. JavaScript Breakpoints

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

Например, API-запрос, использующий AJAX, может запускаться 4 раза и возвращать разные коды статуса. Для эффективного тестирования его нужно проверять на каждом этапе. Для этого в инструментах разработчика есть специальная фича – JavaScript Breakpoints.

Используя JavaScript Breakpoints, вы можете определять строку, на которой хотите приостановить выполнение кода.

Чтобы воспользоваться этой функцией, просто кликните на номер строки, на которой выполнение JavaScript-кода должно прерваться.

инструменты разработчика chrome - javascript breakpoints

14. XHR/Fetch Breakpoints

Во вкладке Sources под Watch Expression есть раздел XHR/Fetch Breakpoint. С его помощью вы можете устанавливать брейкпоинт в скрипте при каждой отправке запроса.

Тестировщик также может использовать эту функцию только для определенных запросов, с конкретными URL.

chrome developer tools - xhr/fetch breakpoints

15. Включение нескольких курсоров

Разве не круто было бы иметь возможность писать на разных строках одновременно? Инструменты разработчика позволяют это делать. Для этого нужно инициализировать множественные курсоры, зажав Ctrl (Cmd) и кликая в нужных местах.

несколько курсоров - chrome developer tools

16. Мониторинг производительности

мониторинг производительности - google chrome developer tools

Инструменты разработчика сильно упрощают и ускоряют работу. Обязательно используйте их во время тестирования!


В этой статье мы активируем экспериментальную функцию при помощи которой Вы сможете сыграть в покер или другие приложения, посмотреть Youtube вместе с участниками своего сервера, не выходя из Discord.

Приступим к активации:
Открываем любую вкладку в Discord:


Нажимаем комбинацию клавиш Ctrl+Shift+I и переходим во вкладку "Console":


Вставляем код в консоль и нажимаем Enter:


Закрываем окно просмотра кода:


Далее открываем настройки в Discord, нажатием на шестеренку:

Активируем экспериментальную функцию в Discord

Переходим в разблокированный раздел "Experiments":


В поиск пишем 'activities experiment', нажимаем левой кнопкой мыши и выбираем 'Treatment 2':


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


Заходим в какой угодно из ваших голосовых каналов и видим новую кнопку, кликаем на нее:


Вот к примеру функция 'Youtube Together' для совместного просмотра видео:


Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Статья хорошая, но как мне кажется, проще заказать сервер на хостинге, например на хостинге Zorotex
Это намного проще в плане экономии времени и нервов.

Прошлый раз 2 акка зарегал. На один пару тройку фильмов залил, на другой прон. Оба улетели в бан. Так что, такое себе.

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

Шаг 2 Загрузить не менее 20 работ
Шаг 3 Получите обновление до Pro Станьте одним из первых новаторов Playbook и получите версию Pro (4 ТБ) бесплатно!
Это новое облако для креативщиков.
Вряд ли туда можно что-то залить кроме работ (картинки, видео, проекты). Да и условия не вполне понятны. Потом будут просить денежку, чтобы эти 4 тб сохранить и разблокировать свои файлы.
Я бы не рискнул наверное туда что-то ценное лить.
А вот попробовать однозначно стоит.

Хотя если чисто картинки, то Яндекс безлимит же вроде как дает? Да, с условиями, но тут они тоже наверняка будут.

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