I am using Browserstack to test some websites on the iPad. I just don't seem to get where the developer tools are within that emulator. Shouldn't there be Firebug Lite somewhere? Can someone point the dev tools out to me please?
Launch iOS simulator from BrowserStack.
Once loaded, from the OSX menu bar, click Help > Mac Help.
In the open window type "Safari" in the search box.
Click "Safari Overview".
Click "Open Safari for me".
From the Safari menu bar, click Develop > iOS Simulator > (the iOS tab you want to inspect)
Screenshot of debugging iOS inside BrowserStack
As I posted here, Browserstack now appears to support Dev Tools, but only on physical devices (those with a blue mobile icon, below).
You activate the dev tools by clicking the button in the toolbar:
In the iOS simulator you can click the 'bookmarks' button (of the device) and firebug lite is available from there. It does not seem to load on the iPhone 5 that I am testing currently but may work for someone else.
To open Safari for debugging a simulator, follow the instructions above. If Safari Overview is not available, look for a "Search the Web" link at the bottom of the window. This also opens Safari.
Related
Video showing the bug: https://www.youtube.com/watch?v=tQoOYWe0jfE
Install any Safari Web Extension from the Mac App Store (e.g. DuckDuckGo Privacy Essentials, Bitwarden Password Manager).
Resize the Safari window until the extension browser_action icon is forced into the overflow menu (>> at the far right of the toolbar).
Open the overflow menu and click the menu item for the extension. Nothing happens.
This even occurs when using the sample extension "Sea Creator" developed by Apple. You can build it and try it out by following the instructions on this page: https://developer.apple.com/documentation/safariservices/safari_web_extensions/developing_a_safari_web_extension
I have filed a Feedback Assitant report for this issue: FB9495287 / http://www.openradar.me/radar?id=5035732439662592
Anyone know what's going on here? Or does anyone have a workaround to get the extension popup to appear when invoked from this menu?
After doing a "Reset All Content And Settings.." on the simulator the setting to enable using the web inspector in safari has disappeared, and I have no idea how to get it back:
Does anyone have an idea how to get this back, and "remote" debug a webpage in the simulator again?
It seems that this option is not available in the simulated devices. Tip: If you want to connect the console from your desktop Safari, you will need the Technology Preview. the normal one does not discover the simulator (though it finds the real device normally)
In my case (macOS 10.14.3 and iOS 12.1 simulators), the setting isn't there, but is active by default. Open the simulator and you should see it in Safari under Develop.
i needed to restart desktop safari. might help.
Worked for me download new Safari:
IOS Simulator: 13.4
(Safari Technology Preview)
https://developer.apple.com/safari/download/
Safari Technology Preview
I am working on a custom Safari extension and would like to debug the Background scripts. I am not certain how to do this? Ideally, if there was a way to step into the background scripts, that would be great. But when I try to step into a background call, the Safari debugger just steps to the next line. The console.log within the background scripts do not get printed to the console (This is the console I launched from right clicking a popover that is part of the extension and then hitting inspect).
Any help on this would be great. Thank you.
This is an old question that asks about a different type of Safari extensions but I figured it could be helpful to add an updated answer now that Safari (v14) supports the Web Extensions API (similar to the API that all other major browsers use).
Debugging background scripts is now built into the Safari menu in the toolbar: "Develop" => "Web Extension Background Pages" => select your (enabled) extension. That should open the dev tools with all your background scripts where you can set breakpoints, check the network tab, etc..
As a side note, you can debug your extension's popup by opening it, right clicking the popup and clicking "Inspect Element".
In case this comes useful for someone - I figured out a way to view console statements in the background scripts. Open the extension builder and click on Inspect Global Page. Go to the console tab and the console.log messages in the background scripts will be printed in that console.
Now you can use Safari Preview to debug your Safari App Extension. There is a control to select the extension container at the lower-right corner of the console.
Also, is there a way to test those webapp in a webkit based browser such as chrome (with phonegap plug-in maybe) on a PC first before compiling it to test on a device or emulator?
The key reason is that trouble shooting mal-formed html, javascript code is very difficult on a device or emulator. You can not view the js console to see all error. The Weinre is great, but it can not spits out the error browser complains when initially loading the page.
It will be great if we can validate the html, js, css app first before diving deeper into testing on Android device. i.e. a way to weed out some simple problems before getting into more complicated deeper problems.
Any experience/suggestions/ideas/pointers are greatly appreciated.
Paul> Seems promising. Will try and report back. It seems knowledgeable in phoneGap mob dev. What are the key steps would you go through to dev a phoneGap mob web-app?
Ripple is a Chrome plug-in that includes a PhoneGap mode.
For JavaScript static validation, the PhoneGap Android Eclipse AppLaud plug-in includes a JSLint mode.
I would recommend you use Safari. In your Safari (on Mac) go to Settings (on PC) goto preferences -> Advanced -> check on "Show Develop in Menu bar".
Now you'll find in the Menu "Develop" "User Agent". There you can change the UserAgent identification, that will be send to the server. You can then change it to iPhone.
This way you can at least test it for iOS.
Hope that helps somewhat.
I am using Webkit Nightly because i'm working on some new HTML5 features. I would like to look at the application full screen, without the window chrome.
Other browsers have F11 and other buttons to go fullscreen, but webkit doesn't. Is there a way I can launch it in fullscreen mode?
Dennis
Webkit is a web content engine and its not a browser on its own. Anyway, which port of webkit are you referring to? GTK+? QT? EFL?
I just downloaded and compiled WebKit-r70098 (for GTK+) on my Ubuntu box following this instructions. The demo browser (GtkLauncher) that comes with it creates a window of 800x600 (hardcoded in the code) and doesn't have a fullscreen feature.
Also, the pre-compiled binaries for Mac OS X that allows Safari to run on top of Webkit, don't offer native fullscreen capabilities. Currently there's no fullscreen without tweaking Safari configuration files or using 3rd party plugins (there are lots of them).
EDIT:
On Windows, webkit.exe also doesn't have fullscreen capabilities.