Google Chrome: как редактировать файлы JavaScript / CSS и просматривать изменения без перезагрузки?

Question

Я хочу внести изменения на вкладке источников в Inspect Elements и быстро просмотреть предварительный просмотр без обновления браузера.

Есть ли способ сделать это?

Например, в JavaScript у меня есть переменная:

var abc = 'xyz';

Но через вкладку Sources я добрался до своего файла скрипта и изменил код:

var abc = 'hello world';

Теперь, если я попробую alert(abc) , будут ли отображаться последние изменения? Я не хочу обновляться, чтобы увидеть это изменение.

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

Answer 1

Вы можете использовать инструменты разработчика Chrome (нажмите F12 или Ctrl+Shift+I) для отладки и манипулирования кодом JavaScript во время выполнения. Затем вы можете установить точки останова в своем коде, исследовать объекты, играть со значениями, вызывать функции из консоли и многое другое. Все без необходимости фактически изменять ваши физические исходные файлы или перезагружать окно.

Обновить после комментария OP ниже:

Вот быстрый и грязный пример создания новой функции на лету и последующего ее вызова в консоли. Первая строка добавляет функцию (добавление самой функции не возвращает ничего значащего, поэтому вы получите "неопределенный" результат). Затем я вызываю эту новую функцию, которая, как и ожидалось, открывает окно с предупреждением (не показано на скриншоте) и возвращает значение 17.

Вы можете сделать то же самое и вернуть значения, рассчитанные на основе фактической страницы в ее текущем состоянии. Если вы поместили точку останова в свой код, вы можете использовать консоль для проверки объектов и значений или внесения изменений в них во время выполнения. Кстати, это также относится к DOM, так что вы можете манипулировать HTML также через консоль.