New features coming to DevTools in Chrome 65 include:
Read on, or watch the video version of these release notes, below.
Local Overrides
Local Overrides
let you make changes in DevTools, and keep those changes across page loads.
Previously, any changes that you made in DevTools would be lost when you reloaded the page.
Local
Overrides
work for most file types, with a couple of exceptions. See
Limitations
.
Figure 1
. Persisting a CSS change across page loads with
Local Overrides
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.
To set up
Local Overrides
:
- Open the
Sources
panel.
Open the
Overrides
tab.
Figure 2
. The
Overrides
tab
Click
Setup Overrides
.
Select which directory you want to save your changes to.
At the top of your viewport, click
Allow
to give DevTools read and write access to the
directory.
Make your changes.
Limitations
- DevTools doesn't save changes made in the
DOM Tree
of the
Elements
panel. Edit HTML in the
Sources
panel instead.
- If you edit CSS in the
Styles
pane, and the source of that CSS is an HTML file, DevTools won't
save the change. Edit the HTML file in the
Sources
panel instead.
- Workspaces
. DevTools automatically maps network resources to a local repository. Whenever you
make a change in DevTools, that change gets saved to your local repository, too.
The Changes tab
Track changes that you make locally in DevTools via the new
Changes
tab.
Figure 3
. The
Changes
tab
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.
Figure 4
. The
Accessibility
pane shows the ARIA attributes and computed properties for the
element that's currently selected in the
DOM Tree
on the
Elements
panel, as well as its
position in the accessibility tree
Check out Rob Dodson's A11ycast on labeling below to see the
Accessibility
pane in action.
Contrast ratio in the Color Picker
The
Color Picker
now shows you the contrast ratio of text elements. Increasing the contrast
ratio of text elements makes your site more accessible to users with low-vision impairments or
color-vision deficiencies. See
Color and contrast
to learn more about how contrast ratio
affects accessibility.
Improving the color contrast of your text elements makes your site more usable for
all
users. In
other words, if your text is grey with a white background, that's hard for anyone to read.
Figure 5
. Inspecting the contrast ratio of the highlighted
h1
element
In
Figure 5
, the two checkmarks next to
4.61
means that this element meets the
enhanced
recommended contrast ratio (AAA)
. If it only had one checkmark, that would mean it met the
minimum recommended contrast ratio (AA)
.
Click
Show More
to expand the
Contrast
Ratio
section. The white line in the
Color Spectrum
box represents the boundary between colors
that meet the recommended contrast ratio, and those that don't. For example, since the grey color in
Figure 6
meets recommendations, that means that all of the colors below the white line also meet
recommendations.
Figure 6
. The expanded
Contrast Ratio
section
The
Audits
panel has an automated accessibility audit for ensuring that
every
text element on
a page has a sufficient contrast ratio.
See
Run Lighthouse in Chrome DevTools
, or watch the A11ycast below, to learn how to use the
Audits
panel to test accessibility.
New audits
Chrome 65 ships with a whole new category of SEO audits, and many new performance audits.
New SEO audits
Ensuring that your pages pass each of the audits in the new
SEO
category may help improve your
search engine rankings.
Figure 7
. The new
SEO
category of 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
Perf matters!
After Mynet improved their page load speed by 4X, users spent 43% more time on the
site, viewed 34% more pages, bounce rates dropped 24%, and revenue increased 25% per article
pageview.
Learn more
.
Tip!
If you want to improve the load performance of your pages, but don't know where to start,
try the
Audits
panel. You give it a URL, and it gives you a detailed report on many different
ways you can improve that page.
Get started
.
Other updates
Reliable code stepping with workers and asynchronous code
Chrome 65 brings updates to the
Step Into
button when stepping into
code that passes messages between threads, and asynchronous code. If you want the previous stepping
behavior, you can use the new
Step
button, instead.
Stepping into code that passes messages between threads
When you step into code that passes messages between threads, DevTools now shows you what happens in
each thread.
For example, the app in
Figure 8
passes a message between the main thread and the worker thread.
After stepping into the
postMessage()
call on the main thread, DevTools pauses in the
onmessage
handler in the worker thread. The
onmessage
handler itself posts a message back to the main
thread. Stepping into
that
call pauses DevTools back in the main thread.
Figure 8
. Stepping into message-passing code in Chrome 65
When you stepped into code like this in earlier versions of Chrome, Chrome only showed you the
main-thread-side of the code, as you can see in
Figure 9
.
Figure 9
. Stepping into message-passing code in Chrome 63
Stepping into asynchronous code
When stepping into asynchronous code, DevTools now assumes that you want to pause in the the
asynchronous code that eventually runs.
For example, in
Figure 10
after stepping into
setTimeout()
, DevTools runs all of the code
leading up to that point behind the scenes, and then pauses in the function that's passed to
setTimeout()
.
Figure 10
. Stepping into asynchronous code in Chrome 65
When you stepped into code like this in Chrome 63, DevTools paused in code as it chronologically
ran, as you can see in
Figure 11
.
Figure 11
. Stepping into asynchronous code in Chrome 63
Multiple recordings in the Performance panel
The
Performance
panel now lets you temporarily save up to 5 recordings. The recordings are
deleted when you close your DevTools window. See
Get Started with Analyzing Runtime
Performance
to get comfortable with the
Performance
panel.
Figure 12
. Selecting between multiple recordings in the
Performance
panel
Bonus: Automate DevTools actions with Puppeteer 1.0
Version 1.0 of Puppeteer, a browser automation tool maintained by the Chrome DevTools team, is now
out. You can use Puppeteer to automate many tasks that were previously only available via DevTools,
such as capturing screenshots:
const puppeteer = require('puppeteer');
(async () => {
? const browser = await puppeteer.launch();
? const page = await browser.newPage();
? await page.goto('https://example.com');
? await page.screenshot({path: 'example.png'});
? await browser.close();
})();
It also has APIs for lots of generally useful automation tasks, such as generating PDFs:
const puppeteer = require('puppeteer');
(async () => {
? const browser = await puppeteer.launch();
? const page = await browser.newPage();
? await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
? await page.pdf({path: 'hn.pdf', format: 'A4'});
? await browser.close();
})();
See
Quick Start
to learn more.
You can also use Puppeteer to expose DevTools features while browsing without ever explicitly
opening DevTools. See
Using DevTools Features Without Opening DevTools
for an example.
Download the preview channels
Consider using the Chrome
Canary
,
Dev
or
Beta
as your default development browser. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do!
Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.
- Submit a suggestion or feedback to us via
crbug.com
.
- Report a DevTools issue using the
More options
>
Help
>
Report a DevTools issues
in DevTools.
- Tweet at
@ChromeDevTools
.
- Leave comments on our What's new in DevTools
YouTube videos
or DevTools Tips
YouTube videos
.
What's new in DevTools
A list of everything that has been covered in the
What's new in DevTools
series.
Chrome 125
Chrome 124
Chrome 123
Chrome 122
Chrome 121
Chrome 120
Chrome 119
Chrome 118
Chrome 117
Chrome 116
Chrome 115
Chrome 114
Chrome 113
Chrome 112
Chrome 111
Chrome 110
Chrome 109
Chrome 108
Chrome 107
Chrome 106
Chrome 105
Chrome 104
Chrome 103
Chrome 102
Chrome 101
Chrome 100
Chrome 99
Chrome 98
Chrome 97
Chrome 96
Chrome 95
Chrome 94
Chrome 93
Chrome 92
Chrome 91
Chrome 90
Chrome 89
Chrome 88
Chrome 87
Chrome 86
Chrome 85
Chrome 84
Chrome 83
Chrome 82
Chrome 82 was cancelled
.
Chrome 81
Chrome 80
Chrome 79
Chrome 78
Chrome 77
Chrome 76
Chrome 75
Chrome 74
Chrome 73
Chrome 72
Chrome 71
Chrome 70
Chrome 68
Chrome 67
Chrome 66
Chrome 65
Chrome 64
Chrome 63
Chrome 62
Chrome 61
Chrome 60
Chrome 59