Writing to the Google Chrome console from PHP

Chrome Logger is a Google Chrome extension for debugging server side applications in the Chrome console.
Chrome Logger is a Google Chrome extension for debugging server side applications in the Chrome console.

This afternoon I finally got round to figuring out why my workaround for changing the Divi projects custom post type to anything you want had broken in Divi 2.5.

In the end it was deceptively simple. I’d set the priority values for the add_action($hook, $function_to_add, $priority) and remove_action($hook, $function_to_add, $priority) functions too low.

WordPress uses the priority value to determine in which order particular actions are run. The default value is 10. The higher the value, the later it will be executed.

While I was investigating this, it crossed my mind that it would be really useful if I could write values to the Google Chrome console in the same way that you can when writing and debugging JavaScript.

It turns out you can, using Chrome Logger plus the ChromePhp library.

With the Chrome Logger extension installed and enabled on the tab I wanted to write to, all I had to do was include the library and log some data. Like this:

<?php
    include 'ChromePhp.php';
    ChromePhp::log('Hello console!');
    ChromePhp::log($_SERVER);
    ChromePhp::warn('something went wrong!');
?>

Very useful. And as well as a library for PHP there are also libraries for

  • ColdFusion
  • Go
  • Java
  • .NET
  • Node.js
  • Perl
  • Python
  • Ruby

You can find details on the Chrome Logger website.

 

You can’t both be the default browser!

Screenshot of options screens of Chrome and Internet Explorer. They both claim to be the default browser.
Wait a minute! You can’t both be the default web browser!

I just spotted this strange anomaly on my PC at work. Both Google Chrome and Internet Explorer 10 are claiming to be the default web browser.

A quick visit to the “Default Programs” applet in the Control Panel and balance has now been restored.

Matching Google Chrome’s developer tools theme to your text editor theme

Sublime Text 2
Sublime Text 2

My main coding text editor is the excellent Sublime Text 2, my favourite theme is called Tomorrow-Night by Chris Kempson, and my go-to browser is Google Chrome.

Being involved in web design I use the Chrome web developer tools all the time for debugging JavaScript, identifying HTML classes and tweaking CSS. It looks like this:

Google Chrome developer tools
Google Chrome developer tools

But as you can see from the screenshot above, the default view is rather dull: white background, uninspiring syntax highlighting. It’s a shame that you can’t match the Chrome developer tools code panel with my text editor of choice.

User StyleSheets

Well, it turns out you can! Chrome provides a “User StyleSheets” directory into what you can drop a Custom.css file.

Windows
C:\Users\%username%\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\
Mac
~/Library/Application Support/Google/Chrome/Default/User StyleSheets/
Ubuntu
~/.config/chromium/Default/User StyleSheets/

A number of people have also done the hard work for us and made available ready-to-use CSS files for various themes. These are my two favourite dark themes:

  • Tomorrow
  • Monokai (UPDATED: This version works better when editing code in the Elements tab.)

Having saved the code to your Custom.css file and saved it, Chrome updates immediately:

Google Chrome developer tools with Tomorrow theme
Google Chrome developer tools with Tomorrow theme

What do you want to see when you open a new tab?

20011015-chrome-newtab-apps 20011015-chrome-newtab-recent

I’ve been thinking about browsers’ new tab pages recently. My default browser is Google Chrome so I’ll largely be focusing on that in this post.

By default, certainly on the version that I have installed (I’m on the Dev channel which allows me to see up-and-coming features—and bugs—before they are available on the stable channel) I get two options:

  • Apps
  • Most visited pages

Most visited pages

The most visited pages feature is the sort of thing that many browsers do now. Opera does it; I’ve a vague notion that they were the first with their speed dial page:

20011015-opera-newtab

The Apple Safari one is really attractive, almost cinematic.

20011015-safari-newtab

Even Internet Explorer 9 does it.

Most visited doesn’t mean favourite

The thing is, when I open a new tab in my browser, as you would expect, it’s usually because I want to open a new page, visit another web site, or open a new web application. But I am finding that I rarely, if ever, use these most popular/most visited pages for a number of reasons.

First, I don’t find their design particularly helpful.

Chrome, Safari and Opera all show a resized screenshot of the website. But there is too much detail in a screenshot, that when it gets squeezed down to 205 x 128 pixels it loses its immediacy and usefulness.

Usually, it’s not immediately obvious what the site is from a tiny screenshot, so I find that I waste a lot of time trying to determine whether these are the links I need or not. Also, depending on your browser’s theme, the text beneath the screenshot isn’t always obvious either.

Some browsers will also update the screenshot if you’ve not visited the site in a while, or have cleared your browser’s cache so the page may actually look completely different from the last time you visited (remember) it.

It doesn’t pass the Steve Krug Don’t make me think! test.

