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

В отличие от Веб-консоли, которая позволяет интерпретировать только одну строку кода за раз, этот редактор позволяет вам редактировать большие фрагменты кода на 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 по элементу.

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

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

Запуск

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

Исследовать

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

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

Отобразить

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

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

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

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

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

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