What's new in Chrome DevTools 2019
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!
watch on youtube]Eager Evaluation (v68) [
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.
watch on youtube]Argument Hints (v68) [
Funcnton parameter hints is shown in console panel while you typing.
watch on youtube]Autocomplete After Invoking Functions (v68) [
Autocomplete is shown for function return value.
watch on youtube]Live Expressions in the console (v70) [
You can set
Live Expression statement in console panel.
In this case
activeElement will be change eveytime you change focus element.
watch on youtube]Store DOM nodes as global variables (v71) [
Store as global variable in context menu.
The element will be set as
watch on youtube]Logpoint (v73) [
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.
watch on youtube]Detailed tooltips when inspecting nodes (v73) [
The detail of element is shown when you select it in element panel.
watch on youtube]AAA contrast ratio line in the Color Picker (v73) [
You can check current
Contrast ratio and recommendation for it.
You can check for more detail about Contrast ratio.
watch on youtube]Highlight all nodes affected by CSS property (v74) [
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.
watch on youtube]Performance metrics in the Timings section (v72) [
You can check performance metrics such as
First Contentful Paint in Network panel.
watch on youtube]Long tasks in performance recordings (v74) [
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 !!