Clarify & update "Debug WebView2 apps with Visual Studio"

[mikehoffms]

Rendered article for review:

• Debug WebView2 apps with Visual Studio
  • https://review.learn.microsoft.com/en-us/microsoft-edge/webview2/how-to/debug-visual-studio?branch=pr-en-us-3233
  • Public preview
  • Before/Live

Changes made by this PR:

• Fixed Issue Wrong screenshot #2775 so that the last png shows a VS screenshot, not a VS Code screenshot.
• Added "Summary of high-level steps" at top.
• Updated the article to focus on VS 2022, not 2019.
• Added all specific steps to reproduce the screenshots; provided the specific steps to follow to use the main wv2 sample (while also allowing to apply to user's own app code base).
  • Instead of abstract steps referring to user's own code base, w/ pngs showing an unspecified code base (turns out to be main wv2 sample).
  • Made article maintainable & testable.
• Added the missing prerequisite steps (as links) for setting up a new machine that are needed trying to follow the article:
  • Install VS.
    • Which version? was unclear; do install VS 2022 (just mention that 2019 is supported).
  • Clone samples repo.
    • In order to provide & follow specific steps. Enables maintenance & testing the article.
  • Install C++ workload.
    • Or other platform workload.
    • May or may not have been done previous to arriving at this article.
  • Compile & run main sample.
    • To use the main sample here, it's best if you already got it compiled & running per sample's article. In this article, just build on that milestone.
    • Starting state: Have the WebView2Samples solution open, WebView2APISample sample app (project) not running.

AB#52806681 - PR Tracking item
AB#45948351 - Issue Tracking item

[mikehoffms]

When walking through the end-to-end steps in revised article, I never did get the debugger to halt at breakpoint, after I clicked Add Item in the running wv2 sample app.
@captainbrosset

Nice to do: Patrick do the steps in PR's article, see if hits breakpoint. See if article gives the usage info that the article ideally should give, about why we're setting a breakpoint, and what exactly eg we can do in the debugger panes (I never arrived at useful debugger panes UX).

Doing these steps would be informative for you to experience how the main wv2 sample app is meant to be used - at least, read the article re: that. Sample user has to figure out which menuitem in app to click (hundreds of menuitems), to get to webpage/code on which breakpoint is set, & how to interact w/ webpage to trigger breakpoint.

rendered article section:
https://review.learn.microsoft.com/en-us/microsoft-edge/webview2/how-to/debug-visual-studio?branch=pr-en-us-3233#debug-your-webview2-app

check the settings in
https://review.learn.microsoft.com/en-us/microsoft-edge/webview2/how-to/debug-visual-studio-images/enb-js.png

[learn-build-service-prod]

Learn Build status updates of commit cdb9f54:

✅ Validation status: passed

File	Status	Preview URL	Details
microsoft-edge/webview2/how-to/debug-visual-studio-images/breakpoint.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/webview2/how-to/debug-visual-studio-images/console.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/webview2/how-to/debug-visual-studio-images/indiv-comp.png	✅Succeeded	View
microsoft-edge/webview2/how-to/debug-visual-studio-images/output-tab-vs2022.png	✅Succeeded	View
microsoft-edge/webview2/how-to/debug-visual-studio-images/run-local-windows-debugger.png	✅Succeeded	View
microsoft-edge/webview2/how-to/debug-visual-studio-images/run.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/webview2/how-to/debug-visual-studio-images/webview-script-debugging-example.png	✅Succeeded	View
microsoft-edge/webview2/how-to/debug-visual-studio-images/workloads.png	✅Succeeded	View
microsoft-edge/webview2/how-to/debug-visual-studio.md	✅Succeeded	View

For more details, please refer to the build report.

For any questions, please:

• Try searching the learn.microsoft.com contributor guides
• Post your question in the Learn support channel