How to debug javascript code inside a WKWebView
Solution 1
UPDATE: 2017/09/11
Recent versions of Safari can do this. Just enable the develop menu in Safari - developer.apple.com
OLD:
You need to install the nightly build of Safari and use that. I was having the same problem with an app I'm developing. Once I installed the nightly build, I now use that and all of my WKWebViews show up in the develop menu.
Hope that's the part you were missing!
Solution 2
open the website or html page in your webview, then open safari. click develop, then go to simulator and you will find your website title there. once you open it you will see the javascript debugger, console and everything else you can dream of.
Solution 3
You can try http://jsconsole.com/
Execute :listen and it gives you a script tags to paste in your webpage.
Every console.log you have in that page will give their output to this page.
If you close jsconsole page, next time you should change script src in html code but you can listen to that script src too:
:listen XXXXX-XXXXX-XXXX-XXXXX
I hope it helps.
![overactor](https://i.stack.imgur.com/qo7tw.jpg?s=256&g=1)
overactor
I'm currently an apprentice software developer with a broad area of interest and a slight lack of focus. My languages include (in no particular order): Java Javascript Python Delphi Swift
Updated on July 05, 2022Comments
-
overactor almost 2 years
I'm having some trouble with running a webapp in a WKWebView (specifically: some buttons are not responding). I used this tutorial as a guide and did succeed in having the webview display my webapp. So now I want to debug the javascript code.
I know the webapp works, since I've tried it in both an android webview as well as countless browsers (including safari on the iPad simulator I'm using). After some quick googling, I found out how to debug javascript inside a UIWebView using Safari. Sadly This doesn't seem to work with the new WKWebView.
When I navigate to
Develop->iPad Simulator
I'm told that there are 'No Inspectable Applications'. I've tried the very same thing with a simple app with a UIWebView and debugging through safari works perfectly there.Is there a way to debug javascript code within a WKWebView?
To reproduce my problems (using swift), start a new single screen project in xCode 6, copy the code (courtesy of kinderas) provided below in your
ViewController.swift
file and drag the outlet toView
underView Controller
in the document outline in theMain.storyboard
file. Refer to the tutorial I linked above in case of confusion.import UIKit import WebKit class ViewController: UIViewController { @IBOutlet var containerView : UIView! = nil var webView: WKWebView? override func loadView() { super.loadView() self.webView = WKWebView() self.view = self.webView! } override func viewDidLoad() { super.viewDidLoad() var url = NSURL(string:"http://www.kinderas.com/") var req = NSURLRequest(URL:url) self.webView!.loadRequest(req) } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } }
-
overactor almost 10 yearsThis might be the right solution for others, but I needed a way to debug without touching the javascript code at all.
-
Gapipro over 9 yearsIn latest nightly build I don't see WKWebViews. Do I have to enable something?
-
Hugo over 9 years@Gapiro you need to enable the develop menu in Safari
-
Feru almost 9 yearsHi @a.stringham, The safari settings we speak of here is of the dev platform (OS x) Right ? But I"m debugging and running my WkWebView embedded browser app in iPad Simulator (thru Xcode). Will those settings help debug my code running in embedded browser ?
-
Arkhitech almost 9 yearsYou don't need the nightly Safari build anymore and can just use your regular latest Safari browser to debug
-
shmim almost 9 yearsI wish that the question Feru asked in the comment above had been answered: Will those settings help debug my code running in embedded browser?
-
Otávio over 8 years@shmim I was able to debug my app using WKWebView directly into Safari desktop using the instructions provided by Hugo's link
-
pedalpete over 6 yearsCan somebody who has this working elaborate on the solution? I've got Safari 11.01 with the developer console, and though there is nothing in there which says anything about
wkwebview
and I don't even have an ios11 user agent. The first link is broken. -
Stepan Yakovenko over 6 yearsIt seems like jsconsole.com is broken now, :listen doesn't give any output today.
-
Jeremiah about 6 yearsLink is broken for me. Please add text in your answer to prevent this problem.
-
Piyush about 5 yearsYes, [jsconsole.com/] is broken now. it always gives Reference Error & says command not defined.
-
Bill over 4 yearsFYI: This only works over USB - if you're debugging over wifi, Safari won't see your WKWebView
-
Matthias about 4 yearsTo get "Develop" menu in Safari: open Preference, under the Advanced tab, check “Show Develop menu in menu bar”.