Skip to content

Commit 45ed037

Browse files
peiche-mspeiche-ms
committed
Updated testing instructions and added missing images
1 parent abd2b9b commit 45ed037

File tree

6 files changed

+78
-26
lines changed

6 files changed

+78
-26
lines changed

‎SampleApps/WebView2APISample/documentation/Testing-Instructions.md‎

Lines changed: 78 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -674,9 +674,9 @@ Menu item `Script -> Host Objects` is demonstrated.
674674
#### Script Debugging
675675
676676
##### [VSCode] Single WebView JavaScript Debugging (Old Tool: Debugger For Microsoft Edge)
677-
Test Single WebView JavaScript Debugging with old debugging tool: Debugger For Microsoft Edge in VSCode (https://github.com/microsoft/vscode-edge-debug2)
677+
Test Single WebView JavaScript Debugging with old debugging tool: [Debugger For Microsoft Edge](https://github.com/microsoft/vscode-edge-debug2) in VSCode
678678
1. Open VSCode, go to extension and download the old Edge Script Debugging tool
679-
![step 1](screenshots/Old-Script-Debugging-Tool.png)
679+
![step 1](screenshots/old-script-debugging-tool.png)
680680
2. Go to same folder where sample app `WebView2APISample.exe` lives and open file `ScenarioScripDebugIndex.js` from the same folder. Set a breakpoint on `function OnAddClick()`
681681
3. In VSCode, go to Debug tab. On the top drop down, select `Debugger For Microsoft Edge: Sample app (Script $(Configuration)|$(Platform))`. (eg. `Debugger For Microsoft Edge: Sample app (Script Debug|x64)`
682682
4. Then click the green Button (GO) to launch the sample app.
@@ -685,9 +685,9 @@ Test Single WebView JavaScript Debugging with old debugging tool: Debugger For M
685685
7. Expect debugger to hit and pause the page.
686686
687687
##### [VSCode] Single WebView JavaScript Debugging (New Tool: JavaScript Debugger Nightly)
688-
Test Single WebView JavaScript Debugging with new debugging tool: JavaScript Debugger Nightly in VSCode (https://github.com/microsoft/vscode-js-debug)
688+
Test Single WebView JavaScript Debugging with new debugging tool: [JavaScript Debugger Nightly](https://github.com/microsoft/vscode-js-debug) in VSCode
689689
1. Open VSCode, go to extension and download the new JavaScript Debugger Nightly tool
690-
![step 1](screenshots/New-Script-Debugging-Tool.png)
690+
![step 1](screenshots/new-script-debugging-tool.png)
691691
2. Go to same folder where sample app `WebView2APISample.exe` lives and open file `ScenarioScripDebugIndex.js` from the same folder. Set a breakpoint on `function OnAddClick()`
692692
3. In VSCode, go to Debug tab. On the top drop down, select `JavaScript Debugger(Nightly): Sample app (Script $(Configuration)|$(Platform))`. (eg. `Debugger For Microsoft Edge: Sample app (Script Debug|x64)`
693693
4. Then click the green Button (GO) to launch the sample app.
@@ -696,9 +696,9 @@ Test Single WebView JavaScript Debugging with new debugging tool: JavaScript Deb
696696
7. Expect debugger to hit and pause the page.
697697
698698
##### [VSCode] Single WebView TypeScript Debugging (Old Tool: Debugger For Microsoft Edge)
699-
Test Single WebView TypeScript Debugging with old debugging tool: Debugger For Microsoft Edge in VSCode (https://github.com/microsoft/vscode-edge-debug2)
699+
Test Single WebView TypeScript Debugging with old debugging tool: [Debugger For Microsoft Edge](https://github.com/microsoft/vscode-edge-debug2) in VSCode
700700
1. Open VSCode, go to extension and download the old Edge Script Debugging tool
701-
![step 1](screenshots/Old-Script-Debugging-Tool.png)
701+
![step 1](screenshots/old-script-debugging-tool.png)
702702
2. Go to same folder where sample app `WebView2APISample.exe` lives and open file `ScenarioScripDebugIndex.ts` from the same folder. Set a breakpoint on `function onHeaderClick()`
703703
3. In VSCode, go to Debug tab. On the top drop down, select `Debugger For Microsoft Edge: Sample app (Script $(Configuration)|$(Platform))`. (eg. `Debugger For Microsoft Edge: Sample app (Script Debug|x64)`
704704
4. Then click the green Button (GO) to launch the sample app.
@@ -708,9 +708,9 @@ Test Single WebView TypeScript Debugging with old debugging tool: Debugger For M
708708
8. Expect debugger to hit and pause the page.
709709
710710
##### [VSCode] Single WebView TypeScript Debugging (New Tool: JavaScript Debugger Nightly)
711-
Test Single WebView TypeScript Debugging with new debugging tool: JavaScript Debugger Nightly in VSCode (https://github.com/microsoft/vscode-js-debug)
711+
Test Single WebView TypeScript Debugging with new debugging tool: [JavaScript Debugger Nightly](https://github.com/microsoft/vscode-js-debug) in VSCode
712712
1. Open VSCode, go to extension and download the new JavaScript Debugger Nightly tool
713-
![step 1](screenshots/New-Script-Debugging-Tool.png)
713+
![step 1](screenshots/new-script-debugging-tool.png)
714714
2. Go to same folder where sample app `WebView2APISample.exe` lives and open file `ScenarioScripDebugIndex.ts` from the same folder. Set a breakpoint on `function onHeaderClick()`
715715
3. In VSCode, go to Debug tab. On the top drop down, select `JavaScript Debugger(Nightly): Sample app (Script $(Configuration)|$(Platform))`. (eg. `Debugger For Microsoft Edge: Sample app (Script Debug|x64)`
716716
4. Then click the green Button (GO) to launch the sample app.
@@ -720,11 +720,11 @@ Test Single WebView TypeScript Debugging with new debugging tool: JavaScript Deb
720720
8. Expect debugger to hit and pause the page.
721721
722722
##### [VSCode] Single WebView JavaScript Debugging Using Attach (Old Tool: Debugger For Microsoft Edge)
723-
Test Single WebView Script Debugging with old debugging tool: Debugger For Microsoft Edge in VSCode (https://github.com/microsoft/vscode-edge-debug2)
723+
Test Single WebView Script Debugging with old debugging tool: [Debugger For Microsoft Edge](https://github.com/microsoft/vscode-edge-debug2) in VSCode
724724
1. Add a new REGKEY `additionalBrowserArgument=--remote-debugging-port=9222` under `Computer\HKEY_CURRENT_USER\Software\Policies\Microsoft\EmbeddedBrowserWebView\LoaderOverride\*`
725-
![step 1](screenshots/Script-Debugging-Reg-Key.png)
725+
![step 1](screenshots/script-debugging-reg-key.png)
726726
2. Open VSCode, go to extension and download the old Edge Script Debugging tool
727-
![step 2](screenshots/Old-Script-Debugging-Tool.png)
727+
![step 2](screenshots/old-script-debugging-tool.png)
728728
3. Go to same folder where sample app `WebView2APISample.exe` lives and open file `ScenarioScripDebugIndex.js` from the same folder. Set a breakpoint on `function OnAddClick()`
729729
4. In VSCode, go to Debug tab. On the top drop down, select `Debugger For Microsoft Edge: Attach to Edge`.
730730
5. Click the green Button (GO), then go under folder `$(Platform)\$(Configuration)`(eg. `x64\Debug`) to launch `WebView2APISample.exe`
@@ -734,11 +734,11 @@ Test Single WebView Script Debugging with old debugging tool: Debugger For Micro
734734
9. Delete the REGKEY after testing
735735
736736
##### [VSCode] Single WebView TypeScript Debugging Using Attach (Old Tool: Debugger For Microsoft Edge)
737-
Test Single WebView Script Debugging with old debugging tool: Debugger For Microsoft Edge in VSCode (https://github.com/microsoft/vscode-edge-debug2)
737+
Test Single WebView Script Debugging with old debugging tool: [Debugger For Microsoft Edge](https://github.com/microsoft/vscode-edge-debug2) in VSCode
738738
1. Add a new REGKEY `additionalBrowserArgument=--remote-debugging-port=9222` under `Computer\HKEY_CURRENT_USER\Software\Policies\Microsoft\EmbeddedBrowserWebView\LoaderOverride\*`
739-
![step 1](screenshots/Script-Debugging-Reg-Key.png)
739+
![step 1](screenshots/script-debugging-reg-key.png)
740740
2. Open VSCode, go to extension and download the old Edge Script Debugging tool
741-
![step 2](screenshots/Old-Script-Debugging-Tool.png)
741+
![step 2](screenshots/old-script-debugging-tool.png)
742742
3. Go to same folder where sample app `WebView2APISample.exe` lives and open file `ScenarioScripDebugIndex.ts` from the same folder. Set a breakpoint on `function onHeaderClick()`
743743
4. In VSCode, go to Debug tab. On the top drop down, select `Debugger For Microsoft Edge: Attach to Edge`.
744744
5. Click the green Button (GO), then go under folder `$(Platform)\$(Configuration)`(eg. `x64\Debug`) to launch `WebView2APISample.exe`
@@ -749,11 +749,11 @@ Test Single WebView Script Debugging with old debugging tool: Debugger For Micro
749749
10. Delete the REGKEY after testing
750750
751751
##### [VSCode] Single WebView JavaScript Debugging Using Attach (New Tool: JavaScript Debugger Nightly)
752-
Test Single WebView TypeScript Debugging with new debugging tool: JavaScript Debugger Nightly in VSCode (https://github.com/microsoft/vscode-js-debug)
752+
Test Single WebView TypeScript Debugging with new debugging tool: [JavaScript Debugger Nightly](https://github.com/microsoft/vscode-js-debug) in VSCode
753753
1. Add a new REGKEY `additionalBrowserArgument=--remote-debugging-port=9222` under `Computer\HKEY_CURRENT_USER\Software\Policies\Microsoft\EmbeddedBrowserWebView\LoaderOverride\*`
754-
![step 1](screenshots/Script-Debugging-Reg-Key.png)
754+
![step 1](screenshots/script-debugging-reg-key.png)
755755
2. Open VSCode, go to extension and download the new JavaScript Debugger Nightly tool
756-
![step 2](screenshots/New-Script-Debugging-Tool.png)
756+
![step 2](screenshots/new-script-debugging-tool.png)
757757
3. Go to same folder where sample app `WebView2APISample.exe` lives and open file `ScenarioScripDebugIndex.js` from the same folder. Set a breakpoint on `function OnAddClick()`
758758
4. In VSCode, go to Debug tab. On the top drop down, select `JavaScript Debugger(Nightly) : Attach to Edge`.
759759
5. Click the green Button (GO), then go under folder `$(Platform)\$(Configuration)`(eg. `x64\Debug`) to launch `WebView2APISample.exe`
@@ -763,11 +763,11 @@ Test Single WebView TypeScript Debugging with new debugging tool: JavaScript Deb
763763
9. Delete the REGKEY after testing
764764
765765
##### [VSCode] Single WebView TypeScript Debugging Using Attach (New Tool: JavaScript Debugger Nightly)
766-
Test Single WebView TypeScript Debugging with new debugging tool: JavaScript Debugger Nightly in VSCode (https://github.com/microsoft/vscode-js-debug)
766+
Test Single WebView TypeScript Debugging with new debugging tool: [JavaScript Debugger Nightly](https://github.com/microsoft/vscode-js-debug) in VSCode
767767
1. Add a new REGKEY `additionalBrowserArgument=--remote-debugging-port=9222` under `Computer\HKEY_CURRENT_USER\Software\Policies\Microsoft\EmbeddedBrowserWebView\LoaderOverride\*`
768-
![step 1](screenshots/Script-Debugging-Reg-Key.png)
768+
![step 1](screenshots/script-debugging-reg-key.png)
769769
2. Open VSCode, go to extension and download the new JavaScript Debugger Nightly tool
770-
![step 1](screenshots/New-Script-Debugging-Tool.png)
770+
![step 1](screenshots/new-script-debugging-tool.png)
771771
3. Go to same folder where sample app `WebView2APISample.exe` lives and open file `ScenarioScripDebugIndex.ts` from the same folder. Set a breakpoint on `function onHeaderClick()`
772772
4. In VSCode, go to Debug tab. On the top drop down, select `JavaScript Debugger(Nightly): Attach to Edge`.
773773
5. Click the green Button (GO), then go under folder `$(Platform)\$(Configuration)`(eg. `x64\Debug`) to launch `WebView2APISample.exe`
@@ -777,24 +777,76 @@ Test Single WebView TypeScript Debugging with new debugging tool: JavaScript Deb
777777
9. Expect debugger to hit and pause the page.
778778
10. Delete the REGKEY after testing
779779
780+
#### [VSCode] Targeted WebView JavaScript Debugging (Old Tool: Debugger For Microsoft Edge)
781+
Test Targeted/Multiple WebView JavaScript Debugging with old debugging tool: [Debugger For Microsoft Edge](https://github.com/microsoft/vscode-edge-debug2) in VSCode
782+
1. Open VSCode, go to Extensions and download the old Edge Script Debugging tool
783+
![step 1](screenshots/old-script-debugging-tool.png)
784+
2. Go to same folder where sample app `WebView2APISample.exe` lives and open file `ScenarioScripDebugIndex.js` from the same folder. Set a breakpoint on `function OnAddClick()`
785+
3. In VSCode, go to Debug tab. On the top drop down, select `Debugger For Microsoft Edge: Sample app-Targeted (Script $(Configuration)|$(Platform))`. (eg. `Debugger For Microsoft Edge: Sample app-Targeted (Script Release|x64)`
786+
4. Then click the green Button (GO) to launch the sample app.
787+
5. A VM* error page may launch first, just ignore and click go. (Ignore VM* file in general and click go at any stage).
788+
6. Go to `Scenario -> Script Debugging -> JavaScript`
789+
7. Go to `Window -> Create New Window`, then in the new window also go to `Scenario -> Script Debugging -> JavaScript`. Then add `?debugCase`at the end of the url. Click go
790+
8. Click on `Add a new item` button
791+
9. Expect debugger to hit and pause the page.
792+
793+
#### [VSCode] Targeted WebView TypeScript Debugging (Old Tool: Debugger For Microsoft Edge)
794+
Test Targeted/Multiple WebView TypeScript Debugging with old debugging tool: [Debugger For Microsoft Edge](https://github.com/microsoft/vscode-edge-debug2) in VSCode
795+
1. Open VSCode, go to Extensions and download the old Edge Script Debugging tool
796+
![step 1](screenshots/old-script-debugging-tool.png)
797+
2. Go to same folder where sample app `WebView2APISample.exe` lives and open file `ScenarioScripDebugIndex.ts` from the same folder. Set a breakpoint on `function onHeaderClick()`
798+
3. In VSCode, go to Debug tab. On the top drop down, select `Debugger For Microsoft Edge: Sample app-Targeted (Script $(Configuration)|$(Platform))`. (eg. `Debugger For Microsoft Edge: Sample app-Targeted (Script Release|x64)`
799+
4. Then click the green Button (GO) to launch the sample app.
800+
5. A VM* error page may launch first, just ignore and click go. (Ignore VM* file in general and click go at any stage).
801+
6. Go to `Scenario -> Script Debugging -> TypeScript`
802+
7. Go to `Window -> Create New Window`, then in the new window also go to `Scenario -> Script Debugging -> TypeScript`. Then add `?debugCase`at the end of the url. Click go
803+
8. Click on `Get Current Page Header` button
804+
9. Expect debugger to hit and pause the page.
805+
806+
#### [VSCode] Targeted WebView JavaScript Debugging (New Tool: JavaScript Debugger Nightly)
807+
Test Targeted/Multiple WebView JavaScript Debugging with new debugging tool: [JavaScript Debugger Nightly](https://github.com/microsoft/vscode-js-debug) in VSCode
808+
1. Open VSCode, go to Extensions and download the new JavaScript Debugger Nightly tool
809+
![step 1](screenshots/new-script-debugging-tool.png)
810+
2. Go to same folder where sample app `WebView2APISample.exe` lives and open file `ScenarioScripDebugIndex.js` from the same folder. Set a breakpoint on `function OnAddClick()`
811+
3. In VSCode, go to Debug tab. On the top drop down, select `JavaScript Debugger(Nightly): Sample app-Targeted (Script $(Configuration)|$(Platform))`. (eg. `JavaScript Debugger(Nightly): Sample app-Targeted (Script Release|x64)`
812+
4. Then click the green Button (GO) to launch the sample app.
813+
5. A VM* error page may launch first, just ignore and click go. (Ignore VM* file in general and click go at any stage).
814+
6. Go to `Scenario -> Script Debugging -> JavaScript`
815+
7. Go to `Window -> Create New Window`, then in the new window also go to `Scenario -> Script Debugging -> JavaScript`. Then add `?debugCase`at the end of the url. Click go
816+
8. Click on `Add a new item` button
817+
9. Expect debugger to hit and pause the page.
818+
819+
#### [VSCode] Targeted WebView TypeScript Debugging (New Tool: JavaScript Debugger Nightly)
820+
Test Targeted/Multiple WebView TypeScript Debugging with new debugging tool: [JavaScript Debugger Nightly](https://github.com/microsoft/vscode-js-debug) in VSCode
821+
1. Open VSCode, go to Extensions and download the new JavaScript Debugger Nightly tool
822+
![step 1](screenshots/new-script-debugging-tool.png)
823+
2. Go to same folder where sample app `WebView2APISample.exe` lives and open file `ScenarioScripDebugIndex.ts` from the same folder. Set a breakpoint on `function onHeaderClick()`
824+
3. In VSCode, go to Debug tab. On the top drop down, select `JavaScript Debugger(Nightly): Sample app-Targeted (Script $(Configuration)|$(Platform))`. (eg. `JavaScript Debugger(Nightly): Sample app-Targeted (Script Release|x64)`
825+
4. Then click the green Button (GO) to launch the sample app.
826+
5. A VM* error page may launch first, just ignore and click go. (Ignore VM* file in general and click go at any stage).
827+
6. Go to `Scenario -> Script Debugging -> TypeScript`
828+
7. Go to `Window -> Create New Window`, then in the new window also go to `Scenario -> Script Debugging -> TypeScript`. Then add `?debugCase`at the end of the url. Click go
829+
8. Click on `Get Current Page Header` button
830+
9. Expect debugger to hit and pause the page.
831+
780832
##### [VS] Single WebView JavaScript Debugging (Old Tool: Debugger For Microsoft Edge)
781-
Test Single WebView JavaScript Debugging with old debugging tool: Debugger For Microsoft Edge in VS (https://github.com/microsoft/vscode-edge-debug2)
833+
Test Single WebView JavaScript Debugging with old debugging tool: [Debugger For Microsoft Edge in VS](https://github.com/microsoft/vscode-edge-debug2)
782834
1. Open VS Installer, and make sure `JavaScript Diagnostics` is installed for C++ Development Kit.
783-
![step 1](screenshots/VS-JavaScript-Diagnostics.png)
835+
![step 1](screenshots/vs-javascript-diagnostics.png)
784836
2. Open VS, go to `properties -> Debugging -> Debugger Type -> JavaScript(WebView2)`, make sure `JavaScript(WebView2)` is selected.
785-
![step 2](screenshots/VS-Script-Debugging-Set-up.png)
837+
![step 2](screenshots/vs-script-debugging-set-up.png)
786838
3. Go to same folder where sample app `WebView2APISample.exe` lives and open file `ScenarioScripDebugIndex.js` from the same folder. Set a breakpoint on `function OnAddClick()`
787839
4. Then launch the sample app.
788840
5. VM* error page may launch, just ignore and click go. (Ignore VM* file in general and click go at any stage).
789841
6. Go to `Scenario -> Script Debugging -> JavaScript`
790842
7. Expect debugger to hit and pause the page.
791843
792844
##### [VS] Single WebView TypeScript Debugging (Old Tool: Debugger For Microsoft Edge)
793-
Test Single WebView JavaScript Debugging with old debugging tool: Debugger For Microsoft Edge in VS (https://github.com/microsoft/vscode-edge-debug2)
845+
Test Single WebView JavaScript Debugging with old debugging tool: [Debugger For Microsoft Edge in VS](https://github.com/microsoft/vscode-edge-debug2)
794846
1. Open VS Installer, and make sure `JavaScript Diagnostics` is installed for C++ Development Kit.
795-
![step 1](screenshots/VS-JavaScript-Diagnostics.png)
847+
![step 1](screenshots/vs-javascript-diagnostics.png)
796848
2. Open VS, go to `properties -> Debugging -> Debugger Type -> JavaScript(WebView2)`, make sure `JavaScript(WebView2)` is selected.
797-
![step 2](screenshots/VS-Script-Debugging-Set-up.png)
849+
![step 2](screenshots/vs-script-debugging-set-up.png)
798850
3. Go to same folder where sample app `WebView2APISample.exe` lives and open file `ScenarioScripDebugIndex.ts` from the same folder. Set a breakpoint on `function onHeaderClick()`
799851
4. Then launch the sample app.
800852
5. VM* error page may launch, just ignore and click go. (Ignore VM* file in general and click go at any stage).

‎SampleApps/WebView2APISample/documentation/screenshots/new-script-debugging-tool.png‎

39.4 KB
Loading

‎SampleApps/WebView2APISample/documentation/screenshots/old-script-debugging-tool.png‎

88.8 KB
Loading

‎SampleApps/WebView2APISample/documentation/screenshots/script-debugging-reg-key.png‎

25.4 KB
Loading

‎SampleApps/WebView2APISample/documentation/screenshots/vs-javascript-diagnostics.png‎

88.4 KB
Loading

‎SampleApps/WebView2APISample/documentation/screenshots/vs-script-debugging-set-up.png‎

85.9 KB
Loading

0 commit comments

Comments
 (0)