Как редактировать js в браузере firefox

Обновлено: 08.01.2025

Исследуйте, редактируйте и отлаживайте HTML, CSS и JavaScript на компьютерах и мобильных устройствах. Для получения последних обновлений для инструментов разработки скачайте Firefox Developer Edition.

На заметку: если вы только начинаете веб разработку и использование инструментов разработчика, наши документы по изучению веб разработки помогут вам - для начала посмотрите Getting started with the Web (Начало работы в веб) и What are browser developer tools (Инструменты разработки браузера).

Основные инструменты

Вы можете открыть Средства Разработчика Firefox (Firefox Developer Tools) с помощью меню, выбрав Открыть меню > Веб-разработка > Инструменты разработчика или используя комбинации клавиш Ctrl + Shift + I или F12 на Windows и Linux, или Cmd + Opt + I на macOS.

Меню в виде многоточия в правой верхней части окна Средств Разработчика содержит команды, позволяющие вам выполнить некоторые общие действия или изменить настройки Средств Разработчика.

	Эта кнопка доступна только в случае, если на странице присутствует несколько фреймов (тегов iframe ). Нажатие на эту кнопку отображает список фреймов (тегов iframe ) на текущей странице и позволяет выбрать тот фрейм (тег iframe ) с которым вы хотите работать.
	Щелчок по данной кнопке создаёт снимок экрана (screenshot) текущей страницы. (Внимание: По умолчанию данная функция отключена и, при необходимости, должна быть включена в настройках.)
	Переключение в/из Режима Адаптивного Дизайна (Responsive Design Mode).
	Открывает меню, которое включает настройки "прилипания" (docking) окна Средств Разработчика, возможности отобразить или скрыть консоль, а также переход к диалогу настроек Средств Разработчика. Это меню также содержит ссылки на документацию по Веб-инструментам Firefox (Firefox Web Tools) и на Mozilla Community.
	Закрывает окно Средств Разработчика

Инспектор страницы

Инструмент для просмотра и редактирования содержимого и макета страницы. Позволяет рассмотреть страницу с разных точек зрения, включая блочную модель, анимацию и grid компоновку.

Web-консоль

Отладчик JavaScript

Позволяет остановить, выполнять по шагам, исследовать и изменять JavaScript-код выполняемый на странице.

Сетевой монитор

Показывает сетевые запросы возникающие в процессе загрузки страницы.

Инструменты производительности

Позволяют провести общий анализ отзывчивости вашего сайта, а также производительности кода JavaScript и макета.

Режим адаптивного дизайна

Позволяет увидеть, как будут выглядеть и работать ваши сайты или приложения на различных устройствах или типах сетей.

Инспектор доступности

Предоставляет средства для доступа к дереву доступности страницы, позволяя вам проверить, что отсутствует или иным образом требует внимания.

Больше инструментов

Эти инструменты разработчика также встроены в Firefox. В отличие от «Core Tools» описанных выше, могут не использоваться в повседневной работе.

Память Выясните, какие объекты сохраняют память в использовании. Storage Inspector Проверьте файлы cookie, локальное хранилище, indexedDB и хранилище сеансов на странице. DOM Property Viewer Проверьте свойства DOM страницы, функции и т.д. Панель инструментов разработчика Интерфейс командной строки для инструментов разработчика. Пипетка Получите код любого цвета со страницы. Scratchpad Текстовый редактор, встроенный в Firefox, который позволяет вам писать и выполнять JavaScript Редактор стилей Просмотр и редактирование стилей CSS для текущей страницы. Редактор шейдеров Просмотр и редактирование вершинных и фрагментных шейдеров, используемых WebGL. Редактор веб аудио Изучите график аудиоузлов в аудиоконтексте и измените их параметры. Делать скриншоты Сделайте скриншот всей страницы, или одного её элемента.

Подключение инструментов разработчика

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

about:debugging Отладка надстроек, вкладок контента и рабочих, работающих в браузере. Подключение к Firefox для Android Подключите инструменты разработчика к Firefox, работающему на устройстве Android. Подключение к iframes Подключите инструменты разработчика к конкретному iframe на текущей странице. Подключение к другим браузерам Подключите инструменты разработчика к Chrome на Android и Safari на iOS.

Отладка браузера

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

Расширение инструментов разработчика

Инструменты разработчика предназначены для расширения. Дополнения Firefox могут получить доступ к инструментам разработчика и компонентам, которые они используют для расширения существующих инструментов и добавления новых инструментов. С помощью протокола удалённой отладки вы можете реализовать свои собственные клиенты и серверы отладки, что позволяет отлаживать веб-сайты с помощью собственных инструментов или отлаживать различные цели с помощью инструментов Firefox.

Example devtools add-ons Use these examples to understand how to implement a devtools add-on. Add a new panel to the devtools Write an add-on that adds a new panel to the Toolbox. Remote Debugging Protocol The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device. Source Editor A code editor built into Firefox that can be embedded in your add-on. The Debugger Interface An API that lets JavaScript code observe the execution of other JavaScript code. The Firefox Developer Tools use this API to implement the JavaScript debugger. Web Console custom output How to extend and customize the output of the Web Console and the Browser Console.

Сделать вклад

Если вы хотите помочь улучшить инструменты разработчика, эти ресурсы помогут вам начать работу.

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

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

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

Используем Scratchpad

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

Введите код
Выделите какую-то его часть
Выберите одну из трёх команд в контекстном меню или меню «Выполнить»:
- Запустить
- Исследовать
- Отобразить
Конечно, для них есть акселераторы, чтобы не было необходимости тянуться за мышкой.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Я искал способ редактировать JavaScript в браузере, например Firefox, на лету и выполнять его. Firebug позволяет редактировать HTML и CSS на лету, но JavaScript-это боль. Я должен вернуться к источнику и изменить это.

