Bug 146389 – Web Inspector: reveal source from webView.evaluateJavaScript

• Status: NEW
• Component: Web Inspector

[Koen Bok]

Created attachment 255710 [details]
Image example

If you run javascript with webView.evaluateJavaScript the inspector does not know about the source.

For example, if you throw an error, it gets reported under "global code" or the html document if you run the javascript after a delay. In the latter case, if you want to reveal the source from the console it highlights the line in the html source, which is really confusing.

This also completely breaks the debugger or anything that wants to step through code, because the source code just is not available.

Example image and XCode project added.

[Radar WebKit Bug Importer]

<rdar://problem/21581101>

[Koen Bok]

Created attachment 255711 [details]
Example XCode project

Added example XCode project.

[Koen Bok]

The main use case for us is that we insert new Javascript all the time with our editor in Framer Studio (http://framerjs.com).

If there is an error in the users' code, we now cannot use the debugger because the code got passed through evaluateJavaScript and the inspector does not know about it.

---

I tried the following workarounds:

- I wrapped my script in a <script> tag with the source in base64. This works for small scripts, but has a ton of overhead, and I think there is a limit on the script size that I hit pretty quickly.

- I tried to add the code to a UserScript (which the inspector knows about under extra sources), but there does not seem to be a way to update/re-run them.

---

Proposed solution:

It would be great if there was a type of user script that you could update and re-run.

[Joseph Pecoraro]

(In reply to comment #0)
> Created attachment 255710 [details]
> Image example
> 
> If you run javascript with webView.evaluateJavaScript the inspector does not
> know about the source.

You can name the script using a sourceURL comment:

    let script = "/* ... /*\n//# sourceURL=myEval.js";

Then the script should show up in Web Inspector under "Extra Scripts" with the name "myEval.js". You may set breakpoints, etc.

[Koen Bok]

Created attachment 255818 [details]
Test Files

[Koen Bok]

This looks like a really great solution. But I cannot get it to work at all... Of course, I might be doing something wrong :-)

I studied them pretty in-depth, this is what I found out:

### Chrome

http://cl.ly/image/1g3v0B2p2u30

Perfect in pretty much every way. Notice that the error in the console says foo.js and opens up the foo.js script if you click it.

### Safari (10.10.3 / Safari/600.6.3)

http://cl.ly/image/340p0f1R1r2D

It half works. It does show foo.js in "Extra Scripts" and you can open it and set breakpoints. But the error still says undefined and if you click it, it opens a new tab with the address: file:///System/Library/StagedFrameworks/Safari/WebInspectorUI.framework/Resources/undefined, leading to a not found page.

### WKWebView

http://cl.ly/image/2h1z001r3K2O

Notice that instead of using eval() in javascript, I pass the script directly to webView.evaluateJavaScript. But however I try, there is no result. The errors keep pointing to the html file, and nothing gets added under "Extra Scripts".


###

It would be really great if this worked. Especially if the sourceMappingURL for source maps would work too. I attached all my test files, including the XCode project.