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

Запуск фрагментов Кода JavaScript на любой веб-странице

Если вы несколько раз вводите один и тот же код в консольное средство, попробуйте сохранить код в виде фрагмента кода, а затем запустить его. Фрагменты кода — это скрипты, созданные в средстве «Источники «. Фрагменты кода имеют доступ к контексту JavaScript веб-страницы, и вы можете запускать фрагменты на любой веб-странице. Фрагменты можно использовать для изменения веб-страницы, например для изменения ее содержимого или внешнего вида, а также для извлечения данных.

На следующем снимке экрана показан Microsoft Edge с веб-страницей слева и Средствами разработки справа. Открыт инструмент Источники , в котором отображается исходный код фрагмента, выбранного на вкладке Фрагменты кода. Код фрагмента был выполнен, внося изменения на веб-страницу:

Исходный код фрагмента кода показан ниже:

// Change the background color to "dimgrey". document.body.style.backgroundColor = "dimgrey"; // Add a paragraph at the bottom of the document. const p = document.createElement("p"); p.textContent = "Hello world"; p.style.color = "white"; p.style.fontSize = "2rem"; document.body.appendChild(p); // Log a message to the console. console.log("Hello world"); 

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

При запуске фрагмента кода на веб-странице исходный код этого фрагмента добавляется на текущую веб-страницу. Дополнительные сведения об изменении существующего кода веб-страницы вместо добавления нового кода см. в разделе Переопределение ресурсов веб-страницы с помощью локальных копий (вкладка Переопределения).

Включение всего кода в один файл

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

Открытие вкладки «Фрагменты»

Вкладка «Фрагменты» сгруппирована с вкладкой Страница в области Навигатор слева от средства «Источники«.

Чтобы открыть вкладку Фрагменты, выполните следующие действия:

1. Чтобы открыть Средства разработки, щелкните веб-страницу правой кнопкой мыши и выберите пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроется devTools.
2. В DevTools на панели действий выберите вкладку Источники . Если эта вкладка не отображается, нажмите кнопку Дополнительные инструменты («) .
3. В области Навигатор (слева) выберите вкладку Фрагменты кода. Чтобы получить доступ к параметру Фрагменты кода , может потребоваться нажать кнопку Дополнительные вкладки ().

Откройте вкладку «Фрагменты» в меню «Команда»

Вы также можете открыть вкладку Фрагменты с помощью меню команд:

1. Выберите все элементы в средствах разработки, чтобы сосредоточиться на средствах разработки.
2. Нажмите клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS), чтобы открыть меню Command.
3. Начните вводить «фрагменты», выберите Показать фрагменты и нажмите клавишу ВВОД , чтобы выполнить команду:

Создание нового фрагмента кода

Чтобы создать новый фрагмент кода на вкладке «Фрагменты», выполните следующие действия:

1. Откройте вкладку Фрагменты кода.
2. Щелкните Новый фрагмент кода (+).
3. Введите имя фрагмента и нажмите клавишу ВВОД:

Создание нового фрагмента из меню «Команда»

1. Сфокусируйте курсор где-нибудь в Средствах разработки.
2. Нажмите клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS), чтобы открыть меню Command.
3. Начните вводить «фрагмент», выберите Создать новый фрагмент кода и нажмите клавишу ВВОД:

Чтобы переименовать новый фрагмент, см. раздел Переименование фрагмента кода ниже.

Изменение фрагмента кода

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

1. Откройте вкладку Фрагменты кода.
2. На вкладке Фрагменты щелкните имя фрагмента кода, который требуется изменить. Фрагмент кода откроется в редакторе кода:
3. Используйте редактор кода , чтобы добавить JavaScript в фрагмент кода.
4. Если рядом с именем фрагмента кода отображается звездочка, это означает, что у вас есть несохраняемый код. Нажмите клавиши CTRL+S (Windows, Linux) или COMMAND+S (macOS), чтобы сохранить:

Запуск фрагмента кода

Запуск фрагмента из средства «Источники»

1. Откройте вкладку Фрагменты кода.
2. Щелкните имя фрагмента, который требуется запустить. Фрагмент кода откроется в редакторе кода:
3. Нажмите кнопку Выполнить фрагмент кода () или нажмите клавиши CTRL+ВВОД (Windows, Linux) или COMMAND+ВВОД (macOS):

Запуск фрагмента кода из меню «Команда»

1. Сфокусируйте курсор где-нибудь в Средствах разработки.
2. Нажмите клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS), чтобы открыть меню Command.
3. > Удалите символ и введите символ !, за которым следует имя фрагмента кода, который вы хотите запустить:
4. Нажмите клавишу ВВОД , чтобы запустить фрагмент кода.

