What's New In DevTools (Chrome 59)
Stay organized with collections
Save and categorize content based on your preferences.
Welcome to another installment of the DevTools release notes. Watch the video
below or read on to see what's new in Chrome DevTools in Chrome 59!
Highlights
New features
CSS and JS code coverage
Find unused CSS and JS code with the new
Coverage
tab. When you load or
run a page, the tab tells you how much code was used, versus how much was
loaded. You can reduce the size of your pages by only shipping the code
that you need.
Clicking on a URL reveals that file in the
Sources
panel with a breakdown
of which lines of code executed.
Each line of code is color-coded:
- Solid green means that line of code executed.
- Solid red means it did not execute.
- A line of code that is both red and green, such as line 3 in the screenshot above,
means that only some code on that line executed. For example, a ternary
expression like
var b = (a > 0) ? a : 0
is colored both red and green.
To open the
Coverage
tab:
- Open the
Command Menu
.
- Start typing
Coverage
and select
Show Coverage
.
Full-page screenshots
Check out the video below to learn how to take a screenshot from the top
of the page, all the way to the bottom.
Block requests
Want to see how your page behaves when a particular script, stylesheet, or
other resource isn't available? Right-click on the request in the
Network
panel and select
Block Request URL
. A new
Request blocking
tab
pops up in the Drawer, which lets you manage blocked requests.
Step over async await
Up until now, trying to step through code like the snippet below was a
headache. You'd be in the middle of
test()
, stepping over a line, and then
you'd get interrupted by the
setInterval()
code. Now, when you step through
async code like
test()
, DevTools steps from the first to last line with
consistency.
function wait(ms) {
return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
}
// do some work in background.
setInterval(() => 42, 200);
async function test() {
debugger;
const hello = "world";
const response = await fetch('index.html');
const tmp = await wait(1000);
console.log(tmp);
return hello;
}
async function runTest() {
let result = await test();
console.log(result);
}
P.S. want to level up your debugging skills? Check out these new-ish docs:
Changes
Unified Command Menu
When you open the
Command Menu
now, notice that your command
is prepended with a greater-than character (
>
). This is because the Command
Menu has been unified with the
Open File
menu, which is
Command
+
O
(Mac), or
Control
+
O
(Windows, Linux).
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
Except as otherwise noted, the content of this page is licensed under the
Creative Commons Attribution 4.0 License
, and code samples are licensed under the
Apache 2.0 License
. For details, see the
Google Developers Site Policies
. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2017-04-12 UTC.