Как увидеть вывод кода в коде Visual Studio

Обновлено: 03.07.2024

Код Visual Studio в действии

Интеллектуальное завершение кода

Упрощенная отладка

Быстрое и мощное редактирование

Навигация по коду и рефакторинг

Контроль версий в продукте

Лучшие расширения

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

Первые шаги

Чтобы получить максимальную отдачу от Visual Studio Code, начните с изучения нескольких вводных тем:

Вступительные видеоролики. Начните знакомство с VS Code с помощью этих вводных видеороликов.

Настройка. Установите VS Code для своей платформы и настройте набор инструментов для своих нужд разработки.

Пользовательский интерфейс. Знакомство с основным пользовательским интерфейсом, командами и функциями редактора VS Code.

Настройки – настройте VS Code так, как вам удобно.

Языки. Узнайте о поддержке VS Code ваших любимых языков программирования.

Node.js. Это руководство поможет вам быстро запустить и отладить веб-приложение Node.js.

Советы и рекомендации. Ознакомьтесь с советами и рекомендациями, чтобы стать опытным пользователем VS Code.

Azure — VS Code отлично подходит для развертывания веб-приложений в облаке.

Extension API: узнайте, как написать расширение VS Code.

Почему VS Code? - Узнайте о философии дизайна и архитектуре VS Code.

Сочетания клавиш

Повысьте производительность с помощью сочетаний клавиш VS Code.

Справочник по сочетаниям клавиш — изучите наиболее часто используемые сочетания клавиш.

Расширения раскладки клавиатуры. Измените сочетания клавиш VS Code, чтобы они соответствовали другому редактору.

Настройка сочетаний клавиш — измените сочетания клавиш по умолчанию.

Загрузки

Загрузить VS Code. Быстро найдите подходящую установку для вашей платформы (Windows, macOS и Linux)

Конфиденциальность

По умолчанию VS Code автоматически обновляется до новых версий и собирает данные об использовании и отчеты о сбоях. Вы можете отказаться от этих значений по умолчанию, отключив их, как указано ниже:

Visual Studio Code имеет встроенную систему управления версиями (SCM) и стандартную поддержку Git. Многие другие поставщики системы управления версиями доступны через расширения на VS Code Marketplace.

Совет. Нажмите на плитку расширения, чтобы прочитать описание и отзывы в Marketplace.

Поставщики SCM

VS Code поддерживает одновременную работу с несколькими поставщиками управления версиями. Например, вы можете открыть несколько репозиториев Git вместе с локальной рабочей областью Azure DevOps Server и беспрепятственно работать над своими проектами. Чтобы включить представление «Поставщики управления версиями», выберите дополнительное меню в представлении «Управление версиями» ( ⌃⇧G (Windows, Linux Ctrl+Shift+G ) ), наведите указатель мыши на «Представления» и убедитесь, что репозитории системы управления версиями отмечены галочкой. . В представлении «Поставщики системы управления версиями» отображаются обнаруженные поставщики и репозитории, и вы можете ограничить отображение ваших изменений, выбрав определенного поставщика.

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

Расширения поставщика SCM

Если вы хотите установить другого поставщика SCM, вы можете выполнить поиск в категории расширений поставщиков scm в представлении «Расширения» ( ⇧⌘X (Windows, Linux Ctrl+Shift+X )). Начните вводить «@ca», и вы увидите предложения для категорий расширений, таких как отладчики и линтеры. Выберите @category:"поставщики SCM", чтобы увидеть доступных поставщиков SCM.

Категория поставщика SCM на рынке

Поддержка Git

VS Code поставляется с расширением диспетчера управления версиями Git (SCM). Большинство пользовательских интерфейсов и рабочих процессов системы управления версиями являются общими для других расширений SCM, поэтому ознакомление с общей поддержкой Git в VS Code поможет вам понять, как использовать другой поставщик.

