Js скрипт который при вставке в консоль браузера изменить язык
Современные браузеры предоставляют встроенные инструменты разработки для JavaScript и других технологий. Среди этих инструментов можно найти консоль, которая похожа на интерфейс оболочки, а также инструменты для проверки DOM, отладки и анализа сетевой активности.
Консоль можно использовать для регистрации информации как части процесса разработки JavaScript. Также консоль позволяет взаимодействовать с веб-страницей, выполняя выражения JavaScript в контексте страницы. По сути, консоль предоставляет возможность писать код JavaScript и при необходимости управлять им.
Данное руководство научит работать с консолью JavaScript в браузере и ознакомит с другими встроенными инструментами разработки, которые могут вам пригодиться.
Работа с консолью JavaScript в браузере
Большинство современных веб-браузеров, поддерживающих HTML и XHTML, по умолчанию предоставляют доступ к консоли разработчика, где вы можете работать с JavaScript в интерфейсе, подобном оболочке терминала. В этом разделе вы узнаете, как получить доступ к консоли в Firefox и Chrome.
Браузер Firefox
Чтобы открыть Web Console в браузере FireFox, откройте меню ☰ в верхнем правом углу.
Консоль откроется в нижней части окна браузера.
Вы также можете войти в веб-консоль с помощью сочетания клавиш Ctrl+Shift+K в Linux и Windows или Command+Option+K в macOS.
Браузер Chrome
Чтобы найти JavaScript Console в браузере Chrome, откройте меню в правом верхнем углу окна (кнопку с тремя точками по вертикали). Выберите More Tools → Developer Tools.
На экране появится панель. Выберите Console в верхнем меню, чтобы получить доступ к консоли JavaScript Console.
Вы также можете войти в веб-консоль с помощью сочетания клавиш Ctrl+Shift+J в Linux и Windows или Command+Option+J в macOS.
Работа с консолью JavaScript
В консоль можно вводить код JavaScript.
Для примера попробуйте написать простое предупреждение, которое будет выводить строку Hello, World!:
Нажмите Enter. В браузере появится всплывающее окно:
Обратите внимание: консоль также распечатает результат вычисления выражения, которое будет читаться как undefined.
Консоль может также логировать данные JavaScript с помощью console.log.
Чтобы отобразить строку «Hello, World!» в консоли, введите:
console.log("Hello, World!");
Hello, World!
Также консоль может обрабатывать математические вычисления:
console.log(2 + 6);
8
Попробуйте ввести более сложный пример:
console.log(34348.2342343403285953845 * 4310.23409128534);
148048930.17230788
Также консоль может работать с несколькими строками и переменными:
let d = new Date();
console.log("Today's date is " + d);
Today's date is Mon Jul 03 2017 16:06:51 GMT+0300
Если вам нужно изменить команду, которую вы ранее вводили в консоль, нажмите клавишу со стрелочкой вверх ↑ на клавиатуре. Это позволит вам отредактировать команду и запустить ее снова.
Окружение JavaScript Console подобно оболочке терминала, что позволяет протестировать код в режиме реального времени.
Работа с HTML-файлами
В консоли можно работать в контексте HTML-файла или страницы с динамической визуализацией. Это дает возможность поэкспериментировать с кодом JavaScript в контексте HTML, CSS и JavaScript.
Имейте в виду: как только вы перезагрузите страницу, измененную в консоли, она вернется к прежнему состоянию, поэтому обязательно сохраняйте все изменения, которые нужно оставить.
Создайте простой HTML-файл index.html.
Сохраните файл и откройте его в браузере. На экране появится страница с заголовком Today’s Date.
Теперь откройте консоль и используйте JavaScript, чтобы изменить страницу. Вставьте в HTML заголовок.
В консоли появится:
Today's date is Mon Jul 03 2017 16:15:55 GMT+0300
Today's date is Mon Jul 03 2017 16:15:55 GMT+0300
Затем можно изменить стиль страницы, например, цвет фона:
document.body.style.backgroundColor = "pink";
"pink"
Также можно изменить цвет текста на странице:
document.body.style.color = "white";
"white"
Создайте новый элемент с помощью тега
:
let p = document.createElement("P");
Затем можно создать текст и добавить его в абзац:
let t = document.createTextNode("Paragraph text.");
Добавьте текст в переменную р:
Затем вставьте переменную р в элемент
.
Теперь страница выглядит так:
Today's date is Mon Jul 03 2017 16:26:58 GMT+0300
Paragraph text.
Консоль позволяет поэкспериментировать с отображением и внешним видом HTML-страниц. Однако при этом важно помнить, что сам документ HTML не меняется при работе с ним в консоли. Как только вы перезагрузите страницу, она примет свой прежний вид.
Работа с другими инструментами разработки
В данном разделе вы ознакомитесь с другими встроенными инструментами разработки, которые можно использовать в браузерах.
Инструмент DOM (Document Object Model)
Во время загрузки любой страницы браузер создает объектную модель документа, или DOM страницы.
DOM – это дерево объектов, которое отображает иерархию HTML-элементов страницы. Дерево DOM можно просмотреть в панели Inspector в Firefox и в панели Elements в Chrome.
Эти инструменты позволяют проверять и редактировать элементы DOM, а также искать объекты HTML, связанные с конкретной страницей. DOM может показать, имеет ли фрагмент текста или изображение атрибут ID, и может определить значение этого атрибута.
Кроме того, в боковой панели или под панелью DOM можно найти стили CSS, которые используются в документе HTML или таблице стилей.
Чтобы отредактировать DOM в реальном времени, дважды кликните по выбранному элементу. Для примера можете попробовать превратить тег в .
Опять же, после обновления страница примет прежний вид.
Вкладка Network
Вкладка Network позволяет мониторить и записывать сетевые запросы. В этой вкладке показаны сетевые запросы браузера, в том числе запросы для загрузки страницы, время обслуживания запросов и сведения о каждом из них. Эти данные можно использовать для оптимизации производительности загрузки страницы и отладки запросов.
Использовать вкладку Network можно вместе с консолью JavaScript. Например, вы можете начать отладку страницы с помощью консоли, а затем открыть вкладку Network и просмотреть сетевую активность, не перезагружая страницу.
Дополнительные рекомендации по работе с сетевыми данными вы найдете в мануалах браузеров:
Отзывчивый дизайн
Сайты с отзывчивым дизайном быстро адаптируют свой вид и функции на различных устройствах: мобильных телефонах, планшетах, настольных компьютерах и ноутбуках. Размер экрана, плотность пикселей и ответ на прикосновения – факторы, которые следует учитывать при разработке адаптивных сайтов. Также принципы отзывчивого дизайна важно учитывать для того, чтобы веб-сайт был доступным и производительным вне зависимости от устройства, на котором его открывают.
Современные браузеры (в том числе Firefox и Chrome) предоставляют модели соблюдения принципов отзывчивого дизайна при разработке сайтов и приложений. Эти модели эмулируют поведение того или иного устройства, что позволяет протестировать и проанализировать все функции сайта.
Больше об этом можно узнать в руководствах браузеров:
Заключение
В этом руководстве представлен краткий обзор работы с консолью JavaScript в современных веб-браузерах. Также здесь можно найти информацию о других полезных инструментах разработки.
В данной статье я хочу рассказать вам об Internationalization API — интерфейсе, предоставляемом браузером, позволяющем выполнять интернационализацию и локализацию веб-приложений.
Статья состоит из 2 частей: теоретической и практической. В теоретической части мы кратко рассмотрим возможности, предоставляемые Internationalization API . В практической — создадим пример локализованного приложения с помощью разработанной мной утилиты.
Теория
Internationalization API предоставляет следующие возможности:
- локализованное (далее предполагается) сравнение строк
- форматирование чисел, включая валюту, различные единицы измерения и проценты
- форматирование даты и времени, включая относительные периоды, такие как завтра, вчера, через неделю и т.д.
- форматирование названий языков, регионов, скриптов и валют
- форматирование списков с соединительным союзом И или разделительным союзом ИЛИ
- "плюрализация" — перевод во множественное число
- преобразование регистра
Несмотря на то, что в JavaScript существуют такие методы для локализации как:
их зачастую оказывается недостаточно.
Кроме того, поведение данных методов определяется конкретной реализацией ECMAScript , т.е. браузером.
Функционал, определенный в Internationalization API , инкапсулирован в объекте Intl . Данный объект не имеет внутреннего метода [[Construct]] , поэтому не может вызываться как конструктор с помощью ключевого слова new . Он также не имеет внутреннего метода [[Call]] , поэтому не может вызываться как функция.
Intl включает в себя следующие интерфейсы-конструкторы:
- Collator — сравнение строк
- DateTimeFormat — форматирование даты и времени
- DisplayNames — форматирование названий языков, регионов и т.д. на других языках
- ListFormat — форматирование списков
- Locale — определение локали
- NumberFormat — форматирование чисел
- PluralRules — плюрализация
- RelativeTimeFormat — форматирование относительных периодов времени
Пример получения текущей даты и времени в дефолтной локали
Locale
Конструктор Locale используется для создания экземпляров идентификаторов локали. Первым обязательным аргументом, передаваемым Locale , является локаль, которая может состоять из следующего:
- код языка
- код диалекта
- код региона или страны
- один или несколько уникальных вариантных подтегов (subtags)
- одна или несколько последовательностей из расширения BCP 47
- последовательность из расширения для частного использования
В большинстве случаев достаточно указать код языка или код языка и код страны через дефис:
Вторым опциональным аргументом Locale является объект с настройками:
Локаль может быть строкой или объектом. Пустой массив означает использование текущей локали пользователя:
DateTimeFormat
Конструктор DateTimeFormat используется для форматирования даты и времени. Он принимает локаль и объект с настройками.
Свойство | Описание |
---|---|
timeZone | часовой пояс: UTC , America/New_York , Europe/Paris и т.д. |
calendar | календарь: chinese , gregory , hebrew , indian , islamic и т.д. |
numberingSystem | система счисления: arab , beng , fullwide , latin и т.д. |
localeMatcher | алгоритм для поиска совпадений: lookup , best fit |
formatMatcher | алгоритм для форматирования: basic , best fit |
hour12 | если имеет значение true , используется 12-часовой формат |
hourCycle | часовой формат: h11 , h12 , h23 , h24 |
dateStyle | стиль форматирования даты: full , long , medium , short |
weekday | день недели: long , short , narrow |
day | день месяца: numeric , 2-digit |
month | месяц: numeric , 2-digit , long , short , narrow |
year | год: numeric , 2-digit |
era | эпоха: long , short , narrow |
timeStyle | стиль форматирования времени: full , long , medium , short |
hour | часы: numeric , 2-digit |
minute | минуты: numeric , 2-digit |
second | секунды: numeric , 2-digit |
dayPeriod | часть дня (утро, вечер и т.п.): narrow , short , long |
timeZoneName | название часового пояса (UTC, PTC): long , short |
Настройки localeMatcher и formatMatcher могут передаваться любому конструктору, предоставляемому Intl , но используются редко.
По умолчанию new Intl.DateTimeFormat().format() возвращает текущую дату в кратком виде ( dateStyle: short ).
- formatToParts() — возвращает массив объектов, содержащих форматированную дату в виде пар ключ/значение ( < type: 'weekday', value: 'Monday' >)
- formatRange(startDate, endDate) — возвращает диапазон, например, 01/10/2022, 10:00 AM - 12:00 PM
- formatRangeToParts()
- resolveOptions() — возвращает объект со свойствами, значениями которых являются вычисленные настройки форматирования для локали, даты и времени
RelativeTimeFormat
Конструктор RelativeTimeFormat используется для локализации относительного времени, например, вчера, завтра, на следующей неделе, в прошлом месяце и т.д. Данный метод принимает локаль и объект с настройками.
Положительное число в amount означает будущее, отрицательное — прошлое.
Свойство | Описание |
---|---|
numeric | always — "1 день назад" (дефолтное значение), auto — "вчера" |
style | long (дефолтное значение), short , narrow |
В данном случае метод format в качестве аргументов принимает число и единицу времени.
NumberFormat
Конструктор NumberFormat используется для форматирования чисел, валюты, процентов и единиц измерения, таких как длина, температура и др. Данный метод принимает локаль и объект с настройками.
Свойство | Описание |
---|---|
style | вид единиц: decimal — число с плавающей точкой, currency — валюта, percent — проценты, unit — единицы измерения. От этой настройки зависят другие |
notation | стиль форматирования: standard , scientific , engineering , compact |
numberingSystem | система счисления: arab , beng , deva , fullwide , latn и др. |
minimumIntegerDigits | минимальное количество цифр целой части числа (от 1 до 21; по умолчанию 1) |
minimumFractionDigits | минимальное количество цифр после запятой (от 0 до 20; по умолчанию 0) |
maximumFractionDigits | максимальное количество цифр после запятой (от 0 до 20; по умолчанию наибольшее значение из minimumFractionDigits и 3) |
minimumSignificantDigits | минимальное количество значащих цифр (от 1 до 21; по умолчанию 1) |
maximumSignificantDigits | минимальное количество значащих цифр (от 1 до 21; по умолчанию minimumSignificantDigits) |
signDisplay | отображение символов +/- : auto , never , always , exceptZero |
useGrouping | если имеет значение false , разделители тысяч будут игнорироваться |
compactDisplay | форматирование при использовании нотации compact |
currency | код валюты при использовании стиля currency : USD , EUR , RUB и т.д. |
currencyDisplay | отображение символа/названия валюты при использовании стиля currency : symbol , narrowSymbol , code , name |
currencySign | форматирование отрицательных значений при использовании стиля currency : standard , accounting |
unit | вид единицы измерения: centimeter , meter , minute , hour , byte и т.д. |
unitDisplay | формат отображения единицы измерения: long , short , narrow |
DisplayNames
Конструктор DisplayNames используется для форматирования названий языков, диалектов, регионов и валют на другом языке. Данный метод принимает локаль и объект с настройками.
Настройки
Свойство | Описание |
---|---|
type | тип названия: language , region , script , currency |
style | стиль форматирования: long , short , narrow |
fallback | резерв: code , none |
Обратите внимание: настройка type является обязательной. При этом хорошо поддерживается только type со значением language .
Примеры
ListFormat
Конструктор ListFormat используется для форматирования списков путем подстановки соединительного союза И или разделительного союза ИЛИ . Данный метод принимает локаль и объект с настройками.
Свойство | Описание |
---|---|
type | формат вывода: conjunction (и; дефолтное значение), disjunction (или), unit (нет) |
style | стиль форматирования: long , short , narrow |
Collator
Конструктор Collator используется для сравнения строк с учетом локали. Данный метод принимает локаль и объект с настройками.
Свойство | Описание |
---|---|
usage | sort — сортировка (дефолтное значение) или search — поиск |
sensitivity | чувствительность: base , accent , case , variant |
collation | сопоставление вариантов для нескольких языков |
numeric | true означает сравнение чисел |
ignorePunctuation | true означает игнорирование пунктуации |
caseFirst | upper — сначала идут строки, начинающиеся с большой буквы, lower — сначала идут строки, начинающиеся с маленькой буквы |
- 0 — строки равны
- -1 — первая строка "меньше" второй
- 1 — первая строка "больше" второй
PluralRules
Конструктор PluralRules используется для плюрализации (перевода во множественное число). Данный метод принимает локаль и объект с настройками.
Свойство | Описание |
---|---|
type | cardinal — количество элементов (дефолтное значение), ordinal — порядок элемента (первый, второй, третий и т.д.) |
В настоящее время поддерживается только локаль en-US .
Практика
В данном разделе мы создадим небольшое локализованное приложение с помощью разработанной мной утилиты easy-intl .
Принцип работы утилиты подробно описан в документации. Многие вещи были рассмотрены в теоретической части. Поэтому, с вашего позволения, здесь я опишу только ключевые моменты.
Создаем директорию для проекта и устанавливаем easy-intl :
Структура проекта будет следующей:
Как сказал бы Ватсон, все ЭЛЕМЕНТАРНО.
В стилях у нас не будет ничего интересного, поэтому
Что касается разметки, то в процессе локализации easy-intl ориентируется на следующие атрибуты:
- data-intl_type — тип содержимого для локализации. Возможные значения:
- date — дата или время, или дата и время
- relative — относительный период времени
- number — число, включая валюту, проценты и единицы измерения
- names — название языка, региона, валюты и т.д.
- list — список
- compare — строки для сравнения
- plural — строка для перевода во множественное число
- custom — строка, которая используется в качестве ключа словаря для кастомной локализации
Вот как будет выглядеть наша разметка:
Здесь у нас имеется следующее:
- два элемента с атрибутом data-intl_root (с идентификаторами global_root и local_root )
- переключатель локали (с идентификатором locale ) — по умолчанию easy-intl выполняет автоматическую локализацию при создании экземпляра и изменении локали. Автоматическую локализацию можно отключить, передав в конструктор EasyIntl настройку autorun со значением false
- разделы с датой и временем (один в global_root и еще один в local_root ), относительным временем, числами (число, валюта и единица измерения), названием языка (язык и валюта) и списком
- все заголовки имеют атрибут data-intl_custom — перевод заголовков содержится в словаре
- некоторые элементы имеют атрибут data-intl_map
- настройки могут содержать символы '" <>` и разделяться запятой или точкой запятой. Ключ и значение должны разделяться двоеточием
- список может содержать символы '" []` и разделяться запятой или точкой запятой
Определим некоторые настройки для глобальной локализации в intl/options.js (некоторые настройки являются дефолтными, но в данном случае большого значения это не имеет):
Определим словарь для заголовков в intl/dictionary.js для русского и американского английского языков:
Переходим к основному скрипту ( script.js ). Импортируем EasyIntl , настройки и словарь:
Создаем экземпляр EasyIntl , передавая в конструктор локаль en-US , селектор корневого элемента для глобальной локализации, словарь и настройки (обратите внимание, что объект настроек должен быть распакован):
Поскольку мы не определяем настройку autorun со значением false , создание экземпляра EasyIntl приводит к автоматической локализации приложения (за исключением содержимого дочерних элементов local_root ).
Прелесть easy-intl (и, конечно, самого Intl ) заключается в том, что дефолтная локаль пользователя определяется автоматически. Это означает, что для локализации приложения на языке пользователя достаточно создать экземпляр EasyIntl (разумеется, при условии добавления к необходимым элементам атрибутов data-intl_type и data-intl_value ). Поскольку для всех вспомогательных функций, используемых easy-intl , включая, корневой элемент, определены дефолтные настройки (многие дефолтные настройки определяются Intl ), для локализации приложения достаточно выполнить:
Посмотрим на локализуемые элементы, карту локализации, в целом, и локализацию основного заголовка, в частности:
Выполним ручную локализацию содержимого дочерних элементов local_root :
Получаем ссылку на переключатель локали и обрабатываем ее изменение:
Приоритет настроек следующий (от минимального к максимальному):
- new EasyIntl(options)
- intl.localize(options)
- data-intl_options="options"
Получаем вполне работоспособное локализованное приложение:
Пожалуй, это все, чем я хотел поделиться с вами в данной статье.
Что касается планов по дальнейшей разработке утилиты, то, кроме небольших доработок, связанных с преобразованием строковых значений атрибутов data-intl_value в пригодный для Intl формат, в них входит добавление типов для TypeScript и, возможно, адаптация утилиты под React в форме хука или связки провайдера и хука.
Как видите, Internationalization API предоставляет довольно интересные возможности, которые при правильном использовании могут существенно облегчить процесс интернационализации и локализации веб-приложений.
Вместе с тем надо понимать, что Internationalization API не предназначен для перевода (его задачи четко обозначены в спецификации), поэтому многие вещи придется делать вручную или прибегать к помощи таких интерфейсов, как Google Cloud Translation API или API Переводчика Яндекса .
Также важно учитывать, что Internationalization API является относительно новым интерфейсом, некоторые его возможности еще находятся в процессе реализации браузерами, и, вероятно, в будущем появятся новые "фичи".
Я работаю над веб-сайтом GUI, который может использовать несколько языков. Исходные HTML-файлы, с которыми я работал, были полностью статичными. Поэтому, если перевод был необходим, я должен был проанализировать все файлы, отметить, где были некоторые слова или термины, собрать их все, передать их в отдел перевода и ввести эти переводы в новые языковые файлы.
поскольку эти файлы были полностью статическими, это означало, что нужно было переводить целые разделы несколько раз. Не очень effictient.
Итак, теперь я работаю над каким-то словарем на Javascript, чтобы просто обмениваться терминами на этих сайтах. В основном это работает так:
который содержит все возможное содержимое, которое необходимо изменить. Каждый кандидат в HTML-коде получает class="dicRef" как идентификатор, который я срезаю до тега словаря и обмениваю со следующим кодом:
проблема заключается в уникальности ID-тега. Так как некоторые термины могут происходят более одного раза, и некоторые из них генерируются счетчик необходим. Я бы предпочел ommit счетчик, но не могу найти другой идентификатор, чтобы отсортировать все целевые термины и изменить их содержимое.
поскольку я хочу быть в безопасности в будущем, я бы предпочел решение, которое позволяет обрабатывать возможный третий язык. При работе с внутренним HTML нужно будет пометить один и тот же термин несколько раз, один раз для каждого языка.
Так есть ли способ, чтобы охватить все термины будут обменялись более эффективно и легко, или лучший способ сделать это? Я могу работать только с клиентскими решениями, поэтому нет PHP и так далее.
спасибо заранее и, надеюсь, это было не слишком долго, чтобы читать.
вы можете использовать атрибуты данных: тот факт, что" атрибуты HTML5 не поддерживаются в IE6 и IE7 " означает, что вы не получаете getAttribute() способ или dataset свойство для получения / доступа к ним. Но вы все равно можете получить их, как описано в этот пост.
еще лучше, вы можете использовать jQuery .data () для поддержки предыдущих версий IE.
что-то в этом роде должно работа:
не обижайтесь на других ответчиков, но хранение текста в JavaScript или в атрибутах данных не подходит для поисковых систем или отключенных посетителей сайта и не дает никаких преимуществ при добавлении излишне сложного кода. Лучшее и самое простое решение, на мой взгляд, - использовать атрибут HTML lang и использовать JavaScript для отображения и скрытия нужного языка. Это решение также изящно деградирует, поэтому, если у посетителя сайта отключен JavaScript, он все равно будет отображать содержимое. Здесь мое решение:
HTML-код
jQuery
обновлен полный пример с геолокацией и Cookies
Я продолжал работать над этим и создал обновленный пример переключения между двумя языками китайским и английским (если вам нужно больше, чем два языка вам нужно будет скрыть все языки и показать только один выбранный вместо использования переключения, как я). Этот код также определяет, установлен ли уже существующий файл cookie для языка с помощью файла Cookie jQuery. Он также проверяет их геолокации, если их браузер поддерживает его автоматически установка языка на китайский, если они находятся в Тайване или Китае и по умолчанию на английском языке во всех других странах. Код ниже прокомментирован, чтобы вы могли видеть, что делает каждый шаг и, надеюсь, быть возможность изменять ее в соответствии с вашими потребностями. Вот это:
HTML-код
jQuery Примечание: для этого требуется ссылка не только на jQuery, но и jQuery Cookie
одним из способов обойти это может быть использование какой-то системы шаблонов на стороне клиента для вашего интерфейса. Таким образом, вам не нужно излишне загружать свой HTML с кучей атрибутов данных, детализирующих языковые требования, но просто опишите его один раз в JavaScript и используйте пару функций, чтобы помочь с переводом. Я закодировал быстрый пример ниже, чтобы показать вам, что я имею в виду.
вот объект словаря. Он содержит все в переводы по коду страны. Это означает, что вам не нужно отдельные словари для каждой страны. Это важно, потому что это означает, что мы можем использовать эту единственную структуру объекта очень легко в функции перевода, как вы увидите в данный момент. Это также означает, что вы можете добавить столько языков и переводов, сколько хотите.
это наш код страны, и он относится непосредственно к ключу кода страны в нашем словаре объекта:
первый из наших две функции. Это берет шаблон и язык и выполняет перевод, возвращая все, что осталось (обычно какой-то HTML, как в нашем примере).
функция translate принимает словарь, язык и Слово и возвращает переведенное слово. Обратите внимание, что это намного проще с одним объектом, содержащим все переводы страны.
некоторые HTML. Вот наш шаблон (display: none) и выходной элемент. Обратите внимание на слова в фигурных брекеты-это те, которые нужно перевести.
наконец, собрав все вместе:
теперь, очевидно, вам не нужно использовать этот метод (есть десятки JS templating Engine), но templating-это особенно полезно для сайтов, которые нужно использовать несколько языков. Многие делают это на задней стороне, но, как вы можете видеть, это можно легко сделать и на стороне клиента.
надеюсь, это было полезно и дал вам пару разных идей о том, как вы можете подойти к своему решению.
Я искал способ редактировать 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 в браузере.
недавно я переключился с Firefox на Chrome, и я (вероятно) пропустил важную функцию. Я использовал для тестирования фрагментов javascript на FF из консоли Firebug следующим образом: Откройте консоль, напишите сценарий и, наконец, нажмите CTRL + Return для выполнения кода.
кажется невозможным сделать то же самое в консоли Chrome, так как когда я набираю там код и нажимаю return, чтобы начать новую строку, код выполняется немедленно.
есть ли способ, чтобы повторить поведение Firefox в Chrome?
установить Firebug Lite для Google Chrome. У него есть консоль.
Не ищите полноценного поджигателя. Вы будете разочарованы :)Ой, я сначала не читал как следует. Моя вина!
В Firebug Lite,брать консоль. Тогда вы увидите крошечная красная стрелка вверх в правом углу.
Нажмите на него, и вы получите многоканальный консоли. Не так ли?кажется, что нет явного "многострочного режима". Но вы можете:
- вставить код (он сохранит многострочный)
- Shift + Return для добавления новой строки без выполнения скрипта
Я рекомендую этот:
- написать debugger; и нажмите Enter на вкладке консоли
- появляется источник tab; если нет, убедитесь, что точки останова отладчика активны
- теперь вы можете написать все, что хотите в источник tab, который действует как полная IDE с такими функциями, как newline и отступ
- выберите любую часть кода для запуска и щелкните правой кнопкой мыши, выберите Evaluate in console
лучший способ сделать это с помощью Chrome featue i.e фрагментов здесь вы можете написать на JavaScript и сохранить это в консоли разработчика chrome. Его доступный под источником внутри инструментов разработчиков при проверке элемента. более подробную информацию о фрагментах можно найти по этой ссылке.
Он был доступен в Chrome canary, и я думаю, теперь он доступен и в браузере chrome по умолчанию.
Читайте также: