Devtools Colorpicker Palette

I’m still trying to figure out how to get a list of all the colors in use on a page from within devtools, but I’ve been hacking together a little demo with a custom Web Inspector frontend that loads a color palette on the side.

When you click one of the swatches, it sets the current color of the element. The idea is that it would include all the colors in your page, maybe ordered by most used. Possibly could even get more advanced and suggest a set of complementary or analagous colors based on your current selection.

A prototype implementation of a palette using color swatches within devtools

A prototype implementation of a palette using color swatches within devtools

jQuery UI 1.9 Boilerplate

jsbin has made having to remember some of these links less important. However, with jQuery UI 1.9 coming out, there are some CDN links that aren’t working. Here is the updated boilerplate I use to quickly test out a jQuery UI project. If all goes well, you should have a dialog that you can drag around and resize.

<!doctype html>
<html>
<head>
  <title></title>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.0/jquery-ui.js" type="text/javascript"></script>

  <style type="text/css">
    #modal {
   background: orange;
    }
  </style>

  <script type='text/javascript'>
    $(function() {
        $("#modal").dialog({ title: "It works" })
    });
  </script>
</head>

<body>
<div id='modal'>jQuery UI!</div>
</body>

</html>

As a bonus, here is the markup in jsbin.

DevTools Feature Request - console.scope()

Sometimes I just want to see all (or many) of the variables inside of the function, and it can be a bit of work to copy all of the variables into the console.log() call when you know that you are just going to delete the line afterwards anyway.

It would be great to have a console function that handles this. It would be called console.scope. When you call console.scope() it would act similarly to console.trace(), except instead of seeing the call stack in the console, you would see the same thing that you see in the ‘Scope Variables’ panel when inside a breakpoint in the Sources Panel (see images).

I have also opened a thread about this on the devtools mailing list.

TinyColor On npm

I have published my TinyColor package to the npm repository - https://npmjs.org/package/tinycolor2. Unfortunately it is called tinycolor2 since tinycolor was already taken.

After running

npm install tinycolor2

You can use tinycolor like so:

var tinycolor = require("./tinycolor");
console.log(tinycolor("red").toHex());

See the project homepage or the README for more info.

Devtools Colorpicker

It is great that so many important platforms that we use on the web are open source, and open to contributions from anyone.

It took a lot of work, but it was worth it. I’ve been doing some web design work recently, and love how much easier it is to play with different colors in a design.

Now I’m thinking of different ways that design work could be further improved with the colorpicker. A couple of ideas right now: (a) an eyedropper to select a color from the screen and (b) a color palette consisting of currently used and recommended colors.