WebView2 - Call/Execute Javascript Functions

Question

The InvokeScript method was deprecated in WebView2 so I am trying to learn the new alternative. According to the Microsft documentation, we have to call the ExecuteScriptAsync method in order to run a script. I was able to create an async method that executes my entire javascript function as a string and it worked. However, I find this approach not easy to debug; the ExecuteScriptAsync never tells you if there is a syntax error ...

How do you debug javascript code executed by the ExecuteScriptAsync? Is there any other option to call javascript functions (with parameters)?

Thanks

I suggest, you save your javascript in a file, then load the file and call AddScriptToExecuteOnDocumentCreatedAsync method to inject the script. The benefit is you get intellisense in VS, which will tell you when you have syntax errors. Here's the method: learn.microsoft.com/da-dk/dotnet/api/… — Poul Bak
– Poul Bak, Commented Apr 8, 2021 at 21:38
Does this answer your question? Equivalent of WebBrowser.InvokeScript(String, Object[]) in WebView2 — Poul Bak
– Poul Bak, Commented Apr 8, 2021 at 21:42
It does not really help because I don't see the need to create a function to build the script. I can just type it in. I can live with that but I need a way to debug it. The problem is that the script is loaded in memory and DevTool does not see it in run time. Unless I am missing something. — Zimo
– Zimo, Commented Apr 9, 2021 at 13:57
The point is that you write your javascript functions in a file (which gives intellisense and check for syntax errors) and minimize the code you write in ExecuteScriptAsync where there's no intellisense. — Poul Bak
– Poul Bak, Commented Apr 9, 2021 at 22:54

Andrew Truckle · Accepted Answer · 2023-03-07 11:43:01Z

1

Run your app and press F12 or right click and choose inspect. In the dev tools go to the console. JS error will be shown there. Add console.log to your js code to see them also here.

edited Mar 7, 2023 at 11:43

Andrew Truckle

19.4k17 gold badges93 silver badges231 bronze badges

answered Apr 8, 2021 at 18:58

darbid

2,7611 gold badge30 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Zimo Over a year ago

It did not work. I voluntarily added a syntax error and the console did not show any error. the javascript that you passe in as a string is loaded in memory. I cannot see it in DevTools. Moreover, ExecuteScriptAsync method does not return an exception. It thinks that the script is correct.

darbid Over a year ago

Here is a link to how the console part of DevTools works. You can simply copy and paste your JavaScript in here to and you will see if it works. learn.microsoft.com/en-us/microsoft-edge/…

darbid Over a year ago

Do any of the answers in this help stackoverflow.com/questions/19662018/…

Andrew Truckle · Accepted Answer · 2023-03-07 11:42:37Z

0

I found a way, if you use

await webView.EnsureCoreWebView2Async(null);
string result = await webView.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(myScript);

(ExecuteScriptAsync is replace with AddScriptToExecuteOnDocumentCreatedAsync)

then it will log syntax errors to the console.

For more detail see https://stackoverflow.com/a/69810805/3190036

edited Mar 7, 2023 at 11:42

Andrew Truckle

19.4k17 gold badges93 silver badges231 bronze badges

answered Nov 2, 2021 at 22:14

user3190036

5432 gold badges6 silver badges17 bronze badges

Collectives™ on Stack Overflow

WebView2 - Call/Execute Javascript Functions

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related