Inspect WebView in Mac Application

Hello,

What is the proper way to inspect a WebView in a Mac application?

I can access any iOS simulator or connected device through the Safari Develop menu just not any Mac apps (The entry for the Mac lists "No Inspectable Applications").

All the Mac apps are launched by Xcode and the scheme is set to debug.

Is there something I am missing or are Mac apps not supported? I tried to search the documentation but found nothing.

Thanks.

Up vote post of A Developer Down vote post of A Developer
18k views
Posted by
A Developer
Reply
Add a Comment

Accepted Reply

Hi, I found this in the About Safari Web Inspector > Get Oriented documentation

(https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html#//apple_ref/doc/uid/TP40007874-CH2-SW1)


WebKit-based Apps

To enable the developer tools in a WebKit-based application other than Safari, enter the following into the Terminal:


defaults write com.bundle.identifier WebKitDeveloperExtras -bool true


Replace 

com.bundle.identifier
with the bundle identifier of your app, and then launch your app. Web Inspector can now be accessed by a Control-click or right-click from within any web view. You must also enable contextual menus in your app.
Posted by
A Developer
Up vote reply of A Developer Down vote reply of A Developer
Post marked as solved
Add a Comment

Replies

I'm having issues with this too. No one making embedded web apps for OSX?

Posted by
skullet
Up vote reply of skullet Down vote reply of skullet
Add a Comment

Hi, I found this in the About Safari Web Inspector > Get Oriented documentation

(https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html#//apple_ref/doc/uid/TP40007874-CH2-SW1)


WebKit-based Apps

To enable the developer tools in a WebKit-based application other than Safari, enter the following into the Terminal:


defaults write com.bundle.identifier WebKitDeveloperExtras -bool true


Replace 

com.bundle.identifier
with the bundle identifier of your app, and then launch your app. Web Inspector can now be accessed by a Control-click or right-click from within any web view. You must also enable contextual menus in your app.
Posted by
A Developer
Up vote reply of A Developer Down vote reply of A Developer
Post marked as solved
Add a Comment

Here's an example project to get you started:


https://dl.dropboxusercontent.com/u/153385/EmbeddedWebkitInspectorTest.zip


Now for a new question. Staring in El Capitan the inspector debugger stalls out when it hits the first breakpoint. In particular it seems that the inspector works, but that the code display never loads, so you can step though the code, but you can't see where you are. To see the problem:


1. defaults write com.hogbaysoftware.EmbeddedWebkitInspectorTest WebKitDeveloperExtras -bool true

2. Then build and run the above app

3. Then click the "Debug JavaScript Test" button

4. Not that the inspectors code display pane never loads.


This is making it difficult to develop my app now that I've moved to El Capitan, any ideas of how to fix the problem?


Thanks,

Jesse

Posted by
jessegrosjean
Up vote reply of jessegrosjean Down vote reply of jessegrosjean
Add a Comment

Somehow related, what if this app is an IOS app that runs as Mac (Designed for iPad)? Looks like in this case, it doesn't even use Safari!

https://stackoverflow.com/questions/75181896/debug-wkwebview-on-ios-app-running-on-mac-designed-for-ipad

Posted by
beatflyer
Up vote reply of beatflyer Down vote reply of beatflyer
Add a Comment

There is a way to debug js in vscode when i develop a app embedded Webkit?

Posted by
AdamGLin
Up vote reply of AdamGLin Down vote reply of AdamGLin
Add a Comment