Примечание. Если вы новичок в Git, веб-сайт git-scm — это хорошее место для начала, где вы найдете популярную онлайн-книгу, видео по началу работы и шпаргалки. В документации по VS Code предполагается, что вы уже знакомы с Git.

Обзор Git

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

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

Значок системы управления версиями на панели действий слева всегда показывает, сколько изменений в настоящее время имеется в вашем репозитории. При выборе значка вы увидите подробную информацию о текущих изменениях в репозитории: ИЗМЕНЕНИЯ, ПОСТАНОВЛЕННЫЕ ИЗМЕНЕНИЯ и ИЗМЕНЕНИЯ СЛИЯНИЯ.

Нажав на каждый элемент, вы увидите подробные текстовые изменения в каждом файле. Обратите внимание, что для неустановленных изменений редактор справа по-прежнему позволяет редактировать файл: не стесняйтесь использовать его!

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

Совет. Вы можете открыть VS Code в подкаталоге репозитория Git. Службы Git VS Code по-прежнему будут работать как обычно, показывая все изменения в репозитории, но изменения файлов за пределами заданного каталога будут затенены всплывающей подсказкой, указывающей, что они расположены за пределами текущей рабочей области.

Зафиксировать

Подготовку (git add) и отмену подготовки (git reset) можно выполнить с помощью контекстных действий в файлах или путем перетаскивания.

Кнопка < бр />

Вы можете ввести сообщение фиксации над изменениями и нажать Ctrl+Enter (macOS: ⌘+Enter ), чтобы их зафиксировать. Если есть какие-либо поэтапные изменения, будут зафиксированы только эти изменения. В противном случае вы получите приглашение выбрать, какие изменения вы хотите зафиксировать, и получить возможность изменить настройки фиксации.

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

Более конкретные действия фиксации можно найти в представлениях и дополнительных действиях. меню в верхней части представления системы управления версиями.

кнопка просмотра и других действий

Совет. Если вы фиксируете изменения в неправильной ветке, отмените фиксацию с помощью команды Git: Undo Last Commit в палитре команд ( ⇧⌘P (Windows, Linux Ctrl+Shift+P )).< /p>

Клонирование репозитория

Если вы еще не открыли папку, в представлении "Управление версиями" будут доступны варианты "Открыть папку с локального компьютера" или "Клонировать репозиторий".

Первый запуск системы управления версиями

Если вы выберете «Клонировать репозиторий», вам будет предложено указать URL-адрес удаленного репозитория (например, на GitHub) и родительский каталог, в который нужно поместить локальный репозиторий.

URL-адрес репозитория GitHub можно найти в диалоговом окне кода GitHub.

диалоговое окно клонирования репозитория

Затем нужно вставить этот URL в приглашение Git: Clone.

установить URL репозитория

Вы также увидите возможность клонирования с GitHub. После аутентификации с помощью учетной записи GitHub в VS Code вы сможете выполнять поиск в репозиториях по имени и выбирать любой репозиторий для его клонирования. Вы также можете запустить процесс клонирования репозитория Git с помощью команды Git: Clone в палитре команд ( ⇧⌘P (Windows, Linux Ctrl+Shift+P )). Чтобы просмотреть пошаговое руководство, посмотрите наши репозитории Clone from VS Code.

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

Ветки и теги

Вы можете создавать и извлекать ветки непосредственно в коде VS с помощью команд Git: Create Branch и Git: Checkout to в палитре команд ( ⇧⌘P (Windows, Linux Ctrl+Shift+P )).

Если вы запустите Git: Checkout to, вы увидите раскрывающийся список, содержащий все ветки или теги в текущем репозитории. Это также даст вам возможность создать новую ветку, если вы решите, что это лучший вариант, или проверить ветку в автономном режиме.

Git checkout

Команда Git: Создать ветку позволяет быстро создать новую ветку. Просто укажите имя новой ветки, и VS Code создаст ветку и переключится на нее. Если вы выберете Создать новую ветку из. , вы получите дополнительное приглашение, позволяющее указать, на какую фиксацию должна указывать новая ветвь.

Пульты