Я не понимаю, почему инструменты разработчика браузера не позволяют редактировать. Есть ли способ сделать это?

[обновление]: Отмечен новый ответ в 2015 году

IE теперь предоставляет один из лучший опыт разработки / отладки
Chrome предоставляет IntelliSense при написании javaScript, что круто
FF работает так же, как 2010.

можно использовать все три (Firefox, Internet Explorer и Chrome) консоли браузера для обновления существующей функции: скажем, у меня была функция a() который использовал для консоли.log ('a'), я могу перейти к консоли, переопределить функцию a() as alert('a') и запустить его снова, чтобы увидеть предупреждение коробка.

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

В Chrome: Откройте панель Chrome DevTools - > Sources, перейдите в левую навигацию или нажмите Ctrl + O для открытия файлов, включенных в страницу.

затем вы можете отредактировать файл и нажать Ctrl + S , чтобы сохранить изменения, и посмотреть, что происходит с новыми кодами. Обычно я делаю это с помощью брейк-пойнтов.

Если вы отлаживаете и хотите сохранить изменения в локальной файловой системе, вы можете щелкнуть правой кнопкой мыши по навигации и выбрать Добавить папку в рабочую область:

в таком случае, если вы сохраните изменения в DevTools, соответствующий файл в вашей файловой системе также будет обновлен.

например добавляю папку в рабочую область, в ней есть 1.js:

затем я редактирую файл JS в DevTools, изменение обновляется в локальной файловой системе сразу же:

конечно, я нашел Execute JS (для firefox) иногда полезным, и я думаю, что это то, что вы ищете:

Он позволяет просматривать и изменять Javascript на Вашей странице.

Chrome имеет довольно сильную функцию для внесения изменений в код JS. Вы в основном устанавливаете некоторые точки останова и после того, как вы редактируете JS по своему желанию. дополнительная информация и демо -- где Пол Айриш исправляет сломанную страницу.

в случае FF вы можете использовать Developer Edition:

Отладчик JavaScript Стоп, пошагово, изучить и изменить JavaScript в страницу.

Chrome предоставляет отличное средство для редактирования javascript в браузере

step1: запустите инструмент разработки Откройте Chrome, загрузите страницу из локальной файловой системы / сервера и откройте "инструменты разработчика" в меню "Инструменты" или нажмите Ctrl+Shift+I / Cmd+Shift+I. перейдите на вкладку "Источник", затем щелкните значок "источники" или нажмите Ctrl+O, чтобы выбрать файл JavaScript

setp2: изменить Теперь вы можете сразу перейти к редактированию кода. Chrome также предлагает полезный список функций, который поможет вам найти нужную строку-нажмите Ctrl+Shift+O / Cmd+Shift+O

Шаг 3:сохранить Нажмите Ctrl+S / Cmd+S, чтобы сохранить изменения. Это обновляет файл в памяти и немедленно применяет изменения. Примечание однако этот код не запустится снова, поэтому изменения переменных инициализации не будут затронуты.

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

Шаг 4: отменить Ваше обновление вызвало проблему? Щелкните правой кнопкой мыши редактор и выберите локальные изменения. Нижняя панель отображает все последние изменения и позволяет вернуться назад.

Firefox предоставляет еще один инструмент для редактирования JavaScript в браузере

setp1: запуск Scratchpad Чтобы открыть окно "Блокнот", нажмите Shift F4 или перейдите в меню веб-разработчика (подменю в меню Сервис на OS X и Linux), затем выберите Scratchpad. Откроется окно редактора Scratchpad. Оттуда вы можете сразу начать писать код JavaScript, чтобы попробовать.

Шаг 2: редактирование Меню Файл предлагает опции для сохранения и загрузки фрагментов кода JavaScript, так что вы можете использовать код позже, если хотите.Информация о завершении кода и типе доступна только в Firefox 32 и далее. Чтобы вывести список предложений автозаполнения, нажмите Ctrl пробел. Чтобы отобразить всплывающее окно, нажмите Shift Space в Firefox 32 или Ctrl Shift Space в Firefox 33+.

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

доступно четыре варианта выполнения.

выполнить
проверить
дисплей
перезагрузить и запустить

для создания / редактирования javascript в браузере я бы использовал firebug(плагин для firefox) или встроенная панель инструментов разработчика firefox(лучше всего использовать с версия для разработчиков firefox).

Так. как только вы создадите это JS snippet, который исправляет сайт для вас, вы можете использовать GreaseMonkey(плагин)для выполнения скрипта фиксации сайта при каждом посещении. Таким образом, вы можете нормально использовать сайт и не выполнять его вручную при каждой загрузке страницы.

в настоящее время это невозможно в Firefox OTB. Смотрите Ошибки 737743 и 486546.

в отношении @artur-grzesiak, "стоп, шаг через, изучить и изменить", как представляется, относится к переменные

в chrome версии 42.0.2311 в Developer Tool, нажав на консоли вы можете получить окно, где вы можете редактировать javascript и после нажатия enter можно увидеть его эффект в браузере.

в Mozilla версии 37.0.1 после открытия инструмента разработчика нажмите на консоли редактировать код сценария java в правой части окна инструмента и после завершения редактирования нажмите на run, чтобы проверить код сценария java в браузере.

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

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

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

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

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

нажмите Shift + F4 , либо перейдите в меню Веб-разработка (которое находится в меню Инструменты на OS X и Linux), где выберите пункт «Простой редактор 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». Это полезно для выполнения кода в первоначальном окружении.

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

Контекст выполнения Реактора установлен на " Браузер". Если вы открываете файл со скриптом в редакторе, и он первой строкой имеет // -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 .

Читайте также: