Jump to Console panel keyboard shortcuts - Action, Mac, Windows / Linux. Clear the Console, Command + K or Option + L, Control + L. The Browser Console The Web Console was the first new developer tool added to Firefox 4, and the team has continued improving it in each release since. With Firefox 24. The Browser Console - Mozilla Hacks - the Web developer blog.
Can’t make the
#ChromeDevSummit
this year? Catch all the content (and more!) on the livestream, or join your peers for a CDS Extended event at a hosted location nearby. To learn more, check out the Chrome Dev Summit 2019 website. This page is a reference of keyboard shortcuts in Chrome DevTools.
You can also find shortcuts in tooltips. Hover over a UI element of DevToolsto display its tooltip. If the element has a shortcut, the tooltip includes it.
Keyboard shortcuts for opening DevTools
To open DevTools, press the following keyboard shortcuts while your cursor is focusedon the browser viewport:
Action | Mac | Windows / Linux |
---|---|---|
Open whatever panel you used last | Command+Option+I | F12 or Control+Shift+I |
Open the Console panel | Command+Option+J | Control+Shift+J |
Open the Elements panel | Command+Shift+C or Command+Option+C | Control+Shift+C |
Global keyboard shortcuts
The following keyboard shortcuts are available in most, if not all, DevTools panels.
Action | Mac | Windows / Linux |
---|---|---|
Show Settings | ? or Function+F1 | ? or F1 |
Focus the next panel | Command+] | Control+] |
Focus the previous panel | Command+[ | Control+[ |
Switch back to whatever docking position you last used. If DevTools has been in its default position for the entire session, then this shortcut undocks DevTools into a separate window | Command+Shift+D | Control+Shift+D |
Toggle Device Mode | Command+Shift+M | Control+Shift+M |
Toggle Inspect Element Mode | Command+Shift+C | Control+Shift+C |
Open the Command Menu | Command+Shift+P | Control+Shift+P |
Toggle the Drawer | Escape | Escape |
Normal reload | Command+R | F5 or Control+R |
Hard reload | Command+Shift+R | Control+F5 or Control+Shift+R |
Search for text within the current panel. Not supported in the Audits, Application, and Security panels | Command+F | Control+F |
Opens the Search tab in the Drawer, which lets you search for text across all loaded resources | Command+Option+F | Control+Shift+F |
Open a file in the Sources panel | Command+O or Command+P | Control+O or Control+P |
Zoom in | Command+Shift++ | Control+Shift++ |
Zoom out | Command+- | Control+- |
Restore default zoom level | Command+0 | Control+0 |
Run snippet | Press Command+O to open the Command Menu, type ! followed by the name of the script, then press Enter | Press Control+O to open the Command Menu, type ! followed by the name of the script, then press Enter |
Elements panel keyboard shortcuts
Action | Mac | Windows / Linux |
---|---|---|
Undo change | Command+Z | Control+Z |
Redo change | Command+Shift+Z | Control+Y |
Select the element above / below the currently-selected element | Up Arrow / Down Arrow | Up Arrow / Down Arrow |
Expand the currently-selected node. If the node is already expanded, this shortcut selects the element below it | Right Arrow | Right Arrow |
Collapse the currently-selected node. If the node is already collapsed, this shortcut selects the element above it | Left Arrow | Left Arrow |
Expand or collapse the currently-selected node and all of its children | Hold Option then click the arrow icon next to the element's name | Hold Control+Alt then click the arrow icon next to the element's name |
Toggle Edit Attributes mode on the currently-selected element | Enter | Enter |
Select the next / previous attribute after entering Edit Attributes mode | Tab / Shift+Tab | Tab / Shift+Tab |
Hide the currently-selected element | H | H |
Toggle Edit as HTML mode on the currently-selected element | Function+F2 | F2 |
Styles pane keyboard shortcuts
Action | Mac | Windows / Linux |
---|---|---|
Go to the line where a property value is declared | Hold Command then click the property value | Hold Control then click the property value |
Cycle through the RBGA, HSLA, and Hex representations of a color value | Hold Shift then click the Color Preview box next to the value | Hold Shift then click the Color Preview box next to the value |
Select the next / previous property or value | Click a property name or value then press Tab / Shift+Tab | Click a property name or value then press Tab / Shift+Tab |
Increment / decrement a property value by 0.1 | Click a value then press Option+Up Arrow / Option+Down Arrow | Click a value then press Alt+Up Arrow / Alt+Down Arrow |
Increment / decrement a property value by 1 | Click a value then press Up Arrow / Down Arrow | Click a value then press Up Arrow / Down Arrow |
Increment / decrement a property value by 10 | Click a value then press Shift+Up Arrow / Shift+Down Arrow | Click a value then press Shift+Up Arrow / Shift+Down Arrow |
Increment / decrement a property value by 100 | Click a value then press Command+Up Arrow / Command+Down Arrow | Click a value then press Control+Up Arrow / Control+Down Arrow |
Sources panel keyboard shortcuts
Action | Mac | Windows / Linux |
---|---|---|
Pause script execution (if currently running) or resume (if currently paused) | F8 or Command+ | F8 or Control+ |
Step over next function call | F10 or Command+' | F10 or Control+' |
Step into next function call | F11 or Command+; | F11 or Control+; |
Step out of current function | Shift+F11 or Command+Shift+; | Shift+F11 or Control+Shift+; |
Continue to a certain line of code while paused | Hold Command and then click the line of code | Hold Control and then click the line of code |
Select the call frame below / above the currently-selected frame | Control+. / Control+, | Control+. / Control+, |
Save changes to local modifications | Command+S | Control+S |
Save all changes | Command+Option+S | Control+Alt+S |
Go to line | Control+G | Control+G |
Jump to a line number of the currently-open file | Press Command+O to open the Command Menu, type : followed by the line number, then press Enter | Press Control+O to open the Command Menu, type : followed the line number, then press Enter |
Jump to a column of the currently-open file (for example line 5, column 9) | Press Command+O to open the Command Menu, type :, then the line number, then another :, then the column number, then press Enter | Press Control+O to open the Command Menu, type :, then the line number, then another :, then the column number, then press Enter |
Go to a function declaration (if currently-open file is HTML or a script), or a rule set (if currently-open file is a stylesheet) | Press Command+Shift+O, then type in the name of the declaration / rule set, or select it from the list of options | Press Control+Shift+O, then type in the name of the declaration / rule set, or select it from the list of options |
Close the active tab | Option+W | Alt+W |
Code Editor keyboard shortcuts
Action | Mac | Windows / Linux |
---|---|---|
Delete all characters in the last word, up to the cursor | Option+Delete | Control+Delete |
Add or remove a line-of-code breakpoint | Focus your cursor on the line and then press Command+B | Focus your cursor on the line and then press Control+B |
Go to matching bracket | Control+M | Control+M |
Toggle single-line comment. If multiple lines are selected, DevTools adds a comment to the start of each line | Command+/ | Control+/ |
Select / de-select the next occurrence of whatever word the cursor is on. Each occurrence is highlighted simultaneously | Command+D / Command+U | Control+D / Control+U |
Performance panel keyboard shortcuts
Action | Mac | Windows / Linux |
---|---|---|
Start / stop recording | Command+E | Control+E |
Save recording | Command+S | Control+S |
Load recording | Command+O | Control+O |
Memory panel keyboard shortcuts
Action | Mac | Windows / Linux |
---|---|---|
Start / stop recording | Command+E | Control+E |
Console panel keyboard shortcuts
Action | Mac | Windows / Linux |
---|---|---|
Accept autocomplete suggestion | Right Arrow or Tab | Right Arrow or Tab |
Reject autocomplete suggestion | Escape | Escape |
Get previous statement | Up Arrow | Up Arrow |
Get next statement | Down Arrow | Down Arrow |
Focus the Console | Control+` | Control+` |
Clear the Console | Command+K or Option+L | Control+L |
Force a multi-line entry. Note that DevTools should detect multi-line scenarios by default, so this shortcut is now usually unnecessary | Command+Return | Shift+Enter |
Execute | Return | Enter |
Expand all sub-properties of an object that's been logged to the Console | Hold Alt then click Expand | Hold Alt then click Expand |
Feedback
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Before writing more complex code, let’s talk about debugging.
Debugging is the process of finding and fixing errors within a script. All modern browsers and most other environments support debugging tools – a special UI in developer tools that makes debugging much easier. It also allows to trace the code step by step to see what exactly is going on.
We’ll be using Chrome here, because it has enough features, most other browsers have a similar process`.
The “Sources” panel
Your Chrome version may look a little bit different, but it still should be obvious what’s there.
- Open the example page in Chrome.
- Turn on developer tools with F12 (Mac: Cmd+Opt+I).
- Select the
Sources
panel.
Here’s what you should see if you are doing it for the first time:
The toggler button opens the tab with files.
Let’s click it and select
hello.js
in the tree view. Here’s what should show up:Here we can see three zones:
- The Resources zone lists HTML, JavaScript, CSS and other files, including images that are attached to the page. Chrome extensions may appear here too.
- The Source zone shows the source code.
- The Information and control zone is for debugging, we’ll explore it soon.
Now you could click the same toggler again to hide the resources list and give the code some space.
Console
If we press Esc, then a console opens below. We can type commands there and press Enter to execute.
After a statement is executed, its result is shown below.
For example, here
1+2
results in 3
, and hello('debugger')
returns nothing, so the result is undefined
:Breakpoints
Let’s examine what’s going on within the code of the example page. In
hello.js
, click at line number 4
. Yes, right on the 4
digit, not on the code.Congratulations! You’ve set a breakpoint. Please also click on the number for line
8
.It should look like this (blue is where you should click):
A breakpoint is a point of code where the debugger will automatically pause the JavaScript execution.
While the code is paused, we can examine current variables, execute commands in the console etc. In other words, we can debug it.
We can always find a list of breakpoints in the right panel. That’s useful when we have many breakpoints in various files. It allows us to:
- Quickly jump to the breakpoint in the code (by clicking on it in the right panel).
- Temporarily disable the breakpoint by unchecking it.
- Remove the breakpoint by right-clicking and selecting Remove.
- …And so on.
Right click on the line number allows to create a conditional breakpoint. It only triggers when the given expression is truthy.
That’s handy when we need to stop only for a certain variable value or for certain function parameters.
Debugger command
We can also pause the code by using the
debugger
command in it, like this:That’s very convenient when we are in a code editor and don’t want to switch to the browser and look up the script in developer tools to set the breakpoint.
Pause and look around
In our example,
hello()
is called during the page load, so the easiest way to activate the debugger (after we’ve set the breakpoints) is to reload the page. So let’s press F5 (Windows, Linux) or Cmd+R (Mac).As the breakpoint is set, the execution pauses at the 4th line:
Please open the informational dropdowns to the right (labeled with arrows). They allow you to examine the current code state:
Watch
– shows current values for any expressions.You can click the plus+
and input an expression. The debugger will show its value at any moment, automatically recalculating it in the process of execution.Call Stack
– shows the nested calls chain.At the current moment the debugger is insidehello()
call, called by a script inindex.html
(no function there, so it’s called “anonymous”).If you click on a stack item (e.g. “anonymous”), the debugger jumps to the corresponding code, and all its variables can be examined as well.Scope
– current variables.Local
shows local function variables. You can also see their values highlighted right over the source.Global
has global variables (out of any functions).There’s alsothis
keyword there that we didn’t study yet, but we’ll do that soon.
Tracing the execution
Now it’s time to trace the script.
There are buttons for it at the top of the right panel. Let’s engage them.
Resumes the execution. If there are no additional breakpoints, then the execution just continues and the debugger loses control.
Here’s what we can see after a click on it:
The execution has resumed, reached another breakpoint inside
say()
and paused there. Take a look at the “Call Stack” at the right. It has increased by one more call. We’re inside say()
now.Run the next statement. If we click it now,
alert
will be shown.Clicking this again and again will step through all script statements one by one.
Similar to the previous the “Step” command, but behaves differently if the next statement is a function call. That is: not a built-in, like
alert
, but a function of our own.The “Step” command goes into it and and pauses the execution at its first line, while “Step over” executes the nested function call invisibly, skipping the function internals.
The execution is then paused immediately after that function.
That’s good if we’re not interested to see what happens inside the function call.
That’s similar to “Step”, but behaves differently in case of asynchronous function calls. If you’re only starting to learn JavaScript, then you can ignore the difference, as we don’t have asynchronous calls yet.
For the future, just note that “Step” command ignores async actions, such as
setTimeout
(scheduled function call), that execute later. The “Step into” goes into their code, waiting for them if necessary. See DevTools manual for more details.Continue the execution and stop it at the very last line of the current function. That’s handy when we accidentally entered a nested call using , but it does not interest us, and we want to continue to its end as soon as possible.
That button does not move the execution. Just a mass on/off for breakpoints.
When enabled, and the developer tools is open, a script error automatically pauses the execution. Then we can analyze variables to see what went wrong. So if our script dies with an error, we can open debugger, enable this option and reload the page to see where it dies and what’s the context at that moment.
Right click on a line of code opens the context menu with a great option called “Continue to here”.
That’s handy when we want to move multiple steps forward to the line, but we’re too lazy to set a breakpoint.
Logging
To output something to console from our code, there’s
console.log
function.For instance, this outputs values from
0
to 4
to console:Regular users don’t see that output, it is in the console. To see it, either open the Console panel of developer tools or press Esc while in another panel: that opens the console at the bottom.
If we have enough logging in our code, then we can see what’s going on from the records, without the debugger.
Summary
As we can see, there are three main ways to pause a script:
- A breakpoint.
- The
debugger
statements. - An error (if dev tools are open and the button is “on”).
When paused, we can debug – examine variables and trace the code to see where the execution goes wrong.
There are many more options in developer tools than covered here. The full manual is at https://developers.google.com/web/tools/chrome-devtools.
The information from this chapter is enough to begin debugging, but later, especially if you do a lot of browser stuff, please go there and look through more advanced capabilities of developer tools.
Oh, and also you can click at various places of dev tools and just see what’s showing up. That’s probably the fastest route to learn dev tools. Don’t forget about the right click and context menus!