4

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

darbid
  • 2,545
  • 23
  • 55
Zimo
  • 312
  • 5
  • 21
  • 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: https://learn.microsoft.com/da-dk/dotnet/api/microsoft.web.webview2.core.corewebview2.addscripttoexecuteondocumentcreatedasync?view=webview2-dotnet-1.0.774.44#Microsoft_Web_WebView2_Core_CoreWebView2_AddScriptToExecuteOnDocumentCreatedAsync_System_String_ – Poul Bak Apr 08 '21 at 21:38
  • Does this answer your question? [Equivalent of WebBrowser.InvokeScript(String, Object\[\]) in WebView2](https://stackoverflow.com/questions/62835549/equivalent-of-webbrowser-invokescriptstring-object-in-webview2) – Poul Bak Apr 08 '21 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 Apr 09 '21 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 Apr 09 '21 at 22:54

2 Answers2

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.

Andrew Truckle
  • 17,769
  • 16
  • 66
  • 164
darbid
  • 2,545
  • 23
  • 55
  • 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. – Zimo Apr 09 '21 at 13:52
  • 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. https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/console/ – darbid Apr 09 '21 at 14:56
  • Do any of the answers in this help https://stackoverflow.com/questions/19662018/console-log-not-working-at-all – darbid Apr 10 '21 at 19:31
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

Andrew Truckle
  • 17,769
  • 16
  • 66
  • 164
user3190036
  • 463
  • 6
  • 15