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

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

VS2015 предоставляет первоклассный опыт отладки кода JavaScript. Вы можете воспользоваться функциями удаленной отладки для отладки JavaScript кода на удаленной машине. Отлаживаемым процессом может быть IE, приложение Windows Store или даже .NET приложение, использующее элемент управления для встраиваемого браузера! Почти всё, что вы можете отлаживать локально, доступно и для удаленной отладки. Это даёт нам большие возможности, к примеру, теперь вы можете отлаживать ваш JavaScript код, работающий в QA или Production среде напрямую. Чтобы начать, вы можете воспользоваться следующими шагами.

Установите Visual Studio 2015 на машине для разработки. Большинство разработчиков в курсе, как это сделать, так что не будем детально останавливаться на этом.

Установите VS 2015 Remote Debugger на целевой машине:

1. Посетите www.microsoft.com/en-us/download/details.aspx?id=48155&NavToggle=True и скачайте версию, соответствующую разрядности целевой системы. Вы также можете установить удаленный отладчик и на Windows с процессором ARM.
   
   
2. Двойным щелчком по rttols_setup_x64.exe запускаем установщик:
   
   
   
   
3. После нажатия на Install возникнет окошко подтверждения UAC (User Account Control). Для установки инструментов удаленной отладки необходимы права администратора. Нажимаем Yes для продолжения установки:
   
   
   
   
4. Программа устанавливает необходимые файлы:
   
   
   
   
5. Нажимаем Close и на этом установка завершена:
   
   
   
   
6. После успешной установки на целевой машине мы сможем обнаружить новое приложение Remote Debugger:
   
   
   

Конфигурация VS 2015 Remote Debugger на целевой машине.

1. Нажимаем на VS2015 Remote Debugger Configuration Wizard. Система попросит ввести учетный данные администратора системы либо предложит запуск с повышенными привилегиями, после предоставления чего, собственно, и запустится мастер. Нажимаем Next для продолжения:
   
   
   
   
2. Выбираем Run the Visual Studio 2015 Remote Debugger service и нажимаем Next. Вам не нужно вводить пароль для учетной записи LocalSystem. Также, для работы службы вы можете ввести\предоставить другие учетные данные, обладающий административными правами на целевой машине:
   
   
   
   
3. На следующем экране вы можете захотеть снять выделение с третьей опции, если машина находится внутри корпоративного домена и если вы соединяться с машиной напрямую посредством Ethernet кабеля. Нажимаем для продолжения Next:
   
   
   
   
4. Нажимаем Finish для завершения конфигурации:
   
   
   
   
5. Теперь откроем менеджер задач и удостоверимся, что удаленный отладчик запущен и готов для использования. На 64-х разрядной системе мы видим два экземпляра отладчика: 32-х и 64-х разрядные.
   
   
   
   

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

1. Запустим Internet Explorer на целевой машине, где только что установили удаленного отладчика VS2015 Remote Debugger. Откроем в нем какой-либо сайт для отладки, например, msn.com.
   
   
2. На машине разработчика откроем VS2015. Нажимаем Debug -> Attach to Process…
   
   
   
   
3. В окне Attach to Process указываем целевую машину в поле Qualifier. Либо нажимаем кнопку Find для поиска машины в домене. В примере, целевая машина имеет имя ContosoDev2:
   
   
   
   
4. По умолчанию список не будет обновлен, поэтому нажимаем на кнопку Refresh для отображения списка запущенных процессов. Также можно выбрать опцию Show processes from all users, если нужно отладить процесс, запущенный другим пользователем. Выбираем наш целевой процесс iexplore.exe и нажимаем кнопку Attach:
   
   
   
   
   
   Примечания:
   
   
   • Если удаленный отладчик был сконфигурирован для запуска с учетной записью LocalSystem, тогда будет необходимо выбрать опцию Show processes from all users, чтобы увидеть ваши процессы. В противном случае будут перечислены лишь процессы учетной записи SYSTEM
   • Квалификатор (поле Qualifier) может измениться с ContosoDev2 на ContosoDev2:4020
   • Удостоверьтесь, что Script code выбран в поле Attach to (как на скриншоте)
   
   
