Firefox Developer Command Line

Firefox makes developing for the Web faster and easier with a unique Developer Command Line. The new tool provides easy keyboard control over Firefox Developer Tools and is intuitive, completing commands and parameters for you.

Hi, I'd like to take a few minutes to show off this new feature that we have in Firefox 16

which should be entering beta about the time you see this.

it's called the "Developer Toolbar".

You press shift-F2 to bring it up, and there are a lot of interesting things about the "Developer Toolbar".

It's a very handy way to get to your tools

Plus it'll show you the errors that come up uh... on the page, if there are errors it gives you an error indicator.

next to the console there, but what I really want to focus on today is this "Command Line".

But this is not a command line for JavaScript, you don't run JavaScript here.

This is the command line for running command that control your tools.

it's a great way to do things with your keyboard.

There are bunch of different commands here for controlling your tools,

like "dbg" to control your debugger, "edit" for editing style sheets.

Let me show you the "console" command, every command has help which is handy,

many commands have subcommands, let you get a various things done.

So, in this example:

I will open the web console, so now we can see what's inside the console here.

Now, there is a keyboard shortcuts for that, of course,

it's hard to remember all of those keyboard shortcuts and you really have to twist your finger to do it.

But, in this case I have a command line that has completion and everything, so I can do "console clear",

and it will clear the console for me when I want to see fresh output, and I can use console close when I'm done.

So, that's um... that's a really handy way to kind of fire one feature another.

Let's take a look at inspect feature. Now really when you working on the page you often know things about your page.

I know there is an element called "#home-news" on this page.

and I know that the heading under there is called... is an 'h3'.

So, by saying "inspect" and giving that CSS selector, I can actually go directly to that without using my mouse.

Now, this is a responsive design, I can see that my font size right now is 28 pixels.

What if I want to see how this responds to being on a phone?

Well I can bring up the responsive design view, and I'll just say "resize to 320 480",

which is about the size that's reported by a lot of mobile phones.

Okay, so now you see that I've got a single column kind of view, and our media query has taken effect here.

So, now the font size has dropped to 24px thanks to the media query.

So, that's pretty cool and it gives me a chance to see, you know, what would this looks like if it was 22 pixels,

you know, I can do things like that.

And I can... there is actually a command to turn off the responsive design view, or you just press 'escape', which is easier in this particular case.

Here's another command that doesn't have a parallel in our existing developer tools.

The "cookie list" command, so that lists all the cookies that I have on the page.

One of the interesting things here is this command actually gives me multiple options.

I can type "cookie remove WT_FPC", or I can just click that right there, and it will populate the command line with that command for me.

Here is another feature that's new, if I say "inspect h1"

I know there is one heading on this page, one h1 heading

What if I want to take a screenshot of just that part of the page and send it to somebody

I can use the "screenshot" command, say "heading.png" is the name I want.

Now I can just hit ENTER, and what it'll do is to take a picture of what I've got on my window here.

But instead, I'm gonna say a "0" delay,

I don't wanna do full page, I just want to do this one item which you can see on the screen,

and I'm gonna say "h1", because rather than the body I just want to get that h1.

So I do that and it has saved into my download directory.

So looking there I can see now I have a heading.png just created, and it's the heading that's right there on the page.

So it's a super quick way to take the screenshot,

and is great you can take screenshots of more than just the visible area without going through hassles.

Here's another new command, the "pagemod" command.

It lets you do a bunch of different manipulations to the pages, just from the command line here.

So I'll show up the simplest possible thing here.
Oops... a typo.

You can see also my command got an underline everything it helps me when I make mistakes.

So, I want to replace that "In the news" text there, what it would... how would it look if I set "News for you" instead, let's find out.

Okay, so that's how it looks when I set "News for you". That's a very simple replacement.

You can do other cool things like "page mod remove iframe" is fun on many sites, take try that one out.

If you want to get into the browser development, this is a cool one to do, "pref set".

So the "pref set" command you can set all kinds of hidden preferences that Firefox has.

So I'm gonna do "pref set devtools.chrome.enabled", oops I want to set that to "true".

What it is going to let me do, is let me manipulate the browser itself.

Now this doesn't really take effect until it restarts

so I'm gonna to go ahead and "restart", which is another command here, restart the browser now...

Okay, so the browser is restarted now. And if I go to "Scratchpad", the Scratchpad tool,

We can see the effect of the changes has made. There is an "environment" menu, and I can select the "Browser"

and that allows me to run JavaScript code then execute to not just in the context of this browser tab,

but actually the context of the whole the browser which means I can write "add-ons"

and things like that right here in "Scratchpad". Very cool feature.

And one thing speaking about add-ons, uh... one that thing is also very cool

about the whole "Command Line" idea, is that it's a very scalable kind of user interface,

so you can actually write "add-ons" that add commands. So let me give you an example of one,

I'll say "addon enable Firebug", which i had installed but disabled, so it's now enabled.

And if I type help, you can see there's now a "firebug" command.

And that lets me do things like open firebug,

so there is Firebug, I can say "firebug detach",

and it's now in the separate window that's pretty handy.

If I want to bring it back in, I can just do "firebug attach" again, and "firebug close" when I'm done.

So it's great to see that kind of integration you can easily make add-ons to add your own commands,

and I hope that we'll soon see a lot of the add-ons.

Thanks for watching.