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 = console.context('Info');
const requestsLogger = console.context('Requests');

thirdPartyLogger.log('Something about a third party script');
infoLogger.log('An information log');
infoLogger.log('The log management UI helps group this');
infoLogger.log('This is experimental, in Canary! 🆕');
fetch(location.href).then(requestsLogger.log);

Note: Couldn’t get this to work though, as I couldn’t find any experiment in the settings of Chrome Canary 63’s DevTools to activate this. Perhaps in the next Canary?

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 – Headless Chrome Node API →

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 where you’d need to script a real browser.

Runs locally or headless on AWS Lambda. The API to control it is really elegant, as the code is very easy to understand:

const { Chromeless } = require('chromeless');

async function run() {
  const chromeless = new Chromeless();

  const screenshot = await chromeless
    .goto('https://www.google.com')
    .type('chromeless', 'input[name="q"]')
    .press(13)
    .wait('#resultStats')
    .screenshot();

  console.log(screenshot); // prints local file path or S3 url

  await chromeless.end();
}

run().catch(console.error.bind(console));

Chromeless Playground →
graphcool/chromeless GitHub →

Chrome DevTools’ Command Menu

Something I learnt via Umar Hansa‘s great DevTools Tips is that the Chrome DevTools sport a Command Menu.

By hitting SHIFT+CMD+P (same shortcut as Sublime Text’s command menu BTW) you can open it. Thanks to fuzzy matching you can easily access things in it.

Chrome DevTools: UI: Command Menu →

Umar Hansa’s Twitter Account is worth following if you’re into the Chrome DevTools (I know I am 😉). Additionally you can sign up for his video course Modern DevTools

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

Chrome DevTools Tip: Blackboxing Scripts

The Chrome DevTools have this neat feature where you can “blackbox” JavaScript source files. Upon blackboxing a script the debugger will jump over anything contained in that file when stepping in/out/over code, and not pause on any breakpoints also contained in that file.

A typical example would be to blackbox the script of the JS framework you are using: jQuery, React, etc.

devtools-blackbox-2

You can blacklist JavaScript source files via the DevTools Settings:

add-pattern

How to step through your code | Web Tools – Google Developers →

Note: the previous version of the docs are more clear than the current version (linked above) — Blackbox JavaScript Source Files – Google Chrome →

Chrome “Go Back With Backspace” Extension

go-back-with-backspace

With the release of Chrome 52, the backspace button no longer navigates back when pressing it. Highly annoying, because the navigating back with the backspace button is just very, very handy (it only requires one finger/hand!).

“Go Back With Backspace” is the official Google released Chrome Extension that restores this behavior (other – non-Google developed – extensions have been around before).

This extension re-enables the backspace key as a back navigation button — except if you’re writing text.

Go Back With Backspace →

Google Chrome, Firefox Address Bar Spoofing Vulnerability

CqGfgXGWcAEjG6R

Turns out one single right-to-left character in a URL can make the omnibox (Address Bar) freak out, and render it wrongly:

Placing neutral characters such as “/”, “ا” in filepath causes the URL to be flipped and displayed from Right To Left. In order for the URL to be spoofed the URL must begin with an IP address followed by neutral characters […] what matters is that the first strong character (generally, alphabetic character) in the URL must be an RTL character.

When typing in 127.0.0.1/ا/http://google.com into the omnibox, it will be displayed as http://google.com/‭ا/127.0.0.1, which is obviously not google.com … let this be a reminder to check also check for the green padlock being present when visiting well known sites.

Google Chrome, Firefox Address Bar Spoofing Vulnerability →

Chrome DevTools Custom Object Formatters

Here’s a little Chrome DevTools gem: it supports the use of custom Object formatters. Object what?

Object formatters allow you to control how the value of a JavaScript object appears in Chrome’s console and debugger.

Say you’d like to visualize a 2D vector, instead of seeing “just” { x: 1, y: 2} appear when pushing it through console.log. Enter the custom VectorFormatter:

chrome-custom-formatters

Or say you’d like to visualize a color, instead of seeing its R, G, and B values:

OIA4kba

The possibilities are endless 🙂

Custom Object Formatters in Chrome DevTools (Article) →
Chrome DevTools VectorFormatter
Github search results for devtoolsFormatters