Переименование фрагмента

1. Откройте вкладку Фрагменты кода.
2. Щелкните правой кнопкой мыши имя фрагмента и выберите команду Переименовать.

Удаление фрагмента кода

1. Откройте вкладку Фрагменты кода.
2. Щелкните правой кнопкой мыши имя фрагмента и выберите команду Удалить.

Сохранение фрагмента кода

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

1. Откройте вкладку Фрагменты кода.
2. Щелкните правой кнопкой мыши имя фрагмента и выберите команду Сохранить как.
3. При появлении запроса введите имя файла и расположение.

Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Исходная страница находится здесь и автор Kayce Basques (Технический писатель, Chrome DevTools & Lighthouse).

Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.

Как выполнить скрипт, в той вкладке браузера в которой мы находимся, из popup меню , расширения

Как выполнить скрипт, в той вкладке браузера в которой мы находимся, из popup меню , расширения? Когда я нажимаю на расширение, открывается попап меню, там есть кнопка, которая вызывает скрипт. Но, этот скрипт должен выполняться на той странице в которой мы находимся, а не в popup.html . Как так сделать? Если я этот скрипт через консоль вставляю, все отрабатывает. То есть как получить доступ к странице что бы там можно было выполнить скрипт в её окружении? У меня там ratiobutton (на веб-старницы к которой будет применяться плагин) и хочу их просто включать через скрипт. вот мой манифест

 < "name": "test", "version": "2", "manifest_version": 2, "description": "Test!", "icons": < "16" : "images/GB-19.png", "48" : "images/GB-48.png", "128" : "images/GB-128.png" >, "browser_action": < "default_icon": "images/GB-19.png", "default_title": "TestExam", "default_popup": "popup.html" >, "permissions": ["tabs","activeTab"] > 

        
  
a b c d e f g h
 
    

Отслеживать

задан 7 янв 2016 в 16:56

492 7 7 серебряных знаков 21 21 бронзовый знак

popup не доступна текущая страница ни в каком виде. Вам надо сделать content script, который будет загружен на этой странице и общаться с этим скриптом через сообщения (см. chrome.runtine.onMessage, chrome.runtime.sendMessage, chrome.tabs.sendMessage) Из контент скрипта вы получите доступ к текущему document таба на котором он загрузился, но при этом не получите доступ к JS коду самой страницы, но вот это последнее ограничение в принципе обойти можно, только обычно не нужно

7 янв 2016 в 17:20

Mike А Как? Что то у меня с попала не получается обзаться через эти сообщения.

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

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

Но по умолчанию в браузере ошибки не видны. То есть, если что-то пойдёт не так, мы не увидим, что именно сломалось, и не сможем это починить.

Для решения задач такого рода в браузер встроены так называемые «Инструменты разработки» (Developer tools или сокращённо — devtools).

Chrome и Firefox снискали любовь подавляющего большинства программистов во многом благодаря своим отменным инструментам разработчика. Остальные браузеры, хотя и оснащены подобными инструментами, но всё же зачастую находятся в роли догоняющих и по качеству, и по количеству свойств и особенностей. В общем, почти у всех программистов есть свой «любимый» браузер. Другие используются только для отлова и исправления специфичных «браузерозависимых» ошибок.

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

Google Chrome

В её JavaScript-коде закралась ошибка. Она не видна обычному посетителю, поэтому давайте найдём её при помощи инструментов разработки.

Нажмите F12 или, если вы используете Mac, Cmd + Opt + J .

По умолчанию в инструментах разработчика откроется вкладка Console (консоль).

Она выглядит приблизительно следующим образом:

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

• В консоли мы можем увидеть сообщение об ошибке, отрисованное красным цветом. В нашем случае скрипт содержит неизвестную команду «lalala».
• Справа присутствует ссылка на исходный код bug.html:12 с номером строки кода, в которой эта ошибка и произошла.

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

Многострочный ввод

Обычно при нажатии Enter введённая строка кода сразу выполняется.

Чтобы перенести строку, нажмите Shift + Enter . Так можно вводить более длинный JS-код.

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

Firefox, Edge и другие

Инструменты разработчика в большинстве браузеров открываются при нажатии на F12 .

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

Safari

Safari (браузер для Mac, не поддерживается в системах Windows/Linux) всё же имеет небольшое отличие. Для начала работы нам нужно включить «Меню разработки» («Developer menu»).

Откройте Настройки (Preferences) и перейдите к панели «Продвинутые» (Advanced). В самом низу вы найдёте чекбокс:

Теперь консоль можно активировать нажатием клавиш Cmd + Opt + C . Также обратите внимание на новый элемент меню «Разработка» («Develop»). В нем содержится большое количество команд и настроек.

