DevTools

Google’s built-in Chrome Developer Tools let you do just that. Bundled and available in both Chrome and Safari, they allow developers access into the internals of their web application. On top of this, a palette of network tools can help optimize your loading flows, while a timeline gives you a deeper understanding of what the browser is doing at any given moment.

Open DevTools

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 Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS).

When you want to see logged messages or run JavaScript, press Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, Chrome OS) to jump straight into the Console panel.

Discover DevTools

The DevTools UI can be a little overwhelming... there are so many tabs! But, if you take some time to get familiar with each tab to understand what's possible, you may discover that DevTools can seriously boost your productivity.

Rapid Debugging - the built in console will direct you to errors with your code. The nice thing here is the ability to click on the error link, and your are presented with a view of the problematic code. 

On-the-Fly Style Changes - For quick style changes, you don't even need to use a text editor. You can inspect the particular element on the page to determine which styles are being applied. Then you can click on the specific styles to modify them and see the update in real time within the browser. You can also manipulate the DOM directly by adding/changing page elements within the "Elements" tab.

Easy to Use - this is more a matter of preference, but many colleagues agree with me. Chrome Dev tools are clean and easy to navigate. The barrier to entry is fairly low even for those with little development experience.

How it works:

  • You specify a directory where DevTools should save changes.
  • When you make changes in DevTools, DevTools saves a copy of the modified file to your directory.
  • When you reload the page, DevTools serves the local, modified file, rather than the network resource.

New SEO audits

  • Ensuring that your pages pass each of the audits in the new SEO category may help improve your search engine rankings.
  • New performance audits
  • Chrome 65 also ships with many new performance audits:
  • JavaScript boot-up time is high
  • Uses inefficient cache policy on static assets
  • Avoids page redirects
  • Document uses plugins
  • Minify CSS
  • Minify JavaScript

New accessibility tools

Use the new Accessibility pane to inspect the accessibility properties of an element, and inspect the contrast ratio of text elements in the Color Picker to ensure that they're accessible to users with low-vision impairments or color-vision deficiencies.

Accessibility pane

Use the Accessibility pane on the Elements panel to investigate the accessibility properties of the currently-selected element.