TrickyCat 9 фев 2016 в 19:00

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

2 мин

5.4K

Предлагаю перевод статьи «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

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

Добавляем следующий код в качестве обработчиков событий нажатия для кнопок 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); 
}

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

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

Запустите приложение на целевой машине, где также установлен VS 2015 Remote Debugger
На машине разработчика откройте VS 2015. Нажмите Debug -> Attach to Process…
В окне Attach to Process укажите имя целевой машины в поле Qualifier. Либо нажмите на Find… для поиска машины в домене. В нашем случае, имя ContosoDev2
По умолчанию список не будет обновлен, посему нажмите Refresh, чтобы увидеть список запущенных процессов. В случае необходимости отладки приложения. Запущенного другим пользователем, установите флажок для опции Show processes from all users.
Выберите целевой процесс и нажмите кнопку Attach. Удостоверьтесь в том, что «Script» отображается в колонке Type для процесса. По умолчанию, опции Script и Managed Code Debugging будут выбраны VS 2015
Visual Studio предупредит нас о возможных угрозах безопасности при подключении к удаленному процессу. Нажимаем Attach
После успешного соединения мы должны увидеть страницу TestLeak.html в окне VS2015 Solution Explorer
Теперь нажимаем кнопку «Throw an error» на странице
И наблюдаем приостановку выполнения в отладчике. То, что нам и было нужно!