Редагування в налагоджувачі Chrome

Як "динамічно" редагувати код JavaScript у відладчику Chrome? Це не для мене, тому я не маю доступу до вихідного файлу. Я хочу відредагувати код і побачити, які ефекти вони мають на сторінці, і в цьому випадку зупиняти анімацію в черзі купу разів.

Ви можете використовувати вбудований налагоджувач JavaScript в Інструментах для розробників Chrome на вкладці "Сценарії" (у більш пізніх версіях це вкладка "Джерела"), але зміни, які ви застосовуєте до коду, виражаються лише в момент, коли виконання проходить через них. Це означає, що зміни в коді, який не працює після завантаження сторінки, не матимуть ефекту. На відміну від, наприклад, змін у коді, що знаходиться у обробниках миші , які ви можете перевірити під час руху.

Є відео з події Google I / O 2010, де представлені інші можливості Інструментів для розробників Chrome.

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

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

Тож як швидка робота, і якщо це відповідає вашій ситуації:

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

Це те, що ви шукаєте:

1.- Перейдіть на вкладку Джерело та відкрийте файл javascript

2. - Відредагуйте файл, клацніть правою кнопкою миші і з'явиться меню: натисніть « Зберегти» та збережіть його локально.

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

Більш детальна інформація тут: http://www.sitepoint.com/edit-source-files-in-chrome/

Досить просто, перейдіть на вкладку "Сценарії". І виберіть потрібний вихідний файл та двічі клацніть будь-який рядок, щоб відредагувати його.

Оскільки це досить популярне питання, яке стосується редагування в реальному часі JS, я хочу зазначити ще один корисний варіант. Як описав svjacob у своїй відповіді:

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

Наведене вище рішення не працювало для мене для досить великого JS (пакет веб-пакетів - мінімізована версія 3,21 МБ, 130k рядків коду в попередньо встановленій версії) - хром зазнав аварії та попросив перезавантажити сторінку, яка повернула будь-які збережені зміни. Шлях в цьому випадку був Fiddler, де ви можете встановити опцію AutoRespond для заміни будь-якого віддаленого ресурсу будь-яким локальним файлом з вашого комп’ютера - детальну інформацію див. У цьому питанні .

У моєму випадку я також повинен був додати заголовки CORS до Fiddler, щоб успішно висміяти відповідь.

Якщо його javascript, що працює на кнопці, натискає, то внесення змін у пункті "Джерела"> "Джерела" (в інструментах для розробників у хромі) та натискання клавіш Ctrl + S для збереження достатньо . Я роблю це постійно.

Якщо ви оновите сторінку, ваших змін у JavaScript не буде, але Chrome все одно запам'ятає ваші точки зламу.

Тепер Google Chrome представив нову функцію. За допомогою цієї функції Ви можете редагувати код у хромованому перегляді. (Постійна зміна місця розташування коду)

Для цього натисніть F12 -> Вкладка джерела - (праворуч) -> Файлова система - у цьому, будь ласка, виберіть своє місцезнаходження коду. і тоді браузер Chrome попросить вас дозволу, і після цього код засипатиме зеленим кольором. і ви можете змінити свій код, і він також відобразиться на вашому розташуванні коду (це означає, що він буде постійно змінюватися)

Дякую

Як і у відповідь @mark, ми можемо створити фрагменти в Chrome DevTools до overrideJavaScript за замовчуванням. Нарешті, ми можемо побачити, які ефекти вони мають на сторінці.

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

ви можете динамічно редагувати файли javascrpit у відладчику Chrome, на вкладці " Джерела" , однак зміни будуть втрачені, якщо оновити сторінку, призупинити завантаження сторінки перед тим, як внести зміни, вам потрібно встановити точку перерви, а потім перезавантажити сторінку і відредагуйте свої зміни, і, нарешті, скасуйте налагоджувач, щоб побачити зміни.

Я шукав спосіб змінити сценарій та налагодити цей новий сценарій. Мені вдалося це зробити:

1. В першому рядку сценарію, який ви хочете змінити, встановіть точку перерви та налагоджуйте.

2. Перезавантажте сторінку, щоб потрапила точка розриву

3. Вставте новий сценарій і встановіть у ньому потрібні точки проходу

4. Ctrl + s, і сторінка оновиться, спричинивши потрапляння цієї точки перелому в першому рядку.

5. F8, щоб продовжити, і тепер ваш щойно вставлений сценарій замінює оригінальний, доки не буде зроблено перенаправлення та перезавантаження.

У Chrome DevTools є панель Snippets, на якій ви можете створювати та редагувати код JavaScript, як у редакторі, та виконувати його. Відкрийте DevTools, потім виберіть панель "Джерела", а потім виберіть вкладку "Знімки".

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

Ви можете використовувати "Перекриття" в Chrome, щоб зберегти зміни в JavaScript між завантаженнями сторінок, навіть там, де ви не розміщуєте початкове джерело.

1. Створіть папку в розділі Інструменти для розробників> Джерела> Заміна
2. Chrome запитає дозволу на папку, натисніть Дозволити
3. Відредагуйте файл у джерелах> Сторінка, а потім збережіть (ctrl-s). Фіолетова точка вказує, що файл зберігається локально.