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

Обновлено: 06.07.2024

Я признаю, что Up / Down даст вам историю команд. Но как вы смотрите на прошлые результаты, прокручивая вверх и вниз?

Я использовал Shift + Page Up / Page Down , Alt + Shift + Up / Down и Page Up /, Page Down но ни один из них, кажется, не работает.

Это Redhat Linux box.

Я имею в виду, как вы получаете доступ к оболочке. Какой эмулятор терминала? Я просто получаю доступ к серверу Linux с консоли виртуальной машины. Это вещь VMware? Если вы не используете обычный эмулятор терминала, у вас не будет таких функций терминала, как прокрутка.

SHIFT + Page Up и SHIFT + Page Down . Если это не сработает, попробуйте это и тогда:

Зайдите в программу терминала и убедитесь, что
Edit/Profile Preferences/Scrolling/Scrollback/Unlimited
проверено.

Точное расположение этой опции может быть где-то другим, хотя, я вижу, что вы используете Redhat.

Это был бы совершенно другой вопрос. ОП говорил о таких вещах, как терминал gnome Хорошо, спасибо! Как бы вы настроили размер прокрутки для собственного («реального») терминала? Только первая строка этого ответа полезна для консоли Linux, остальные могут быть полезны для терминала с графическим интерфейсом, такого как gnome-терминал, хотя неограниченное количество не требуется.

Shift + Fn + UP или DOWN на MacBook позволит вам прокручивать.

Спасибо. Работает для меня (Ubuntu Server внутри VirtualBox VM на Mac OSX10.10) Спасибо за это, Лорен, и спасибо @anizzomc. Я работал на своем MacBook Pro, на котором работал сервер Ubuntu в виртуальной коробке, и пытался понять это. Как показывают комментарии, это единственный правильный ответ. Все остальные говорят об эмуляторах терминала, а это не то, о чем спрашивает ОП. Это единственное, что сработало для меня при эмуляции Ubuntu Server 14.04 в Parallels на Macbook Pro это просто потому, что ваши клавиши PageUp / PageDown сопоставлены с Fn + Up / Down, это не будет работать на других клавиатурах. И Fn не является реальным ключом, который распознает ОС (кроме Mac)

Альтернатива: вы можете использовать less команду.

Введите в консоли:

Это позволит вам прокручивать клавиши со стрелками вверх и вниз.

В основном ваш вывод был передан с помощью less команды.

Интересно, что это был единственный способ, который действительно работал при использовании оболочки на установочном диске FreeNAS. FreeNAS основан на FreeBSD, и вы прокручиваете его по-другому. Сначала вы нажимаете, scroll lock чтобы войти в режим пейджинга, а затем используйте простые стрелки и page up / page down для прокрутки. Нажмите еще scroll lock раз, чтобы вернуться в режим набора текста. Это единственное решение, которое работает на безголовых серверах. Другие решения для серверов с графическим интерфейсом.

АЛЬТЕРНАТИВА ДЛЯ ЛИНЕЙНОЙ СТРОКИ

Ctrl + Shift + Up Arrow или Down Arrow

В отличие от Shift + Page Up или Page Down , который прокручивает всю страницу, это поможет с более плавной прокруткой построчно, что я и искал.

Мне нужна прокрутка для Chromebook, который не имеет Page Up и Page Down . Работает хорошо. Поверьте, это необходимо CONFIG_VGACON_SOFT_SCROLLBACK включить на консоли Linux.

SHIFT + Page Up и SHIFT + Page Down являются правильными ключами для работы на (виртуальной) консоли linux, но консоль vmware не имеет этих настроек терминала. Виртуальная консоль имеет фиксированный размер прокрутки, похоже, она ограничена размером видеопамяти в соответствии с документацией по поведению прокрутки виртуальной консоли Linux .

Чтобы предотвратить эффект Мэтью, отныне я буду пытаться высказать второй и правильный ответ, чтобы поощрять людей отвечать на вопросы, у которых уже есть правильный ответ. Значит ли это, что VMWare перехватывает эти нажатия клавиш?

Другая альтернатива, которая может быть уже установлена в вашей системе, - это использовать экран GNU:

