Редактирование в отладчике Chrome


247

Как «динамически» редактировать код JavaScript в отладчике Chrome? Это не для меня, поэтому у меня нет доступа к исходному файлу. Я хочу отредактировать код и посмотреть, какие эффекты они имеют на странице, в этом случае анимация не будет стоять в очереди много раз.


5
Вы можете использовать Opera. Opera позволяет редактировать файлы JS. После перезагрузки страницы ваши изменения будут применены. Щелкните правой кнопкой мыши> Источник> Внести изменения> Применить изменения.
XP1

Это потрясающее руководство для отладчика Chrome. Он показывает очень простые шаги для внесения изменений в отладчике в ваши скрипты.
SaganRitual

1
Вы также можете «ввести» код через условную точку останова . В данном примере используйте num = 5, console.log(arguments[0], num), falseдля обновления и регистрации значения внутри fooфункции.
MEMS

Пожалуйста, найдите этот stackoverflow.com/questions/66420/…
stackinfostack

Ответы:


80

Вы можете использовать встроенный отладчик JavaScript в Chrome Developer Tools на вкладке «Сценарии» (в более поздних версиях это вкладка «Источники»), но изменения, которые вы применяете к коду, выражаются только в тот момент, когда выполнение проходит через них. Это означает, что изменения в коде, который не запускается после загрузки страницы, не будут иметь эффекта. В отличие, например, от изменений в коде, находящемся в обработчиках наведения мыши , которые вы можете проверить на лету.

Есть видео с мероприятия Google I / O 2010, в котором представлены другие возможности Chrome Developer Tools.


26
В более поздних версиях Chrome значки вкладок исчезли, а вкладка «Сценарии» переименована в «Источники» - поэтому может быть неочевидным найти отладчик javascript. Более подробная информация здесь stackoverflow.com/questions/12113769/…
chrisjleu

9
Там нет такого метода. Я также не могу изменить код на вкладке Источники.
Мелаб

17
Отладчик Chrome не допускает локальной модификации javascript. Ложь.
omikes

1
@oMiKeY Что ложно? Chrome, безусловно, позволяет изменять скрипт в отладчике.
JLRishe

6
@oMiKeY вы можете изменить, если сценарий не был предварительно проверен
peterchaula

284

Я сталкивался с этим сегодня, когда играл с чужим сайтом.

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

Так что как быстро обойти, и если это работает с вашей ситуацией:

  1. Добавьте точку останова на более ранней точке в скрипте
  2. Перезагрузить страницу
  3. Отредактируйте ваши изменения в коде
  4. CTRL+ s(сохранить изменения)
  5. Отключить отладчик

1
Спасибо! Я обнаружил, что это работает, когда нужно внести изменения в самозаполняющуюся анонимную функцию, которая была вызвана прямо при загрузке страницы.
Питер

1
Ага, потому что я пробовал это раньше, и это не сработало, и, о боже, как я это пропустил. Но да, у меня не работает.
Джейми Хатбер

8
Для меня было важно знать, что изменения должны быть сохранены (шаг 4). Спасибо!
Сергей Голиней

3
Не работает на JavaScript внутри HTML-файлов для меня. Кроме того, если вы добавили папку в рабочую область, выберите локальный файл js, щелкните правой кнопкой мыши и сопоставьте этот файл с сетью dito.
oo

1
Таким образом, нет никакого способа изменить сценарии в файлах HTML?
Воин

13

Это то, что вы ищете:

1.- Перейдите на вкладку «Источник» и откройте файл javascript.

2.- Отредактируйте файл, щелкните его правой кнопкой мыши, и появится меню: нажмите « Сохранить» и сохраните его локально.

Чтобы просмотреть изменения или отменить изменения, щелкните правой кнопкой мыши и выберите в меню пункт « Локальные изменения ...». Вы увидите изменения в сравнении с исходным файлом, если развернете указанную временную метку.

Более подробная информация здесь: http://www.sitepoint.com/edit-source-files-in-chrome/


5

Довольно просто, перейдите на вкладку «скрипты». И выберите нужный исходный файл и дважды щелкните любую строку, чтобы отредактировать его.


4
Было бы здорово, если бы вы могли сохранить изменения на диск в случае файла: // URLs
Джим Блэклер

3
Это было именно то, что я сделал, но изменения не были отражены на странице, как и следовало ожидать. Мне нужно изменить $ (селектор) .fadeIn () ... на $ (селектор) .stop (true, true) .fadeIn () ... Знаете? И я хочу видеть это на странице.
Том

1
Блин, ты прав. Теперь мне интересно, почему Chrome позволяет нам редактировать что-либо, если это не имеет никакого эффекта ...
gnur

«Сохранить как ...» только сохраняет файл на ваш компьютер. Изменения не применяются после перезагрузки страницы. Если вы хотите применить изменения к файлам JS для отладки, вы можете использовать Opera.
XP1

1
и этот называется tincr: chrome.google.com/webstore/detail/…
JustGoscha

3

Поскольку это довольно популярный вопрос, касающийся редактирования JS в реальном времени, я хочу указать на еще одну полезную опцию. Как описано в сообщении svjacob:

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

