I like What’s new in Chrome DevTools session in Google I/O to catch up latest updates!
But unfortunately there was not that session in Google I/O 2019… so that I made it by myself !
Let’s get started!
Eager evaluation option in Settings in console panel. You can see result before execution if you turn it ON.
It might be useful when you write regular expression.
This feature can be used in Canary version before but now everyone can use it in standard version of Chrome.
Funcnton parameter hints is shown in console panel while you typing.
Autocomplete is shown for function return value.
You can set
Live Expression statement in console panel.
In this case
activeElement will be change eveytime you change focus element.
Store as global variable in context menu.
The element will be set as
Common debugging pattern for Front-end developer is
write console.log ->
Now you don’t need to edit code for it!!
You can put logpoint to statement in source panel.
The detail of element is shown when you select it in element panel.
You can check current
Contrast ratio and recommendation for it.
You can check for more detail about Contrast ratio.
When you edit css property the elements which same css property apply to will be highlighted.
The margin in
p elements are highlighted while editing that css property in this case.
You can check performance metrics such as
First Contentful Paint in Network panel.
You can see
Long Task in Network panel.
The tasks have red triangle label at upper right.
In the end
There are bunch of updates!
Thank you for best effort of ChromeDevtools team!!!!
I made site where you can check all updates by version basis or feature basis.
Check it out !!