From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../index.html" | 123 +++++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100644 "files/ru/tools/\321\207\320\265\321\200\320\275\320\276\320\262\320\270\320\272/index.html" (limited to 'files/ru/tools/черновик/index.html') diff --git "a/files/ru/tools/\321\207\320\265\321\200\320\275\320\276\320\262\320\270\320\272/index.html" "b/files/ru/tools/\321\207\320\265\321\200\320\275\320\276\320\262\320\270\320\272/index.html" new file mode 100644 index 0000000000..2046bd6a74 --- /dev/null +++ "b/files/ru/tools/\321\207\320\265\321\200\320\275\320\276\320\262\320\270\320\272/index.html" @@ -0,0 +1,123 @@ +--- +title: Черновик +slug: Tools/Черновик +tags: + - Scratchpad + - Блокнот + - Веб-разработка + - Редактор + - 'веб-разработка:инструменты' + - инструменты +translation_of: Archive/Tools/Scratchpad +--- +
{{ToolsSidebar}}
+ +

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

+ +

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

+ +

{{EmbedYouTube("Pt7DZACyClM")}}

+ +

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

+ +

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

+ +

Чтобы открыть окно редактора 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, то окружение автоматически переключится в режим "Браузер". Это происходит только при открытии.

+ +

+ +

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

+ +

{{ Page ("ru/docs/tools/Keyboard_shortcuts", "scratchpad") }}

+ +

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

+ +

{{ Page ("ru/docs/tools/Keyboard_shortcuts", "source-editor") }}

-- cgit v1.2.3-54-g00ecf