5. Visual Studio предупредит о возможных проблемах безопасности при подключении к удаленному процесссу. Если вы знаете удаленный процесс и открытый в нем сайт, нажимайте Attach для продолжения:
   
   
   
   
6. После успешного подключения вы должны увидеть JavaScript файлы в окне Solution Explorer. DOM Explorer также будет отображать структуру запущенного сайта:
   
   
   
   
   
   
7. И вот, теперь мы можем отлаживать наш чудо сайт, открытый на удаленной машине, как обычно:
   
   
   
   

Отладка JS кода в Web browser control (WebOC). Вы можете отлаживать не только IE, но также и приложение (.NET / C++ | managed / native), являющееся хостом для WebOC или Web Browser Control. Для этого просто запустите приложение на целевой машине. В нашем примере имя .NET приложения с WebOC будет PCOETest.exe. Откройте VS2015 и, следуя уже описанному процессу подключения к удаленному процессу, подключитесь к вашему приложению вместо IE.



Вы сможете проводить отладку, как если бы это было локальное управляемое приложение, выступающее хостом для элемента управления веб браузера.





Частые вопросы по отладке и исправлению проблем (FAQ).

1. Не получается найти компьютер. Удостоверьтесь в том, что брандмауэр не блокирует соединения. Можете воспользоваться утилитой наподобие TCPView, чтобы узнать, открыт ли порт. Также для дополнительной информации можна обратиться к секции Firewall Configuration или файлу справки удаленного отладчика на на целевой машине.
   
   За кулисами процесс установки VS 2015 Remote Debugger конфигурирует правила брандмауэра для возможности удаленной отладки. Удаленный отладчик по умолчанию использует порт TCP 4020. Вы можете использовать другой порт, если необходимо. Удостоверьтесь в том, что msvsmon.exe на порту 4020 (или на вашем выбранном порту) брандмауэром или прочим защитным ПО. Для x86 процесса на 64-х разрядной ОС проверьте также, что порт 4021 открыт.
   
   
2. Я не вижу потоки в окне VS2015 Threads, когда отлаживаю процесс IE. Или не могу отладить IE/целевой процесс.
   
   Удостоверьтесь в том, что подключаетесь к нужному экземпляру IE. IE запускает два процесса при первоначальной загрузке – процесс фреймов (frame process) и процесс вкладок (tab process). Вы должны подключать отладчик к процессу вкладок, а не фреймов. Дополнительная информация: LCIE
   
   
3. Я все еще не вижу потоков в окне VS2015 Threads при подключении к процессу вкладок IE (IE Tab Process).
   
   Проверьте окно Visual Studio JavaScript Console. Видите ли вы ошибки, подобные этой?
   
   
   
   Если да, то вам необходимо сконфигурировать IE на целевой машине для разрешения отладки скриптов. Итак:
   
   
   • Открываем на целевой машине процесс Internet Explorer
   • Кликаем Tools -> Internet Options, выбираем вкладку Advanced
   • На вкладке Advanced снимаем выделение следующих двух пунктов:
     
     
     
     
   • Жмём OK или Apply для применения изменений
   • Отключаем отладчик\прекращаем отладку и пробуем подключить отладчик заново
   
   
   
4. Я все еще не вижу потоков при подключении к нужному процессу IE (даже после снятия этих двух опций).
   Удостоверьтесь в том, что перезапустили процесс IE либо запустили новый. Подключите отладчик VS к этому новому процессу.
   
   
5. Могу ли я запустить несколько экземпляров удаленного отладчика? Скажем, один для каждого пользователя?
   Множество экземпляров удаленного отладчика может быть запущено на одном компьютере. Это необходимо, если у нас есть один сервер, являющийся общим для множества пользователей и каждый пользователь желает иметь собственный экземпляр удаленного отладчика для отладки своих собственных процессов.
   
   Каждый экземпляр должен работать на своем собственном TCP\IP порту. Это можно задать, воспользовавшись меню Tools -> Options удаленного отладчика или ключом командной строки:
   
   /port:< value >
   
   Для подключения к конкретному экземпляру удаленного отладчика просто укажите имя компьютера и через двоеточие номер порта в окне подключения к процессу (например, MyServer:1234).
   
   
