Archive for the ‘Developer Tools’ Category

Inspect User Agent Styles in Firefox DevTools

Friday, June 6th, 2014

User agent styles refer to the styles loaded by the default stylesheets within a browser. Firefox has some basic style rules that get applied to every page – for instance, links are blue and <h1> tags are big and bold with margins.

Sometimes these styles can interact with the styles you add to a page, which is why it is important that you can see them in devtools. I recently added a feature in Firefox 32 (currently Nightly) that lets you inspect these rules. See Bug 935803 for the implementation details.

Within the inspector, these styles behave pretty much like any other style on the page. It lists rules in the order of application, and you can see which rules have been overridden. There are a few ways that devtools distinguishes between the UA styles and normal styles:

  1. They are not editable. Since you can’t change these files, you are not able to edit/disable them within the tools.
  2. They are shown with a slightly different background color.
  3. The links to the stylesheet open a popup window to view the source of a sheet instead of loading the sheet in the Style Editor. There isn’t much purpose for loading these in the style editor (see 1), but seeing the source of the sheet can still be nice for the curious.

user-agent-styles-usage

user-agent-styles-usage

Enabling User Agent Styles

This is turned off by default. To enable user agent styles, select the “Show Browser Styles” checkbox from the options panel:

user-agent-styles-option

user-agent-styles-option

You can open any page and toggle this feature on to see it. But here is a a quick page to try it with:
data:text/html,<blockquote style='color:red;' type=cite><pre _moz_quote=true>fun <a href='foo' style='color:orange'>to</a> inspect</pre></blockquote>

Firefox DevTools Experiment – Pixel Inspector

Monday, September 2nd, 2013

Heather and I spent some of our @FirefoxDevTools team meetup working together on an experiment we named the Pixel Inspector. The idea is to focus on an individual region of the page with an eyedropper to pick colors and a zoom feature to debug tricky alignment issues. You can get separate programs that do some of this, such as Digital Color Meter, or addons like ColorZilla, but it would be great to have something built into the developer tools to do this. Here is how it works:

  • Open the panel with a keyboard shortcut or by clicking a button in DevTools.
  • Move your mouse around the page to the location you want to inspect. Click on the pixel to lock it in place.
  • Use the zoom slider to increase the size of each individual pixel.
  • Press the ‘Copy’ button to copy the color to your clipboard, or use the format dropdown to change the color format.

See the screencast and screenshot below to check it out. Would this be a useful feature to add to DevTools?





pixel inspector

How does it work?

Pixel Inspector makes use of the drawWindow canvas method (which is only available with “chrome only”, meaning a script running with elevated privileges that has access to browser internals). There is an additional flag, named context.mozImageSmoothingEnabled = false; that allows the image to get the pixelated effect we want. Most of the code can be seen in this file: https://github.com/harthur/devtools/blob/magnifier/browser/devtools/magnifier/magnifier.js.

DevTools Links

Monday, July 8th, 2013

Links I’ve collected while working with and contributing to various browser developer tools, all in one place. If you are wanting to contribute to any of these tools, get in contact with the teams that build them, or just want to browse the code (they are all open source), here are some links to help you get started.

Thanks to Heather Arthur, Paul Irish, Timothy Hatcher and Mike Ratcliffe for contributing to this guide. Please let me know if you have any updated or additional information to add to this list by leaving a comment or pinging @bgrins on Twitter.


Chrome DevTools

Getting ahold of Chrome DevTools team


Firefox DevTools

Getting ahold of Firefox DevTools team


Safari Web Inspector

Getting ahold of Safari Web Inspector team


Devtools Snippets

Sunday, June 16th, 2013

I have been working on a small collection of snippets that are handy to reuse inside of browser devtools. These can be used in any devtools. You can jump straight to the devtools snippets project page and readme if you want to see some screenshots and details about each individual snippet.

The actual snippets can be seen here: https://github.com/bgrins/devtools-snippets/tree/master/snippets

Why would you use snippets

A common usage for snippets is to replace developer bookmarklet type of functionality. The problem with bookmarklets is that they are a pain to create and share, and even using them can be difficult. You may need to show a bookmarks bar in the UI, run it, and open up devtools to see if it worked. Then you would need to make changes to a giant single line of JavaScript inside of a bookmark manager, or use a generator to convert a .js file into a bookmarklet. Snippets are a much better way to handle this workflow. Examples of this type of snippet would be adding jQuery to a page without it or printing the HTTP headers from the current page.

Another use would be saving console commands that you use during development. For example, if you wrote something to help export information from a page, or print out some debugging data for your application, you can use the multiline snippet editing interface rather than typing in the console. Plus you can save it when you are done in case you need it later.

Browser Support