Вышеупомянутое решение не сработало для меня для довольно большого JS (пакет веб-пакетов - минимизированная версия 3,21 МБ, 130 тыс. Строк кода в предварительно сертифицированной версии) - Chrome упал и запросил перезагрузку страницы, которая вернула все сохраненные изменения. В этом случае можно было использовать Fiddler, где вы можете установить опцию AutoRespond для замены любого удаленного ресурса любым локальным файлом с вашего компьютера - см. Этот вопрос в SO так, чтобы получить более подробную информацию .

В моем случае мне также пришлось добавить заголовки CORS в Fiddler, чтобы успешно смоделировать ответ.


2

Если его javascript, который запускается по нажатию кнопки, то достаточно сделать изменения в разделе «Источники»> «Источники» (в инструментах разработчика в chrome) и нажать Ctrl + S для сохранения . Я все время это делаю.

Если вы обновите страницу, ваши изменения javascript исчезнут, но Chrome все равно запомнит ваши точки останова.


2

Теперь в Google Chrome появилась новая функция. Используя эту функцию, вы можете редактировать свой код в браузере Chrome. (Постоянное изменение кода местоположения)

Для этого нажмите F12 -> Вкладка «Источник» - (справа) -> Файловая система - там выберите местоположение кода. Затем браузер Chrome запросит у вас разрешение, после чего код станет зеленым. и вы можете изменить свой код, и он также будет отражать ваше местоположение кода (это означает, что это будет постоянное изменение)

Спасибо


2

Как и ответ @mark, мы можем создать фрагменты в Chrome DevTools с overrideиспользованием JavaScript по умолчанию. Наконец, мы можем увидеть, какие эффекты они оказывают на странице.

Образ


1

Вот небольшое введение в отладчик JS в Chrome, который я написал. Может быть, это поможет другим, ищущим информацию об этом: http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/


1
Это хорошая рецензия. К сожалению, в нем ничего не говорится о редактировании JS в отладчике, что является рассматриваемой задачей.
Бруно Броноски

Не согласен. Вы видите, что в конце я специально привожу пример того, как «динамически» редактировать код JavaScript в отладчике Chrome, что является частью вопроса.
meeech

1
meeech, если я не неправильно понимаю ваш пост, вы демонстрируете, как оценивать JS на консоли. Это отличается от редактирования функции, так что когда функция вызывается в будущем, она ведет себя по-другому.
Бруно Броноски

Справедливо. Я понял, что редактирование означает изменение вокруг значений активной страницы, и подумал, что написание поможет, так как, получив его в консоли, вы можете поэкспериментировать со значениями, а также с любым другим js в контексте выполнения.
meeech

1
да, мих, я делал именно то, что вы описываете много лет. Я просто окончательно расстроился из-за того, что не смог добиться хорошего цикла обратной связи для изменения обработчиков событий. Особенно те, которые срабатывают при загрузке страницы. Как мы с AaronLS обсуждали в комментариях к ответу gnur, иногда редактирование в DevTools> Sources> Sources работает, а иногда - нет. Но когда это работает, это довольно мило!
Бруно Броноски

1

вы можете динамически редактировать файлы javascrpit в отладчике Chrome на вкладке « Источники », однако ваши изменения будут потеряны, если вы обновите страницу, чтобы приостановить загрузку страницы перед внесением изменений, вам нужно будет установить точку останова, а затем перезагрузить страницу и отредактируйте ваши изменения и, наконец, отключите отладчик, чтобы изменения вступили в силу. Chrome Debugger


Вы должны держать консоль открытой, чтобы хром останавливался в точках останова, иначе хром будет игнорировать точки останова
Сейф Тамалла,

не работает. Я перезагружаюсь с помощью F5, и он останавливается, я изменяю файл, затем продолжаю работать и получаю ту же ошибку, которую только что исправил. Это файл
JS

1

Я искал способ изменить скрипт и отладить этот новый скрипт. То, как мне удалось сделать это:

  1. Установите точку останова в первой строке скрипта, который вы хотите изменить и отладить.

  2. Перезагрузите страницу, чтобы достичь точки останова

  3. Вставьте новый скрипт и установите в нем желаемые точки останова.

  4. Ctrl + s, и страница обновится, и будет достигнута точка останова в первой строке.

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


0

Chrome DevTools имеет панель « Фрагменты кода», где вы можете создавать и редактировать код JavaScript, как в редакторе, и выполнять его. Откройте DevTools, затем выберите панель «Источники» и перейдите на вкладку «Фрагменты кода».

https://developers.google.com/web/tools/chrome-devtools/snippets

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


0

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

  1. Создайте папку в разделе «Инструменты разработчика»> «Источники»> «Переопределения».
  2. Chrome запросит разрешение на папку, нажмите Разрешить
  3. Отредактируйте файл в «Источники»> «Страница», затем сохраните (ctrl-s). Фиолетовая точка указывает на то, что файл сохранен локально.

Вкладка «Переопределение» в инструментах разработчика Chrome

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.