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

    Предлагаю перевод статьи «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 from all 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. И наблюдаем приостановку выполнения в отладчике. То, что нам и было нужно!


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


    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 0

    Only users with full accounts can post comments. Log in, please.