What's new in Chrome DevTools (Google I/O '18)

Get up to speed with the latest features shipping in Chrome DevTools. Discover new features aimed at simplifying asynchronous debugging and working across threads that will be particularly handy as the web goes multithreaded in 2018. Learn how to use console aggregation to streamline development, and take advantage of Network Interception to inspect or modify connections made by your app.
Rate this session by signing-in on the I/O website here → goo.gl/LZcnXA
Watch more Chrome and Web sessions from I/O '18 here → goo.gl/5fgXhX
See all the sessions from Google I/O '18 here → goo.gl/q1Tr8x
Subscribe to the Chrome Developers channel → goo.gl/LLLNvf
#io18 event: Google I/O 2018; re_ty: Publish; product: Chrome - Web - Chrome DevTools; fullname: Paul Irish, Jason Miller; event: Google I/O 2018; product: Chrome - Web - Chrome DevTools; fullname: Paul Irish, Jason Miller; event: Google I/O 2018;

[@SamarPanda]

1. Eager evaluation & global async in console
2. Network search side bar, used to cache control headers
3. View trace in lighthouse, direct link to network panel.
4. Link rel="preload" as="font" to start downloading font even before its triggered by css
5. Main thread to worker thread break point debugging support
6. copy(), debug(NativeFn), queryObjects()
All of these above features are super awesome.
Quick shortcut which i learnt
Undock into separate window

[@linuslee6314]

Came here for Eager Eval demo, was not disappointed. That's very cool, both from a dev perspective and at a technical level of isolating side effects.

[@97Giorgos97]

Eager Evaluation is awesome!

[@ishbindra]

It must be fun working in the devtools team.

[@javiasilis]

*Self diving car*... priceless

[@dolphin7961]

The Color Contrast ratio is a great advancement for accessibility in the developer workflow. These are the kind of things that will make non-disabled developers care more about UA. Will also give us a shared language to communicate with

[@zjlovezj]

always nice to see paul irsh presenting

[@domaincontroller]

00:40 authoring 00:56 save and refresh 01:17 workspaces 01:40 local overrides 01:51 deface your headers 02:08 local overrides 04:15 CTRL + SHIFT + P, prototyping, in the wild 05:20 changes, search across all files 06:01 network search, search sidebar, headers, authorization headers, CSP, cookies
08:00 CSS, colors 08:50 color picker
09:45 Accessibility

[@iamakrt]

Wao one of the best presentation so far. So engaging. Thank you google.

[@MrNonintendo]

That Leroy Jenkins reference! XDD 15:17

[@neuemage]

Like watching Siegfried & Roy xD

[@srikanthjanapati4247]

Stepup feature is great one

[@varpen]

Jason?

[@JaredWilliams]

Awesome stuff as usual. :)

[@CesarBurgos3ro]

chrome://cache not work?

[@SteveHazel]

did not follow. but that was the best thing i've seen on the internet.

[@iidanmanx]

how did he use multiple cursors?

[@canadianbootz]

ctrl+d

[@noureddine2228]

Ctrl + click

[@ngyikp]

Press Command/Ctrl+D, similar to Sublime Text :)
Or hold down Command/Ctrl and click the new cursor location you want

[@MarcoBiedermann]

CMD + D, similar to Sublime Text or VSCode

[@KyungYeolKim]

eager evaluation 👍👍👍👍

[@hiqwertyhi]

damn that intro music is loud

[@canadianbootz]

quokka.js guys are gonna hate eager eval 👿👿👿 (use quokka!)

[@Ali-bj4hh]

Opera is way better