Chrome M40: The Virtual Viewport

image00-4f7ab8b5624c96245ee26269207774ad
image01-5bf983086586454e451435c0322a6a6c

The idea of the virtual viewport is to split the notion of “the viewport” into two, “the layout viewport” (where fixed position items are attached) and “the visual viewport” (What the users actually see).

In the screenshots above you can cleary see this in action: without a virtual viewport it’s not possible to view right hand side of the menu (which is position: fixed;) when zoomed in. With the virtual viewport this is possible.

This presentation will clarify some things:

What the Virtual Viewport? →

Taking Chrome DevTools outside of the browser

Let me introduce what I call the Chrome DevTools App. It’s a standalone app that runs Chrome DevTools in its own process. It’s powered by node-webkit, and it’s able to run on Windows, Mac and Linux, completely independently of Chrome.

From the same guy who brought/is bringing us RemoteDebug.

Taking Chrome DevTools outside of the browser →
Chrome DevTools App →

Marking HTTP As Non-Secure

My name is Bramus and I approve this message:

We, the Chrome Security Team, propose that user agents (UAs) gradually change their UX to display non-secure origins as affirmatively non-secure. We intend to devise and begin deploying a transition plan for Chrome in 2015. The goal of this proposal is to more clearly display to users that HTTP provides no data security.

It soon will be 2015, time to embrace HTTPS.

Marking HTTP As Non-Secure →

Emoji in Chrome on Mac / OS X

chrome-osx-color-emoji

Over the weekend an important set of commits (this one amongst others) landed in Chromium, enabling Emoji in Chrome on OS X, and – after 4 years – marking the bug “Emoji does not display in webpage contents on OS X Lion+” as fixed.

When using Canary, things like The Pile Of Poo Test will work just fine from now on 🙂

[FIXED] Issue 62435 – chromium – Emoji does not display in webpage contents on OS X Lion+ →

Debugging iOS Safari and UIWebViews using Chrome DevTools

ios-debug-using-chrome-devtools

The ios_webkit_debug_proxy allows developers to inspect MobileSafari and UIWebViews on real and simulated iOS devices via the DevTools UI and WebKit Remote Debugging Protocol. DevTools requests are translated into Apple’s Remote Web Inspector service calls.

The proxy detects when iOS devices are attached/removed and provides the current device list on http://localhost:9221. A developer can click on a device’s link (e.g. http://localhost:9222) to list that device’s open tabs, then click on a tab link (e.g. http://localhost:9222/devtools/page/1) to inspect that tab in their browser’s DevTools UI.

iOS WebKit Debug Proxy →
How to investigate IOS Safari crashes using Chrome →