Инструменты для разработки

Visual Studio 2017 RC

Непревзойденная производительность для любого способа разработки, любого приложения и любой платформы

Visual Studio Community 2015

Бесплатная среда разработки

Visual Studio Enterprise 2015

Комплексное решение для рабочих групп

Дополнительное ПО и SDK

Выберите необходимые инструменты.

Удаленная отладка JavaScript с VS2015. Часть 2

Дата публикации: 18.02.2016

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<style>
body.segoe { 
    font-family: "Segoe UI", Verdana, serif; 
} 
</style>
<script type="text/javascript">
    function throwError() { 
        document.getElementById("leakedDiv").appendChild("<p>It worked!</p>"); // Misspelled LeakedDiv (L is upper case)
    }
</script>
</head>
<body class="segoe" id="leakedDiv">
<div>
<input id="btnThrowError" type="button" value="Throw an error"onclick="throwError()" />
</div>
</body>
</html>

 

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

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


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


  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…


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

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

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

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


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

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


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


Данный материал написан участником сообщества. В статье представлено мнение автора, которое может не совпадать с мнением корпорации Microsoft. Microsoft не несет ответственности за проблемы в работе аппаратного или программного обеспечения, которые могли возникнуть после использования материалов данной статьи.