Tag Archives: chrome

GitHub Toggle Chrome Extension – Quickly toggle between a GitHub Repo and its GitHub Pages by the click of a button.

Last week Christian Heilmann (codepo8) released a handy bookmarklet that lets on switch between the GitHub Pages URL of a repo hosted on GitHub and the repo contents itself. This afternoon I took the liberty of transforming it into a Chrome Extension, mainly as an exercise to myself. The extension adds a small button which […]

Enabling experimental Developer Tools Experiments

Using chrome://flags/ it’s possible to enable “Developer Tools Experiments”. On the most recent Fronteers Conference, Umar Hansa showed that there are even more DevTools Experiments that one can enable: Enable “Developer Tools Experiments” via chrome://flags/ if you haven’t already In the DevTools, go to Settings and select Experiments Hit SHIFT 6 times After having done […]

Using DevTools Features Without Opening DevTools using Puppeteer

Keeping a feature of the Chrome Devtools – such as the FPS Meter – running with the DevTools closed unfortunately is not possible (yet?). Kayce Basques provides us with a little workaround though: You can hack together a Puppeteer script that launches Chromium, opens a remote debugging client, then turns on the DevTools feature that […]

CSS Paint API (Houdini’s Paint Worklet) available in Chrome 65!

Oh yeah, the CSS Paint API will be enabled by default in Chrome 65: CSS Paint API allows you to programmatically generate an image whenever a CSS property expects an image. Properties like background-image or border-image are usually used with url() to load an image file or with CSS built-in functions like linear-gradient(). Instead of […]

End-to-end Tests that Don’t Suck with Puppeteer

Good introduction to using Puppeteer for your e2e tests: One of the most popular tools for e2e testing is Selenium, which is a tool for automating web browsers. Selenium sounds cool in theory: write one set of tests that run on all browsers and devices, woohoo! Jk. In practice, Selenium tests are slow, brittle, and […]

Browsershot: Convert a webpage to an image or PDF using headless Chrome

The folks over at Spatie have just release Browsershot v3: Browsershot is a PHP package which can convert a webpage to an image or pdf. The conversion is done behind the scenes by Puppeteer which controls a headless version of Google Chrome. Conversion is easy-peasy, hence this example: use Spatie\Browsershot\Browsershot; // an image will be […]

Chrome DevTools: Better JavaScript logging with the Log Management UI

Great explanation by Umar Hansa on the upcoming Log Management UI in the Chrome DevTools: The new Log Management UI is an experimental feature in Canary DevTools. Once enabled, you can create console.log functions which have their own context. One can create new logging contexts using console.context(name): const thirdPartyLogger = console.context(‘3rd Party’); const infoLogger = […]

Puppeteer – Headless Chrome Node API

Puppeteer is a Node library which provides a high-level API to control headless Chrome over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome. const puppeteer = require(‘puppeteer’); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto(‘https://example.com’); await page.screenshot({path: ‘example.png’}); browser.close(); })(); Puppeteer – […]

Chromeless Playground: Chrome Automation Made Simple

With Chrome 59 came the ability to run a Headless Chrome. Controlling it via code isn’t that easy nor elegant. Enter Chromeless (not be confused with Mozilla’s Chromeless): With Chromeless you can control Chrome (open website, click elements, fill out forms…) using an elegant API. This is useful for integration tests or any other scenario […]