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

Question

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

Answer 1

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

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

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

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

Answer 2

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

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

Answer 3

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

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

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

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

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

Answer 4

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

Answer 5

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

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

Спасибо

Answer 6

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

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

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

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

Answer 7

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

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

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

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

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

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

Answer 8

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

Answer 9

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

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

Answer 10

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