<commit_before>project_path: /web/tools/_project.yaml
book_path: /web/tools/_book.yaml
description: Get started with Google Chrome's built-in web developer tools.

{# wf_updated_on: 2019-07-10 #}
{# wf_published_on: 2016-03-28 #}
{# wf_blink_components: Platform>DevTools #}

# Chrome DevTools {: .page-title }

Chrome DevTools is a set of web developer tools built directly into the [Google
Chrome](https://www.google.com/chrome/){: .external } browser. DevTools can help you edit
pages on-the-fly and diagnose problems quickly, which ultimately helps you build better
websites, faster.

<div class="video-wrapper">
  <iframe class="devsite-embedded-youtube-video" data-video-id="G_P6rpRSr4g"
          data-autohide="1" data-showinfo="0" frameborder="0" allowfullscreen>
  </iframe>
</div>

With DevTools you can view and change any page. Even the Google homepage, as the video
demonstrates.

## Open DevTools {: #open }

There are many ways to open DevTools, because different users want quick access to different
parts of the DevTools UI.

* When you want to work with the DOM or CSS, right-click an element on the page and select **Inspect**
  to jump into the **Elements** panel. Or press <kbd>Command</kbd>+<kbd>Option</kbd>+<kbd>C</kbd> (Mac) or
  <kbd>Control</kbd>+<kbd>Shift</kbd>+<kbd>C</kbd> (Windows, Linux, Chrome OS).
* When you want to see logged messages or run JavaScript, press <kbd>Command</kbd>+<kbd>Option</kbd>+<kbd>J</kbd>
  (Mac) or <kbd>Control</kbd>+<kbd>Shift</kbd>+<kbd>J</kbd> (Windows, Linux, Chrome OS) to
  jump straight into the **Console** panel.

See [Open Chrome DevTools](/web/tools/chrome-devtools/open) for more details and workflows.

## Get started {: #start }

If you're a more experienced web developer, here are the recommended starting points for learning how
DevTools can improve your productivity:

* [View and Change the DOM](/web/tools/chrome-devtools/dom/)
* [View and Change a Page's Styles (CSS)](/web/tools/chrome-devtools/css/)
* [Debug JavaScript](/web/tools/chrome-devtools/javascript/)<commit_msg>DevTools: Embed SFHTML5 Meetup video onto homepage<commit_after>project_path: /web/tools/_project.yaml
book_path: /web/tools/_book.yaml
description: Get started with Google Chrome's built-in web developer tools.

{# wf_updated_on: 2019-09-04 #}
{# wf_published_on: 2016-03-28 #}
{# wf_blink_components: Platform>DevTools #}

# Chrome DevTools {: .page-title }

Chrome DevTools is a set of web developer tools built directly into the [Google
Chrome](https://www.google.com/chrome/){: .external } browser. DevTools can help you edit
pages on-the-fly and diagnose problems quickly, which ultimately helps you build better
websites, faster.

<div class="video-wrapper">
  <iframe class="devsite-embedded-youtube-video" data-video-id="VYyQv0CSZOE"
          data-autohide="1" data-showinfo="0" frameborder="0" allowfullscreen>
  </iframe>
</div>

Check out the video for live demonstrations of core DevTools workflows, including debugging CSS,
prototyping CSS, debugging JavaScript, and analyzing load performance.

## Open DevTools {: #open }

There are many ways to open DevTools, because different users want quick access to different
parts of the DevTools UI.

* When you want to work with the DOM or CSS, right-click an element on the page and select **Inspect**
  to jump into the **Elements** panel. Or press <kbd>Command</kbd>+<kbd>Option</kbd>+<kbd>C</kbd> (Mac) or
  <kbd>Control</kbd>+<kbd>Shift</kbd>+<kbd>C</kbd> (Windows, Linux, Chrome OS).
* When you want to see logged messages or run JavaScript, press <kbd>Command</kbd>+<kbd>Option</kbd>+<kbd>J</kbd>
  (Mac) or <kbd>Control</kbd>+<kbd>Shift</kbd>+<kbd>J</kbd> (Windows, Linux, Chrome OS) to
  jump straight into the **Console** panel.

See [Open Chrome DevTools](/web/tools/chrome-devtools/open) for more details and workflows.

## Get started {: #start }

If you're a more experienced web developer, here are the recommended starting points for learning how
DevTools can improve your productivity:

* [View and Change the DOM](/web/tools/chrome-devtools/dom/)
* [View and Change a Page's Styles (CSS)](/web/tools/chrome-devtools/css/)
* [Debug JavaScript](/web/tools/chrome-devtools/javascript/)
{'fraction_non_alphanumeric': 0.12689753320683111, 'fraction_numerical': 0.009962049335863378, 'mean_word_length': 4.897902097902098, 'pattern_counts': {'":': 0, '<': 59, '<?xml version=': 0, '>': 61, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3425167', 'n_tokens_mistral': 1407, 'n_tokens_neox': 1346, 'n_words': 446}