Віддаленого налагодження 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. І спостерігаємо призупинення виконання в налагоджувач. Те, що нам і було потрібно!

Вихідні коди демонстраційного проекту



Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.