Итого

• Инструменты разработчика позволяют нам смотреть ошибки, выполнять команды, проверять значение переменных и ещё много всего полезного.
• В большинстве браузеров, работающих под Windows, инструменты разработчика можно открыть, нажав F12 . В Chrome для Mac используйте комбинацию Cmd + Opt + J , Safari: Cmd + Opt + C (необходимо предварительное включение «Меню разработчика»).

Теперь наше окружение полностью настроено. В следующем разделе мы перейдём непосредственно к JavaScript.

Запуск JavaScript в консоли

Вы можете ввести любое выражение JavaScript, инструкцию или фрагмент кода в консоли, и он запускается сразу и в интерактивном режиме по мере ввода. Это возможно, так как средство Консоли в Средствах разработки является средой REPL . REPL — чтение, оценка, печать и цикл.

Консоль:

1. Считывает вводимый код JavaScript.
2. Оценивает код.
3. Выводит результат выражения.
4. Цикл возвращается к первому шагу.

Чтобы ввести операторы и выражения JavaScript в интерактивном режиме в консоли, выполните следующие действия:

1. Щелкните правой кнопкой мыши веб-страницу и выберите Пункт Проверить. Откроется devTools. Или нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS), чтобы напрямую открыть консоль DevTools.
2. При необходимости щелкните в средствах разработки, чтобы сосредоточиться на нем, а затем нажмите клавишу ESC , чтобы открыть консоль.
3. Щелкните консоль и введите 2+2 , не нажимая клавишу ВВОД. Консоль сразу же отображает результат 4 в следующей строке при вводе. Эта Eager evaluation функция помогает создавать допустимые коды JavaScript. Консоль отображает результат во время ввода, независимо от того, правильно ли ваш Код JavaScript, и независимо от того, существует ли допустимый результат.
4. При нажатии клавиши ВВОДконсоль запускает команду JavaScript (выражение или инструкцию), отображает результат, а затем перемещает курсор вниз, чтобы вы могли ввести следующую команду JavaScript.

Автозаполнения для записи сложных выражений

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

Чтобы попробовать автозавершение при написании многокомпонентных выражений, выполните следующие действия:

1. Тип doc .
2. Нажмите клавиши со стрелками, чтобы выделить document их в раскрывающемся меню.
3. Нажмите клавишу TAB , чтобы выбрать document .
4. Тип .bo .
5. Нажмите клавишу TAB , чтобы выбрать document.body .
6. Введите другой . , чтобы получить большой список возможных свойств и методов, доступных в тексте текущей веб-страницы.

Журнал консоли

Как и во многих других средах командной строки, журнал введенных команд доступен для повторного использования. Нажмите клавишу СТРЕЛКА ВВЕРХ , чтобы отобразить команды, введенные ранее.

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

Кроме того, консоль также предлагает довольно много служебных методов , которые делают вашу жизнь проще. Например, всегда содержит результат последнего выражения, $_ запущенного в консоли.

в консоли всегда содержит последний результат.» /> в консоли всегда содержит последний результат.» />

Многостроковые изменения

По умолчанию консоль предоставляет только одну строку для записи выражения JavaScript. Код выполняется при нажатии клавиши ВВОД. Ограничение на одну строку может сорвать вас. Чтобы обойти ограничение на 1 строку, нажмите клавиши SHIFT+ВВОД , а не ВВОД. В следующем примере отображаемое значение является результатом выполнения всех строк (инструкций) по порядку:

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

Сетевые запросы с использованием await() верхнего уровня

За исключением собственных скриптов, консоль поддерживает ожидание верхнего уровня для выполнения произвольного асинхронного JavaScript. Например, используйте fetch API без упаковки инструкции await с асинхронной функцией.

Чтобы получить последние 50 проблем, которые были зарегистрированы в средствах разработчика Microsoft Edge для Visual Studio Code репозитория GitHub:

1. В средствах разработки откройте консоль.
2. Скопируйте и вставьте следующий фрагмент кода, чтобы получить объект, содержащий 10 записей:

await ( await fetch( 'https://api.github.com/repos/microsoft/vscode-edge-devtools/issues?state=all&per_page=50&page=1' )).json(); 

10 записей трудно распознать, так как отображается много информации.

При необходимости используйте console.table() метод журнала, чтобы получать только интересующие вас сведения: Чтобы повторно использовать данные, возвращенные из выражения, используйте copy() служебный метод Консоли.

copy(await (await fetch( 'https://api.github.com/repos/microsoft/vscode-edge-devtools/issues?state=all&per_page=50&page=1' )).json())