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

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

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


person cooperia    schedule 26.09.2012    source источник
comment
Я могу совершать звонки в консоли просто отлично. Я просто не могу редактировать материал.   -  person cooperia    schedule 26.09.2012
comment
Вы можете переопределить локальные функции и переменные, но нет возможности сохранить изменения в файле из инструментов разработчика. Для этого вам все еще нужен внешний редактор.   -  person Geuis    schedule 26.09.2012
comment
На самом деле, я могу редактировать файлы css, но не могу редактировать скрипт, встроенный в файл php. ›.›   -  person cooperia    schedule 26.09.2012
comment
Хм интересно. У меня сложилось впечатление, что я могу редактировать javascript локально, а затем запускать отредактированный JS из консоли. Я пытаюсь просмотреть ответ на запрос AJAX, и в основном мне нужно добавить параметры, чтобы удовлетворить его.   -  person cooperia    schedule 26.09.2012
comment
Что ж, я могу делать с Opera все, что захочу. Проблема вроде решена.   -  person cooperia    schedule 26.09.2012
comment
@cooperia поместит ваш код js в файл *.js, после чего вы сможете редактировать и запускать его в реальном времени в chrome.   -  person Mahn    schedule 26.09.2012
comment
@Mahn Я не мог этого сделать, потому что мне нужно было запустить AJAX.Request в домене, на котором он работал. Если бы я запускал его локально, правила домена помешали бы.   -  person cooperia    schedule 26.09.2012
comment
На 23.0.1271.1 dev-m я могу открыть файл JS из исходников, щелкнуть в любом месте, чтобы поместить курсор, ввести... я вижу * на вкладке, указывающей на несохраненные изменения.. Ctrl S для сохранения и измененного JS выполняется, когда событие срабатывает.   -  person sachleen    schedule 26.09.2012
comment
@cooperia Я имел в виду что-то вроде <script src="http://mydomain.com/mycodehere.js"></script>, нет необходимости в том, чтобы он был локальным, он просто не должен смешиваться с html, чтобы его можно было редактировать в Chrome; поведение, о котором говорит @sachleen, определенно доступно, если вы последуете этому.   -  person Mahn    schedule 26.09.2012
comment
Хм. Я пробовал это около тысячи раз. В итоге я просто использовал Оперу. Chrome позволяет мне редактировать другие файлы JS и CSS. Может быть, это как-то связано с тем, что JS был встроен в основной файл php? Я решил проблему, для которой мне это нужно было на данный момент, но мне все еще интересно, почему я не смог этого сделать.   -  person cooperia    schedule 26.09.2012
comment
Думаю, раз уж я закончил, не будет никакого вреда в том, чтобы поделиться тем, что я пытался сделать... На weebly.com/jobs.html встроен в основной файл php. Можно ли вносить изменения на лету с помощью инструментов разработчика?   -  person cooperia    schedule 26.09.2012
comment
@cooperia JS находится в файле PHP, он не позволяет вам его редактировать. Это позволит вам редактировать любой файл .js или .css. Кроме того, я решил это несколько дней назад для пинков и не нужно было редактировать страницу.   -  person sachleen    schedule 26.09.2012
comment
Хех, спасибо за понимание, sachleen. Я думаю, имеет смысл, что вы не можете редактировать php-файлы. Как вы отправили запрошенные параметры? Я просто вставил их в первоначальный запрос. Если вы не хотите делиться, это нормально, но я чувствую, что упускаю что-то важное.   -  person cooperia    schedule 28.09.2012
comment
Я пытался сделать это. Была какая-то ошибка, которая не позволяла мне редактировать файлы JavaScript. Я пытался бесконечное количество раз ... затем я закрыл и открыл Chrome 24.0.1312.57 (о, какой номер версии) и вуаля: я смог отредактировать файл JavaScript. :П   -  person Leniel Maccaferri    schedule 09.02.2013
comment
stackoverflow.com/questions/16494237 / -- не отвечая на вопрос, эта страница ссылается на переопределение ресурсов, что прекрасно вас устроит!   -  person P i    schedule 28.12.2015


