Новый простой редактор JavaScript в Firefox

http://blog.mozilla.com/devtools/2011/08/15/introducing-scratchpad/
  • Перевод

Представляем Scratchpad


В только что вышедший Firefox 6 входит новый инструмент для веб-разработчиков: простой редактор JavaScript (прим. переводчика — по-английски он называется Scratchpad («блокнот»). Буду его так и называть, чтобы не писать каждый раз «простой редактор JavaScript».) Идея проста: браузер это отличное место для экспериментов с JavaScript. Большинство JS-разработчиков уже знают об этом и используют такие инструменты, как веб-консоль и командную строку Firebug, чтобы использовать преимущества единственной среды, которая точно знает, как выглядит веб-страница.

Веб-консоль оптимизирована для ввода одной строки кода за раз (подсказка: с помощью Shift+Enter можно ввести несколько строк). В Firebug есть кнопка, включающая многострочный режим ввода, но всё равно работа основана на поочерёдном и линейном выполнении кусков кода.

К Scratchpad это не относится. Он полностью отвергает подход «строка ввода — строка вывода». Это просто текстовый редактор, который умеет запускать JavaScript.

Используем Scratchpad


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

Работать с ним проще некуда:
  1. Введите код
  2. Выделите какую-то его часть
  3. Выберите одну из трёх команд в контекстном меню или меню «Выполнить»:
    • Запустить
    • Исследовать
    • Отобразить

    Конечно, для них есть акселераторы, чтобы не было необходимости тянуться за мышкой.


«Запустить» просто выполняет выбранный код. Эту команду можно использовать для определения функций или запуска кода, который управляет страницей.

«Исследовать» выполняет код и открывает инспектор объектов на возвращённом значении.

Наконец, «отобразить» помещает результат выполнения кода в редактор. С помощью этой команды можно превратить редактор в калькулятор. Впрочем, полезнее будет её использовать для отслеживания результатов при проверке правильной работы страницы.

Замечу, кстати, что многие идеи Scratchpad происходят из сред Smalltalk. Тридцать лет прошло, а мы всё ещё его догоняем :)

Чтобы понять для себя, что такое Scratchpad, нужно увидеть его в действии. Либо запустите его сами, либо посмотрите видео Роба Кэмпбелла.

Пишем новый код в Scratchpad


Scratchpad — очень удобный способ попробовать ваш код там, где он и должен работать: в браузере. Пусть у вас есть какая-то функция, которая даёт неправильные результаты. Загрузите страницу, скопируйте код функции в редактор, и добавьте пару строк кода, который её вызывает. Вы быстро привыкнете немного менять функцию и перезапускать код. Когда наконец получите желаемый результат, скопируйте функцию обратно из редактора в тот файл, где она была определена. И всё это можно отладить без единой перезагрузки страницы!

Используем фрагменты кода


Scratchpad умеет загружать файлы с кодом на JavaScript и сохранять своё содержимое. Это позволяет сохранять наборы часто используемых функциях. Например, если ваш сайт использует AJAX для загрузки различных данных, сохраните все такие вызовы в один файл и сможете получить эти данные в любой момент работы над сайтом.

Об областях видимости


Как и веб-консоль, код в Scratchpad видит все переменные на странице, но переменные, определённые в Scratchpad, странице недоступны. Если вы хотите определить переменную (скажем, foo), видимую JavaScript-коду страницы, можно присвоить её объекту window: window.foo = 1.

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

Наконец, если работаете над самим Firefox или расширениями для него, можно дать Scratchpad доступ к внутренностям браузера. Для этого сделайте в about:config настройку devtools.chrome.enabled истинной и поменяйте «среду» в редакторе с «содержимого» на «браузер». Но если вы введёте какой-то код, из-за которого браузер начнёт посылать на Google+ демотиваторы — чур, я не виноват!

Планы на будущее


Scratchpad прост, и мы хотим это сохранить. Мы планируем несколько улучшений, которые появятся в ближайших версиях Firefox, но суть — «текстовый редактор, умеющий запускать JavaScript» — останется неизменной.

Мы ждём ваших отзывов о Scratchpad! Напишите нам в список рассылки dev-apps-firefox (прим. переводчика — по-английски), что вы думаете. Или начните участвовать в нашей работе и сделайте Scratchpad и другие инструменты для разработчиков ещё лучше.

Дополнение: в Firefox 8 планируется использовать для Scratchpad редактор Orion, дающий подсветку синтаксиса (хотя по умолчанию он будет отключен). Его можно включить, установив для настройки devtools.editor.component значение "orion".
Поделиться публикацией

Похожие публикации

Комментарии 16

    +2
    > В новую версию Firefox

    Можно уточнение для пользователей не следящих внимательно за развитием firefox?
      +1
      Внёс.
      +6
      С подсветкой и форматированием кода уже есть Phoenix
        0
        А есть еще что-то подобное? У Phoenix от табов и пустых строк в JS сносит крышу.
        +1
        Не знал, попробую.
          0
          Спасибо за наводку! Периодически комментарии полезнее самой статьи, хотя статья тоже ок в плане поделится информацией.
          +1
          >Для этого сделайте в about:config настройку devtools.chrome.enabled истинной
          Как-то пропагандистски звучит :) По мне так true/false не нуждаются в переводе.
            0
            потому что по своей сути true/false это вкл/выкл (да/нет), а не истина и ложь. и true/false имеют значения булевого типа языков программирования, а не native English
            –2
            В большинстве случаев когда надо проверить какую то идею, гораздо удобнее пользоваться такими сервисами как jsfiddle.net/ и jsbin.com/ (я лично пользуюсь jsfiddle, очень удобно). Там все реализовано намного красивее и удобнее.
              +2
              Отличие в том, что в Scratchpad (и в Phoenix) код выполняется на текущей странице, с учётом уже существующего на ней JS.
              0
              Вот бы такую плюшку под андроид. Иногда где-нибудь в дороге приходит в голову какая-нибудь идея типа «а что будет, если написать вот так?», хочется проверить, а консоли под рукой нет. А пока доедешь до компа, благополучно забываешь, что ты там придумал.
                –1
                Забавно, а на моем стареньком телефоне со всеми осуждаемой Symbian OS на борту есть приложение диктофона и текстовые заметки для запоминания всего и вся :). Неужто Android такой слабенький…
                  0
                  Софта для заметок-то навалом. Но хочется не только записать, но и тут же запустить.

                  > Неужто Android такой слабенький…

                  Too fat.
                +1
                Нет подсветки синтаксиса, ладно, для маленьких скриптов можно обойтись, но как без автокомплита и сниппетов что-то быстро выполнить?

                Не лишним был бы инспектор, вставляющий id/class выбранного элемента или css селектор.

                З. Ы. даже tab не обрабатывается.
                  0
                  [FYI] в Хроме в ДевТулах можно редактировать джаваскрипт и CSS на лету с подсветкой синтаксиса, причем правки в CSS сразу же «коммитятся» в VM, а для джаваскрипта нужно нажать Ctrl+S в редакторе (и сразу же можно дебажить новую версию). Включить редактор можно двойным щелчком мыши в панелях Resources и Scripts.

                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                  Самое читаемое