Как стать автором
Обновить

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

Время на прочтение 3 мин
Количество просмотров 13K
Автор оригинала: Kevin Dangoor

Представляем 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".
Теги:
Хабы:
+23
Комментарии 16
Комментарии Комментарии 16

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн