Как отладить JavaScript при загрузке всплывающего окна?

Question

Какой самый эффективный способ отладки кода JavaScript, который запускается во всплывающем окне? В частности, мне нужно отслеживать, что происходит при загрузке страницы.

Это для курсов SCORM 1.2, работающих в LMS, которая зависит от других объектов JavaScript в родительском окне, поэтому отладка всплывающего окна сама по себе не будет работать.

Я мог бы использовать технику для других контекстов, хотя большую часть моего времени я занимаюсь отладкой этих курсов.

Я мог бы использовать что-то вроде опции в отладчике в браузере, который останавливается на первой строке JavaScript, которая выполняется для всплывающей страницы, как если бы я поставил точку останова. (Я не могу или, по крайней мере, не знаю, как установить контрольные точки до тех пор, пока страница не запустится)

Редактировать:

debugger; оператор работает, но только для кода, который я контролирую. Иногда мне нужно отследить JavaScript, который запускается при открытии всплывающего окна, и не может добавить точки останова, потому что код уже запущен.

Answer 1

Вы можете положить магию

debugger;

оператор в любом месте вашего кода JavaScript (каждый известный мне отладчик будет останавливаться, автоматически устанавливая точку останова в этой строке).

Если это тоже не поможет, я просто "открою эту страницу в новом окне / вкладке" и сам установлю точки останова, или также использую debugger;

Answer 2

С 2016 года Chrome теперь имеет эту опцию в настройках ChromeDevTools

https://twitter.com/chromedevtools/status/697993811696291842?lang=en

Answer 3

Расширяя ответ @jAndy, я обнаружил, что автоответчик Fiddler является эффективным способом debugger; заявления или другие полезные вызовы в коде, который вы не контролируете.

Что-то вроде:

1. Очистите кеш перед началом работы.
2. Запустите сайт, разрешив загрузку всех файлов, с которыми вы хотите работать.
3. Определите запрос, который вы хотите изменить, например, файл JavaScript, который вы хотите отладить.
4. Экспортируйте этот сеанс из Fiddler в локальный файл.
5. Отредактируйте локальный файл, чтобы добавить debugger; заявления или что-то еще.
6. Вернувшись в Fiddler, выберите запрос еще раз, затем вкладку AutoResponder.
7. Выберите "Добавить правило", которое по умолчанию создаст новое правило для этого точного URL.
8. В поле со списком внизу выберите Найти файл... и найдите файл, который вы изменили.
9. Убедитесь, что "Включить автоматические ответы" и "Несоответствующие запросы прохождения" вверху проверены.
10. Снова очистите кеш в вашем браузере, затем перезапустите сайт или страницу, которую вы пытаетесь отлаживать.

Теперь браузер будет загружать локальную версию файла, а не с сайта. Могут быть и другие способы замены локального файла на удаленный URL в браузере (у Чарльза есть что-то вроде AutoResponder и Proxomitron, может быть, я не знаю, есть ли, например, аддон для браузера, чтобы сделать это, но такие вещи, как Greasemonkey также могут Работа).

Answer 4

В Chrome: загрузите всплывающее окно, пока оно все еще загружается, сфокусируйтесь, быстро нажмите F12 (открыть инструмент разработчика), затем F8.

Answer 5

В Chrome вы можете добавить // @sourceURL=myScriptName.js в конце вашего скрипта, он загружается в Sources вкладка в Chrome's Inspect, когда открывается всплывающее окно.

Обратитесь к отладке JavaScript

Также, если вы используете ASP.NET MVC, вы можете добавить @{Write("//@ sourceURL=myScriptName.js");} и из ваших сценариев, который находится внутри в вашем *.cshtml файлы.

Answer 6

Я бы рекомендовал выводить информацию на консоль через console функция. Затем вы можете увидеть эту информацию в инструменте отладки, таком как Firebug для Firefox, или встроенном в Chrome. Кроме того, вы всегда можете использовать alert для отладки.

А может я чего-то не понимаю в вашем вопросе....

Answer 7

Это был единственный способ, который, казалось, работал для меня:

        --- CONTEXT: CODE EDITOR ------
  1.) Put this line at the top of the .js file to be debugged (will cause breakpoint as soon as the file is opened by the browser):
      debugger;
  2.) Push the new code to the server.   
  
  --- CONTEXT: CHROME Browser ------
  1.) Close all the Chrome browser windows except 1 window, 1 tab
  2.) Close Chrome browser (Chrome / Quit)
  3.) From the COMMAND LINE in MAC... 
      /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --auto-open-devtools-for-tabs
      (this will open Chrome and every window / tab that opens will open the debugger)
  4.) Open Chrome browser (1 window, 1 tab appears)
  5.) Enter link where the debugger line of code was added in step 1 
        (Debugger should stop on first line of Javascript content)