Firefox has multiline support using the scratchpad editor, and Chrome has a new ‘snippets’ feature.

Currently, in Chrome you have to enable snippets support in chrome://flags and inside of devtools settings (see full instructions and screenshots). They are enabled by default in Canary, so this feature set will soon be widely available. Read more about snippets on the Chrome developer tools documentation.

Firefox Scratchpad is really cool for experimenting with code. In addition to being able to run an entire snippet, you can select just a portion of the code and execute it. Read more about scratchpad on the Firefox developer tools documentation. One thing I would like to see is better management of snippets (‘scratches’?). For example, see the UI for snippet editing in Chrome:

Future Functionality

Things that would be awesome to add:

  • Firefox: Better management of snippets. As seen in the screenshot above, it can be really handy to have a UI for storing, editing, and saving changes to the snippets. To be fair, right now you can save scratchpad contents to a file and then ‘open’ or ‘open recent’ later. Maybe if this was pulled more prominently into the UI without needing to open up a file explorer that be enough. It is cool that it actually saves the files to a known place on your disk.
  • Chrome: Keyboard shortcut to run a snippet (or part of a snippet). Scratchpad uses Cmd+R/Ctrl+R, which makes sense but may be reserved for reloading the page. Also, storing the snippets in a known place on the disk is really handy, as they could be backed up, copied directly into a project, etc.
  • All devtools: Import / export snippets. You can then sync your snippets across computers or share them with others. Maybe some sort of zip or JSON file containing the contents of all the snippets. Or a maybe a URL importer that loads the response into a new snippet, named the path of the request by default. For example, pasting https://raw.github.com/bgrins/devtools-snippets/master/snippets/performance.js would create a new snippet called performance.js with the contents of that request. Then you could just load up the importer with a list of URLs:
     
    https://raw.github.com/bgrins/devtools-snippets/master/snippets/performance.js
    https://raw.github.com/bgrins/devtools-snippets/master/snippets/log.js
    https://raw.github.com/bgrins/devtools-snippets/master/snippets/base64.js
    ...

Snippets inside of devtools are big timesavers and are going to be really helpful for a lot of developers. You should check them out if you haven’t yet. Going forward, I’m hoping there will be an easy way to use, manage, and discover new snippets that work across browsers.

Devtools Colorpicker Palette

Saturday, February 2nd, 2013

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

DevTools Feature Request – console.scope()

Wednesday, September 12th, 2012

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.

Devtools Colorpicker

Monday, July 2nd, 2012

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.

DevTools Feature Request: Show Stack Trace In Event Listeners

Thursday, June 21st, 2012

I was asked a question in my DevTools talk at ComoRichWeb this month.

Q: How do the event listeners work when the events are bound with jQuery?

A: Not well. I rarely use that section when using a framework to bind events, because the event listeners never point back to the actual function being bound – instead they link to the jQuery source.

The info you see on event listeners bound with jQuery is not very useful. It shows you the actual function where the events were bound (which is inside of the jQuery source).

Open up this simple event listener test case in devtools (inspect the button and view event listeners) to see what I mean.

What Information Do You Want From Event Listeners?

What I am actually interested in is the actual callback that jQuery is adding. Of course devtools shouldn’t have to handle jQuery (or other frameworks) specifically, but what if it showed the callstack that caused the event to be bound?

So, by setting a breakpoint to the actual event event binding, here is what I got. This is what I am actually interested in:

Solution?

And putting my photo editing skills to the test, here is what it could look like (of course, this should be styled consistently). Clicking on one of the entries in the callstack would take you into the relevant place in the scripts panel.

This would be ideal. Is this even possible? Or there is an existing or better way to get around this that I don’t know about?

DevTools Talk – Slides and Links

Thursday, June 21st, 2012

I presented on using Chrome Developer Tools at ComoRichWeb, a web developer user group in Columbia, MO on June 20th. Here are the slides and some other links:

Slides and Demo

Other Links Mentioned in the Talk

We had a good turnout last night, was glad to get a chance to share some front-end development tips with local developers.

Debugging Web Workers

Tuesday, May 29th, 2012

While working on FileReader.js Web Worker file processing with FileReaderSync, I needed to figure out what was going on with the script inside a web worker. It can be very difficult to track down errors without standard developer tool support, like logging and debugging. Luckily, in Chrome Devtools, this is possible.

How to do it

It can be a little tricky to find, but click over to the ‘Scripts’ panel, and expand the ‘Workers’ accordion on the right. Then check the ‘Pause on Start’ checkbox and you will enter the debugging mode once the worker gets fired up. Here is a screenshot of the relevant checkbox:


Screencast

Here is a screencast of me playing with this feature:

Unable to display content. Adobe Flash is required.