Редактирование в отладчике Chrome
Как "динамически" редактировать код JavaScript в отладчике Chrome? Это не для меня, поэтому у меня нет доступа к исходному файлу. Я хочу отредактировать код и посмотреть, какие эффекты они имеют на странице, в этом случае останавливая анимацию от очереди несколько раз.
12 ответов
вы можете использовать встроенный отладчик JavaScript в инструментах разработчика Chrome на вкладке " Скрипты "(в более поздних версиях это вкладка" источники"), но изменения, которые вы применяете к коду, выражаются только в то время, когда выполнение проходит через них. Это означает, что изменения в коде, который не выполняется после загрузки страницы, не будут иметь эффекта. В отличие от, например, изменений кода, находящихся в мыши обработчики, которые вы можете проверить на лету.
есть видео с мероприятия Google I / O 2010 представляем другие возможности инструментов разработчика Chrome.
я наткнулся на это сегодня, когда я играл с чужим сайтом.
Я понял, что могу прикрепите точку останова в отладчике к некоторой строке кода перед что я хотел динамически редактировать. И с точки останова остаются даже после перезагрузки страницы, я смог отредактировать изменения, которые я хотел, остановившись в точке останова, а затем продолжил загрузку страницы.
Так как быстрая работа вокруг, и если она работает с вашим ситуация:
- добавить точку останова в более ранней точке скрипта
- обновить страницу
- отредактируйте изменения в коде
- CTRL + s (сохранить изменения)
- возобновить отладчик
этой это удивительный учебник для отладчика Chrome. Он показывает очень простые шаги для внесения изменений в отладчик в Скрипты.
Это то, что вы ищете:
1.- Перейдите на вкладку источник и откройте файл javascript
2.- Отредактируйте файл, щелкните его правой кнопкой мыши и появится меню: нажмите кнопку сохранить и сохранить его локально.
для просмотра различий или возврата изменений щелкните правой кнопкой мыши и выберите опцию Локальные Изменения... из меню. Вы увидите, что ваши изменения отличаются от исходного файла, если вы развернете метку времени показанный.
более подробная информация здесь: http://www.sitepoint.com/edit-source-files-in-chrome/
довольно легко, перейдите на вкладку "сценариев". И выберите исходный файл и дважды щелкните любую строку для редактирования.
теперь google chrome имеет ввести новую функцию. С помощью этой функции вы можете редактировать код в chrome browse. (Постоянное изменение местоположения кода)
для этого нажмите F12 --> Source Tab -- (правая сторона) -- > File System - в этом, Пожалуйста, выберите местоположение кода. и тогда браузер chrome спросит у вас разрешения, и после этого код будет тонуть с зеленым цветом. и вы можете изменить свой код, и он также отразится на вашем местоположении кода (это означает, что он будет постоянным изменить)
спасибо
вот нежное введение в отладчик js в chrome, который я написал. Возможно, это поможет другим, ищущим информацию об этом: http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/
Если его javascript, который работает на кнопке Нажмите, а затем внести изменения в разделе Источники>Источники (в инструментах разработчика в chrome) и нажатие Ctrl +S для сохранения, достаточно. Я делаю это все время.
Если вы обновите страницу, ваши изменения javascript исчезнут, но chrome по-прежнему будет помнить ваши точки останова.
вы можете динамически редактировать файлы javascrpit в отладчике Chrome под источник tab, однако ваши изменения будут потеряны, если вы обновите страницу, чтобы приостановить загрузку страницы перед внесением изменений, вам нужно будет установить точки разрыва затем перезагрузите страницу и отредактируйте изменения и, наконец, отключите отладчик, чтобы ваши изменения вступили в силу.
Я искал способ изменить скрипт и отладить этот новый скрипт. Способ, которым мне удалось это сделать:
установить точку останова в первой строке скрипта, который вы хотите изменить и отладить.
перезагрузите страницу, чтобы точка останова была нажата
вставьте новый скрипт и установите в нем нужные точки останова
Ctrl+s, и страница будет обновляться, вызывая эту точку останова в первой строке чтобы его ударили.
F8 для продолжения, и теперь ваш недавно вставленный скрипт заменяет оригинальный, пока не будут сделаны перенаправления и перезагрузки.
поскольку это довольно популярный вопрос, который касается живого редактирования JS, я хочу указать еще один полезный вариант. Как описал svjacob в своем ответе:
Я понял, что могу прикрепить точку останова в отладчике к некоторой строке кода перед тем, что я хотел динамически редактировать. И так как точки останова остаются даже после перезагрузки страницы, я смог отредактировать изменения, которые я хотел, пока приостановлен в точке останова, а затем продолжил позволять странице нагрузка.
вышеупомянутое решение не работало для меня для довольно большого JS (webpack bundle - 3.21 MB minified version, 130k строк кода в prettified version) - chrome разбился и попросил перезагрузку страницы, которая вернула любые сохраненные изменения. Путь в этом случае был Саша где вы можете установить опцию AutoRespond для замены любого удаленного ресурса любым локальным файлом с Вашего компьютера -см. этот вопрос SO для деталей.
в моем случае I также пришлось добавить заголовки CORS в fiddler для успешного макета ответа.
Chrome DevTools имеет фрагментов панель, где вы можете создавать и редактировать код JavaScript, как в редакторе, и выполнять его. Откройте DevTools, затем выберите Панель "источники" и вкладку "фрагменты".
https://developers.google.com/web/tools/chrome-devtools/snippets