6. Могу ли я отлаживать удаленный сервис, скажем, веб сервис, запущенный на IIS?
   
   Да. Вы можете запустить удаленный отладчик либо, как службу Windows, либо как Windows приложение. Запуск как службу позволяет легко отлаживать серверные приложение, подобные ASP.NET, без входа на удаленной машине.
   
   Запуск отладчика в качестве сервиса приводит к тому, что он всегда запускается и слушает сеть. Не рекомендуется использовать удаленный отладчик, запущенный как сервис, для отладки клиентских приложений.
   
   С помощью мастера Visual Studio 2015 Remote Debug Configuration вы можете контролировать имя пользователя и пароль учетной записи, под которой запускается удаленный отладчик. Когда удаленный отладчик запущен, как служба, следующие требования должны быть удовлетворены для возможности отлаживать код удаленно:
   
   
   • Пользователь должен быть членом группы Администраторов компьютера для возможности отладки любого процесса
   • Пользователю должно быть предоставлено право 'Log on as a service', что можно сделать с помощью утилиты администрирования 'Local Security Policy'
   
   Пользователь по умолчанию: “LocalSystem”.
   
   Имя службы: «Visual Studio 2015 Remote Debugger». Рекомендуется управлять службой только при помощи мастера Visual Studio 2015 Remote Debugger Configuration. В случае необходимости, также можно воспользоваться административной утилитой для управления компьютером или командной строкой: «net stop msvsmon140» или «net start msvsmon140».
7. Могу ли я отлаживать код, отличный от JS, например, .NET или T-SQL?
   
   Да, вы можете отлаживать любой код, отладку которого поддерживает VS 2015: управляемый код, неуправляемый, GPU, PowerShell, Script, T-SQL, Workflow…
   
   
   
   
8. Необходима ли установка чего-либо на целевой машине?
9. Что необходимо для установки VS2015 Remote Debugger?
10. Что VS2015 Remote Debugger использует внутри себя?
    
    Удаленная отладка реализована при помощи Windows Web Services API. Windows Web Services API – это строительный блок при помощи которого приложения, например, удаленный отладчик, могут общаться друг с другом через сеть. Этот API уже включен в Windows 7, Windows Server 2008 R2 и более поздние ОС. На Windows Server 2008 (до R2) установщик Visual Studio Remote Tools автоматически установит API.
    
    
11. Могу ли я запустить\остановить удаленный отладчик при помощи командной строки?
    Да, обратитесь к справочным материалам за деталями
    
    
12. Могу ли я запустить процесс под отладкой?
    
    Сконфигурируйте Visual Studio для подключения к удаленному отладчику:
    
    
    • Если хотите запустить проект C#/VB: откройте свойства проекта, перейдите на вкладку Debug, отметьте опцию для использования удаленной машины
    • Если хотите запустить C++ проект: откройте свойства проекта, в опциях отладки измените Launch value на Remote Windows Debugger и установите в свойстве Remote Command путь, который должен использовать удаленный компьютер
    • Для подключения к уже запущенному процессу: при помощи диалога Attach to Process (из пунктов меню Tools либо Debug), введите имя удаленного компьютера в поле Qualifier, выберите нужный процесс
    • Для отладки веб сайта: откройте веб сайт с удаленного компьютера (File Share) и затем сконфигурируйте свойство Custom Web Server в значение URL веб сервера (напр., http://myserver)
    • Для запуска исполняемого файла без проекта: создайте проект отладки путем открытия исполняемого файла в качестве проекта (File->Open Project) и введите путь к исполняемому файлу (напр., \\MyTestComputer\c$\MyTest.exe). Затем откройте свойства проекта и измените значение Connection. Также подправьте свойство Executable на путь, который должна использовать удаленная машина.
    
    

Настройка брандмауэра:

• Взаимодействие между отладчиком VS2015 и целевой машиной всегда аутентифицировано и последующие вызовы всегда зашифровано
• Для разрешения удаленной отладки любые сетевые экраны между компьютером с Visual Studio и удаленным отладчиком должны быть сконфигурированы так, чтобы удаленный отладчик (msvsmon.exe) мог получать данные, посланные из Visual Studio
• Удаленный отладчик автоматически сконфигурирует брандмауэр в большинстве случаев
  
  • Тем не менее, если нет, то откройте порт 4020 (для 64-х разрядный процессов на х64 ОС и 32-х разрядных процессов на х86 ОС) и порт 4021 (для 32-х битных процессов на х64 ОС)
  • Диалог Remote Debugger Configuration может использоваться для правила Windows Firewall для применения ко всем сетевым профилям (Domain, Private и Informal/Public). Используйте Informal/Public в случае подключения отладчика VS напрямую к целевому устройству посредством кабеля Ethernet