Удаленная отладка JavaScript с VS2015. Часть 3 (F12 Chooser)14.02.2016 10:33

вчера в 15:01

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

F12 Chooser — потрясающий новый инструмент для WinForms приложения с Web Browser Control


Ранее мы обсудили удаленную отладку JS из IE и других процессов.

VS2015 — прекрасный инструмент для удаленной отладки приложений (или процессов). Он предоставляет широкие возможности. Можно отлаживать приложения, размещенный в средах QA, тестирования, интеграции и прочих, где нет возможности установить Visual Studio. Но что, если возникла задача отладить утечку памяти на одной из этих удаленных машин? F12 (инструменты разработчика в браузере) помогли бы, но что, если приложением с утечкой является WinForms с Web Browser Control? Что ж, вариантов не много. DebugDiag мог бы помочь идентифицировать утечку, однако без доступа к приватным символам нам может и не повезти. Будет затруднительно искать утечку памяти в JS. Если вы были в подобной ситуации, то точно оцените новый инструмент F12Chooser, который поставляется вместе с Windows 10.

За более детальной информацией по инструментам разработчика F12 можно обратиться к следующим ресурсам:


Ссылки на исходный код и демонстрационное приложение


В этом простом демо я использую MDI WinForms приложение. Мы откроем две формы и отладим их. Вы можете скачать само приложение и исходный код. Вы можете скачать тестовое приложение и сам код. Это приложение представляет собой слегка измененную версию предыдущего демо, в основном, это конвертация в MDI приложение.
  1. TestApp2.exe
  2. TestApp2.zip
  3. TestLeak.html
  4. TestLeak2.html
  5. TestApp.zip (предыдущее демо)

Отладка WinForms приложения, выступающего хостом для Web Browser Control


  1. Запускаем TestApp2.exe
  2. Нажимаем File → New Form для открытия новой формы
  3. Открываем файл TestLeak.html внутри нее. Можете просто перетащить файл на браузерный элемент управления и компонент перейдет на этот файл
  4. Нажимаем File → New Form для открытия еще одной новой формы
  5. Открываем файл TestLeak2.html внутри нее. Можете просто перетащить файл на браузерный элемент управления и компонент перейдет на этот файл
  6. Нажимаем Window → Tile Horizontally для одновременного отображения обоих окон

    bd3fc67220a145c38267a9fd96da235e.png

  7. (Барабанная дробь!) Теперь открываем приложение  C:\Windows\SysWOW64\F12\F12Chooser.exe или C:\Windows\System32\F12\F12Chooser.exe. Выбор зависит от того, запущено ли приложение как 32-х или 64-х разрядный процесс.

    0de4365462e943b9b791b2066a91ad64.png

  8. Кликаем на тайл с надписью »TestLeak.html». Вы увидите знакомое окно F12, а с ним мы уже прекрасно знаем, как работать.

    f8895f4f5dfe4d0991bdbd4fc798a1d5.png

  9. Поставим точку останова в методе onclick на TestLeak.html. В приложении кликаем на кнопку »Throw an error» и видим срабатывание точки останова в отладчике F12Chooser (F12)

    130d24cc00b04bae80683be482639e29.png

  10. Перейдя на вкладку консоли в F12, можем увидеть нашу ошибку

    cb3e61e1c76347eba37aac4ed9a3c6cf.png

  11. Прекрасная новость состоит в возможности независимой отладки каждой формы. Другими словами, можно присоединить более одного отладчика F12Chooser к одному процессу.
  12. Вы можете делать все привычные вам в F12 вещи, например, изменять режим документа (document mode) или строку агента пользователя
    2944d5c3ac7d4815af1c81bb04d523bb.pngd681e1e4bbf54c16867ba3cc9df1f811.png

Отладка утечек памяти у WinForms приложения, выступающего хостом для Web Browser Control


Пункты с 1 по 7 те же, что и выше, а дальше:
  1. На этот раз открываем  LeakTest2.html. Переходим на вкладку памяти в F12. Вы будете удивлены, увидев, что не можете проанализировать утечки памяти для приложения.

    1036552f814d46a69b1ab08a7aa0bc6b.png

  2. Важное замечание: даже несмотря на то, что у вас установлен IE11, страничка все равно рендерится в режиме IE7. Это поведение по умолчанию для компонента Web Browser Control. В основном, это сделано для обратной совместимости для многих корпоративных интранет сайтов, который могут сломаться в случае отображения в Edge Mode
  3. Так что давайте изменим режим документа на Edge и вернемся на вкладку памяти
    a2cf8c295a79481f84752fb4cc88e589.png
  4. Нажимаем кнопку »Start Profiling»
  5. Делаем снимок памяти
    dfdb7876af4846688a5388fa9e7c65c2.png
  6. В приложении нажимаем кнопку «Start Memory Leak», затем после 4–5 секунд — «Stop Memory Leak»
    68cb2600865f43e2a700f0077a848f70.png
  7. Делаем еще один снимок памяти
    84251c1dcd484446a06cc8c33881f980.png
  8. Сравниваем два снимка путем нажатия правой кнопкой мыши на одном из них и выбирая второй, как показано на скриншоте
    d5874d46f684425b98e568fd7ebb9fb9.png
  9. Если вы выберете одну из строк, которые текут, то увидите, что корнем для них выступает глобальный массивbab9ed5580c94a89833d7ff301944365.png
  10. Аналогично и для div элементов
    97640ec39d854175b2a40685b41263d2.png
  11. Я не собираюсь углубляться в детали отладки утечек памяти в этой статье, их можно найти здесь: Diagnosing memory problems in your webpages
  12. Также для удобства F12Chooser может показывать идентификатор процесса для удобства поиска нужного при подключении

Итоги


  • F12Chooser поставляется вместе с Windows 10 и позволяет воспользоваться мощью F12 для любого процесса
  • Вы можете отлаживать IE, Edge, приложения с Web Browser Control и пр.
    95d8539125a54bcdaa585958d1806f26.png
  • Похоже, что Edge неплохо управляется с памятью за счет использования нового движка парсинга для DOM
  • ↑

    —

    ↓

  • 1,5k

  • Добавить в избранное 14

7ecb31306b70c1a448597fdfa52f1eab.png

Пользователь

© Habrahabr.ru