Редактирование Javascript с помощью инструментов разработчика Chrome

94

Я пытаюсь редактировать javascript на сайте с помощью инструментов разработчика Chrome. Я прочитал около 30 статей о том, как это сделать, а также посмотрел несколько видео. Дело в том, что когда я перехожу на вкладку источников и открываю файл, который хочу отредактировать, я ничего не могу с ним сделать. Есть ли какой-то шаг, который мне не хватает?

Я могу создавать точки останова, переходить по ним и т. Д. Я просто не могу редактировать. Эта функция недавно была удалена?

javascript google-chrome web-developer-toolbar

— Cooperia
источник

1

Я могу звонить из консоли. Я просто не могу редактировать материал.

— cooperia

1

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

— Geuis

1

На самом деле, я могу редактировать файлы css, но не могу редактировать скрипт, встроенный в файл php. >.>

— cooperia

1

Что ж, я могу делать с Opera все, что хочу. Проблема вроде решена.

— cooperia

1

@cooperia поместите свой js-код в файл * .js, после чего вы сможете редактировать и запускать его в режиме реального времени в Chrome.

— Mahn

105

Я знаю, что этот вопрос устарел, но у меня была аналогичная проблема, и я нашел решение.

Если файл предварительно настроен, Chrome не разрешит редактирование. Я выключил его и смог редактировать. Готов поспорить, что это была твоя проблема.

— Raddevon
источник

4

да, это помогло, спасибо @raddevon, теперь я могу редактировать их, но на странице не происходит никакого эффекта

— Болас

2

Для других, которые ищут эту тему: я отключил prettify, но все еще не мог редактировать. Включение и выключение снова помогло. (Спасибо IT Crowd за этот совет;))

— Drkawashima

3

Продолжение: Нет. Оказывается, у меня та же проблема, что и у @raddevon. Возможно ошибка в хроме. Вы можете редактировать и сохранять сценарий, а также нажимать в нем точки останова при отладке. Но фактически запущенный скрипт остается исходной неотредактированной версией. Пример: я редактировал сценарий, прокомментировал каждую строку, но все же мог запустить сценарий, нажимать точки останова на строках и т. Д. Итак, отредактированная версия даже не запущена, она просто отображается ... Конечно, я перезапускаю сценарий всевозможными способами без какого-либо эффекта

— Drkawashima

4

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

— Eoin

2

@Eoin Замечательно! Это полностью помогло. И с функцией «Local Overrides» это прекрасно работает. Спасибо за подсказку :-)

— Ксан-Кун Кларк-Дэвис

52

Вы можете редактировать javascript в инструментах разработчика на вкладке «Источники», НО это позволит вам редактировать javascript только в собственном файле. Скрипт, встроенный в файл HTML (или PHP), останется только для чтения.

— Welah
источник

4

Я использую хром в Linux и все еще не могу редактировать javascript, даже если это единственный файл .js.

— roopunk

2

Слегка интересное замечание: включение / выключение Pretty Print (значок "{}") позволит редактировать встроенные js, но изменения не повлияют на это, так что это все еще не то, что мы ищем. (Chrome 29)

— Патрик

Вот что мне нужно было знать. Спасибо.

— Гивз

29

У него есть некоторые ограничения:

должен быть файлом JS. не могут быть встроены теги в html-страницу.
это не может быть приукрашено.

— gcb
источник

Если после выполнения приведенных выше рекомендаций изменения на вкладке «Источники» не вступят в силу, попробуйте щелкнуть правой кнопкой мыши отредактированный файл в дереве слева и выбрать «Сохранить». Может появиться диалоговое окно с просьбой сохранить локальный файл, но вы можете просто отменить. Только в этот момент история редактирования Chrome наконец показывает, что редактирование застряло.

— Erhhung

я сходил с ума, потому что в этот новый файл был встроен js, но я не мог редактировать .. я не понимал почему .. спасибо #gcb и #welah

— carinlynchin

Можно ли отключить JS-файл из списка на Sourcesвкладке инструментов разработчика?

— techie_28

@ techie_28 не уверен, открой еще вопрос. Но я бы написал для этого быстрое расширение.

— gcb

13

Я не знаю, нужно ли вам это для постоянного сохранения, но если вам нужно просто временно изменить js:

Я могу скопировать этот javascript, который хочу изменить, в текстовый редактор, отредактировать его, затем вставить в консоль, и он переопределит любые функции или что-то еще, что мне нужно переопределить.

например, если на странице есть:

<script>
var foo = function() { console.log("Hi"); }
</script>

Я могу взять содержимое между сценариями, отредактировать его, а затем ввести в отладчик, например:

foo = function() { console.log("DO SOMETHING DIFFERENT"); }

и это сработает для меня.

Или, если вам нравится,

function foo() {
    doAThing();
}

Вы можете просто войти

function foo() {
    doSomethingElse();
}

и foo будут переопределены.

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

— Byronaltice
источник

5

Я искал "Chrome dev tool edit javascript". Эта страница - первый результат поиска. Но он слишком устарел, мне это не помогает.

Я использую Chrome 73, в этой версии Chrome есть опция «Включить локальные переопределения». Используя эту функцию, я мог редактировать javascript и мог запускать и отлаживать.

— вафля
источник