Учитывая, что ваш репозиторий подключен к какому-то удаленному серверу и что ваша проверенная ветка имеет восходящую ссылку на ветку на этом удаленном сервере, VS Code предлагает вам полезные действия для отправки, извлечения и синхронизации этой ветки (последняя будет запускать команду pull, за которой следует команда push). Вы можете найти эти действия в представлениях и дополнительных действиях. меню, а также возможность добавить или удалить пульт.

VS Code может периодически получать изменения с ваших пультов. Это позволяет VS Code показать, на сколько изменений ваш локальный репозиторий опережает или отстает от удаленного. Начиная с VS Code 1.19, эта функция по умолчанию отключена, и вы можете включить ее с помощью параметра git.autofetch.

Совет. Вам следует настроить помощник по учетным данным, чтобы не запрашивать учетные данные каждый раз, когда VS Code взаимодействует с вашими пультами Git. Если вы этого не сделаете, вы можете отключить автоматическую загрузку с помощью параметра git.autofetch, чтобы уменьшить количество получаемых запросов.

Действия в строке состояния Git

Существует действие «Синхронизировать изменения» в строке состояния рядом с индикатором ветки, когда для текущей проверенной ветки настроена восходящая ветвь. Synchronize Changes загрузит удаленные изменения в ваш локальный репозиторий, а затем отправит локальные коммиты в вышестоящую ветку.

Синхронизация строки состояния git

Если не настроена восходящая ветвь, а в репозитории Git настроены удаленные устройства, действие «Публикация» включено. Это позволит вам опубликовать текущую ветку на удаленном компьютере.

опубликовать строку состояния git

Индикаторы отступов

Если вы откроете папку, являющуюся репозиторием Git, и начнете вносить изменения, VS Code добавит полезные аннотации в поле и на линейку обзора.

  • Красный треугольник указывает, где строки были удалены.
  • Зеленая полоса указывает на новые добавленные строки.
  • Синяя полоса указывает на измененные строки.

Индикаторы желоба
< /p>

Конфликты слияния

Git merge

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

Просмотр различий

Наши инструменты Git поддерживают просмотр различий в VS Code.

Разница файлов в коде VS< бр />

Совет. Вы можете сравнить любые два файла, сначала щелкнув правой кнопкой мыши файл в проводнике или в списке OPEN EDITORS и выбрав «Выбрать для сравнения», а затем щелкнув правой кнопкой мыши второй файл для сравнения и выбрав «Сравнить с». имя_файла_вы_выбрали'. Либо нажмите на клавиатуре ⇧⌘P (Windows, Linux Ctrl+Shift+P ) и выберите Файл: Сравнить активный файл с, и вам будет представлен список последних файлов.

Панель обзора редактора различий

В редакторе различий есть панель просмотра, в которой представлены изменения в едином формате исправления. Вы можете перемещаться между изменениями с помощью «Перейти к следующему отличию» (F7) и «Перейти к предыдущему отличию» (⇧F7 (Windows, Linux Shift+F7)). По строкам можно перемещаться с помощью клавиш со стрелками, а нажатие Enter вернет редактор различий к выбранной строке.

diff-review-pane

Примечание. Этот опыт особенно полезен для пользователей программ чтения с экрана.

Временная шкала

Представление «Временная шкала», доступное по умолчанию в нижней части Проводника, представляет собой унифицированное представление для визуализации событий временных рядов (например, Git-коммитов) для файла.

Временная шкала

Встроенная поддержка Git в VS Code предоставляет историю коммитов Git для указанного файла. При выборе фиксации откроется представление изменений, внесенных этой фиксацией.Если щелкнуть фиксацию правой кнопкой мыши, вы получите опции «Копировать идентификатор фиксации» и «Копировать сообщение фиксации».

Visual Studio Code поддерживает больше рабочих процессов истории Git благодаря расширениям, доступным в VS Code Marketplace.

Совет. Нажмите на плитку расширения, чтобы прочитать описание и отзывы в Marketplace.