Ответы (5)


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

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

person raddevon    schedule 03.04.2013
comment
да, это помогло, спасибо @raddevon, я могу редактировать их сейчас, но на странице не происходит никакого эффекта - person ElieH; 07.06.2013
comment
Для других, которые ищут эту тему: я отключил prettify, но все еще не мог редактировать. Включение и выключение снова помогло. (Спасибо IT Crowd за этот совет;)) - person Drkawashima; 22.10.2013
comment
Продолжение: Нет. Оказывается, у меня та же проблема, что и у @raddevon. Возможно баг в хроме. Вы можете редактировать и сохранять скрипт, а также нажимать на него точки останова при отладке. Но сценарий, который на самом деле работает, по-прежнему является оригинальной неотредактированной версией. Пример: я отредактировал скрипт, прокомментировал каждую строку, но все же мог запустить скрипт, поставить точки останова в строках и т. д. Таким образом, отредактированная версия даже не запускается, она просто отображается... Конечно, я перезапускаю скрипт всевозможными способами без какого-либо эффекта - person Drkawashima; 22.10.2013
comment
Это сделало и для меня. Потрясающий! - person Roberto; 22.11.2013
comment
Как отключить приукрашивание? - person Luke; 16.10.2015
comment
@Luke Нажмите кнопку с фигурными скобками в левом нижнем углу панели кода на вкладке «Источники». - person raddevon; 16.10.2015
comment
В качестве побочного примечания, если вы сделаете предварительную настройку, а затем скопируете и вставите обратно в исходный файл, это будет предварительно обработанный исходный файл, который можно редактировать. - person Eoin; 22.08.2018
comment
@Eoin Замечательно! Это полностью помогло. А с функцией Local Overrides это работает отлично. Спасибо за подсказку :-) - person Xan-Kun Clark-Davis; 05.03.2020
comment
@ Xan-KunClark-Davis, Эоин отлично работает, спасибо за подсказку! - person Neurotransmitter; 07.08.2020

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

person welah    schedule 07.12.2012
comment
Я использую хром в Linux и до сих пор не могу редактировать javascript, даже если это один файл .js. - person roopunk; 11.03.2013
comment
Немного интересное примечание: включение/выключение Pretty Print (значок { }) позволит редактировать встроенные js, но изменения не вступят в силу, так что это все еще не то, что нам нужно. (хром 29) - person Patrick; 18.09.2013
comment
Вот что мне нужно было знать. Спасибо. - person geeves; 11.10.2018

Он имеет некоторые ограничения:

  1. должен быть файл JS. нельзя вставлять теги в html-страницу.

  2. его нельзя приукрасить.

person gcb    schedule 22.05.2014
comment
Если после выполнения приведенных выше рекомендаций изменения на вкладке «Источники» не вступают в силу, попробуйте щелкнуть правой кнопкой мыши отредактированный файл в дереве слева и выбрать «Сохранить». Может появиться диалоговое окно с просьбой сохранить локальный файл, но вы можете просто отменить его. Только в этот момент история редактирования Chrome наконец показывает, что редактирование застряло. - person Erhhung; 29.08.2014
comment
я сходил с ума, потому что в этом новом файле был встроенный js, но я не мог редактировать.. я не понимал, почему.. спасибо #gcb и #welah - person carinlynchin; 20.06.2015
comment
Можно ли исключить файл JS из списка на вкладке Sources инструментов разработчика? - person techie_28; 27.06.2016
comment
@techie_28 не уверен, открой еще один вопрос. Но я бы написал для этого быстрое расширение. - person gcb; 29.06.2016

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

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

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

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

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

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

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

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

function foo() {
    doAThing();
}

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

function foo() {
    doSomethingElse();
}

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

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

person byronaltice    schedule 26.03.2015

Я искал «инструмент Chrome dev для редактирования javascript». Эта страница является первым результатом поиска. Но он слишком устарел, мне не помогает.

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

введите описание изображения здесь

person wafe    schedule 24.04.2019