Черновик

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

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

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

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

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

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

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

Новое в Firefox 47.

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

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

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

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

A screenshot of the Scratchpad

Меню 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

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

Inspecting an object in the Scratchpad

Отобразить

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

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

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

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

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

window
/*
[object ChromeWindow]
*/

gBrowser
/*
[object XULElement]
*/

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

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

  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 + /

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

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