Окно вывода Git

Вы всегда можете заглянуть внутрь, чтобы увидеть, какие команды Git мы используем. Это полезно, если происходит что-то странное или вам просто любопытно. :)

Чтобы открыть окно вывода Git, запустите View > Output и выберите Git из раскрывающегося списка.

Инициализировать репозиторий

Если ваша рабочая область находится на локальном компьютере, вы можете включить управление исходным кодом Git, создав репозиторий Git с помощью команды Инициализировать репозиторий. Если VS Code не обнаружит существующий репозиторий Git, в представлении "Управление версиями" будут доступны варианты "Инициализировать репозиторий" или "Опубликовать на GitHub".

Git инициализирует репозиторий

Вы также можете запустить команды Git: Initialize Repository и Publish to GitHub из палитры команд ( ⇧⌘P (Windows, Linux Ctrl+Shift+P ) ). Запуск Initialize Repository создаст необходимые файлы метаданных репозитория Git и отобразит файлы вашей рабочей области как неотслеживаемые изменения, готовые к промежуточному размещению. Опубликовать в GitHub — папка вашей рабочей области будет напрямую опубликована в репозиторий GitHub, что позволит вам выбирать между частным и общедоступным репозиторием. Посмотрите наше видео о публикации репозиториев, чтобы узнать больше о публикации на GitHub.

VS Code как редактор Git

Когда вы запускаете VS Code из командной строки, вы можете передать аргумент --wait, чтобы команда запуска ждала, пока вы не закроете новый экземпляр VS Code. Это может быть полезно, когда вы настраиваете VS Code в качестве внешнего редактора Git, поэтому Git будет ждать, пока вы не закроете запущенный экземпляр VS Code.

Вот как это сделать:

  1. Убедитесь, что вы можете запустить code --help из командной строки, и вы получите помощь.
    • если вы не видите справку, выполните следующие действия:
      • macOS: выберите команду оболочки: установите команду «Код» по пути из палитры команд.
      • Windows: убедитесь, что во время установки вы выбрали «Добавить в ПУТЬ».
      • Linux: убедитесь, что вы установили Code через наши новые пакеты .deb или .rpm.
  2. В командной строке запустите git config --global core.editor "code --wait"

Теперь вы можете запустить git config --global -e и использовать VS Code в качестве редактора для настройки Git.

VS Code как инструмент сравнения Git

Добавьте в настройки Git следующее, чтобы использовать VS Code в качестве инструмента сравнения:

При этом используется параметр --diff, который вы можете передать в VS Code для сравнения двух файлов рядом друг с другом.

Подводя итог, вот несколько примеров использования VS Code в качестве редактора:

  • git rebase HEAD~3 - я делаю интерактивную перебазировку с помощью VS Code
  • git commit использует VS Code для сообщения фиксации
  • git add -p, за которым следует e для интерактивного добавления
  • git difftool ^ использовать VS Code в качестве редактора различий для изменений

Работа с запросами на включение

Visual Studio Code также поддерживает рабочие процессы запросов на вытягивание с помощью расширения GitHub Pull Requests and Issues, доступного в VS Code Marketplace. Расширения запроса на вытягивание позволяют просматривать, комментировать и проверять исходный код непосредственно в VS Code.

Дальнейшие шаги

    — Вступительное видео с обзором поддержки VS Code Git. - Узнайте о мощном редакторе VS Code. - Быстро перемещайтесь по исходному коду. - Вот где VS Code действительно сияет - Запуск задач с помощью Gulp, Grunt и Jake. Отображение ошибок и предупреждений. Если вы хотите интегрировать другого поставщика системы управления версиями в VS Code, см. наш API системы управления версиями.

Частые вопросы

Я инициализировал репозиторий, но действия в файле . все меню неактивны

Для отправки, извлечения и синхронизации необходимо настроить источник Git. Вы можете получить требуемый URL-адрес от хоста репозитория. Получив этот URL-адрес, вам нужно добавить его в настройки Git, выполнив пару действий в командной строке. Например:

Моя команда использует Team Foundation Version Control (TFVC) вместо Git. Что мне делать?

Используйте расширение Azure Repos, и это осветит поддержку TFVC.

Почему действия Pull, Push и Sync никогда не заканчиваются?

Обычно это означает, что в Git не настроено управление учетными данными, и вы по какой-то причине не получаете запросы на ввод учетных данных.

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

Как мне войти в Git с помощью моей организации Azure DevOps, для которой требуется многофакторная проверка подлинности?

Git Credential Manager (GCM) — это рекомендуемый помощник по учетным данным Git для Windows, macOS и Linux. Если вы используете Git для Windows, GCM уже установлен и настроен для вас. Если вы работаете в macOS или Linux, инструкции по установке есть в GCM README.

На моем компьютере установлен GitHub Desktop, но VS Code его игнорирует

VS Code поддерживает только официальный дистрибутив Git для интеграции с Git.

Я продолжаю получать диалоговые окна аутентификации Git всякий раз, когда запущен VS Code

VS Code автоматически получает изменения с сервера, чтобы представить вам сводку входящих изменений. Диалоговое окно проверки подлинности Git не зависит от самого VS Code и является частью вашего текущего помощника по учетным данным Git.

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

Еще один вариант — отключить функцию автоматической загрузки, изменив следующий параметр: "git.autofetch": false .

Могу ли я использовать аутентификацию SSH Git с VS Code?

Да, хотя VS Code проще всего работает с ключами SSH без кодовой фразы. Если у вас есть ключ SSH с парольной фразой, вам потребуется запустить VS Code из командной строки Git Bash, чтобы унаследовать его среду SSH.

Один из самых популярных редакторов исходного кода, Visual Studio Code, обычно называемый VS Code, очень удобен для начинающих. Его удобный интерфейс и расширенные функции делают его любимым как для начинающих, так и для опытных программистов.

Как запустить код в VS Code

Если вы новичок в VS Code и ищете упрощенное руководство по запуску кода, вы обратились по адресу. Мы поможем вам настроить необходимое программное обеспечение и запустить код с использованием знакомых языков, таких как C/C++ и Python, а также узнать, как запускать аргументы командной строки.

Ярлык для запуска кода в VS Code

В VS Code для запуска кода достаточно использовать ярлык. Это сочетание клавиш Ctrl + Alt + N. Есть еще несколько способов запуска кода.

Нажатие F1, а затем выбор «Выполнить код» также работает. Если вы хотите ввести его после нажатия F1, вы также можете это сделать.

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

Выполнить код также можно в главном меню редактора и в контекстном меню проводника.

Если вы хотите остановить выполнение кода, воспользуйтесь сочетанием клавиш Ctrl + Alt + M. Нажатие F1 также позволяет выбрать параметр «Остановить выполнение кода». Этот параметр также доступен в меню заголовка редактора и в канале вывода.

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

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

Как запустить код C в VS Code

Помимо знания кода C и VS Code, вам потребуется загрузить расширение C/C++. Без него вы не сможете запускать код C в VS Code.

Это инструкции по запуску кода C в VS Code:

Настройка необходимого программного обеспечения

Написание кода в VS Code

После того как вы завершите разовую настройку программного обеспечения, вы сможете легко использовать VS Code и язык C. Просто убедитесь, что другие необходимые программы установлены правильно, прежде чем запускать код, особенно пакеты.

Как запустить код Python в VS Code

Запускать код Python в VS Code относительно просто. Вам понадобится расширение и интерпретатор Python. Первый можно найти на рынке расширений VS Code, но интерпретаторы Python различаются в зависимости от того, как они установлены.

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

Покончив с предварительными этапами, давайте приступим к процессу написания кода.

Интерпретатор, который вы устанавливаете, зависит от ваших потребностей, но VS Code невероятно хорошо работает с Python независимо от вашего выбора интерпретатора.

Как запустить код JS в VS Code

