Skip to content

Commit 35ab287

Browse files
peiche-mspeiche-ms
committed
Improved script debugging attach and removed targeted
1 parent d809c5d commit 35ab287

File tree

1 file changed

+30
-122
lines changed

1 file changed

+30
-122
lines changed

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

Lines changed: 30 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -687,7 +687,7 @@ Menu item `Script -> Host Objects` is demonstrated.
687687
688688
##### [VSCode] Single WebView JavaScript Debugging
689689
690-
Test Single WebView JavaScript Debugging with [Debugger For Microsoft Edge](https://github.com/microsoft/vscode-edge-debug2) and [JavaScript Debugger Nightly](https://github.com/microsoft/vscode-js-debug) in VSCode
690+
Test Single WebView JavaScript Debugging with **both** [Debugger For Microsoft Edge](https://github.com/microsoft/vscode-edge-debug2) and [JavaScript Debugger Nightly](https://github.com/microsoft/vscode-js-debug) in VSCode
691691
692692
1. Follow [Debugging Setup](#[vscode]-debugging-setup)
693693
1. Go to Debug tab via `View -> Run`
@@ -702,7 +702,7 @@ Test Single WebView JavaScript Debugging with [Debugger For Microsoft Edge](http
702702
703703
##### [VSCode] Single WebView TypeScript Debugging
704704
705-
Test Single WebView TypeScript Debugging with [Debugger For Microsoft Edge](https://github.com/microsoft/vscode-edge-debug2) and [JavaScript Debugger Nightly](https://github.com/microsoft/vscode-js-debug) in VSCode
705+
Test Single WebView TypeScript Debugging with **both** [Debugger For Microsoft Edge](https://github.com/microsoft/vscode-edge-debug2) and [JavaScript Debugger Nightly](https://github.com/microsoft/vscode-js-debug) in VSCode
706706
707707
1. Follow [Debugging Setup](#[vscode]-debugging-setup)
708708
1. Go to Debug tab via `View -> Run`
@@ -715,131 +715,39 @@ Test Single WebView TypeScript Debugging with [Debugger For Microsoft Edge](http
715715
1. Click `Get the Current Page Header`
716716
1. Expect debugger to hit the breakpoint and pause the page
717717
718-
##### [VSCode] Single WebView JavaScript Debugging Using Attach (Old Tool: Debugger For Microsoft Edge)
718+
##### [VSCode] Single WebView JavaScript Debugging Using Attach
719719
720-
Test Single WebView Script Debugging with old debugging tool: [Debugger For Microsoft Edge](https://github.com/microsoft/vscode-edge-debug2) in VSCode
720+
Test Single WebView Script Debugging with **both** [Debugger For Microsoft Edge](https://github.com/microsoft/vscode-edge-debug2) and [JavaScript Debugger Nightly](https://github.com/microsoft/vscode-js-debug) in VSCode
721721
722-
1. Add a new REGKEY `additionalBrowserArgument=--remote-debugging-port=9222` under `Computer\HKEY_CURRENT_USER\Software\Policies\Microsoft\EmbeddedBrowserWebView\LoaderOverride\*`
722+
1. Add a new REGKEY `additionalBrowserArguments=--remote-debugging-port=9222` under `Computer\HKEY_CURRENT_USER\Software\Policies\Microsoft\EmbeddedBrowserWebView\LoaderOverride\*`
723723
![step 1](screenshots/script-debugging-reg-key.png)
724-
2. Open VSCode, go to extension and download the old Edge Script Debugging tool
725-
![step 2](screenshots/old-script-debugging-tool.png)
726-
3. Go to same folder where sample app `WebView2APISample.exe` lives and open file `ScenarioJavaScripDebugIndex.js` from the same folder. Set a breakpoint on `function OnAddClick()`
727-
4. In VSCode, go to Debug tab. On the top drop down, select `Debugger For Microsoft Edge: Attach to Edge`.
728-
5. Click the green Button (GO), then go under folder `$(Platform)\$(Configuration)`(eg. `x64\Debug`) to launch `WebView2APISample.exe`
729-
6. VM\* error page may launch, just ignore and click go. (Ignore VM\* file in general and click go at any stage).
730-
7. Go to `Scenario -> Script Debugging -> JavaScript`
731-
8. Expect debugger to hit and pause the page.
732-
9. Delete the REGKEY after testing
733-
734-
##### [VSCode] Single WebView TypeScript Debugging Using Attach (Old Tool: Debugger For Microsoft Edge)
735-
736-
Test Single WebView Script Debugging with old debugging tool: [Debugger For Microsoft Edge](https://github.com/microsoft/vscode-edge-debug2) in VSCode
737-
738-
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)
740-
2. Open VSCode, go to extension and download the old Edge Script Debugging tool
741-
![step 2](screenshots/old-script-debugging-tool.png)
742-
3. Go to same folder where sample app `WebView2APISample.exe` lives and open file `ScenarioTypeScripDebugIndex.ts` from the same folder. Set a breakpoint on `function onHeaderClick()`
743-
4. In VSCode, go to Debug tab. On the top drop down, select `Debugger For Microsoft Edge: Attach to Edge`.
744-
5. Click the green Button (GO), then go under folder `$(Platform)\$(Configuration)`(eg. `x64\Debug`) to launch `WebView2APISample.exe`
745-
6. VM\* error page may launch, just ignore and click go. (Ignore VM\* file in general and click go at any stage).
746-
7. Go to `Scenario -> Script Debugging -> TypeScript`
747-
8. Click on `Get Current Page Header` button
748-
9. Expect debugger to hit and pause the page.
749-
10. Delete the REGKEY after testing
750-
751-
##### [VSCode] Single WebView JavaScript Debugging Using Attach (New Tool: JavaScript Debugger Nightly)
752-
753-
Test Single WebView TypeScript Debugging with new debugging tool: [JavaScript Debugger Nightly](https://github.com/microsoft/vscode-js-debug) in VSCode
754-
755-
1. Add a new REGKEY `additionalBrowserArgument=--remote-debugging-port=9222` under `Computer\HKEY_CURRENT_USER\Software\Policies\Microsoft\EmbeddedBrowserWebView\LoaderOverride\*`
756-
![step 1](screenshots/script-debugging-reg-key.png)
757-
2. Open VSCode, go to extension and download the new JavaScript Debugger Nightly tool
758-
![step 2](screenshots/new-script-debugging-tool.png)
759-
3. Go to same folder where sample app `WebView2APISample.exe` lives and open file `ScenarioJavaScripDebugIndex.js` from the same folder. Set a breakpoint on `function OnAddClick()`
760-
4. In VSCode, go to Debug tab. On the top drop down, select `JavaScript Debugger(Nightly) : Attach to Edge`.
761-
5. Click the green Button (GO), then go under folder `$(Platform)\$(Configuration)`(eg. `x64\Debug`) to launch `WebView2APISample.exe`
762-
6. VM\* error page may launch, just ignore and click go. (Ignore VM\* file in general and click go at any stage).
763-
7. Go to `Scenario -> Script Debugging -> JavaScript`
764-
8. Expect debugger to hit and pause the page.
765-
9. Delete the REGKEY after testing
724+
1. Follow [Debugging Setup](#[vscode]-debugging-setup)
725+
1. Go to Debug tab via `View -> Run`
726+
1. On the top drop down, select `$(Debugger): Attach to Edge`. (e.g. `Debugger For Microsoft Edge: Attach to Edge` and `JavaScript Debugger(Nightly): Attach to Edge`)
727+
1. Press `F5` or click the green Button (GO) to Start Debugging
728+
1. Launch `WebView2APISample.exe` from the output folder `$(Configuration)/$(Platform)/` (e.g. `Release/x64/`)
729+
1. VM\* error page may launch, just ignore and click go. (Ignore VM\* file in general and click go at any stage).
730+
1. Go to `Scenario -> Script Debugging -> JavaScript`
731+
1. Click `Add a new item`
732+
1. Expect debugger to hit the breakpoint and pause the page
733+
1. Delete the REGKEY after testing
766734
767-
##### [VSCode] Single WebView TypeScript Debugging Using Attach (New Tool: JavaScript Debugger Nightly)
735+
##### [VSCode] Single WebView TypeScript Debugging Using Attach
768736
769-
Test Single WebView TypeScript Debugging with new debugging tool: [JavaScript Debugger Nightly](https://github.com/microsoft/vscode-js-debug) in VSCode
737+
Test Single WebView Script Debugging with **both** [Debugger For Microsoft Edge](https://github.com/microsoft/vscode-edge-debug2) and [JavaScript Debugger Nightly](https://github.com/microsoft/vscode-js-debug) in VSCode
770738
771-
1. Add a new REGKEY `additionalBrowserArgument=--remote-debugging-port=9222` under `Computer\HKEY_CURRENT_USER\Software\Policies\Microsoft\EmbeddedBrowserWebView\LoaderOverride\*`
739+
1. Add a new REGKEY `additionalBrowserArguments=--remote-debugging-port=9222` under `Computer\HKEY_CURRENT_USER\Software\Policies\Microsoft\EmbeddedBrowserWebView\LoaderOverride\*`
772740
![step 1](screenshots/script-debugging-reg-key.png)
773-
2. Open VSCode, go to extension and download the new JavaScript Debugger Nightly tool
774-
![step 1](screenshots/new-script-debugging-tool.png)
775-
3. Go to same folder where sample app `WebView2APISample.exe` lives and open file `ScenarioTypeScripDebugIndex.ts` from the same folder. Set a breakpoint on `function onHeaderClick()`
776-
4. In VSCode, go to Debug tab. On the top drop down, select `JavaScript Debugger(Nightly): Attach to Edge`.
777-
5. Click the green Button (GO), then go under folder `$(Platform)\$(Configuration)`(eg. `x64\Debug`) to launch `WebView2APISample.exe`
778-
6. VM\* error page may launch, just ignore and click go. (Ignore VM\* file in general and click go at any stage).
779-
7. Go to `Scenario -> Script Debugging -> TypeScript`
780-
8. Click on `Get Current Page Header` button
781-
9. Expect debugger to hit and pause the page.
782-
10. Delete the REGKEY after testing
783-
784-
#### [VSCode] Targeted WebView JavaScript Debugging (Old Tool: Debugger For Microsoft Edge)
785-
786-
Test Targeted/Multiple WebView JavaScript Debugging with old debugging tool: [Debugger For Microsoft Edge](https://github.com/microsoft/vscode-edge-debug2) in VSCode
787-
788-
1. Open VSCode, go to Extensions and download the old Edge Script Debugging tool
789-
![step 1](screenshots/old-script-debugging-tool.png)
790-
2. Go to same folder where sample app `WebView2APISample.exe` lives and open file `ScenarioJavaScripDebugIndex.js` from the same folder. Set a breakpoint on `function OnAddClick()`
791-
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)`
792-
4. Then click the green Button (GO) to launch the sample app.
793-
5. A VM\* error page may launch first, just ignore and click go. (Ignore VM\* file in general and click go at any stage).
794-
6. Go to `Scenario -> Script Debugging -> JavaScript`
795-
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
796-
8. Click on `Add a new item` button
797-
9. Expect debugger to hit and pause the page.
798-
799-
#### [VSCode] Targeted WebView TypeScript Debugging (Old Tool: Debugger For Microsoft Edge)
800-
801-
Test Targeted/Multiple WebView TypeScript Debugging with old debugging tool: [Debugger For Microsoft Edge](https://github.com/microsoft/vscode-edge-debug2) in VSCode
802-
803-
1. Open VSCode, go to Extensions and download the old Edge Script Debugging tool
804-
![step 1](screenshots/old-script-debugging-tool.png)
805-
2. Go to same folder where sample app `WebView2APISample.exe` lives and open file `ScenarioTypeScripDebugIndex.ts` from the same folder. Set a breakpoint on `function onHeaderClick()`
806-
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)`
807-
4. Then click the green Button (GO) to launch the sample app.
808-
5. A VM\* error page may launch first, just ignore and click go. (Ignore VM\* file in general and click go at any stage).
809-
6. Go to `Scenario -> Script Debugging -> TypeScript`
810-
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
811-
8. Click on `Get Current Page Header` button
812-
9. Expect debugger to hit and pause the page.
813-
814-
#### [VSCode] Targeted WebView JavaScript Debugging (New Tool: JavaScript Debugger Nightly)
815-
816-
Test Targeted/Multiple WebView JavaScript Debugging with new debugging tool: [JavaScript Debugger Nightly](https://github.com/microsoft/vscode-js-debug) in VSCode
817-
818-
1. Open VSCode, go to Extensions and download the new JavaScript Debugger Nightly tool
819-
![step 1](screenshots/new-script-debugging-tool.png)
820-
2. Go to same folder where sample app `WebView2APISample.exe` lives and open file `ScenarioJavaScripDebugIndex.js` from the same folder. Set a breakpoint on `function OnAddClick()`
821-
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)`
822-
4. Then click the green Button (GO) to launch the sample app.
823-
5. A VM\* error page may launch first, just ignore and click go. (Ignore VM\* file in general and click go at any stage).
824-
6. Go to `Scenario -> Script Debugging -> JavaScript`
825-
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
826-
8. Click on `Add a new item` button
827-
9. Expect debugger to hit and pause the page.
828-
829-
#### [VSCode] Targeted WebView TypeScript Debugging (New Tool: JavaScript Debugger Nightly)
830-
831-
Test Targeted/Multiple WebView TypeScript Debugging with new debugging tool: [JavaScript Debugger Nightly](https://github.com/microsoft/vscode-js-debug) in VSCode
832-
833-
1. Open VSCode, go to Extensions and download the new JavaScript Debugger Nightly tool
834-
![step 1](screenshots/new-script-debugging-tool.png)
835-
2. Go to same folder where sample app `WebView2APISample.exe` lives and open file `ScenarioTypeScripDebugIndex.ts` from the same folder. Set a breakpoint on `function onHeaderClick()`
836-
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)`
837-
4. Then click the green Button (GO) to launch the sample app.
838-
5. A VM\* error page may launch first, just ignore and click go. (Ignore VM\* file in general and click go at any stage).
839-
6. Go to `Scenario -> Script Debugging -> TypeScript`
840-
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
841-
8. Click on `Get Current Page Header` button
842-
9. Expect debugger to hit and pause the page.
741+
1. Follow [Debugging Setup](#[vscode]-debugging-setup)
742+
1. Go to Debug tab via `View -> Run`
743+
1. On the top drop down, select `$(Debugger): Attach to Edge`. (e.g. `Debugger For Microsoft Edge: Attach to Edge` and `JavaScript Debugger(Nightly): Attach to Edge`)
744+
1. Press `F5` or click the green Button (GO) to Start Debugging
745+
1. Launch `WebView2APISample.exe` from the output folder `$(Configuration)/$(Platform)/` (e.g. `Release/x64/`)
746+
1. VM\* error page may launch, just ignore and click go. (Ignore VM\* file in general and click go at any stage).
747+
1. Go to `Scenario -> Script Debugging -> TypeScript`
748+
1. Click `Get the Current Page Header`
749+
1. Expect debugger to hit the breakpoint and pause the page
750+
1. Delete the REGKEY after testing
843751
844752
##### [VS] Single WebView JavaScript Debugging (Old Tool: Debugger For Microsoft Edge)
845753
@@ -853,7 +761,7 @@ Test Single WebView JavaScript Debugging with old debugging tool: [Debugger For
853761
4. Then launch the sample app.
854762
5. VM\* error page may launch, just ignore and click go. (Ignore VM\* file in general and click go at any stage).
855763
6. Go to `Scenario -> Script Debugging -> JavaScript`
856-
7. Expect debugger to hit and pause the page.
764+
7. Expect debugger to hit the breakpoint and pause the page
857765
858766
##### [VS] Single WebView TypeScript Debugging (Old Tool: Debugger For Microsoft Edge)
859767
@@ -868,7 +776,7 @@ Test Single WebView JavaScript Debugging with old debugging tool: [Debugger For
868776
5. VM\* error page may launch, just ignore and click go. (Ignore VM\* file in general and click go at any stage).
869777
6. Go to `Scenario -> Script Debugging -> JavaScript`
870778
7. Click on `Get Current Page Header` button
871-
8. Expect debugger to hit and pause the page.
779+
8. Expect debugger to hit the breakpoint and pause the page
872780
873781
### Help
874782

0 commit comments

Comments
 (0)