Черновик

Простой редактор JavaScript (Scratchpad) обеспечивает среду для экспериментов с JavaScript-кодом. Вы можете писать и запускать в нём код, взаимодействующий с содержимым веб-страницы, и проверять результаты его выполнения.

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

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

Открываем Простой редактор

Чтобы открыть окно Простого редактора JavaScript, нажмите Shift F4, либо перейдите в меню Веб-разработка (которое находится в меню Инструменты на OS X и Linux), где выберите пункт «Простой редактор JavaScript». Откроется окно редактора с небольшим комментарием о том, как использовать Простой редактор. В этом окне вы можете сразу попробовать писать код на JavaScript.

Редактирование

Окно Черновика выглядит как-то так (на Mac OS X строка меню находится сверху экрана):

A screenshot of the Scratchpad

Меню File предлагает варианты для сохранения и загрузки фрагментов  JavaScript-кода, так что вы можете повторно использовать код позже, если хотите.

Завершение кода и инлайн документация

Завершение кода и информация о типе доступна только с Firefox 32 и далее.

С Firefox 32 сборки Scratchpad интегрирует tern code analysis engine, и использует для предоставления предложений автозаполнения и всплывающие окна, содержащие информацию о текущем символе. Для просмотра списка предложений автозавершения, нажмите Ctrl Space. Чтобы показать всплывающее окно, нажмите Shift Space в Firefox 32 или Ctrl Shift Space в Firefox 33+.

Например, попробуйте ввести d, затем нажмите Ctrl Space.Вы увидите это:

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

Если выбран документ, а затем addEventListener, а затем нажмите Shift Space вы увидите всплывающее окно, которое показывает краткую информацию о синтаксисе функции и краткое описание:

"[docs]" ссылка ведет к документации MDN для символа.

Выполнение кода

После того, как вы написали свой код, выделите код, который вы хотите запустить. Если вы ничего не выделите, будет запущен весь код в окне. Затем выберите способ, которым хотите запустить, с помощью одной из кнопок наверху, меню Выполнить в строке меню, или контекстного меню. Код выполняется в scope выбранной в данный момент вкладки. Any variables you declare outside of a function will be added to the global object for that tab.

Доступны четыре варианта выполнения.

Запуск

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

Исследовать

Опция Исследовать выполняет код так же, как и Запустить; однако затем открывается объект Инспектор, чтобы вы могли изучить значение, которое вернул код.

Например, если вы введете код:

window

Затем выберите Исследовать, вы получите окно Инспектора, которое может выглядеть примерно так:

Inspecting an object in the Scratchpad

Отобразить

Опция «Отобразить» выполняет выделенный код, затем вставляет результат непосредственно в окно редактора в качестве комментария, так что её можно использовать как REPL.

Перезагрузка и запуск

Опция «Перезагрузить и запустить» доступна только в меню Выполнить. Она сначала перезагружает страницу, потом выполняет код, когда сработает событие «load» этой страницы. Это полезно для выполнения кода в первоначальном окружении.

Запуск блокнота в контексте браузера

Вы можете запустить блокнот в контексте браузера в целом, а не конкретной веб-страницы. Это полезно, если вы работаете над самим Firefox или разработкой дополнений. Для этой проверки "Включить хром и дополнения отладки" в Developer Tool Settings. После того, как вы сделали это, меню Environment станет опцией браузера; как только это произойдет, вашей сферой станет весь браузер, а не только содержимое страницы, как вы видите из ниже рассмотренного:

window
/*
[object ChromeWindow]
*/

gBrowser
/*
[object XULElement]
*/

Контекст выполнения Scratchpad установлен в браузере, когда фрагмент файла имеет
// -sp-context: браузер
на первой строке.

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

  Windows OS X Linux
Открыть простой редактор JavaScript Shift + F4 Shift + F4 Shift + F4
Запустить код из простого редактора JavaScript Ctrl + R Cmd + R Ctrl + R
Запустить код из простого редактора JavaScript, отобразить результат в >инспекторе объектов Ctrl + I Cmd + I Ctrl + I
Запустить код из простого редактора JavaScript, вставить результат в качестве комментария Ctrl + L Cmd + L Ctrl + L
Повторно вычислить текущую функцию Ctrl + E Cmd + E Ctrl + E
Перезагрузить текущую страницу, затем запустить код из простого редактора JavaScript Ctrl + Shift + R Cmd + Shift + R Ctrl + Shift + R
Сохранить код Ctrl + S Cmd + S Ctrl + S
Открыть существующий код Ctrl + O Cmd + O Ctrl + O
Создать новый код Ctrl + N Cmd + N Ctrl + N
Закрыть простой редактор JavaScript Ctrl + W Cmd + W Ctrl + W
Красивая печать кода Ctrl + P Cmd + P Ctrl + P
Показать предложения автодополнения (новинка в Firefox 32) Ctrl + Space Ctrl + Space Ctrl + Space
Показать встроенную документацию (только Firefox 32) Shift + Пробел Shift + Пробел Shift + Пробел
Показать встроенную документацию (Firefox 33 и далее) Ctrl + Shift + Пробел Ctrl + Shift + Пробел Ctrl + Shift + Пробел

Сочетания клавиш редактора исходного кода

Эта таблица перечисляет умолчательные клавиатурные сокращения для редактора исходного кода.

Вместо них в разделе Настройки редактора настроек инструментов разработчика, вы можете выбрать схему привязки клавиш Vim, Emacs или Sublime Text.

Для этого откройте страницу about:config, выберите настройку devtools.editor.keymap и присвойте ей значение "vim", "emacs" или "sublime". Если вы сделаете это, выбранная схема привязки будет использоваться для всех инструментов разработчика, использующих редактор исходного кода. Вам нужно будет повторно открыть редактор, чтобы изменения вступили в силу.

Начиная с Firefox 33 и выше, настройки схемы привязки клавиш выставляются в разделе Настройки редактора настроек инструментов разработчика и вы можете установить её там вместо ручного редактирования about:config.

  Windows OS X Linux
Перейти к строке Ctrl + J Cmd + J Ctrl + J
Найти в файле Ctrl + F Cmd + F Ctrl + F
Найти далее Ctrl + G Cmd + G Ctrl + G
Выделить всё Ctrl + A Cmd + A Ctrl + A
Вырезать Ctrl + X Cmd + X Ctrl + X
Копировать Ctrl + C Cmd + C Ctrl + C
Вставить Ctrl + V Cmd + V Ctrl + V
Отменить Ctrl + Z Cmd + Z Ctrl + Z
Повторить Ctrl + Shift + Z / Ctrl + Y Cmd + Shift + Z / Cmd + Y Ctrl + Shift + Z / Ctrl + Y
Отступ Tab Tab Tab
Убрать отступ Shift + Tab Shift + Tab Shift + Tab
Переместить строки вверх Alt + вверх Alt + вверх Alt + вверх
Переместить строки вниз Alt + вниз Alt + вниз Alt + вниз
За-/раскомментировать строки Ctrl + / Cmd + / Ctrl + /

Метки документа и участники

 Внесли вклад в эту страницу: Tihoem, Aleksej, makorzh, Nuclear
 Обновлялась последний раз: Tihoem,