Смотрите man screen для гораздо более полезных опций (несколько окон, . ) .

VM Ubuntu на Mac . Fn + Shift + стрелки вверх / вниз

Shift Pageup / End работает для меня.

Кажется, что это не легко возможно: Arch Linux Wiki не перечисляет способов сделать это на консоли (хотя это легко возможно на виртуальном терминале).

Вы можете использовать прокрутку Tmux :

Ctrl - b тогда [ вы можете использовать обычные навигационные клавиши для прокрутки (например, Up Arrow или PgDn ). Нажмите, q чтобы выйти из режима прокрутки.

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

Я столкнулся с той же проблемой с рабочей станцией VMWare с гостем Ubuntu, оказалось, что VmWare не поддерживает прокрутку обратно из представления сервера. Я установил x GUI, а затем запустил xterm. По некоторым причинам он работает так же, но позволяет прокручивать обычные пути. Надеюсь, что это поможет будущим читателям в виртуальных коробках VmWare.

Тяжелое решение. Другим может быть установка sshd и удаленный вход в систему.

ПРОСТОЙ, окончательное решение

Добавьте эту строку в свой

Теперь вы можете создать экран и прокручивать его вверх / вниз с помощью мыши; Как обычно.

кто-нибудь знает способ сохранить консоль.вывод журнала в Chrome в файл? Или как Скопировать текст из консоли?

скажем, вы запускаете несколько часов функциональных тестов, и у вас есть тысячи строк консоли.выход журнала в Хром. Как его сохранить или экспортировать?

мне нужно сделать то же самое, и это решение я нашел:

включить лесозаготовки из командной строки с помощью флагов:

отфильтруйте файл журнала, который вы получаете для строк с CONSOLE(\d+) .

обратите внимание, что журналы консоли не отображаются с --incognito .

Chrome dev tools теперь позволяет сохранять вывод консоли в файл изначально

открыть консоль
щелкните правой кнопкой мыши
выберите "Сохранить как.."

инструкции разработчика Chrome здесь.

существует плагин javascript с открытым исходным кодом, который делает именно это, но для любого браузера -debugout.js

Debugout.JS записывает и сохраняет консоль.журналы, чтобы ваше приложение могло получить к ним доступ. Полное раскрытие, я написал это. Он форматирует различные типы соответствующим образом, может обрабатывать вложенные объекты и массивы и может дополнительно поставить метку времени рядом с каждым журналом. Вы также можете переключать live-logging в одном месте и без необходимости удалять все ваши операторы ведения журнала.

Это может быть полезно или не полезно, но в Windows вы можете прочитать журнал консоли, используя трассировку событий для Windows

--enable-logging --v=1, похоже, не работает последняя версия Chrome.

для лучшего файла журнала (без нонсенса Chrome-debug) используйте:

вместо --v=1 что слишком много информации.

Он по-прежнему будет предоставлять ошибки и предупреждения, как вы обычно видите в консоли Chrome.

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

в консоли щелкните правой кнопкой мыши на консоли регистрируется объект

нажмите "Сохранить как глобальную переменную"

см. имя новой переменной-например, variableName1

введите в консоли: JSON.преобразовать в строки(variableName1)

скопируйте содержимое строки переменной: например

есть еще один инструмент с открытым исходным кодом, который позволяет сохранить все console.log вывод в файл на сервере - JS LogFlush (штекер!).

кросс-браузер UI-менее замена консоли.вход на стороне клиента.
система хранения журналов-на стороне сервера.

если вы используете сервер Apache на вашем localhost (не делайте этого на рабочем сервере), вы также можете опубликовать результаты в скрипте вместо того, чтобы писать его в консоль.

В браузерах Google Chrome и Firefox имеются собственные наборы инструментов для разработчиков. В этой статье мы рассмотрим оба этих набора.

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

Инструменты Chrome

После запуска Chrome вы увидите следующее окно:

Нажмите Ctrl + Shift + I, чтобы открыть инструменты разработчика. Также можно кликнуть правой кнопкой мыши в любом месте веб-страницы и выбрать в контекстном меню пункт «Просмотреть код».

После этого откроются инструменты разработчика.

Инструменты разработчика в Firefox

После запуска Firefox вы увидите следующее окно:

Нажмите Ctrl + Shift + I, чтобы открыть инструменты разработчика. Или кликните правой кнопкой мыши в любом месте веб-страницы и выберите в контекстном меню пункт « Исследовать элемент ».

После этого будут открыты инструменты разработчика.

Доступные панели

Панели Chrome

В инструментах разработчика Google Chrome доступны следующие панели:

Панели Firefox

Доступные панели в Firefox расположены в верхней части инструментов разработчика.

Как переместить интерфейс инструментов разработчика

В Chrome

Чтобы поменять область расположения инструментов разработчика в Chrome, нажмите на три точки вверху:

Доступно четыре различных варианта: закрепить панель слева, справа, снизу или открыть панель в отдельном окне.

Интерфейс Firefox

Чтобы переместить инструменты разработчика в Firefox, нажмите на три точки вверху:

Доступно четыре варианта размещения: закрепить панель слева, справа, снизу или открыть панель в отдельном окне.

Просмотр веб-страницы на экранах различных размеров

В Chrome, и Firefox есть средства для просмотра веб-страницы на экранах различных размеров.

Размер экрана Chrome

Чтобы активировать адаптивный вид в Chrome, нажмите на Toggle device toolbar в левой части верхней панели.

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

Размер экрана Firefox

Чтобы активировать адаптивный вид в Firefox, нажмите на «Режим адаптивного дизайна» с правой стороны верхней панели.

Для получения дополнительной информации о режиме адаптивного дизайна в Firefox перейдите по этой ссылке .

Панель элементов

Панель элементов является наиболее часто используемым инструментом. Он позволяет манипулировать DOM , изменяя веб-страницу.

Чтобы посмотреть, как выглядит веб-страница с различными стилями или и элементами, внесите эти изменения непосредственно в данной панели элементов. Это позволяет редактировать сайт непосредственно в браузере без изменения исходного кода.

Sources

Здесь отображается HTML-код веб-страницы. В Chrome это выглядит следующим образом:

Styles

Здесь отображается весь CSS, заданный для HTML-элементов. В Chrome это выглядит следующим образом:

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

Я добавил новый размер шрифта для выбранного абзаца.

Подсветка и выбор элемента

Чтобы выбрать определенный элемент, нажмите на значок селектора элемента или воспользоваться клавиатурной комбинацией Ctrl + Shift + C.

В Chrome это выглядит следующим образом:

Когда селектор активен, элементы, на которые вы наводите курсор, будут подсвечиваться. Если кликнуть по элементу, он будет выбран в панели инспекторе.

Изменение классов и атрибутов

В Chrome после клика правой кнопкой мыши по элементу отобразится опция Edit as HTML или Add attribute.

Если выберите Add attribute, то сможете ввести необходимый атрибут.

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

Для примера я добавил новые классы в атрибут class и добавил еще один атрибут.

В Firefox это работает аналогично.

Редактирование содержимого HTML-элементов

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

Затем нужно задать новые значения и нажать Enter.

Удаление и скрытие элементов DOM

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

После чего элемент будет удален из DOM, и веб-страница будет отображаться без него.

В Firefox схожая опция называется «Удалить узел». И в ней нет возможности скрыть элемент.

Просмотр блочной модели элемента

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

Когда вы наводите курсор на часть блочной модели, этот элемент будет выделен на веб-странице. В Firefox данная функция находится в той же части, что и в Chrome:

Поиск стилей с использованием фильтра

Чтобы найти определенный стиль в коде, введите его название в поле Filter. В Firefox оно находится в той же области, что и в Chrome.

Фильтр выполняет поиск только в иерархии выбранного элемента.

Панель Console

Также можно запустить JavaScript прямо в браузере. Что позволяет изменять DOM веб-страницы прямо в браузере.

Написание и редактирование кода JavaScript

Для этого войдите в панель Console и начните вводить JavaScript-код. В Firefox это выглядит следующим образом:

В Chrome это выглядит так:

Выбор элементов HTML

Консоль имеет доступ к объекту document , поэтому можно запускать такие команды, как querySelector .

Чтобы выбрать элемент с идентификатором test, введите следующий код:

В этом коде я создал переменную с именем test и установил ее в качестве возвращаемого значение из document.getElementById(«test»).

Поскольку в предыдущей строке кода нет результата, выводится undefined. Затем я ввел test, в результате чего было выведено значение test.

Управление DOM

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

Логирование информации

Если у меня есть HTML-файл, который имеет раздел скрипта, выглядящий следующим образом:

Если я открою этот файл в браузере, Console будет выглядеть следующим образом:

Полный список доступных методов консоли можно найти по этой ссылке .

Пожалуйста, оставьте свои отзывы по текущей теме материала. За комментарии, лайки, отклики, подписки, дизлайки низкий вам поклон!

От автора: за последнее десятилетие инструменты разработчика браузеров (браузер DevTools) превратились из базовых JavaScript-консолей в полностью интегрированные среды разработки и отладки. Стало возможным изменять и проверять любой аспект вашего веб-приложения, но лишь немногие из нас выходят за рамки базового использования.

В этой серии статей мы рассмотрим ряд функций, которые вы могли бы (или нет) использовать. Chrome DevTools описаны во множестве источников, но мы представим вам альтернативные опции для Chrome, как и для Firefox.

Горячие клавиши

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

или кликните правой кнопкой мыши любом элементе страницы и выберите «Просмотреть код» или «Просмотреть код элемента».

Перемещение DevTools

Панель DevTools может быть прикреплена слева, справа или снизу окна браузера. Если вам требуется больше места, отсоедините ее от отдельного окна. Опции размещения находятся в главном трехточечном меню Chrome:

Настройки

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

Автозапуск DevTools

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

chrome -- auto - open - devtools - for - tabs //localhost:8000/

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

Режим инкогнито во время разработки

Инкогнито / приватный режим не сохраняет данные, такие как куки и localStorage, после закрытия браузера. Режим идеально подходит для тестирования Progressive Web Apps (PWA) и систем авторизации.

Палитра команд

Chrome DevTools предлагает редактор-палитру команд. Нажмите ctrl + shift + p:

Он обеспечивает быстрый доступ к большинству функций и исходным файлам (нажмите Backspace, чтобы удалить).

Окно консоли

Консоль полезна независимо от того, какую панель DevTool вы используете. Нажмите Esc чтобы показать и скрыть окно консоли в нижней панели.

Найти цвета страницы

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

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

Доступность цветового контраста

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Любой цвет ниже линии на цветовой шкале будет соответствовать рекомендациям по контрастности AA.

Скриншоты

В палитре команд Chrome ( ctrl + shift + p) введите «снимок экрана», затем выберите параметр для захвата текущего окна просмотра, всей страницы или активного в данный момент элемента. Файл будет сохранен в папке загрузок. (Chrome 74+ также позволяет захватывать области.)

Firefox предоставляет систему «Сделать снимок экрана», доступную в большинстве меню. Кроме того, вы можете кликнуть правой кнопкой мыши любой элемент в представлении DOM и выбрать Снимок узла.

Найти неиспользуемые CSS и JavaScript

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

Отключить сетевой кэш

Дросселирование скорости сети

Точно так же нет смысла тестировать вашу систему на скорости 1 Гбит / с, когда большинство пользователей получают доступ через 3G. Панель «Сеть» предоставляет раскрывающийся список «Онлайн» в Chrome и «Регулирование» в Firefox, позволяющий эмулировать определенные скорости сети.

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

Фильтр незавершенных запросов

Фильтр по размеру ответа

Фильтровать сторонний контент

Блокировка сетевых запросов

Воссоздать Ajax-запросы

Включить автономные переопределения файлов

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

Откройте панель «Переопределения» в «Источниках», нажмите «+ Выбрать папку для переопределений» и выберите нужную папку.

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

Исследуйте Хранилище

Панель «Приложения» в Chrome и панель «Хранилище» в Firefox позволяют просматривать, изменять и удалять значения, хранящиеся в файлах cookie, кэш-памяти, localStorage, sessionStorage, IndexedDB и Web SQL (если поддерживается).
Через панель «Очистить» в Chrome также можно стереть все значения для домена, что может быть полезно при разработке Progressive Web App.

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

Аудит

Автор: Craig Buckler

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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