<commit_before>---
layout: article
title: "Keyboard Shortcuts Reference"
seotitle: "Chrome DevTools Keyboard Shortcuts Reference"
description: "Chrome DevTools has several built-in shortcut keys that developers can use to save time in their day to day workflow. "
introduction: "Chrome DevTools has several built-in shortcut keys that developers can use to save time in their day to day workflow."
article:
  written_on: 2015-04-30
  updated_on: 2015-04-30
  order: 4
authors:
  - megginkearney
priority: 0
collection: inspect-styles
key-takeaways:
  shortcuts:
    - TBD tldr.
remember:
  tbd:
    - TBD
---
{% wrap content %}

This guide provides a quick reference to each DevTools shortcut and the corresponding key for each on Windows/Linux and Mac. While some shortcuts are globally available across all of the DevTools, others are specific to a single panel, and are broken up based on where it can be used.

{% include modules/toc.liquid %}

## Open DevTools

To access the DevTools, on any web page or app in Google Chrome, you can use one of these options:

* Open the **Chrome menu** ![Chrome menu](imgs/chrome-menu.png) at the top-right of your browser window, then select **Tools > Developer Tools**.
* Right-click on any page element and select **Inspect Element**.

Additonal shortcuts to launch DevTools:

<table class="table-3">
  <thead>
      <th>Launch DevTools</th>
      <th>Windows</th>
      <th>Mac</th>
  </thead>
  <tbody>
    <tr>
      <td data-th="Launch DevTools">Open Developer Tools</td>
	  <td data-th="Windows"><span class="kbd">F12</span>, <span class="kbd">Ctrl</span> + <span class="kbd">Shift</span> + <span class="kbd">I</span></td>
	  <td data-th="Mac"><span class="kbd">Cmd</span> + <span class="kbd">Opt</span> + <span class="kbd">I</span></td>
    </tr>
    <tr>
      <td data-th="Attribute"><code>poster</code></td>
      <td data-th="Availability">All browsers</td>
      <td data-th="Description">Address (URL) of an image file that the browser can show as soon as the video element is displayed, without downloading video content.</td>

      <td data-th="Launch DevTools">Open / switch from inspect element mode and browser window</td>
      <td data-th="Windows"><span class="kbd">Ctrl</span> + <span class="kbd">Shift</span> + <span class="kbd">C</span></td>
      <td data-th="Mac"><span class="kbd">Cmd</span> + <span class="kbd">Shift</span> + <span class="kbd">C</span></td>
    </tr>
    <tr>
      <td data-th="Launch DevTools">Open Developer Tools and bring focus to the console</td>
      <td data-th="Windows"><span class="kbd">Ctrl</span> + <span class="kbd">Shift</span> + <span class="kbd">J</span></td>
      <td data-th="Mac"><span class="kbd">Cmd</span> + <span class="kbd">Opt</span> + <span class="kbd">J</span></td>
    </tr>
    <tr>
      <td data-th="Launch DevTools">Inspect the Inspector (_undock first one and press_)</td>
      <td data-th="Windows"><span class="kbd">Ctrl</span> + <span class="kbd">Shift</span> + <span class="kbd">I</span></td>
      <td data-th="Mac"><span class="kbd">Cmd</span> + <span class="kbd">Opt</span> + <span class="kbd">I</span></td>
    </tr>
  </tbody>
</table>

## All Panels

Shortcuts available on all DevTools panels:

<table>
<tbody>
<tr>
<th>Windows / Linux</th>

<th>Mac</th>
<commit_msg>Another table fix This might take a few goes<commit_after>---
layout: article
title: "Keyboard Shortcuts Reference"
seotitle: "Chrome DevTools Keyboard Shortcuts Reference"
description: "Chrome DevTools has several built-in shortcut keys that developers can use to save time in their day to day workflow. "
introduction: "Chrome DevTools has several built-in shortcut keys that developers can use to save time in their day to day workflow."
article:
  written_on: 2015-04-30
  updated_on: 2015-04-30
  order: 4
authors:
  - megginkearney
priority: 0
collection: inspect-styles
key-takeaways:
  shortcuts:
    - TBD tldr.
remember:
  tbd:
    - TBD
---
{% wrap content %}

This guide provides a quick reference to each DevTools shortcut and the corresponding key for each on Windows/Linux and Mac. While some shortcuts are globally available across all of the DevTools, others are specific to a single panel, and are broken up based on where it can be used.

{% include modules/toc.liquid %}

## Open DevTools

To access the DevTools, on any web page or app in Google Chrome, you can use one of these options:

* Open the **Chrome menu** ![Chrome menu](imgs/chrome-menu.png) at the top-right of your browser window, then select **Tools > Developer Tools**.
* Right-click on any page element and select **Inspect Element**.

Additonal shortcuts to launch DevTools:

<table class="table-3">
  <thead>
      <th>Launch DevTools</th>
      <th>Windows</th>
      <th>Mac</th>
  </thead>
  <tbody>
    <tr>
      <td data-th="Launch DevTools">Open Developer Tools</td>
	  <td data-th="Windows"><span class="kbd">F12</span>, <span class="kbd">Ctrl</span> + <span class="kbd">Shift</span> + <span class="kbd">I</span></td>
	  <td data-th="Mac"><span class="kbd">Cmd</span> + <span class="kbd">Opt</span> + <span class="kbd">I</span></td>
    </tr>
    <tr>
      <td data-th="Launch DevTools">Open / switch from inspect element mode and browser window</td>
      <td data-th="Windows"><span class="kbd">Ctrl</span> + <span class="kbd">Shift</span> + <span class="kbd">C</span></td>
      <td data-th="Mac"><span class="kbd">Cmd</span> + <span class="kbd">Shift</span> + <span class="kbd">C</span></td>
    </tr>
    <tr>
      <td data-th="Launch DevTools">Open Developer Tools and bring focus to the console</td>
      <td data-th="Windows"><span class="kbd">Ctrl</span> + <span class="kbd">Shift</span> + <span class="kbd">J</span></td>
      <td data-th="Mac"><span class="kbd">Cmd</span> + <span class="kbd">Opt</span> + <span class="kbd">J</span></td>
    </tr>
    <tr>
      <td data-th="Launch DevTools">Inspect the Inspector (_undock first one and press_)</td>
      <td data-th="Windows"><span class="kbd">Ctrl</span> + <span class="kbd">Shift</span> + <span class="kbd">I</span></td>
      <td data-th="Mac"><span class="kbd">Cmd</span> + <span class="kbd">Opt</span> + <span class="kbd">I</span></td>
    </tr>
  </tbody>
</table>

## All Panels

Shortcuts available on all DevTools panels:

<table>
<tbody>
<tr>
<th>Windows / Linux</th>

<th>Mac</th>

{'fraction_non_alphanumeric': 0.16226415094339622, 'fraction_numerical': 0.006603773584905661, 'mean_word_length': 4.084732214228617, 'pattern_counts': {'":': 0, '<': 213, '<?xml version=': 0, '>': 215, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 7, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3434497', 'n_tokens_mistral': 2159, 'n_tokens_neox': 2059, 'n_words': 657}