Добавление точки останова в середине строки с помощью Chrome Web Inspector

Question

Скажем, у меня есть некоторый код JavaScript, подобный этому:

function breakpointInside() { console.log("How do I add a breakpoint here?"); }
breakpointInside();

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

Answer 1

Вот 2 связанных решения

1) Обесцвечивающий источник

Вы не можете поместить точку останова в строку, но вы можете (в более новых версиях Chrome) щелкнуть правой кнопкой мыши по сценарию, выбрать De-obfuscate Source и поставить точку останова на де-обфусцированной версии (которая будет иметь одно утверждение в каждой строке).

2) Pretty Print

(на основе комментария Николаса)

В более поздних версиях браузеров на базе Chromium эта функция называется "Pretty print" и доступна в виде кнопки слева под панелью исходного кода, которая выглядит как {}

Answer 2

Комментарий Николаса Буасто - тот, который будет использоваться в последних версиях Chrome.

В 2015 году вы можете нажать кнопку {}, называемую симпатичной печатью внизу слева. - Николя Буасто

Answer 3

Вы можете редактировать источник с помощью Chrome DevTools live: просто дважды щелкните источник на панели «Сценарии» и добавьте разрыв строки перед console.log.Нажмите Ctrl + Enter или Ctrl + S, чтобы зафиксировать изменения в виртуальной машине.Затем установите точку останова на новой строке, содержащей console.log.