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