Удаленная отладка JavaScript с VS2015. Часть 210.02.2016 09:18

вчера в 19:00

Предлагаю перевод статьи «VS2015 Remote Debugging JavaScript — Part 2».

Удаленная отладка JS, выполняющегося внутри Web Browser Control


Ранее мы обсуждали то, как можно удаленно отлаживать код JS, выполняющийся в IE. Этот же случай ничем принципиально не отличается, все, что нам нужно, так это выбрать другой целевой процесс для подключения отладчика.

Демонстрационная страница HTML


Вот код странички, которую буду использовать для отладки — проще простого. Я сохранил ее как TestLeak.html.

Демонстрационное приложение WinForms с Web Browser Control


  1. Запускаем Visual Studio
  2. Создаем новое приложение WinForms
  3. Для примера называем проект TestApp и, в случае необходимости, дополнительно конфигурируем

    0f7a342dfca5413190445143abe01722.png

  4. Создаем простую форму с 2 кнопками, 1 полем ввода и 1 элементом управления WebBrowserControl, задаем названия и текст

    821b2710ac1b4478a4d7ebb75f534ae0.png

  5. Добавляем следующий код в качестве обработчиков событий нажатия для кнопок Refresh и OK: 
    private void button1_Click(object sender, EventArgs e) 
{ 
    if (!String.IsNullOrWhiteSpace(textBox1.Text)) 
        webBrowser1.Navigate(textBox1.Text); 
} 

private void button2_Click(object sender, EventArgs e) 
{ 
    webBrowser1.Refresh(WebBrowserRefreshOption.Completely); 
}

  6. Теперь компилируйте приложение и скопируйте его на целевую удаленную машину

Подключаем VS 2015 к VS 2015 Remote Debugger на целевой машине


  1. Запустите приложение на целевой машине, где также установлен VS 2015 Remote Debugger
  2. На машине разработчика откройте VS 2015. Нажмите  Debug → Attach to Process…

    3fff5e4fce8b4f07a69a0834d2608f1a.png

  3. В окне Attach to Process укажите имя целевой машины в поле Qualifier. Либо нажмите на Find… для поиска машины в домене. В нашем случае, имя ContosoDev2

    1f61ddc51f9445a9aba9abc3c6aef5a2.png
  4. По умолчанию список не будет обновлен, посему нажмите Refresh, чтобы увидеть список запущенных процессов. В случае необходимости отладки приложения. Запущенного другим пользователем, установите флажок для опции Show processes from all users.

    edfb208f683e49ae846e4a5c40bb763e.png

  5. Выберите целевой процесс и нажмите кнопку Attach. Удостоверьтесь в том, что «Script» отображается в колонке Type для процесса. По умолчанию, опции Script и Managed Code Debugging будут выбраны VS 2015
  6. Visual Studio предупредит нас о возможных угрозах безопасности при подключении к удаленному процессу. Нажимаем Attach

    07f4c2b535f047279e1897e328a9cb69.png

  7. После успешного соединения мы должны увидеть страницу TestLeak.html  в окне  VS2015 Solution Explorer

    f8190c2d7dc848c0bff0c7d0c2bef02a.png

  8. Теперь нажимаем кнопку «Throw an error» на странице

    4577bfc6c07e4562b0b473bb7a0af98d.png

  9. И наблюдаем приостановку выполнения в отладчике. То, что нам и было нужно!

    a7687e12959e491fb8f3b4987d108cbc.png


Исходные коды демонстрационного проекта


  • ↑

    —

    ↓

  • 687

  • Добавить в избранное 17

7ecb31306b70c1a448597fdfa52f1eab.png

Пользователь

© Habrahabr.ru