Использование Google Chrome для отладки и редактирования javascript, встроенного в HTML-страницу

Инструменты разработчика Chrome позволяют редактировать javascript в браузере, если javascript находится в файле .js. Однако, похоже, это не позволяет мне редактировать javascript, встроенный в HTML-страницу. то есть:

<script type="text/javascript> 
// code here that I want to debug/edit
</script>

Это большая проблема для меня, поскольку у меня довольно много встроенного javascript на определенной странице.

Аналогично этому вопросу: Редактировать блоки JavaScript на веб-странице... в прямом эфире, но это касается firefox, а не хром.

Как редактировать javascript, встроенный в HTML-страницу, с помощью Google Chrome Developer Tools?

Ответ 1

На самом деле хром позволяет это сделать, выберите HTML файлы на вкладке Источники в окне инструментов разработчика. Вы увидите HTML вместо javascript и просто добавьте контрольные точки в теги <script>. Также вы можете добавить команду debugger; в script то, что вы хотите отлаживать. Например:

<script>
 // some code
 debugger; // This is your breakpoint
 // other code you will able to debugg
</script>

Не забудьте удалить debugger;, когда вы хотите опубликовать свой сайт.

Ответ 2

Мне было трудно найти файл, в котором был встроенный/встроенный javascript. Для других, имеющих одну и ту же проблему, это может быть или не быть полезным...

Использование Chrome 21.0.1180.89 м для Windows

Все файлы отображаются после щелчка по этой очень незаметной кнопке. См:

Теперь вы можете начать отладку...

Ответ 3

Ни один из этих ответов не работал у меня.

Что для меня работает, если у меня есть мой javascript на уже загруженной странице, я могу скопировать этот javascript, отредактировать его, а затем вставить в консоль и переопределить любые функции или что-то еще, что мне нужно переопределить.

например, если на странице есть:

<script>
var foo = function() { console.log("Hi"); }
</script>

Я могу взять содержимое между script, отредактировать его, а затем ввести его в отладчик, например:

foo = function() { console.log("DO SOMETHING DIFFERENT"); }

и он будет работать для меня.

Или, если у вас есть,

function foo() {
    doAThing();
}

Вы можете просто ввести

function foo() {
    doSomethingElse();
}

и foo будет переопределено.

Вероятно, это не лучший способ обхода, но он работает.

Ответ 4

Перейдите на вкладку Элементы, найдите script, щелкните правой кнопкой мыши нужную деталь и выберите "Редактировать как HTML".

Если "Редактировать как HTML" не отображается, дважды щелкните по node, и он должен быть выделен и доступен для редактирования.