I have a need to inspect what is being drawn in a <canvas>, as in this question. And I know how to use the Chrome dev tools canvas inspector, and the Firefox Canvas Debugger.
Are there any similar tools for the Safari web browser?
For the sake of clarity, let's assume desktop Safari v9.1.1 running in OSX 10.10.
Related
I'm looking at writing some E2E tests using Playwright. I can see that the library allows tests to be run against Chromium, Firefox and Webkit. My understanding is that Webkit is the underlying engine of Safari, and Chromium is the base of Chrome (and other browsers).
When it comes to testing against Webkit/Chromium, how close is it to testing against the user facing browsers which use the underlying engines? I'd imagine that there would be some quirks which the user can run in to whilst using Safari and it wouldn't be caught when running the tests on Webkit.
Thanks
Stock browsers like Google Chrome, Apple Safari embed rendering engines (Chromium, WebKit) and add stuff on top of them. In particular, they add proprietary media codecs, inject browser extensions, etc. They also add surrounding interfaces such as bookmarks sync. But they reuse the underlying web platform implementation.
Chromium
Chromium is the open source web platform implementation used by Google Chrome, Opera, Microsoft Edge and other browsers. It implements web specs, renders content, works with network, etc. Playwright uses a stock Chromium build that can be automated with the Playwright API for e2e testing.
For Google Chrome things are simple: Chromium is a safe target to test, modulo proprietary media codecs and DRM. You can point Playwright against stock Chrome Canary or Edge Canary to use proprietary media codecs.
WebKit
WebKit is the open source web platform implementation used by Apple Safari and Epiphany. As of June 2020, Playwright provides a WebKit build that can be automated with the Playwright API for e2e testing. Playwright WebKit works across all platforms (macOS, Linux, Windows), in both headless and headful modes.
When WebKit runs on macOS, it is a safe target to test Safari. WebKit on Linux and Windows differs from Apple Safari in the following ways: it uses a non-macOS network stack, uses non-Core Animation to composite scene and produce image raster. This means that screenshots on Linux and Windows will not perfectly match screenshots from macOS. In terms of the web platform, the same WebKit code will layout the page and run JavaScript—it will match how WebKit works in Safari.
To conclude, we consider the browsers provided by Playwright to be the best of what you can get for e2e testing. Running WebKit on a Linux CI would use a different compositing pipeline than macOS, but it can be used for e2e testing of web applications in WebKit-powered browsers.
I've found there are some differences between webkit and Safari depending on which version of the two you're testing against.
I was testing Safari 16.0, and for my purposes Playwright 1v17 seemed to match very well. Upgrading to Safari 16.2 didn't seem to affect that.
But upgrading Playwright to 1v28 though seemed to change the behaviour around getting selection bounding boxes. It's seems more correct, but it's no longer consistent with Safari 16.2.
I'm assuming that WebKit is a bit ahead of Safari, and at some point Safari will catch up, and we'll see they are behaving the same again, but so far that's not happened. (Or maybe it has already, I'm a couple of versions behind at this point).
My solution has been to use both the latest version of Playwright for testing Chromium and Firefox, but use the older version for testing Safari. I am also testing webkit from Playwright 1v28 for interest right now, but I expect Safari will start showing that behaviour at some point.
(NB: Getting the bounding boxes of selections gets different results from each browser, so it's not too surprising that it's changing in WebKit right now. The change seems to be closer to Chrome's behaviour but still not the same).
In case it helps anyone, in my package.json devDependencies I have
"playwright1v17": "npm:playwright#~1.17.2",
"playwright1v28": "npm:playwright#~1.28.1",
and then in the test script I do
import { chromium, webkit, firefox } from 'playwright1v28';
import { webkit as safari16v1 } from 'playwright1v17';
That lets me test both versions of webkit and compare, as well as Chromium and Firefox.
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.
I'm trying to write ppapi plugin for Chrome which will use webcam (show preview and write file). I have installed NaCl sdk with pepper_35.
There available examples in /examples/api/ folder: media_stream_audio and media_stream_video.
The audio example works fine - requests access to microphone and shows some kind of preview.
The "media_stream_video" example must show web-camera video preview, but when I load example on the local web server (with make serve command), there appears red rect, and Chrome asks for the web camera access. When I click “allow” - webcam indicator lights-up, chrome show that web page uses the web camera, and I see the camera settings icon. But the preview doesn't work, there still red rectangle instead.
I checked this on Windows 8.1, Windows 7 and Mac OS X, with five different webcams, and have no idea what can be wrong.
Maybe someone already encountered with the same problem?
Installing the pepper_37(dev) version of NaCl SDK solved the problem. Looks like it is unstable version currently, but it works.
I followed the steps to set up debugging webpage on iOS. It worked. However I see an issue with the inspector - it doesn't let me check the DOM and corresponding CSS. Anyone else has this issue? (Exact same issue when debugging using the simulator.)
Screenshot: http://screencast.com/t/E4fxPQwk14
Resource: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html
Thanks!
UPDATE: WebKit nightly works. Thank you Timothy Hatcher!
You need to use a WebKit nightly, Safari 6.1 or Mavericks to use Web Inspector with iOS 7.
If you don't have access to Mavericks, You can also use Chrome devtools via proxy.
Debug iOS 6+7 Mobile Safari using the Chrome DevTools
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.