Inspect WebView in Mac Application

Safari & Web General
A Developer OP
Created Jun ’15
Replies 5
Boosts 0
Views 19k
Participants 5

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.

Answered by A Developer in 57778022

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.
Replies  5
Boosts  0
Views  19k
Participants  5
skullet OP
Sep ’15

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

0
A Developer OP
Sep ’15
Accepted Answer

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.
0
jessegrosjean OP
Oct ’15

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

0
beatflyer OP
Jan ’23

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

0
AdamGLin OP
Jan ’24

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

0
Inspect WebView in Mac Application
First post date Last post date
 
 
Q