Черновик

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

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

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

Открываем редактор в отдельном окне

Чтобы открыть окно редактора JavaScript в отдельном окне:

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

Открытие Редактора в окне Инструменты разработки

Начиная с Firefox 47, вы можете открыть редактор внутри окна "Инструменты разработки". Вначале установите галочку напротив «Простой редактор JavaScript», которая находится  в настройках окна "Инструменты разработки" в области "Инструменты разработчика Firefox по умолчанию".

Теперь Редактор будет доступен в окне "Инструменты", наряду с Инспектором, Консолью, Отладчиком и другими. Это особенно удобно в режиме раздельной консоли: например, можно использовать редактор как постоянный многострочный редактор, и консоль для взаимодесствия со страницей.

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

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

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

Автозавершение кода

Редактор интегрирует анализатор кода Tern,  и использует его для предоставления автодополнений и всплывающих подсказок с информацией о текущем символе. Для просмотра автодополнений нажмите Ctrl + Space.

Например, напишите d, после нажмите Ctrl + Space. Вы увидите окно с вариантами автодополнений: 

Иконка радом с каждым вариантом указывает на тип выбираемого элемента. Здесь же по выбранному элементу отображается полезная информация. Можно выбирать разные варианты предложений клавишами ↑ and ↓. Для утверждения и вставки слова в текст нажмите Enter or Tab.

Inline documentation

Для просмотра всплывающего окна с документацией нажмите Ctrl + Shift + Space, когда курсор на идентификаторе (Javascript). Например, если вы напишите document.addEventListener, нажмёте Ctrl + Shift + Space, то увидите всплывающее окно, которое показывает краткую информацию о синтаксисе этой функции и краткое описание:

Ссылка [документация] откроет в окне документацию MDN по элементу.

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

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

Запуск

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

Исследовать

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

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

window

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

Отобразить

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

Перезагрузить и запустить

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

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

Вы можете запустить блокнот в контексте браузера в целом, а не для конкретной веб-страницы. Например, если вы работаете над самим Firefox или разработкой дополнений. Для этого поставьте галочку "Включить инструменты отладки browser chrome и дополнений" в настройках "Инструментов разработки". После этого в меню "Окружение" (в Редакторе) появится опция "Браузер"; как только это произойдет, вашей сферой станет весь браузер, а не только содержимое страницы. Ниже рассмотрен пример, где объект window доступен в любом режиме Окружения, а объект gBrowser только в режиме "Браузер" (иначе появится сообщение об ошибке):

window
/*
[object ChromeWindow]
*/

gBrowser
/*
[object XULElement]
*/

Контекст выполнения Реактора установлен на "Браузер". Если вы открываете файл со скриптом в редакторе, и он первой строкой имеет // -sp-context: browser, то окружение автоматически переключится в режим "Браузер". Это происходит только при открытии.

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

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

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

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

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

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