Internet Explorer 9, on the other hand, takes a different approach. IE shows white boxes containing the site’s favicon and a bar, which indicates how often you’ve visited the site (e.g. “Very active”, “Active”, etc.).

20011015-ie9-newtab

As you can see from the screenshot above, though, is that 4/10 sites there don’t have icons, or they’ve not been downloaded for some reason.

So the horizontal bar then becomes the most obvious feature of each box; given that we lazy humans will tend to pay attention to pictures and coloured shapes before we attempt to read anything, because that uses energy!

There are blue, green and purple bars. But what do the colours represent? It’s not obvious. It turns out that IE rather cleverly draws the colour from the favicon.

It’s better, but it’s still not perfect. What if the sites listed aren’t actually the sites that I want to visit most frequently?

Second, most visited doesn’t necessarily mean favourite.

IE tells me that these sites are my “most popular sites”, Chrome that they are my “most visited”, Safari that they are simply, and rather neutrally, “top sites”. But that doesn’t necessarily mean that they are my favourite.

Because I visit a particular location many times doesn’t immediately make it one of my favourite locations.

In St Andrews I generally park on Langlands Road. That makes it one of my most visited streets. But it’s not my favourite location in St Andrews; St Mary’s quad is.

Because I’m involved in Web design I generally find myself flipping between different browsers frequently, in order to test pages. So my “most visited” sites quickly fill up with screenshots of test pages. And different browsers may require more testing than others.

That’s not useful.

Third, I clear my cache a lot, also for testing purposes. And every time I clear my cache it resets my “most visited” sites counter too. So any useful sites that I’ve accrued over the last week or so also get wiped.

Why not use favourites?

The browser that I think has got it closest is Opera.

Opera allows you to choose which sites are displayed on your Speed Dial/new tab page.

20011015-opera-speeddial

It also doesn’t use the entire screenshot, but a cropped portion, which tends to include the site name. I can quickly, and easily see what these sites are. It passes the “Don’t make me think!” test. I also find that I use this feature a lot in Opera Mobile on my HTC HD2.

This makes much more sense to me: show me the sites that I want to visit most often, or the resources that I find most helpful, even if I don’t visit them every day.

Google Chrome’s apps screen also comes close to what I would find useful:

20011015-chrome-newtab-apps

Now, this is getting somewhere. The icons are simple and recognisable, even though the text labels aren’t easy to read against the grass background.

The only problem is that I’m now dependent on developers creating a Google Chrome  shortcut app to the site that I want to visit. In my own Web development I use four sites frequently:

  • Heart Internet control panel
  • Pivotal Tracker
  • Assembla SVN
  • Deploy

As you can see from the screenshot above only 2/4 of those sites have shortcut apps. If I want to include them on my apps pages then I’ll need to create them myself. Which is fine for me as a Web developer, but a it of a pain for most other Web users.

My faves

I came across myfav.es today which is designed to easily allow you to choose your favourite sites and then set that page as your browser’s homepage.

This is mine:

20011015-myfaves

As you can see some of the shortcuts use built-in, default application icons such as Google, Twitter, Facebook, Google+ and YouTube.

The more generic icons (heart, notepad, cloud, download, ‘B’) are non-standard links that I’ve entered manually. There are loads of icons to choose from, and you can specify what colour they should be.

It’s very clear, and highly customizable. That’s exactly what I want when I open a new tab. Something like this would be really useful, as a built-in feature, to browsers. Particularly as user-interfaces, like Windows Phone/Windows 8 Metro UI become more popular.

There are a couple of Chrome extensions that replace the default new tab page:

  • myfav.es New Tab page
  • myfav.es Fast New Tab Replacement Page

But both also remove the cursor from the address bar when you open a new tab, which means if you want to start typing a new URL or a search query you have to manually select the address bar (“omnibox”) either with your mouse or a keyboard shortcut (Ctrl+D on Windows).

I’ve now simply set this as my homepage in all my browsers. And so far it’s proving very useful, and consistent.

My Opera 11 and Opera Dragonfly 1.0 challenge

20110509-opera11

I spotted on Twitter the other day that Opera have updated their web debugging application Dragonfly to version 1.0. Dragonfly is to Opera what Firebug is to Mozilla Firefox.

I’ve always been very impressed with Opera, as far back as Opera 3. I used to use Opera 5 on my Psion 5mx and I still use Opera Mobile on my HTC HD2 (Windows Mobile 6.5).

So to check it out and put it through its paces I’ve decided to use both Opera and Dragonfly exclusively for the next month in place of Google Chrome (browsing) and Firefox/Firebug (debugging).

Dragonfly is now built-into Opera. Just download Opera 11.10 and to open Dragonfly press Ctrl+Shift+I (Windows) / ⌘+⌥+I (Mac) or right-click and select “Inspect” from the context menu.

I’ll report back here, but I’ll also be blogged about it on My Opera blog.

Who wants to join me?