JavaScript работает даже лучше в VS Code, так как в последнем уже есть JavaScript IntelliSense, рефакторинг и дополнительные расширенные функции для языка. Поскольку VS Code так хорошо работает с JS Code, требуется небольшая предварительная настройка, чтобы сразу приступить к работе.

Вот как вы будете запускать код JavaScript в VS Code:

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

Существует и более простой способ запуска кода JavaScript:

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

Как запустить код с аргументами в VS Code

Аргументы командной строки предназначены для отладки или запуска файлов кода, и VS Code полностью совместим с этими типами кода и отладки. В этом разделе вы узнаете, как запускать код с аргументами.

Прежде чем вы это сделаете, вы должны получить файл «launch.json». Если у вас его нет, вы можете создать его, выполнив следующие действия:

Следующие шаги предназначены для запуска кода с аргументами:

Это основы запуска вашего кода с аргументами. В данном случае мы говорим о Python, поскольку это самый простой пример.

Программирование стало проще

С этими знаниями выполнение кода в VS Code должно стать таким же естественным, как дыхание — при достаточной практике. Различные языки, которые вы можете использовать с VS Code, делают его мощной и простой в использовании IDE. Поэтому многие разработчики настоятельно рекомендуют начинающим программистам научиться его использовать.

Нравится ли вам использовать VS Code? Что вы думаете об интерфейсе? Дайте нам знать ваши мысли в разделе комментариев ниже.

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

Я только что опубликовал видео в стиле «TikTok» на официальном канале Visual Studio Code, объясняющее это, и — после многочисленных критических замечаний по поводу качества видео (ребята, это специально!) — у людей появилось больше вопросов, так что вот идет.

В видео я использую открытый проект с уже определенным файлом launch.json, что означает, что он открывает для вас правильный URL-адрес, когда вы начинаете отладку. Впрочем, это можно сделать и вручную. И это даже работает без локального сервера. Итак, давайте сделаем это.

Шаг 1. Создайте папку и назовите ее consoledebug
Шаг 2. Запустите Visual Studio Code, выберите «Открыть» — выберите эту папку

Новый экземпляр Visual Studio Code с

Шаг 3. Выберите «Новый файл», назовите его index.html
Шаг 4. Добавьте HTML/JS и сохраните его

HTML-пример для консоли отладка» ширина = «1922» высота = «1058» /><br /></p>
<p>Шаг 5. Выберите значок «Запустить и отладить» и нажмите кнопку «Запустить и отладить»</p>
<p><img class=

Visual Studio Code теперь открывает для вас окно браузера, и вы можете увидеть сообщение console.log из демонстрационного кода в консоли отладки.

Сообщения консоли в консоли отладки Visual Studio Code

Вы можете использовать консоль отладки, чтобы делать все, что вы обычно делаете в консоли инструментов браузера. У вас также есть доступ ко всем удобным методам, таким как $ для document.querySelector. Попробуйте это, используя $(‘body’) в консоли отладки. Вы получаете всю информацию об элементе body текущего документа.

Доступ к телу документа из консоли отладки

Это полноценная консоль REPL, и вы можете просто ввести любой код JavaScript, например 2+3 или log.repeat(20)

Запуск JavaScript в Консоль отладки

У вас также есть полный доступ к объекту Window и DOM текущей страницы, например, чтобы изменить цвет фона документа, вы можете использовать $('h1').style.background = 'peachpuff' ( а не то, что я сделал сначала на скриншоте).

Изменение CSS из консоли

Чтобы узнать обо всех функциях консоли, см. документацию.

Если вы используете Edge в качестве браузера для отладки, вы также получите дополнительные преимущества. Нажав кнопку «Проверить» на панели отладки, вы откроете элементы инструментов разработчика и сеть прямо в вашем редакторе.

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

Но об этом позже.

Мои другие работы:

Тема Криса Хейлманна. Иконки SVG от Дэна Кламмера. Хостинг MediaTemple. При поддержке Coffee и Spotify Radio.

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