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

247

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

javascript google-chrome debugging

— Том
источник

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

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

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

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

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

— sjacob
источник

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/

— artemisian
источник

5

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

— gnur
источник

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, чтобы успешно смоделировать ответ.

— Dominik
источник

2

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

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

— developer747
источник

2

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

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

Спасибо

— stackinfostack
источник

2

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

Образ

— вино ками
источник

1

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

— meeech
источник

1

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

— Бруно Броноски

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

— meeech

1

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

— Бруно Броноски

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

— meeech

1

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

— Бруно Броноски

1

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

— Сейф Тамалла
источник

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

— Сейф Тамалла,

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

— JS

1

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

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

— 100r
источник

0

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

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

— отметка
источник

0

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

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

— Марк Форман
источник